From 97308bbd64ea70a04c7bbef1798ae37daa641ede Mon Sep 17 00:00:00 2001
From: gpkvt <git@21x9.org>
Date: Mon, 5 Jun 2023 13:03:52 +0200
Subject: [PATCH] added animations

---
 config.ini                |  1 +
 game.py                   |  3 ++-
 static/css/animations.css | 32 ++++++++++++++++++++++++++++++++
 templates/base.html       |  3 +++
 templates/index.html      |  4 ++--
 5 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 static/css/animations.css

diff --git a/config.ini b/config.ini
index e830b84..11f1587 100644
--- a/config.ini
+++ b/config.ini
@@ -6,6 +6,7 @@ timezone = Europe/Berlin
 mail = abgame@21x9.org
 separator_char = ;
 theme = dark
+animations = 1
 
 [i18n]
 lang = de
diff --git a/game.py b/game.py
index 7e2413d..27b1017 100755
--- a/game.py
+++ b/game.py
@@ -98,6 +98,7 @@ def hello():
     help4 = config.get('i18n', 'help_4')
     url = config.get('main', 'base_url')
     theme = config.get('main', 'theme')
+    animations = config.get('main', 'animations')
     ablines = []
 
     now = datetime.now(tz=tz)
@@ -119,7 +120,7 @@ def hello():
     with open("ab.txt", "r") as f:
         num_lines = sum(1 for _ in f)
 
-    return render_template('index.html', title=title, separator=separator, content=ablines, num_lines=num_lines, epoch=epoch, mailto=mail, more=more, questions_prefix=questions_prefix, questions_suffix=questions_suffix, send_questions=send_questions, lang=lang, url=url, desc=desc, theme=theme, mailtext=mailtext, help=help, help_1=help1, help_2=help2, help_3=help3, help_4=help4)
+    return render_template('index.html', title=title, separator=separator, content=ablines, num_lines=num_lines, epoch=epoch, mailto=mail, more=more, questions_prefix=questions_prefix, questions_suffix=questions_suffix, send_questions=send_questions, lang=lang, url=url, desc=desc, theme=theme, mailtext=mailtext, help=help, help_1=help1, help_2=help2, help_3=help3, help_4=help4, animations=animations)
 
 def getContent():
     lines = [a.strip() for a in open("ab.txt", "r").readlines()]
diff --git a/static/css/animations.css b/static/css/animations.css
new file mode 100644
index 0000000..69ee1ff
--- /dev/null
+++ b/static/css/animations.css
@@ -0,0 +1,32 @@
+
+label.a.slide {
+    animation-duration: 1s;
+    animation-name: slideinfromleft;
+    position: relative;
+}
+
+@keyframes slideinfromleft {
+    from {
+        left: -640px;
+    }
+
+    to {
+        left: 0;
+    }
+}
+
+label.b.slide {
+    animation-duration: 1s;
+    animation-name: slideinfromright;
+    position: relative;
+}
+
+@keyframes slideinfromright {
+    from {
+        left: 640px;
+    }
+
+    to {
+        left: 0;
+    }
+}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 76e3293..094b56c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -12,6 +12,9 @@
     <script type="text/javascript" src="/js/shortcut.js?t={{ epoch }}"></script>
     <link rel="stylesheet" type="text/css" href="/css/base.css?t={{ epoch }}">
     <link rel="stylesheet" type="text/css" href="/css/colors.css?t={{ epoch }}">
+    {%- if animations == "1" or animations == "true" %}
+    <link rel="stylesheet" type="text/css" href="/css/animations.css?t={{ epoch }}">
+    {%- endif %}
     <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
     <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
diff --git a/templates/index.html b/templates/index.html
index c4f6fcb..a700017 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,10 +6,10 @@
         {%- set id.value = id.value + 1 %}
         <div class="ab">
             <input type="radio" id="a{{ id.value }}" class="a" name="group-{{ id.value }}">
-            <label for="a{{ id.value }}" class="a" title="{{ question['A'] }}"> A)&nbsp;{{ question['A'] }}</label>
+            <label for="a{{ id.value }}" class="a slide" title="{{ question['A'] }}"> A)&nbsp;{{ question['A'] }}</label>
             <div class="separator">{{ separator }}</div>
             <input type="radio" id="b{{ id.value }}" class="b" name="group-{{ id.value }}">
-            <label for="b{{ id.value }}" class="b" title="{{ question['B'] }}">B)&nbsp;{{ question['B'] }}</label>
+            <label for="b{{ id.value }}" class="b slide" title="{{ question['B'] }}">B)&nbsp;{{ question['B'] }}</label>
         </div>
         <hr>
         {%- endfor %}