UI update

guessquest/games/migrations/0003_rename_total_score_temperaturegamesession_score_and_more.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.1.6 on 2025-04-21 02:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('games', '0002_rename_user_temperaturegamesession_player_and_more'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='temperaturegamesession',
+            old_name='total_score',
+            new_name='score',
+        ),
+        migrations.AlterField(
+            model_name='temperaturequestion',
+            name='user_guess',
+            field=models.FloatField(blank=True, null=True),
+        ),
+    ]

guessquest/games/models.py

@@ -1,5 +1,6 @@
 from django.db import models
 from django.utils.timezone import now
+from . import weather_services
 #TODO LEADERBOARD
 
 
@@ -11,43 +12,46 @@ def update_high_score(self, score):
         if score > self.high_score:
             self.high_score = score
 
-
-
     # returns username as a string
     def __str__(self):
         return self.username
 
 class TemperatureGameSession(models.Model):
     player = models.ForeignKey(Player, on_delete=models.CASCADE)
-    total_score = models.IntegerField(default=0)
+    score = models.IntegerField(default=0)
     questions_left = models.IntegerField(default=5)
     time_created = models.DateTimeField(auto_now_add=True)
     game_status = models.CharField(max_length=10, choices=[("active", "Active"), ("completed", "Completed")], default='active')
 
-    def update_score(self, points):
-        self.total_score += points
+    def create_question(self) :
+        city = weather_services.get_random_city()
+        actual_temperature = weather_services.get_city_temperature(city)
+        question = TemperatureQuestion.objects.create(game=self, city=city, actual_temperature=actual_temperature)
         self.questions_left -= 1
-        if self.is_game_over():
-            self.game_status = "completed"
+        return question
+    def get_latest_question(self):
+        return self.questions.last()
+    def update_score(self, points):
+        self.score += points
+    def end_game(self):
+        self.game_status = "completed"
+        self.player.update_high_score(self.score)
         self.save()
-
-    def is_game_over(self):
+        self.player.save()
+        self.delete()
+    def no_questions_left(self):
+        if self.questions_left == 0:
+            self.game_status = 'completed'
         return self.questions_left == 0
 
 class TemperatureQuestion(models.Model):
     game = models.ForeignKey(TemperatureGameSession, related_name="questions", on_delete=models.CASCADE)
     city = models.CharField(max_length=50)
-    user_guess = models.FloatField(null=False, blank=False)
+    user_guess = models.FloatField(null=True, blank=True)
     actual_temperature = models.FloatField(null=False, blank=False)
     time_created = models.DateTimeField(auto_now_add=True)
     time_limit = models.IntegerField(default=30) # 30 seconds
 
     def __str__(self):
         return f"What is the current temperature of {self.city}?"
-
-    def check_guess(self): # calculates and returns points
-        #scoring algorithm subject to change
-        error = abs(self.actual_temperature - self.user_guess)
-        points = max(0, 250 - int(error * 10))
-
-        return points
+

guessquest/games/static/css/style.css

@@ -14,20 +14,27 @@ body {
   min-height: 100vh;
 }
 
+body.start {
+  background-image: url("start_bg.jpeg");
+  background-size: 100% auto;
+}
+
 .start-screen {
   font-size: 75px;
 }
 
 .start-screen #player-form {
   font-size: 35px;
+  display: none;
 }
 
 .start-screen #playername {
   font-size: 30px;
 }
 
 .start-screen #player-enter {
-  font-size: 30px;
+  font-size: 25px;
+  padding: 5px;
   background-color: black;
   border: none;
   color: white;
@@ -110,3 +117,23 @@ body {
   opacity: 0.85;
   cursor: pointer;
 }
+
+#question-num {
+  font-size: 30px;
+}
+
+.progress-container {
+  background-color: white;
+  border: 2px solid black;
+  border-radius: 10px;
+  width: 100%;
+  height: 30px;
+  margin: 10px 0 20px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  background-color: rgb(0, 229, 255);
+  height: 100%;
+  transition: width 0.3s ease;
+}

guessquest/games/static/js/spotifyGame.js

@@ -0,0 +1,71 @@
+let questionIdx = 0;
+const questionList = [
+	{
+		question: "Like a Rolling Stone",
+		choices: ["Bob Dylan", "Marvin Gaye", "Stevie Wonder", "Selena Gomez"],
+		answer: "Bob Dylan"
+	},
+	{
+		question: "Strawberry Fields Forever",
+		choices: ["Fleetwood Mac", "The Beatles", "Aretha Franklin", "Ariana Grande"],
+		answer: "The Beatles"
+	},
+	{
+		question: "Bohemian Rapsody",
+		choices: ["Billie Holiday", "John Lennon", "Queen", "Madonna"],
+		answer: "Queen"
+	}
+];
+let score = 0;
+
+function newGame() {
+  questionIdx = 0;
+  score = 0;
+  document.getElementById("score").textContent = `Score: ${score}`;
+  game();
+}
+
+function game() {
+  const question = questionList[questionIdx].question;
+  const answer = questionList[questionIdx].answer;
+  const options = questionList[questionIdx].choices;
+
+  document.getElementById("question").textContent = question;
+  document.getElementById("options").innerHTML = "";
+  options.forEach((option) => {
+    const button = document.createElement("button");
+    button.textContent = option;
+    button.onclick = () => checkAnswer(option, answer);
+    document.getElementById("options").appendChild(button);
+  });
+}
+
+function checkAnswer(choice, answer) {
+  if (choice == answer) {
+    score += 10;
+    document.getElementById("score").textContent = `Score: ${score}`;
+  }
+  questionIdx++;
+  if (questionIdx < 3) {
+    game();
+  } else {
+    endGame();
+  }
+}
+
+function endGame() {
+  document.querySelector(".question-body").classList.add("hidden");
+  document.querySelector(".restart").classList.remove("hidden");
+  document.getElementById("question").textContent = "";
+  document.getElementById("options").innerHTML = "";
+  document.getElementById("score").textContent = `Final Score: ${score}`;
+}
+
+function restartGame() {
+  document.querySelector(".question-body").classList.remove("hidden");
+  document.querySelector(".restart").classList.add("hidden");
+  document.getElementById("score").textContent = "";
+  newGame();
+}
+
+newGame();

guessquest/games/static/js/startScreen.js

@@ -0,0 +1,15 @@
+const text = "GuessQuest?";
+const guessTextDiv = document.getElementById("startText");
+let index = 0;
+
+function revealNextLetter() {
+  if (index < text.length) {
+    guessTextDiv.textContent = text.substring(0, index + 1);
+    index++;
+    setTimeout(revealNextLetter, 200);
+  } else {
+    document.getElementById("player-form").style.display = "block";
+  }
+}
+
+setTimeout(revealNextLetter, 600);

guessquest/games/templates/game_selection.html

@@ -4,47 +4,97 @@
   <head>
     <title>Home Page</title>
     <style type="text/css">
-      h1 {
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
         font-family: "Nimbus Mono PS", "Courier New", monospace;
-        font-weight: 600;
+        background-image: url("{% static 'css/selection_bg.jpg' %}");
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        color: white;
       }
+
       .header {
-        padding: 20px;
+        padding: 50px;
         text-align: center;
+        color: black;
+        font-size: 20px;
+      }
+
+      .game-container {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 150px;
+        padding: 20px;
       }
-      .column {
-        float: left;
-        width: 30%;
+
+      .game-card {
+        background-color: white;
+        width: 300px;
+        border-radius: 10px;
         padding: 20px;
         text-align: center;
+        transition: transform 0.2s;
       }
-      .row::after {
-        content: "";
-        display: table;
-        clear: both;
+
+      .game-card:hover {
+        transform: scale(1.03);
+      }
+
+      .game-image {
+        width: 100%;
+        height: 300px;
+        object-fit: cover;
+        margin-bottom: 15px;
+      }
+
+      .game-title {
+        font-size: 20px;
+        margin-bottom: 15px;
+        font-weight: bold;
+        color: black;
       }
+
       .button {
-        background-color: #bbd4fc;
+        background-color: black;
         border: none;
-        padding: 30px 36px;
-        text-align: center;
-        color: black;
-        text-decoration: none;
-        display: inline-block;
+        padding: 12px 20px;
+        color: white;
         font-size: 16px;
-        font-family: "Nimbus Mono PS", "Courier New", monospace;
+        cursor: pointer;
+        text-decoration: none;
+        transition: background-color 0.3s;
+      }
+
+      .button:hover {
+        opacity: 0.8;
       }
     </style>
   </head>
   <body>
     <div class="header">
-      <h1>Choose Game to Play!</h1>
+      <h1>Hello player {{player}}</h1>
+      <h1>Choose a Game to Play!</h1>
     </div>
-    {% for game in available_games %}
-    <br />
-    <div class="column">
-      <a href="{{game.url}}" class="button">{{game.name}}</a>
+
+    <div class="game-container">
+      {% for game in available_games %}
+      <div class="game-card">
+        <!-- Replace with actual static image path per game -->
+        <img
+          src="{% static game.image %}"
+          alt="{{ game.name }}"
+          class="game-image"
+        />
+
+        <div class="game-title">{{ game.name }}</div>
+        <a href="{{ game.url }}" class="button">Play Now</a>
+      </div>
+      {% endfor %}
     </div>
-    {% endfor %}
   </body>
 </html>