Make game.js more modular, add page reload warning to graphics settings and make them work, add some starting code to pumpkin roll and add it to navbar

app.py

@@ -256,4 +256,9 @@ def logout():
 def pumpkin_memory():
     return render_template("pumpkin_memory.jinja2")
 
+@app.route("/pumpkin_roll")
+@login_required
+def pumpkin_roll():
+    return render_template("pumpkin_roll.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/game.js

@@ -1,38 +1,6 @@
 const WIDTH = 1280;
 const HEIGHT = 720;
 
-const SETTINGS = {
-    "Graphics": {
-        "Anti-Aliasing": {"type": "bool", "default": true},
-        "Texture Filtering": {"type": "option", "options": ["Nearest", "Linear"], "default": "Linear"},
-        "VSync": {"type": "bool", "default": true},
-        "FPS Limit": {"type": "slider", "min": 0, "max": 480, "default": 60},
-    },
-    "Sound": {
-        "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},
-    }
-}
-
-kaplay(
-    { 
-        width: WIDTH,
-        height: HEIGHT,
-        canvas: document.getElementById("canvas"),
-        root: document.getElementById("game-container"),
-        font: "New Rocker",
-        background: "#e18888",
-        buttons: {
-            up_: {
-                keyboard: "up",
-                gamepad: "south", 
-            },
-        }
-    }
-);
-
 function change_setting(category, setting, value) {
     localStorage.setItem(setting, value);
     go("settings", category);
@@ -42,7 +10,15 @@ function show_settings(category) {
     const x = 400;
     const label_x = 50;
     const space_between = 100;
-    let y = 130;
+    let y;
+
+    if (category == "Graphics") {
+        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];
@@ -80,8 +56,8 @@ function show_settings(category) {
             });
         }
         else if (settings_dict.type == "slider") {
-            create_slider(x, y, 400, Number(settings_dict.min), Number(settings_dict.max), Number(value), () => {
+            create_slider(x, y, 400, Number(settings_dict.min), Number(settings_dict.max), Number(value), (new_value) => {
-                localStorage.setItem(currentKey, value);
+                localStorage.setItem(currentKey, new_value);
             });
         }
         
@@ -89,7 +65,33 @@ function show_settings(category) {
     }
 }
 
-function start_game(title) {
+function start_game() {
+    kaplay(
+        { 
+            width: WIDTH,
+            height: HEIGHT,
+            canvas: document.getElementById("canvas"),
+            root: document.getElementById("game-container"),
+            crisp: !localStorage.getItem("Anti-Alasing"),
+            texFilter: localStorage.getItem("Texture Filtering").toLowerCase(),
+            maxFPS: Number(localStorage.getItem("FPS Limit")),
+            font: "New Rocker",
+            background: "#e18888",
+            buttons: {
+                up: {
+                    keyboard: "up",
+                    gamepad: "south", 
+                },
+                jump: {
+                    keyboard: "space",
+                    gamepad: "a"
+                }
+            }
+        }
+    );
+
+    const [GAME_TITLE, SETTINGS] = setup_game();
+
     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)]);
         generated_button_lists = [["Back", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("main_menu")]].concat(generated_button_lists);
@@ -105,7 +107,7 @@ function start_game(title) {
     })
 
     scene("main_menu", () => {
-        create_label(WIDTH / 2 - 16 * title.length, HEIGHT / 4, title, 56);
+        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)
     });
 

static/pumpkin_memory.js

@@ -1,4 +1,18 @@
-loadSprite("pumpkin", "/static/pumpkin.png")
+function setup_game() {
+    loadSprite("pumpkin", "/static/pumpkin.png");
+    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},
+            "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},
+        },
+    };
 
     scene("game", (pumpkin_pairs, pumpkin_array, revealed, found_pairs, start) => {
         create_button(5, 5, 150, 75, "Back", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("main_menu"))
@@ -53,11 +67,6 @@ scene("game", (pumpkin_pairs, pumpkin_array, revealed, found_pairs, start) => {
             revealed = [];
         }
         
-    if (pumpkin_pairs == found_pairs.length - 1) {
-        create_label(520, 320, `You win!\nTime took: ${(elapsed / 1000).toFixed(1)} s`, 48);
-        return;
-    }
-
         const elapsed = performance.now() - start;
         const timer_label = create_label(520, 5, `Time spent: ${(elapsed / 1000).toFixed(1)} s`);
         const timer_interval_id = setInterval(() => {
@@ -65,6 +74,11 @@ scene("game", (pumpkin_pairs, pumpkin_array, revealed, found_pairs, start) => {
             timer_label.text = `Time spent: ${(elapsed / 1000).toFixed(1)} s`
         }, 100);
 
+        if (pumpkin_pairs == found_pairs.length - 1) {
+            create_label(520, 320, `You win!\nTime took: ${(elapsed / 1000).toFixed(1)} s`, 48);
+            return;
+        }
+
         for (let i = 0; i < arr.length; i++) {
             let row =  Math.floor(i / cols);
             let col = i % cols;
@@ -101,7 +115,7 @@ scene("game", (pumpkin_pairs, pumpkin_array, revealed, found_pairs, start) => {
             }
         }
 
-})
+    });
 
     scene("play", () => {
         create_label(WIDTH / 2 - 16 * "Difficulty Selector".length, HEIGHT / 8, "Difficulty Selector", 56);
@@ -111,4 +125,7 @@ scene("play", () => {
             ["Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 15)],
             ["Extra Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 20)]
         ], WIDTH / 2, HEIGHT / 8, HEIGHT / 50)
-})
+    });
+
+    return ["Pumpkin Memory", SETTINGS];
+}

static/pumpkin_roll.js

@@ -0,0 +1,38 @@
+function setup_game() {
+    loadSprite("pumpkin", "/static/pumpkin.png");
+    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},
+            "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}
+        }
+    };
+
+    scene("play", () => {
+        let pumpkin_sprite = add([
+            sprite("pumpkin"),
+            pos(50, 670),
+            anchor("center"),
+            rotate(0)
+        ])
+
+        setInterval(() => {
+            pumpkin_sprite.angle = (pumpkin_sprite.angle + dt() * 720) % 360;
+        }, 100)
+        
+        onKeyPress("jump", () => {
+
+        })
+    })
+
+    return ["Pumpkin Roll", SETTINGS];
+}

templates/countdown.jinja2

@@ -7,6 +7,9 @@
 <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>
 <li class="nav-item">
     <a class="nav-link" href="/pumpkin_memory">Pumpkin Memory</a>
 </li>

templates/index.jinja2

@@ -6,6 +6,9 @@
 <li class="nav-item">
     <a class="nav-link active" aria-current="page" href="/">Home</a>
 </li>
+<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>

templates/profile.jinja2

@@ -6,6 +6,9 @@
 <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>
 <li class="nav-item">
     <a class="nav-link" href="/pumpkin_memory">Pumpkin Memory</a>
 </li>

templates/pumpkin_memory.jinja2

@@ -1,11 +1,14 @@
 {% extends "base.jinja2" %}
 
-{% block title %}Test Game{% endblock title %}
+{% block title %}Pumpkin Memory{% endblock title %}
 
 {% 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>
 <li class="nav-item">
     <a class="nav-link active" aria-current="page" href="/pumpkin_memory">Pumpkin Memory</a>
 </li>
@@ -27,15 +30,13 @@
     <div id="game-container">
         <canvas width="1280", height="720" id="canvas"></canvas>
     </div>
-    <h1>WIP!!! Not part of this week!!</h1>
 </div>
-
 <script src="/static/gameui.js"></script>
 <script src="/static/game.js"></script>
 <script src="/static/pumpkin_memory.js"></script>
 <script>
 window.addEventListener("DOMContentLoaded", () => {
-    start_game("Pumpkin Memory");
+    start_game();
 });
 </script>
 {% endblock %}

templates/pumpkin_roll.jinja2

@@ -0,0 +1,41 @@
+{% extends "base.jinja2" %}
+
+{% block title %}Pumpkin Roll{% endblock title %}
+
+{% 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>
+<li class="nav-item">
+    <a class="nav-link" href="/pumpkin_memory">Pumpkin Memory</a>
+</li>
+<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">
+    <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/gameui.js"></script>
+<script src="/static/game.js"></script>
+<script src="/static/pumpkin_roll.js"></script>
+<script>
+window.addEventListener("DOMContentLoaded", () => {
+    start_game();
+});
+</script>
+{% endblock %}