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,114 +1,131 @@
-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) => {
+    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"))
+        create_button(5, 5, 150, 75, "Back", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("main_menu"))
 
-    const total = pumpkin_pairs * 2;
+        const total = pumpkin_pairs * 2;
-    const pumpkin_size = 100;
+        const pumpkin_size = 100;
-    const space_between = 10;
+        const space_between = 10;
-    
+        
-    let cols;
+        let cols;
-    switch (pumpkin_pairs) {
+        switch (pumpkin_pairs) {
-        case 5: cols = 5; break; 
+            case 5: cols = 5; break; 
-        case 10: cols = 4; break;
+            case 10: cols = 4; break;
-        case 15: cols = 5; break;
+            case 15: cols = 5; break;
-        case 20: cols = 10; break;
+            case 20: cols = 10; break;
-        default: cols = Math.ceil(Math.sqrt(pumpkin_pairs * 2));
+            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;
-
-    const start_x = (WIDTH - grid_width) / 2;
-    const start_y = (HEIGHT - grid_height) / 2;
-
-    let arr;
-    if (pumpkin_array == null) {
-        arr = [...Array(pumpkin_pairs).keys(), ...Array(pumpkin_pairs).keys()];
-
-        for (let i = arr.length - 1; i > 0; i--) {
-            const j = Math.floor(Math.random() * (i + 1));
-            [arr[i], arr[j]] = [arr[j], arr[i]];
         }
-    }
-    else {
-        arr = pumpkin_array;
-    }
 
-    if (revealed == null) {
+        const rows = Math.ceil(total / cols);
-        revealed = [];
+        const grid_width = cols * (pumpkin_size + space_between) - space_between;
-        found_pairs = [];
+        const grid_height = rows * (pumpkin_size + space_between) - space_between;
-        start = performance.now();
-    }
 
-    let found_pair = null;
+        const start_x = (WIDTH - grid_width) / 2;
-    if (arr[revealed[0]] == arr[revealed[1]] && !found_pairs.includes(arr[revealed[0]])) {
+        const start_y = (HEIGHT - grid_height) / 2;
-        found_pair = arr[revealed[0]];
-        found_pairs.push(arr[revealed[0]]);
-        revealed = [];
-    }
 
-    if (revealed.length > 2) {
+        let arr;
-        revealed = [];
+        if (pumpkin_array == null) {
-    }
+            arr = [...Array(pumpkin_pairs).keys(), ...Array(pumpkin_pairs).keys()];
-    
-    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;
+            for (let i = arr.length - 1; i > 0; i--) {
-    const timer_label = create_label(520, 5, `Time spent: ${(elapsed / 1000).toFixed(1)} s`);
+                const j = Math.floor(Math.random() * (i + 1));
-    const timer_interval_id = setInterval(() => {
+                [arr[i], arr[j]] = [arr[j], arr[i]];
+            }
+        }
+        else {
+            arr = pumpkin_array;
+        }
+
+        if (revealed == null) {
+            revealed = [];
+            found_pairs = [];
+            start = performance.now();
+        }
+
+        let found_pair = null;
+        if (arr[revealed[0]] == arr[revealed[1]] && !found_pairs.includes(arr[revealed[0]])) {
+            found_pair = arr[revealed[0]];
+            found_pairs.push(arr[revealed[0]]);
+            revealed = [];
+        }
+
+        if (revealed.length > 2) {
+            revealed = [];
+        }
+        
         const elapsed = performance.now() - start;
-        timer_label.text = `Time spent: ${(elapsed / 1000).toFixed(1)} s`
+        const timer_label = create_label(520, 5, `Time spent: ${(elapsed / 1000).toFixed(1)} s`);
-    }, 100);
+        const timer_interval_id = setInterval(() => {
+            const elapsed = performance.now() - start;
+            timer_label.text = `Time spent: ${(elapsed / 1000).toFixed(1)} s`
+        }, 100);
 
-    for (let i = 0; i < arr.length; i++) {
+        if (pumpkin_pairs == found_pairs.length - 1) {
-        let row =  Math.floor(i / cols);
+            create_label(520, 320, `You win!\nTime took: ${(elapsed / 1000).toFixed(1)} s`, 48);
-        let col = i % cols;
+            return;
-        let index = i;
-
-        if (revealed.includes(i)) {
-            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);
-                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);
-                        }
-                        else {
-                            destroy(sprite);
-                        }
-                    });
-                });
-            })
-        } else if (found_pairs.includes(arr[i])) {
-            const sprite = create_sprite(start_x + col * (pumpkin_size + space_between), start_y + row * (pumpkin_size + space_between), "pumpkin");
-            sprite.opacity = 0.5;
-            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);
-        } else {
-            const btn = create_texturebutton(start_x + col * (pumpkin_size + space_between), start_y + row * (pumpkin_size + space_between), "pumpkin", () => {
-                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);
-            })
         }
-    }
 
-})
+        for (let i = 0; i < arr.length; i++) {
+            let row =  Math.floor(i / cols);
+            let col = i % cols;
+            let index = i;
 
-scene("play", () => {
+            if (revealed.includes(i)) {
-    create_label(WIDTH / 2 - 16 * "Difficulty Selector".length, HEIGHT / 8, "Difficulty Selector", 56);
+                const sprite = create_sprite(start_x + col * (pumpkin_size + space_between), start_y + row * (pumpkin_size + space_between), "pumpkin");
-    vertical_buttons(WIDTH / 4, HEIGHT / 4, [
+                sprite.scale = 1;
-        ["Easy", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 5)], 
+                tween(sprite.scale, 0, 0.2, (val) => sprite.scale = val).then(() => {
-        ["Medium", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 10)],
+                    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);
-        ["Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 15)],
+                    tween(sprite.scale, 1, 0.2, (val) => sprite.scale = val).then(() => {
-        ["Extra Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 20)]
+                        wait(0.5, () => {
-    ], WIDTH / 2, HEIGHT / 8, HEIGHT / 50)
+                            if (found_pair == null) {
-})
+                                clearInterval(timer_interval_id);
+                                go("game", pumpkin_pairs, arr, [], found_pairs, start);
+                            }
+                            else {
+                                destroy(sprite);
+                            }
+                        });
+                    });
+                })
+            } else if (found_pairs.includes(arr[i])) {
+                const sprite = create_sprite(start_x + col * (pumpkin_size + space_between), start_y + row * (pumpkin_size + space_between), "pumpkin");
+                sprite.opacity = 0.5;
+                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);
+            } else {
+                const btn = create_texturebutton(start_x + col * (pumpkin_size + space_between), start_y + row * (pumpkin_size + space_between), "pumpkin", () => {
+                    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);
+                })
+            }
+        }
+
+    });
+
+    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)], 
+            ["Medium", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 10)],
+            ["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 %}