From 314e2edc85c32b258d2327e5bf72fb875cfce298 Mon Sep 17 00:00:00 2001
From: hyperbel <hyperbel@users.noreply.github.com>
Date: Wed, 25 Oct 2023 21:35:54 +0000
Subject: [PATCH] games tab

---
 party/static/css/session.css | 169 +++++++++++++----------------------
 party/templates/session.html |  82 +++++++++--------
 2 files changed, 103 insertions(+), 148 deletions(-)

diff --git a/party/static/css/session.css b/party/static/css/session.css
index 92b24bd..cbc5b61 100644
--- a/party/static/css/session.css
+++ b/party/static/css/session.css
@@ -150,30 +150,30 @@ p {
 /* Icons für die Buttons */
 /* Neuer Stil für den ausfahrbaren Kasten */
 .popup {
-position: fixed;
-top: -100%; /* Startposition oben */
-right: 4%; /* Rechts positionieren */
-width: 8%;
-background-color: #222; /* Dunkle Hintergrundfarbe */
-border-radius: 10px;
-padding: 10px;
-display: none; /* Der Kasten ist anfangs versteckt */
-z-index: 999; /* Damit der Kasten über anderen Elementen liegt */
-color: #fff; /* Textfarbe */
-animation: slideIn 0.5s forwards; /* Animation hinzufügen */
+    position: fixed;
+    top: -100%; /* Startposition oben */
+    right: 4%; /* Rechts positionieren */
+    width: 8%;
+    background-color: #222; /* Dunkle Hintergrundfarbe */
+    border-radius: 10px;
+    padding: 10px;
+    display: none; /* Der Kasten ist anfangs versteckt */
+    z-index: 999; /* Damit der Kasten über anderen Elementen liegt */
+    color: #fff; /* Textfarbe */
+    animation: slideIn 0.5s forwards; /* Animation hinzufügen */
 }
 
 .popup-content {
-display: flex;
-flex-direction: column;
-gap: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
 .close-button {
-align-self: flex-end;
-cursor: pointer;
-color: #fff; /* Button-Textfarbe */
-font-weight: bold; /* Button hervorheben */
+    align-self: flex-end;
+    cursor: pointer;
+    color: #fff; /* Button-Textfarbe */
+    font-weight: bold; /* Button hervorheben */
 }
 
 .close-button:hover {
@@ -190,30 +190,6 @@ font-weight: bold; /* Button hervorheben */
     }
 }
 
-
-/* Neuer Stil für die versteckten Div-Elemente
- .hidden-div {
-    display: none;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 80%; /* Hier die gewünschte Breite eintragen 
-    max-height: 80%; /* Hier die gewünschte Höhe eintragen 
-    height: 80%;
-    padding: 20px;
-    background-color: #333;
-    color: #fff;
-    border-radius: 10px;
-    text-align: center;
-}
-*/
-
-/* Stil für den aktiven Button */
-.active-button {
-    box-shadow: 0 0 10px #fff;
-}
-
 table {
     border-collapse: separate;
     border-spacing: 0;
@@ -231,6 +207,10 @@ td {
 
 /* Planer */
 
+#planer button {
+    margin-top: 1%;
+}
+
 #planer dialog {
     background-color: black;
     border-radius: 5px;
@@ -272,6 +252,42 @@ td {
     background-color: #333;
 }
 
+/* Ende Planer */
+
+/* Games */
+
+#games table {
+    display: none;
+    margin-top: 1%;
+    border: none !important;
+}
+
+#games label {
+    text-decoration: underline;
+    font-size: 20px;
+}
+#games input[type=radio]:checked + label {
+    font-weight: bold;
+}
+
+#games input[type=radio]:checked + label::before {
+    content: "> ";
+}
+
+
+#punkte_button:checked ~ #punkte_table {
+    display: block;
+}
+
+#zeit_button:checked ~ #zeiten_table {
+    display: block;
+}
+
+#teams_button:checked ~ #teams_table {
+    display: block;
+}
+
+/* Ende Games */
 
 input[type="number"],
 input[type="email"],
@@ -406,67 +422,7 @@ cursor: pointer;
     margin-left: 5%;
   }
 
-
-  .hidden1 {
-    display: none;
 }
-  
-
-#punkte_button{
-    background-color: #454443;
-    position: fixed;
-    width: 10%; 
-    height: 5%;
-    border-radius: 10px;
-    cursor: pointer;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 60%;
-    border: none;
-    padding: 10px;
-    color: white;
-    font-size: 16px;
-    bottom: 10%;
-    top: 15%;
-    right: 58%;
-}
-#zeit_button{
-    background-color: #454443;
-    position: fixed;
-    width: 10%; 
-    height: 5%;
-    border-radius: 10px;
-    cursor: pointer;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 60%;
-    border: none;
-    padding: 10px;
-    color: white;
-    font-size: 16px;
-    bottom: 10%;
-    top: 15%;
-    right: 45%;
-}
-#team_button{
-    background-color: #454443;
-    position: fixed;
-    width: 10%; 
-    height: 5%;
-    border-radius: 10px;
-    cursor: pointer;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 60%;
-    border: none;
-    padding: 10px;
-    color: white;
-    font-size: 16px;
-    bottom: 10%;
-    top: 15%;
-    right: 33%;
-}
-
 #next {
     position: fixed;
     top: 15%;
@@ -510,7 +466,7 @@ cursor: pointer;
     background-image: url('/static/icons/play.png');
 }
 
-#mate_reset{
+#mate_reset {
     background-color: #454443;
     position: fixed;
     width: 10%; 
@@ -530,7 +486,7 @@ cursor: pointer;
   
 }
 
-#mate_hinzu{
+#mate_hinzu {
     background-color: #454443;
     position: fixed;
     width: 20%; 
@@ -550,7 +506,7 @@ cursor: pointer;
   
 }
 
-#save_settings{
+#save_settings {
     position: fixed;
     width: 10%; 
     height: 5%;
@@ -587,6 +543,7 @@ cursor: pointer;
     top: 90%;
     right: 43%;
 }
+
 #reset_settings{
     position: fixed;
     width: 10%; 
@@ -642,7 +599,7 @@ input[type=radio] {
     display: block;
 }
 
-section {
+article {
     display: none;
     position: fixed;
     top: 13%;
diff --git a/party/templates/session.html b/party/templates/session.html
index ff3b8cb..9cfc119 100644
--- a/party/templates/session.html
+++ b/party/templates/session.html
@@ -63,14 +63,14 @@
     
     <!-- Div-Inhalte -->
      <!-- Home -->
-    <section id="home">
+    <article id="home">
         <h1>Home</h1>
         <p>
             Willkommen zur diesjährigen 24-stündigen LAN-Party! Wir haben ein spannendes Line-up mit Spiel 1, Spiel 2 und Spiel 3 vorbereitet. Lasst uns gemeinsam unvergessliche Gaming-Momente schaffen! Möge die Party beginnen, und möge die Beste Person gewinnen!</p>
-    </section>
+    </article>
     
      <!-- Planer -->
-    <section id="planer">
+    <article id="planer">
         <h1>Planer</h1>
         <table id="events">
             <thead>
@@ -91,7 +91,9 @@
             </tbody>
         </table>
 
-        <button id="add_event_button" onclick="document.getElementById('new_event_form_dialog').open = true;">+</button>
+        <center>
+            <button onclick="document.getElementById('new_event_form_dialog').open = true;">+</button>
+        </center>
 
         <dialog id="new_event_form_dialog">
             <form id="event_form" action="/api/event/new" target='hiddenIFrame' method='post'>
@@ -106,79 +108,75 @@
         </dialog>
 
         <iframe name='hiddenIFrame' id='hiddenIFrame' hidden></iframe>
-    </section>
+    </article>
 
      <!-- Games -->
-    <section id="games">
+    <article id="games">
         <h1>Games</h1>
+        <center>
+            <p>Du bist in Team: <span>TODO</span></p>
 
-        <input type="radio" name="game_info_select" id="punkte_button">
-        <label for="punkte_button">Punkte</label>
-        <input type="radio" name="game_info_select" id="zeit_button">
-        <label for="zeit_button">Zeit</label>
-        <input type="radio" name="game_info_select" id="team_button">
-        <label for="team_button">Team</label>
+            <input type="radio" name="game_info_select" id="punkte_button">
+            <label for="punkte_button">Punkte</label><br/>
+            <input type="radio" name="game_info_select" id="zeit_button">
+            <label for="zeit_button">Zeit</label><br/>
+            <input type="radio" name="game_info_select" id="teams_button">
+            <label for="teams_button">Team</label><br/>
 
-        <div id="team" class="hidden1" >
-            <p>Du bist in Team</p>
-            <table id="team_member">
-                <tbody>
+            <table id="teams_table">
+                <thead>
                     <tr>
                         <td>Team</td>
                         <td>Game</td>
                         <td>Points</td>
                     </tr>
+                </thead>
+                <tbody>
                     <tr>
-                        <td></td>
+                        <td>f</td>
                         <td>f</td>
                         <td>f</td>
                     </tr>
                 </tbody>
             </table>
-        </div>
-      
-        <div id="punkt" class="hidden1">
-            <table id="point_game">
-                <tbody>
+            <table id="punkte_table">
+                <thead>
                     <tr>
                         <td>User</td>
                         <td>Game</td>
                         <td>Points</td>
                     </tr>
+                </thead>
+                <tbody>
                     <tr>
-                        <td></td>
+                        <td>f</td>
                         <td>f</td>
                         <td>f</td>
                     </tr>
                 </tbody>
             </table>
-            <button class="submit_button" type="submit">Add</button>
-        </div>
        
-        <div id="zeit" class="hidden1" >
-            <center>
-            <table id="time_game">
-                <tbody>
+            <table id="zeiten_table">
+                <thead>
                     <tr>
                         <td>User</td>
                         <td>Game</td>
                         <td>Time</td>
                     </tr>
+                </thead>
+                <tbody>
                     <tr>
-                        <td></td>
+                        <td>f</td>
                         <td>f</td>
                         <td>f</td>
                     </tr>
                 </tbody>
             </table>
-            <button class="submit_button" type="submit">Add</button>
         </center>
-        </div>
-
-    </section>
+    </article>
 
      <!-- Chat -->
-    <section id="chat">
+    <article id="chat">
         <div id="chat-container">
             <h1>Chat</h1>
             <div id="chatBox">
@@ -188,18 +186,18 @@
                 <button class="submit_button" id="chatInputButton" onclick="sendMessage()">Senden</button>
             </div>
         </div>
-    </section>
+    </article>
 
      <!-- Musik -->
-    <section id="music">
+    <article id="music">
         <h1>Musik</h1>
         <button id="back"></button>
         <button id="play"></button>
         <button id="next"></button>
-    </section>
+    </article>
 
      <!-- Mate -->
-    <section id="mate">
+    <article id="mate">
         <div id="mate-container">
             <h1>Mate</h1>
             <table id="mate_kiste">
@@ -207,10 +205,10 @@
             <button id="mate_reset" class="reset-kiste" onclick="resetKiste()">Reset</button>
             <button id="mate_hinzu">Kasten Hinzufügen</button>
         </div>
-    </section>
+    </article>
 
      <!-- Einstellungen -->
-    <section id="settings">
+    <article id="settings">
         <h1>Einstellungen</h1>
         <label for="position_select">Menü Position: </label>
         <select id="position_select">
@@ -229,7 +227,7 @@
         <button id="save_settings">Speichern</button>
         <button id="abort_settings">abbrechen</button>
         <button id="reset_settings">reset</button>
-    </section>
+    </article>
 
     <!-- ... (Dein vorhandener HTML-Code) ... -->
      <!-- Hinzugefügter HTML-Code für den ausfahrbaren Kasten -->