game anzeige angefangen

party/static/css/session.css

@@ -5,52 +5,53 @@ body {
     color: #635e5c;
 }
 
-/* Oberer Balken, der Infos anzeigt*/
-header {
-    background-color: #333;
-    height: 5%;
-    width: 100%;
-}
+    /* Oberer Balken, der Infos anzeigt*/
+    header {
+        background-color: #333;
+        height: 5%;
+        width: 100%;
+    }
 
-header ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background-color: #333;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    height: 100%;
-}
+    header ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        background-color: #333;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        height: 100%;
+    }
+    
+@media only screen and (min-width: 1920px) {
+    #tempstat::before {
+        content: "";
+        background: url('/static/icons/temperatur.png') no-repeat 0 0;
+        background-size: auto 100%;
+        width: 30px;
+        height: 70%;
+        display: inline-block;
+    }
 
-#tempstat::before {
-    content: "";
-    background: url('/static/icons/temperatur.png') no-repeat 0 0;
-    background-size: auto 100%;
-    width: 30px;
-    height: 70%;
-    display: inline-block;
-}
+    #ramstat::before {
+        content: "";
+        background: url('/static/icons/ram.png') no-repeat 0 0;
+        background-size: auto 100%;
+        width: 30px;
+        height: 70%;
+        display: inline-block;
+    }
 
-#ramstat::before {
-    content: "";
-    background: url('/static/icons/ram.png') no-repeat 0 0;
-    background-size: auto 100%;
-    width: 30px;
-    height: 70%;
-    display: inline-block;
+    #cpustat::before {
+        content: "";
+        background: url('/static/icons/cpu.png') no-repeat 0 0;
+        background-size: auto 100%;
+        width: 30px;
+        height: 70%;
+        display: inline-block;
+    }
 }
-
-#cpustat::before {
-    content: "";
-    background: url('/static/icons/cpu.png') no-repeat 0 0;
-    background-size: auto 100%;
-    width: 30px;
-    height: 70%;
-    display: inline-block;
-}
-
 main {
     top: 5%;
 }
@@ -604,3 +605,36 @@ footer {
     color: rgb(220, 220, 210);
     text-align: center;
 }
+
+  .popup {
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      padding: 20px;
+      background-color: #fff;
+      border: 1px solid #ccc;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      max-width: 400px;
+      text-align: center;
+    }
+
+    .overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .close-btn {
+      cursor: pointer;
+      color: #333;
+      font-size: 20px;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+    }

party/static/js/session.js

@@ -23,3 +23,91 @@ function updateClock() {
 }
 
 setInterval(updateClock, 1000);
+
+
+
+function openPopup() {
+  document.getElementById('gamePopup').style.display = 'block';
+  document.getElementById('overlay').style.display = 'block';
+}
+
+var games = [
+  {
+    "Name": "Tomb Raider",
+    "Teil": 3,
+    "Erscheinungsjahr": 1998,
+    "Genre": "Abenteuer",
+    "Publisher": "Core Design",
+    "Inhalt": "Tomb Raider III – Adventures of Lara Croft ist ein Videospiel aus der Reihe Tomb Raider. Es wurde von Core Design entwickelt und erschien im Winter 1998 für die PlayStation und den PC. Lara hat wieder einiges dazugelernt.",
+    "Bild": "./static/img/tombraider.png"
+  },
+  {
+    "Name": "Need For Speed Underground",
+    "Teil": 2,
+    "Erscheinungsjahr": 2004,
+    "Genre": "Autorennen",
+    "Publisher": "EA",
+    "Inhalt": "Need for Speed: Underground 2 ist der achte Teil der von Electronic Arts entwickelten Rennspielserie Need for Speed und erschien am 18. November 2004 für Windows, PS2, Xbox, GameCube, GBA und Nintendo DS. Die Version für PSP wurde je nach Veröffentlichungsregion zwischen Januar und September 2005 veröffentlicht.",
+    "Bild": "./static/img/nfsu2.png"
+  },
+  {
+    "Name": "Anno",
+    "Teil": "1602",
+    "Erscheinungsjahr": 1998,
+    "Genre": "Echtzeitstrategie",
+    "Publisher": "Sunflowers",
+    "Inhalt": "Anno 1602 ist das erste Computerspiel aus der Anno-Serie. Das Spiel entstand aus einem Gemeinschaftsprojekt des österreichischen Spieleentwicklers Max Design und der deutschen Sunflowers Interactive Entertainment Software GmbH.",
+    "Bild": "./static/img/anno.png"
+  },
+  {
+    "Name": "Empire Earth",
+    "Teil": 1,
+    "Erscheinungsjahr": 2001,
+    "Genre": "Echtzeitstrategie",
+    "Publisher": "Sierra Entertainment",
+    "Inhalt": "Empire Earth ist eine dreiteilige Echtzeit-Strategiespiel-Serie für Windows, in der der Spieler eine Zivilisation durch die gesamte Menschheitsgeschichte führen kann.",
+    "Bild": "./static/img/empire.png"
+  },
+  {
+    "Name": "Call Of Duty 4 Modern Warfare",
+    "Teil": 4,
+    "Erscheinungsjahr": 2007,
+    "Genre": "Shooter",
+    "Publisher": "Infinity Ward",
+    "Inhalt": "In der Call-of-Duty-Reihe wird erstmals eine zusammenhängende Handlung erzählt. Ein russischer Ultranationalist und ein Terrorist übernehmen die Kontrolle in einem arabischen Staat. Eine amerikanische und britische Einheit jagt sie, es kommt zu einem Atomangriff. Der russische Ultranationalist startet nukleare Raketen, die in letzter Sekunde zerstört werden. Am Ende tötet der Spieler den russischen Ultranationalisten und wird gerettet. Es gibt auch eine Bonusmission, in der ein Flugzeugabsturz verhindert wird.",
+    "Bild": "./static/img/cod.png"
+  }
+];
+
+var currentGameIndex = 0;
+
+function openPopup() {
+  showGameInfo(currentGameIndex);
+  document.getElementById('gamePopup').style.display = 'block';
+  document.getElementById('overlay').style.display = 'block';
+}
+
+function closePopup() {
+  document.getElementById('gamePopup').style.display = 'none';
+  document.getElementById('overlay').style.display = 'none';
+}
+
+function showGameInfo(index) {
+  var game = games[index];
+  document.getElementById('popupImage').src = game.Bild;
+  document.getElementById('popupTitle').innerHTML = game.Name;
+  document.getElementById('popupYear').innerHTML = 'Erscheinungsjahr: ' + game.Erscheinungsjahr;
+  document.getElementById('popupGenre').innerHTML = 'Genre: ' + game.Genre;
+  document.getElementById('popupPublisher').innerHTML = 'Publisher: ' + game.Publisher;
+  document.getElementById('popupContent').innerHTML = game.Inhalt;
+}
+
+function prevGame() {
+  currentGameIndex = (currentGameIndex - 1 + games.length) % games.length;
+  showGameInfo(currentGameIndex);
+}
+
+function nextGame() {
+  currentGameIndex = (currentGameIndex + 1) % games.length;
+  showGameInfo(currentGameIndex);
+}

party/systemMonitor.py

@@ -1,18 +1,39 @@
 from pymongo import MongoClient
 from datetime import datetime
 import psutil
-import os
 
 class SystemMonitor:
 
-    CONNECTION_STRING = None
-    client = None
-    collection = None
-    initialized = False
+    CONNECTION_STRING = "mongodb://localhost:27017/"
+    client = MongoClient(CONNECTION_STRING)
+    collection = client['partyyy']['systemMonitor']
+    initialized = True
 
     @classmethod
-    def init(self):
-        self.CONNECTION_STRING = "mongodb://localhost:27017/"
-        self.client = MongoClient(self.CONNECTION_STRING)
-        self.collection = self.client['partyyy']['systemMonitor']
-        self.initialized = True
+    def init(self, cls):
+        if not cls.initialized:
+            self.cls.client = MongoClient(self.cls.CONNECTION_STRING)
+            self.cls.collection = cls.client['partyyy']['systemMonitor']
+            self.cls.initialized = True
+
+    @classmethod
+    def record_system_info(self, cls):
+        if not self.cls.initialized:
+            self.cls.init()
+
+        self.cpu_percent = psutil.cpu_percent(interval=1)
+        self.memory_percent = psutil.virtual_memory().percent
+        self.uptime = int(round(psutil.boot_time()))
+
+        data = {
+            'timestamp': datetime.now(),
+            'cpu_percent': self.cpu_percent,
+            'memory_percent': self.memory_percent,
+            'uptime': self.uptime
+        }
+
+        self.cls.collection.insert_one(data)
+
+    @classmethod
+    def getStatus(self) -> list[bool]:
+        return list(self.record_system_info()['status'])

party/templates/session.html

@@ -117,6 +117,21 @@
     <article id="games">
         <h1>Games</h1>
         <center>
+            <div id="gamePopup" class="popup">
+                <span class="close-btn" onclick="closePopup()">&times;</span>
+                <img id="popupImage" src="" alt="Spielbild" style="max-width: 100%;">
+                <h2 id="popupTitle"></h2>
+                <p id="popupYear"></p>
+                <p id="popupGenre"></p>
+                <p id="popupPublisher"></p>
+                <p id="popupContent"></p>
+              
+                <button onclick="prevGame()">Vorheriges Spiel</button>
+                <button onclick="nextGame()">Nächstes Spiel</button>
+              </div>
+            
+            <div id="overlay" class="overlay" onclick="closePopup()"></div>
+
             <p>Du bist in Team: <span>TODO</span></p>
 
             <input type="radio" name="game_info_select" id="punkte_button">
@@ -178,7 +193,7 @@
                     </tr>
                 </tbody>
             </table>
-            <button>Spiele Zeigen</button>
+            <button onclick="openPopup()">Spiele Zeigen</button>
             <p>Aktuelles Spiel: </p>
 
         </center>