Fix README saying 2 instead of 3 minigames

CREDITS

@@ -1,3 +1,17 @@
+Background Music from Mikhail Smusev from Pixabay
+https://pixabay.com/music/scary-childrens-tunes-halloween-background-music-425891/
+
+Jumpscare Sound from Meme-soundboard
+https://meme-soundboard.net/jumpscare-soundboard/
+
+FNAF Jumpscare Image from InspiredPencil
+https://ar.inspiredpencil.com/pictures-2023/fnaf-2-foxy-jumpscare
+
+Bird image from Google's dino game
+
+Tombstone image from Scary PNGs by Vecteezy
+https://www.vecteezy.com/free-png/scary
+
 Huge Thanks to Python for being the programming language used in this app.
 https://www.python.org/
 

README.md

@@ -1,4 +1,5 @@
 LoginWeen is an app where you login/register with a halloween pumpkin carving as a password.
+There are 3 minigames you can play after, or you can check out the countdown to the next Loginween!
 
 Live Demo: https://loginween.csd4ni3l.hu
 

app.py

@@ -261,4 +261,9 @@ def pumpkin_memory():
 def pumpkin_roll():
     return render_template("pumpkin_roll.jinja2")
 
+@app.route("/whack_a_pumpkin")
+@login_required
+def whack_a_pumpkin():
+    return render_template("whack_a_pumpkin.jinja2")
+
 app.run(host=os.getenv("HOST", "0.0.0.0"), port=int(os.getenv("PORT", 8080)), debug=os.getenv("DEBUG_MODE", False).lower() == "true")

static/js/game.js

@@ -1,24 +1,29 @@
 const WIDTH = 1280;
 const HEIGHT = 720;
+let music_played = false;
 
-function change_setting(category, setting, value) {
+function jumpscare() {
-    localStorage.setItem(setting, value);
+    play("jumpscare", {
+        volume: 1.5
+    })
+    const jumpscare_sprite = create_sprite(0, 0, "jumpscare");
+    setTimeout(() => {
+        destroy(jumpscare_sprite);
+    }, 1500);
+}
+
+function change_setting(category, setting, value, GAME_TITLE) {
+    localStorage.setItem(`${GAME_TITLE} ${setting}`, value);
     go("settings", category);
 }
 
-function show_settings(category, SETTINGS) {
+function show_settings(category, GAME_TITLE, SETTINGS) {
     const x = 400;
     const label_x = 50;
     const space_between = 100;
-    let y;
+    let y = 130 + space_between;
 
-    if (category == "Graphics") {
+    create_label(label_x, y - space_between, "All settings require a page reload to take effect!", 32);
-        y = 130 + space_between;
-        create_label(label_x, y - space_between, "These settings need a page reload to take effect!", 32);
-    }
-    else {
-        y = 130;
-    }
     
     for (let key in SETTINGS[category]) {
         const settings_dict = SETTINGS[category][key];
@@ -26,10 +31,10 @@ function show_settings(category, SETTINGS) {
 
         create_label(label_x, y + 10, key, 32);
         
-        let value = localStorage.getItem(key);
+        let value = localStorage.getItem(`${GAME_TITLE} ${key}`);
 
-        if (value == undefined) {
+        if (value == null) {
-            localStorage.setItem(key, settings_dict.default);
+            localStorage.setItem(`${GAME_TITLE} ${key}`, settings_dict.default);
             value = settings_dict.default;
         }
 
@@ -39,25 +44,25 @@ function show_settings(category, SETTINGS) {
                     "ON", 
                     value === "true" ? color(255, 255, 255) : color(127, 127, 127),
                     color(0, 0, 0, 0),  
-                    () => { change_setting(category, currentKey, true); }
+                    () => { change_setting(category, currentKey, true, GAME_TITLE); }
                 ], 
                 [
                     "OFF", 
                     value === "false" ? color(255, 255, 255) : color(127, 127, 127),
                     color(0, 0, 0, 0),  
-                    () => { change_setting(category, currentKey, false); }
+                    () => { change_setting(category, currentKey, false, GAME_TITLE); }
                 ]
             ], 100, 50, 20);
 
         }
         else if (settings_dict.type == "option") {
-            create_dropdown(x, y, 300, 75, settings_dict.options, 0, (option) => {
+            create_dropdown(x, y, 300, 75, settings_dict.options, settings_dict.options.indexOf(value), (option) => {
-                localStorage.setItem(currentKey, option);
+                localStorage.setItem(`${GAME_TITLE} ${currentKey}`, option);
             });
         }
         else if (settings_dict.type == "slider") {
             create_slider(x, y, 400, Number(settings_dict.min), Number(settings_dict.max), Number(value), (new_value) => {
-                localStorage.setItem(currentKey, new_value);
+                localStorage.setItem(`${GAME_TITLE} ${currentKey}`, new_value);
             });
         }
         
@@ -65,32 +70,59 @@ function show_settings(category, SETTINGS) {
     }
 }
 
+function create_start_overlay(GAME_TITLE) {
+    const overlay = add([
+        rect(WIDTH, HEIGHT),
+        color(0, 0, 0),
+        opacity(0.6),
+        pos(0, 0),
+        area(),
+        z(1000),
+        "overlay"
+    ])
+
+    const text_label = add([
+        text("Click to Start", { size: 48 }),
+        pos(WIDTH / 2, HEIGHT / 2),
+        anchor("center"),
+        color(255, 255, 255),
+        z(1001)
+    ])
+
+    onClick("overlay", () => {
+        const bgm = play("music", {
+            volume: Number(localStorage.getItem(`${GAME_TITLE} Music Volume`) || 50) / 100,
+            loop: true
+        });
+
+        destroy(overlay);
+        destroy(text_label);
+    })
+}
+
+
 function start_game() {
+    const [GAME_TITLE, SETTINGS] = game_info();
+
     kaplay(
         { 
             width: WIDTH,
             height: HEIGHT,
             canvas: document.getElementById("canvas"),
             root: document.getElementById("game-container"),
-            crisp: !localStorage.getItem("Anti-Alasing"),
+            crisp: !localStorage.getItem(`${GAME_TITLE} Anti-Aliasing`),
-            texFilter: localStorage.getItem("Texture Filtering").toLowerCase(),
+            texFilter: (localStorage.getItem(`${GAME_TITLE} Texture Filtering`) || "nearest").toLowerCase(),
-            maxFPS: Number(localStorage.getItem("FPS Limit")),
+            maxFPS: Number(localStorage.getItem(`${GAME_TITLE} FPS Limit`)),
             font: "New Rocker",
             background: "#e18888",
-            buttons: {
-                up: {
-                    keyboard: "up",
-                    gamepad: "south", 
-                },
-                jump: {
-                    keyboard: "space",
-                    gamepad: "a"
-                }
-            }
         }
     );
 
-    const [GAME_TITLE, SETTINGS] = setup_game();
+    setup_game();
+    
+    loadSprite("jumpscare", "/static/graphics/jumpscare.jpg");
+    loadSound("jumpscare", "/static/sound/jumpscare.mp3");
+    loadSound("music", "/static/sound/music.mp3");
 
     scene("settings", (setting_category) => {
         let generated_button_lists = Object.entries(SETTINGS).map(([key, value]) => [key, color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("settings", key)]);
@@ -99,16 +131,20 @@ function start_game() {
         horizontal_buttons(10, 10, generated_button_lists, 200, 75, 10);
 
         if (setting_category != null) {
-            show_settings(setting_category, SETTINGS);
+            show_settings(setting_category, GAME_TITLE, SETTINGS);
         }
         else {
-            show_settings(Object.keys(SETTINGS)[0], SETTINGS);
+            show_settings(Object.keys(SETTINGS)[0], GAME_TITLE, SETTINGS);
         }
     })
 
     scene("main_menu", () => {
         create_label(WIDTH / 2 - 16 * GAME_TITLE.length, HEIGHT / 4, GAME_TITLE, 56);
         vertical_buttons(WIDTH / 4, HEIGHT / 2.25, [["Play", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("play")], ["Settings", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("settings")]], WIDTH / 2, HEIGHT / 8, HEIGHT / 50)
+        if (!music_played && localStorage.getItem(`${GAME_TITLE} Music`) == 'true') {
+            create_start_overlay(GAME_TITLE);
+            music_played = true;
+        }
     });
 
     go("main_menu");

static/js/pumpkin_memory.js

@@ -1,35 +1,44 @@
-function setup_game() {
+function game_info() {
-    loadSprite("pumpkin", "/static/graphics/pumpkin.png");
     const SETTINGS = {
         "Graphics": {
-            "Anti-Aliasing": {"type": "bool", "default": true},
+            "Anti-Aliasing": {"type": "bool", "default": "true"},
             "Texture Filtering": {"type": "option", "options": ["Nearest", "Linear"], "default": "Linear"},
             "FPS Limit": {"type": "slider", "min": 0, "max": 480, "default": 60},
         },
         "Sound": {
-            "Music": {"type": "bool", "default": true},
+            "Music": {"type": "bool", "default": "true"},
-            "SFX": {"type": "bool", "default": true},
             "Music Volume": {"type": "slider", "min": 0, "max": 100, "default": 50},
-            "SFX Volume": {"type": "slider", "min": 0, "max": 100, "default": 50},
         },
+        "Spooky": {
+            "Jumpscares": {"type": "bool", "default": "true"}
+        }
     };
     
-    scene("game", (pumpkin_pairs, pumpkin_array, revealed, found_pairs, start) => {
+    return ["Pumpkin Memory", SETTINGS];
-        create_button(5, 5, 150, 75, "Back", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("main_menu"))
+}
+
+function setup_game() {
+    loadSprite("pumpkin", "/static/graphics/pumpkin.png");
+
+    scene("game", (difficulty, pumpkin_array, revealed, found_pairs, start) => {
+        if (localStorage.getItem("Pumpkin Memory Jumpscares") == "true") {
+            if (Math.random() < 0.1) {
+                jumpscare();
+            }
+        }
+
+        let cols;
+        switch (difficulty) {
+            case "easy": pumpkin_pairs = 5; cols = 5; break; 
+            case "medium": pumpkin_pairs = 10; cols = 4; break;
+            case "hard": pumpkin_pairs = 15; cols = 5; break;
+            case "extrahard": pumpkin_pairs = 20; cols = 10; break;
+        }
 
         const total = pumpkin_pairs * 2;
         const pumpkin_size = 100;
         const space_between = 10;
         
-        let cols;
-        switch (pumpkin_pairs) {
-            case 5: cols = 5; break; 
-            case 10: cols = 4; break;
-            case 15: cols = 5; break;
-            case 20: cols = 10; break;
-            default: cols = Math.ceil(Math.sqrt(pumpkin_pairs * 2));
-        }
-
         const rows = Math.ceil(total / cols);
         const grid_width = cols * (pumpkin_size + space_between) - space_between;
         const grid_height = rows * (pumpkin_size + space_between) - space_between;
@@ -67,15 +76,49 @@ function setup_game() {
             revealed = [];
         }
         
+        let best_time = Number(localStorage.getItem("pumpkin_memory_best_time")) || 99999;
+        let first_time = best_time == 99999;
+
         const elapsed = performance.now() - start;
-        const timer_label = create_label(520, 5, `Time spent: ${(elapsed / 1000).toFixed(1)} s`);
+        const best_time_display = (best_time == 99999) ? `${(elapsed / 1000).toFixed(1)}s` : `${best_time}s`;
+        const timer_label = create_label(400, 5, `Time spent: ${(elapsed / 1000).toFixed(1)}s Best Time: ${best_time_display}`);
+
         const timer_interval_id = setInterval(() => {
             const elapsed = performance.now() - start;
-            timer_label.text = `Time spent: ${(elapsed / 1000).toFixed(1)} s`
+            if (first_time) {
+                best_time = (elapsed / 1000).toFixed(1);
+            }
+
+            timer_label.text = `Time spent: ${(elapsed / 1000).toFixed(1)}s Best Time: ${best_time}s`
         }, 100);
 
+        let jumpscare_interval_id;
+        if (localStorage.getItem("Pumpkin Memory Jumpscares") == "true") {
+            jumpscare_interval_id = setInterval(() => {
+                if (Math.random() < 0.05) {
+                    jumpscare();
+                }
+            }, 1000);
+        }
+
+        create_button(5, 5, 150, 75, "Back", color(127, 127, 127), color(0, 0, 0, 0), () => {
+            if (localStorage.getItem("Pumpkin Memory Jumpscares") == "true") {
+                clearInterval(jumpscare_interval_id);
+            }
+            clearInterval(timer_interval_id);
+            go("main_menu");
+        })
+        
+
         if (pumpkin_pairs == found_pairs.length - 1) {
-            create_label(520, 320, `You win!\nTime took: ${(elapsed / 1000).toFixed(1)} s`, 48);
+            const elapsed = performance.now() - start;
+            if ((elapsed / 1000).toFixed(1) < best_time) {
+                best_time = (elapsed / 1000).toFixed(1);
+            }
+            localStorage.setItem(`memory_best_${difficulty}`, best_time);
+
+            const best_time_display = (best_time == 99999) ? `${(elapsed / 1000).toFixed(1)}s` : `${best_time}s`;
+            create_label(520, 320, `You win!\nTime took: ${(elapsed / 1000).toFixed(1)} s\nBest Time: ${best_time_display}`, 48);
             return;
         }
 
@@ -88,12 +131,13 @@ function setup_game() {
                 const sprite = create_sprite(start_x + col * (pumpkin_size + space_between), start_y + row * (pumpkin_size + space_between), "pumpkin");
                 sprite.scale = 1;
                 tween(sprite.scale, 0, 0.2, (val) => sprite.scale = val).then(() => {
-                    create_label(start_x + col * (pumpkin_size + space_between) + pumpkin_size / 2, start_y + row * (pumpkin_size + space_between) + pumpkin_size / 2, arr[i], 24);
+                    create_label(start_x + col * (pumpkin_size + space_between) + pumpkin_size / 3, start_y + row * (pumpkin_size + space_between) + pumpkin_size / 2, arr[i], 24);
                     tween(sprite.scale, 1, 0.2, (val) => sprite.scale = val).then(() => {
                         wait(0.5, () => {
                             if (found_pair == null) {
                                 clearInterval(timer_interval_id);
-                                go("game", pumpkin_pairs, arr, [], found_pairs, start);
+                                clearInterval(jumpscare_interval_id);
+                                go("game", difficulty, arr, [], found_pairs, start);
                             }
                             else {
                                 destroy(sprite);
@@ -110,7 +154,8 @@ function setup_game() {
                     btn.scale = 1.1;
                     tween(btn.scale, 1, 0.2, (val) => btn.scale = val);
                     clearInterval(timer_interval_id);
-                    go("game", pumpkin_pairs, arr, revealed.concat([index]), found_pairs, start);
+                    clearInterval(jumpscare_interval_id);
+                    go("game", difficulty, arr, revealed.concat([index]), found_pairs, start);
                 })
             }
         }
@@ -120,12 +165,10 @@ function setup_game() {
     scene("play", () => {
         create_label(WIDTH / 2 - 16 * "Difficulty Selector".length, HEIGHT / 8, "Difficulty Selector", 56);
         vertical_buttons(WIDTH / 4, HEIGHT / 4, [
-            ["Easy", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 5)], 
+            ["Easy", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", "easy")], 
-            ["Medium", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 10)],
+            ["Medium", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", "medium")],
-            ["Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 15)],
+            ["Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", "hard")],
-            ["Extra Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 20)]
+            ["Extra Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", "extrahard")]
         ], WIDTH / 2, HEIGHT / 8, HEIGHT / 50)
     });
-
-    return ["Pumpkin Memory", SETTINGS];
 }

static/js/pumpkin_roll.js

@@ -1,39 +1,184 @@
-function setup_game() {
+function game_info() {
-    loadSprite("pumpkin", "/static/graphics/pumpkin.png");
-    loadSprite("gravestone", "/static/gravestone.png")
     const SETTINGS = {
         "Graphics": {
-            "Anti-Aliasing": {"type": "bool", "default": true},
+            "Anti-Aliasing": {"type": "bool", "default": "true"},
             "Texture Filtering": {"type": "option", "options": ["Nearest", "Linear"], "default": "Linear"},
             "FPS Limit": {"type": "slider", "min": 0, "max": 480, "default": 60},
         },
         "Sound": {
-            "Music": {"type": "bool", "default": true},
+            "Music": {"type": "bool", "default": "true"},
-            "SFX": {"type": "bool", "default": true},
             "Music Volume": {"type": "slider", "min": 0, "max": 100, "default": 50},
-            "SFX Volume": {"type": "slider", "min": 0, "max": 100, "default": 50},
         },
         "Input": {
-            "Controller Enabled": {"type": "bool", "default": true}
+            "Controller Enabled": {"type": "bool", "default": "true"}
+        },
+        "Spooky": {
+            "Jumpscares": {"type": "bool", "default": "true"}
         }
     };
     
+    return ["Pumpkin Roll", SETTINGS];
+}
+
+function spawn_enemy(enemy_type) {
+    let enemy_width;
+    let enemy_height;
+    let start_y;
+    if (enemy_type == "tombstone") {
+        scale_f = scale(0.05);
+        start_y = 720;
+        enemy_width = 140;
+        enemy_height = 120;
+    }
+    else {
+        scale_f = scale(0.5);
+        start_y = 600;
+        enemy_width = 148;
+        enemy_height = 147;
+    }
+
+    const enemy_sprite = add([
+        sprite(enemy_type),
+        pos(1280 - enemy_width, start_y - enemy_height),
+        scale_f,
+        area(),
+        "enemy"
+    ]);
+
+    enemy_sprite.onUpdate(() => {
+        enemy_sprite.pos.x -= 1000 * dt();
+
+        if (enemy_sprite.pos.x <= -enemy_width) {
+            destroy(enemy_sprite);
+        }
+    })
+    return enemy_sprite;
+}
+
+function setup_game() {
+    loadSprite("pumpkin", "/static/graphics/pumpkin.png");
+    loadSprite("tombstone", "/static/graphics/tombstone.png");
+    loadSprite("bird", "/static/graphics/bird.png");
+
+    const GRAVITY = 2500;
+    const JUMP_VELOCITY = -1200;
+    const GROUND_Y = 670;
+
     scene("play", () => {
+        let score = 0;
+        let high_score = Number(localStorage.getItem("pumpkin_roll_highscore"));
+        let game_over = false;
+        let enemies = [];
+        let last_enemy_spawn = performance.now();
+
+        const score_label = create_label(480, 10, `Score: ${score} High Score: ${high_score}`);
+        
         let pumpkin_sprite = add([
             sprite("pumpkin"),
             pos(50, 670),
             anchor("center"),
-            rotate(0)
+            rotate(0),
+            area(),
+            "pumpkin"
         ])
         
-        setInterval(() => {
+        pumpkin_sprite.isJumping = false;
-            pumpkin_sprite.angle = (pumpkin_sprite.angle + dt() * 720) % 360;
-        }, 100)
 
-        onKeyPress("jump", () => {
+        let jumpscare_interval_id;
+        if (localStorage.getItem("Pumpkin Roll Jumpscares") == "true") {
+            jumpscare_interval_id = setInterval(() => {
+                if (Math.random() < 0.035) {
+                    jumpscare();
+                }
+            }, 1000);
+        }
 
+        create_button(5, 5, 150, 75, "Back", color(127, 127, 127), color(0, 0, 0, 0), () => {
+            if (localStorage.getItem("Pumpkin Roll Jumpscares") == "true") {
+                clearInterval(jumpscare_interval_id);
+            }
+            go("main_menu");
         })
-    })
         
-    return ["Pumpkin Roll", SETTINGS];
+        onCollide("pumpkin", "enemy", () => {
+            if (game_over) return;
+            game_over = true;
+
+            for (let enemy of enemies) {
+                destroy(enemy);
+            }
+
+            if (localStorage.getItem("Pumpkin Roll Jumpscares") == "true") {
+                jumpscare();
+            }
+
+            create_label(520, 320, `Game Over!\nScore: ${Math.floor(score)}\nHigh Score: ${high_score}`, 48);
+
+            if (localStorage.getItem("Pumpkin Roll Jumpscares") == "true") {
+                setTimeout(jumpscare, 500);
+            }
+        })
+
+        enemy_spawn_with_check = (count) => {
+            const enemy_type = Math.random() < 0.75 ? "tombstone" : "bird";
+            for (let i = 0; i < count; i++) {
+                if (game_over) {
+                    return
+                }
+                
+                setTimeout(() => {
+                    enemies.push(spawn_enemy(enemy_type));
+                }, i * 150);
+            }
+        }
+
+        enemy_spawn_with_check(1);
+
+        pumpkin_sprite.onUpdate(() => {
+            if (game_over) return;
+            score += 60 * dt();
+
+            if (Math.floor(score) > high_score) {
+                high_score = Math.floor(score);
+                localStorage.setItem("pumpkin_roll_highscore", high_score);
+            }
+
+            score_label.text = `Score: ${Math.floor(score)} High Score: ${high_score}`;
+
+            if ((performance.now() - last_enemy_spawn) >= 1000) {
+                last_enemy_spawn = performance.now();
+                const random = Math.random();
+                if (random < 0.2) {
+                    enemy_spawn_with_check(3);           
+                }
+                else if (random < 0.5) {
+                    enemy_spawn_with_check(2);
+                }
+                else {
+                    enemy_spawn_with_check(1);
+                }
+            }
+
+            if ((isKeyDown("space") || (localStorage.getItem("Pumpkin Roll Controller Enabled") === "true" && isGamepadButtonDown("south"))) && !pumpkin_sprite.isJumping) {
+                pumpkin_sprite.vy = JUMP_VELOCITY;
+                pumpkin_sprite.isJumping = true;
+            }
+
+            if (pumpkin_sprite.isJumping) {
+                pumpkin_sprite.angle = (pumpkin_sprite.angle + dt() * 360) % 360;
+            }
+            else {
+                pumpkin_sprite.angle = (pumpkin_sprite.angle + dt() * 180) % 360;
+                return;
+            }
+            pumpkin_sprite.vy += GRAVITY * dt();
+            pumpkin_sprite.pos.y += pumpkin_sprite.vy * dt();
+
+            if (pumpkin_sprite.pos.y >= GROUND_Y) {
+                pumpkin_sprite.pos.y = GROUND_Y;
+                pumpkin_sprite.isJumping = false;
+                pumpkin_sprite.vy = 0;
+            }
+        });
+    })
 }

static/js/whack_a_pumpkin.js

@@ -0,0 +1,140 @@
+function game_info() {
+    const SETTINGS = {
+        "Graphics": {
+            "Anti-Aliasing": {"type": "bool", "default": "true"},
+            "Texture Filtering": {"type": "option", "options": ["Nearest", "Linear"], "default": "Linear"},
+            "FPS Limit": {"type": "slider", "min": 0, "max": 480, "default": 60},
+        },
+        "Sound": {
+            "Music": {"type": "bool", "default": "true"},
+            "Music Volume": {"type": "slider", "min": 0, "max": 100, "default": 50},
+        },
+        "Spooky": {
+            "Jumpscares": {"type": "bool", "default": "true"}
+        }
+    };
+
+    return ["Whack a Pumpkin", SETTINGS];
+}
+
+function spawn_pumpkin(pumpkin_spaces, used_slots) {
+    const free_slots = pumpkin_spaces.filter((_, i) => !used_slots.has(i));
+    const random_index = Math.floor(Math.random() * free_slots.length);
+    const [x, y] = free_slots[random_index];
+
+    const pumpkin_sprite = add([
+        sprite("pumpkin"),
+        pos(x, y),
+        area(),
+        "pumpkin"
+    ])
+
+    setInterval(() => {
+        destroy(pumpkin_sprite);
+    }, 600);
+    
+    return pumpkin_sprite;
+}
+
+function setup_game() {
+    loadSprite("bg", "/static/graphics/whackapumpkin.png");
+    loadSprite("pumpkin", "/static/graphics/pumpkin.png");
+
+    const pumpkin_spaces = [
+        [480, 12000],
+        [615, 12000],
+        [750, 12000],
+
+        [480, 420],
+        [615, 420],
+        [750, 420],
+
+        [480, 540],
+        [615, 540],
+        [750, 540],
+    ];
+
+    scene("play", () => {
+        const pumpkins = [];
+        const used_slots = new Set();
+        const start = performance.now();
+        
+        let game_over = false;
+        let score = 0;
+        let high_score = Number(localStorage.getItem("whackapumpkin_high_score"));
+
+        const bg = add([
+            sprite("bg"),
+            pos(420, 15),
+            scale(0.85)
+        ]);
+
+        let jumpscare_interval_id;
+        if (localStorage.getItem("Whack a Pumpkin Jumpscares") == "true") {
+            jumpscare_interval_id = setInterval(() => {
+                if (Math.random() < 0.05) {
+                    jumpscare();
+                }
+            }, 1000);
+        }
+
+        create_button(5, 5, 150, 75, "Back", color(127, 127, 127), color(0, 0, 0, 0), () => {
+            game_over = true;
+            if (localStorage.getItem("Whack a Pumpkin Jumpscares") == "true") {
+                clearInterval(jumpscare_interval_id);
+            }
+            go("main_menu");
+        })
+        
+
+        const info_label = create_label(525, 50, `Time left: 120s\nScore: ${score}\nHigh Score: ${high_score}`);
+
+        function spawn_pumpkins() {
+            pumpkins.push(spawn_pumpkin(pumpkin_spaces, used_slots));
+            if (!game_over) {
+                setTimeout(spawn_pumpkins, Math.random() * 1500);
+            }
+        }
+
+        setTimeout(spawn_pumpkins, Math.random() * 1500);
+
+        onClick("pumpkin", (pumpkin) => {
+            destroy(pumpkin);
+            if (localStorage.getItem("Whack a Pumpkin Jumpscares") == "true") {
+                if (Math.random() < 0.1) {
+                    jumpscare();
+                }
+            }
+    
+            score += 1;
+            if (score > high_score) {
+                high_score = score;
+                localStorage.setItem("whackapumpkin_high_score", high_score);
+            }
+        })
+
+        bg.onUpdate(() => {
+            const elapsed = performance.now() - start;
+
+            if ((elapsed / 1000) >= 120) {                
+                create_label(520, 12020, `Game Over!\nScore: ${score}\nHigh Score: ${high_score}`, 48);
+
+                game_over = true;
+
+                for (const pumpkin of pumpkins) {
+                    destroy(pumpkin);
+                }
+
+                destroy(bg);
+                destroy(info_label);
+                if (localStorage.getItem("Whack a Pumpkin Jumpscares") == "true") {
+                    setTimeout(jumpscare, 500);
+                }
+            }
+            else {
+                info_label.text = `Time left: ${(120 - (elapsed / 1000)).toFixed(1)}s\nScore: ${score}\nHigh Score: ${high_score}`;
+            }
+
+        })
+    });
+}

templates/countdown.jinja2

@@ -13,6 +13,9 @@
 <li class="nav-item">
     <a class="nav-link" href="/pumpkin_memory">Pumpkin Memory</a>
 </li>
+<li class="nav-item">
+    <a class="nav-link" href="/whack_a_pumpkin">Whack a Pumpkin</a>
+</li>
 <li class="nav-item">
     <a class="nav-link active" aria-current="page" href="/countdown">Countdown</a>
 </li>

templates/gamebase.jinja2

@@ -0,0 +1,33 @@
+{% extends "base.jinja2" %}
+
+{% block nav %}
+<li class="nav-item">
+    <a class="nav-link" href="/">Home</a>
+</li>
+{% block gamenav %}{% endblock %}
+<li class="nav-item">
+    <a class="nav-link" href="/countdown">Countdown</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/profile">Profile</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/logout">Logout</a>
+</li>
+{% endblock %}
+
+{% block body %}
+<div class="position-absolute top-50 start-50 translate-middle text-center">
+    <div id="game-container">
+        <canvas width="1280", height="720" id="canvas"></canvas>
+    </div>
+</div>
+<script src="/static/js/gameui.js"></script>
+<script src="/static/js/game.js"></script>
+{% block game_js %}{% endblock %}
+<script>
+window.addEventListener("DOMContentLoaded", () => {
+    start_game();
+});
+</script>
+{% endblock %}

templates/index.jinja2

@@ -12,6 +12,9 @@
 <li class="nav-item">
     <a class="nav-link" href="/pumpkin_memory">Pumpkin Memory</a>
 </li>
+<li class="nav-item">
+    <a class="nav-link" href="/whack_a_pumpkin">Whack a Pumpkin</a>
+</li>
 <li class="nav-item">
     <a class="nav-link" href="/countdown">Countdown</a>
 </li>

templates/profile.jinja2

@@ -12,6 +12,9 @@
 <li class="nav-item">
     <a class="nav-link" href="/pumpkin_memory">Pumpkin Memory</a>
 </li>
+<li class="nav-item">
+    <a class="nav-link" href="/whack_a_pumpkin">Whack a Pumpkin</a>
+</li>
 <li class="nav-item">
     <a class="nav-link" href="/countdown">Countdown</a>
 </li>
@@ -32,6 +35,12 @@
 
             {% if logged_in_account %}
                 <p class="mb-1">Logged in as: {{ username }}</p>
+                <p class="mb-1" id="pumpkin_roll_highscore">Pumpkin Roll High Score: Loading...</p>
+                <p class="mb-1" id="whackapumpkin_highscore">Whack a Pumpkin High Score: Loading...</p>
+                <p class="mb-1" id="memory_best_easy">Pumpkin Memory (Easy) Best Time: Loading...</p>
+                <p class="mb-1" id="memory_best_medium">Pumpkin Memory (Medium) Best Time: Loading...</p>
+                <p class="mb-1" id="memory_best_hard">Pumpkin Memory (Hard) Best Time: Loading...</p>
+                <p class="mb-1" id="memory_best_extrahard">Pumpkin Memory (Extra hard) Best Time: Loading...</p>
             {% endif %}
         </div>
     </div>
@@ -93,7 +102,25 @@
 </div>
 
 <script>
-setup_pumpkin("current_pumpkin_canvas", "currentclearBtn", "currentlightBtn", "change_pattern_form", "current_pattern_field", {{ grid_size }})
+setup_pumpkin("current_pumpkin_canvas", "currentclearBtn", "currentlightBtn", "change_pattern_form", "current_pattern_field", {{ grid_size }});
-setup_pumpkin("new_pumpkin_canvas", "newclearBtn", "newlightBtn", "change_pattern_form", "new_pattern_field", {{ grid_size }})
+setup_pumpkin("new_pumpkin_canvas", "newclearBtn", "newlightBtn", "change_pattern_form", "new_pattern_field", {{ grid_size }});
+
+function formatTime(time) {
+    return time !== "None" ? `${time}s` : time;
+}
+
+pumpkin_roll_highscore = localStorage.getItem("pumpkin_roll_highscore") || "None"
+whackapumpkin_highscore = localStorage.getItem("whackapumpkin_highscore") || "None"
+memory_best_easy = localStorage.getItem("memory_best_easy") || "None"
+memory_best_medium = localStorage.getItem("memory_best_medium") || "None"
+memory_best_hard = localStorage.getItem("memory_best_hard") || "None"
+memory_best_extrahard = localStorage.getItem("memory_best_extrahard") || "None"
+
+document.getElementById("pumpkin_roll_highscore").textContent = `Pumpkin Roll High Score: ${pumpkin_roll_highscore}`;
+document.getElementById("whackapumpkin_highscore").textContent = `Whack a Pumpkin High Score: ${whackapumpkin_highscore}`;
+document.getElementById("memory_best_easy").textContent = `Pumpkin Memory (Easy) Best Time: ${formatTime(memory_best_easy)}`;
+document.getElementById("memory_best_medium").textContent = `Pumpkin Memory (Medium) Best Time: ${formatTime(memory_best_medium)}`;
+document.getElementById("memory_best_hard").textContent = `Pumpkin Memory (Hard) Best Time: ${formatTime(memory_best_hard)}`;
+document.getElementById("memory_best_extrahard").textContent = `Pumpkin Memory (Extra Hard) Best Time: ${formatTime(memory_best_extrahard)}`;
 </script>
 {% endblock body %}

templates/pumpkin_memory.jinja2

@@ -1,11 +1,6 @@
-{% extends "base.jinja2" %}
+{% extends "gamebase.jinja2" %}
 
-{% block title %}Pumpkin Memory{% endblock title %}
+{% block gamenav %}
-
-{% block nav %}
-<li class="nav-item">
-    <a class="nav-link" href="/">Home</a>
-</li>
 <li class="nav-item">
     <a class="nav-link" href="/pumpkin_roll">Pumpkin Roll</a>
 </li>
@@ -13,30 +8,10 @@
     <a class="nav-link active" aria-current="page" href="/pumpkin_memory">Pumpkin Memory</a>
 </li>
 <li class="nav-item">
-    <a class="nav-link" href="/countdown">Countdown</a>
+    <a class="nav-link" href="/whack_a_pumpkin">Whack a Pumpkin</a>
-</li>
-<li class="nav-item">
-    <a class="nav-link" href="/profile">Profile</a>
-</li>
-<li class="nav-item">
-    <a class="nav-link" href="/logout">Logout</a>
 </li>
 {% endblock %}
 
-{% block body %}
+{% block title %}Pumpkin Memory{% endblock title %}
 
-<div class="position-absolute top-50 start-50 translate-middle text-center">
+{% block game_js %}<script src="/static/js/pumpkin_memory.js"></script>{% endblock %}
-    <h1>WIP!!! Not part of this week!!</h1>
-    <div id="game-container">
-        <canvas width="1280", height="720" id="canvas"></canvas>
-    </div>
-</div>
-<script src="/static/js/gameui.js"></script>
-<script src="/static/js/game.js"></script>
-<script src="/static/js/pumpkin_memory.js"></script>
-<script>
-window.addEventListener("DOMContentLoaded", () => {
-    start_game();
-});
-</script>
-{% endblock %}

templates/pumpkin_roll.jinja2

@@ -1,11 +1,6 @@
-{% extends "base.jinja2" %}
+{% extends "gamebase.jinja2" %}
 
-{% block title %}Pumpkin Roll{% endblock title %}
+{% block gamenav %}
-
-{% block nav %}
-<li class="nav-item">
-    <a class="nav-link" href="/">Home</a>
-</li>
 <li class="nav-item">
     <a class="nav-link active" aria-current="page" href="/pumpkin_roll">Pumpkin Roll</a>
 </li>
@@ -13,29 +8,10 @@
     <a class="nav-link" href="/pumpkin_memory">Pumpkin Memory</a>
 </li>
 <li class="nav-item">
-    <a class="nav-link" href="/countdown">Countdown</a>
+    <a class="nav-link" href="/whack_a_pumpkin">Whack a Pumpkin</a>
-</li>
-<li class="nav-item">
-    <a class="nav-link" href="/profile">Profile</a>
-</li>
-<li class="nav-item">
-    <a class="nav-link" href="/logout">Logout</a>
 </li>
 {% endblock %}
 
-{% block body %}
+{% block title %}Pumpkin Roll{% endblock title %}
-<div class="position-absolute top-50 start-50 translate-middle text-center">
+
-    <h1>WIP!!! Not part of this week!!</h1>
+{% block game_js %}<script src="/static/js/pumpkin_roll.js"></script>{% endblock %}
-    <div id="game-container">
-        <canvas width="1280", height="720" id="canvas"></canvas>
-    </div>
-</div>
-<script src="/static/js/gameui.js"></script>
-<script src="/static/js/game.js"></script>
-<script src="/static/js/pumpkin_roll.js"></script>
-<script>
-window.addEventListener("DOMContentLoaded", () => {
-    start_game();
-});
-</script>
-{% endblock %}

templates/whack_a_pumpkin.jinja2

@@ -0,0 +1,17 @@
+{% extends "gamebase.jinja2" %}
+
+{% block gamenav %}
+<li class="nav-item">
+    <a class="nav-link" href="/pumpkin_roll">Pumpkin Roll</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/pumpkin_memory">Pumpkin Memory</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link  active" aria-current="page" href="/whack_a_pumpkin">Whack a Pumpkin</a>
+</li>
+{% endblock %}
+
+{% block title %}Whack a Pumpkin{% endblock title %}
+
+{% block game_js %}<script src="/static/js/whack_a_pumpkin.js"></script>{% endblock %}