Update

.gitignore

@@ -2,3 +2,4 @@ venv
 config.py
 __pycache__
 src_audio/
+node_modules

README.md

@@ -33,11 +33,6 @@ cp config.py.example config.py
 ## Database migration
 
 ```bash
-python3
+flask db migrate -m "Migration message."
-```
+flask db upgrade # Perform migration (after script verification in ./migrations/versions/)
-
-```python3
-from app import *
-app.app_context().push()
-db.create_all()
 ```

app.py

@@ -42,14 +42,15 @@ def get_timezone():
     if user is not None:
         return user.timezone
 
+app.jinja_env.globals['get_locale'] = get_locale
+
 @app.route('/lang')
 def get_lang():
     return render_template('lang.html')
 
-@app.route('/lang', methods=["POST"])
+@app.route('/lang/<locale>')
-def set_lang():
+def set_lang(locale='en'):
-    lang = request.form["lang"]
+    session['lang'] = locale
-    session['lang'] = lang
     return redirect('/')        
 
 @app.route("/")
@@ -140,8 +141,9 @@ def game_answer():
             message = "You are correct !" 
         else:
             message = "You are not correct !"
-        return render_template("game/answer.html", message=message)
+        return render_template("game/answer.html", message=message, question=session["question"])
     elif request.method == "GET":
         return render_template("game/new.html")
     
+
 migrate = Migrate(app, db)

babel.cfg

@@ -1,4 +1,3 @@
 [python: **.py]
 [jinja2: templates/**.html]
 encoding = utf-8
-extensions=jinja2.ext.autoescape,jinja2.ext.with_

language/message.pot

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2022-05-26 12:11+0200\n"
+"POT-Creation-Date: 2022-05-27 10:03+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -17,7 +17,7 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.10.1\n"
 
-#: templates/base.html:15
+#: templates/base.html:17
 msgid "Welcome"
 msgstr ""
 
@@ -25,11 +25,27 @@ msgstr ""
 msgid "Welcome to BirdQuizz !"
 msgstr ""
 
-#: templates/menu.html:3
+#: templates/menu.html:7
 msgid "Home"
 msgstr ""
 
-#: templates/menu.html:4
+#: templates/menu.html:8
 msgid "Game"
 msgstr ""
 
+#: templates/menu.html:9
+msgid "About"
+msgstr ""
+
+#: templates/menu.html:11
+msgid "Logout"
+msgstr ""
+
+#: templates/menu.html:13
+msgid "Login"
+msgstr ""
+
+#: templates/menu.html:15
+msgid "Identify bird song"
+msgstr ""
+

language/translations/fr/LC_MESSAGES/messages.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2022-05-26 12:11+0200\n"
+"POT-Creation-Date: 2022-05-27 10:03+0200\n"
 "PO-Revision-Date: 2022-05-26 13:10+0200\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: fr\n"
@@ -18,7 +18,7 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.10.1\n"
 
-#: templates/base.html:15
+#: templates/base.html:17
 msgid "Welcome"
 msgstr "Bienvenue"
 
@@ -26,11 +26,54 @@ msgstr "Bienvenue"
 msgid "Welcome to BirdQuizz !"
 msgstr "Bienvenue au BirdQuizz !"
 
-#: templates/menu.html:3
+#: templates/menu.html:7
 msgid "Home"
 msgstr "Accueil"
 
-#: templates/menu.html:4
+#: templates/menu.html:8
 msgid "Game"
 msgstr "Jeu"
 
+#: templates/menu.html:9
+msgid "About"
+msgstr "À propos"
+
+#: templates/menu.html:11
+msgid "Logout"
+msgstr "Déconnexion"
+
+#: templates/menu.html:13
+msgid "Login"
+msgstr "Connexion"
+
+#: templates/menu.html:15
+msgid "Identify bird song"
+msgstr "Indentifie les son d'oiseaux"
+
+#~ msgid "Welcome"
+#~ msgstr "Bienvenue"
+
+#~ msgid "Welcome to BirdQuizz !"
+#~ msgstr "Bienvenue au BirdQuizz !"
+
+#~ msgid "Home"
+#~ msgstr "Accueil"
+
+#~ msgid "Game"
+#~ msgstr "Jeu"
+
+#~ msgid "Username empty. Try to find one."
+#~ msgstr "Nom d'utilisateur vide. Essayez d'en trouver un."
+
+#~ msgid "Email empty. Please give me one."
+#~ msgstr "Email non fourmi. Merci de m'en envoyez un."
+
+#~ msgid "You should not use an empty password"
+#~ msgstr "Vous ne devriez pas utiliser un mot de passe vide."
+
+#~ msgid "Email already used by a user."
+#~ msgstr "Cet email a déjà été utilisé par quelqu'un."
+
+#~ msgid "Username already used by a user."
+#~ msgstr "Ce nom d'utilisateur a déjà été pris."
+

static/styles/style.css

@@ -1,4 +1,7 @@
-body {
+main {
-    background-color: black;
+    min-height: 100vh;
-    color: white;
+}
+
+footer {
+    padding: 1em;
 }

templates/base.html

@@ -1,25 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}BirdQuizz{% endblock %}</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
+
 <body>
     <header>
         {% include 'menu.html' %}
-        <h1>BirdQuizz</h1>
         {% if username is defined %}
-            <p>{{ _('Welcome') }} <span class="username">{{ username }}</span></p>
+        <p>{{ _('Welcome') }} <span class="username">{{ username }}</span></p>
         {% endif %}
     </header>
     <main>
         {% block content %}{% endblock %}
     </main>
-    <footer>
+    {% include "language.html"%}
-        © 2022 - Samuel ORTION
+    <footer class="bg-dark text-lg-start">
+        <div class="text-light text-center" style="background-color: rgba(0, 0, 0, 0.2);">
+            © 2022 - Samuel ORTION
+            <a class="text-light" href="//samuel.ortion.fr"></a>
+        </div>
     </footer>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', filename='scripts/app.js') }}"></script>
 </body>
+
 </html>

templates/game/answer.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% block content %}
+<h2>{{ _('Let\'s see how you performed') }}</h2>
 <p>{{ message }}</p>
+<p>{{ _('It was ') + question["species"] + '!' }}</p>
 <p>
     <a href="/game/new">{{ _('New Question') }}</a>
 </p>

templates/game/new.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-
+<h2>{{ _('Ready for the adventure ?')</h2>
 <a href="/game/new" class="button">
     {{ _('New Game') }}
 </a>

templates/game/question.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% block content %}
+<h2>Will you find this singer ?</h2>
 <audio src="/static/data/src_audio/{{ question['species_folder'] }}/{{ question['audio_path'] }}" controls autoplay></audio>
 <form action="/game/answer" method="POST">
     <select name="answer" id="answer">

templates/lang.html

@@ -1,11 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-<h2>{{ _('Select your language !') }}</h2>
-<form action="/lang" method="POST">
-    <select name="lang" id="lang">
-        <option value="fr">Français</option>
-        <option value="en">English</option>
-    </select>
-    <input type="submit" value="{{ _('Translate') }}">
-</form>
-{% endblock %}

templates/language.html

@@ -0,0 +1,10 @@
+<li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" href="#" id="dropdown-language" role="button"
+        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {{ get_locale() }}
+    </a>
+    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-language">
+        <li><a class="dropdown-item" href="/lang/en">English</a></li>
+        <li><a class="dropdown-item" href="/lang/fr">Français</a></li>
+    </ul>
+</li>

templates/menu.html

@@ -1,11 +1,18 @@
-<nav>
+<nav class="navbar navbar-dark bg-dark" role="navigation" >
-    <ul>
+  <div class="container-fluid">
-        <li><a href="/">{{ _('Home') }}</a></li>
+    <div class="navbar-header">
-        <li><a href="/game">{{ _('Game') }}</a></li>
+      <a class="navbar-brand nav-item nav-link" href="#">BirdQuizz</a>
-        {% if username is defined %}
+    </div>
-        <li><a href="/logout">{{ _('Logout') }}</a></li>
+    <ul class="nav navrow-nav">
-        {% else %}
+      <li class="active"><a class="nav-item nav-link""" href="/">{{ _('Home') }}</a></li>
-        <li><a href="/login">{{ _('Login') }}</a></li>
+      <li><a class="nav-item nav-link" href="/game">{{ _('Game') }}</a></li>
-        {% endif %}
+      <li><a class="nav-item nav-link" href="/about">{{ _('About') }}</a></li>
+      {% if username is defined %}
+      <li><a class="nav-item nav-link" href="/logout">{{ _('Logout') }}</a></li>
+      {% else %}
+      <a class="nav-item nav-link" href="/login">{{ _('Login') }}</a>
+      {% endif %}
+      <p class="navbar-text">{{ _('Identify bird song') }}</p>
     </ul>
+  </div>
 </nav>

utils/make_migration.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+flask db migrate -m "Initial migration."
+flask db upgrade

utils/make_translations.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+pybabel extract -F babel.cfg -o ./language/message.pot ./templates/**
+pybabel update -i message.pot -d translations
+pybabel compile -d translations