Add a texturebutton in UI, make buttons for pumpkin memory and a difficulty selector, no game yet

static/gameui.js

@@ -1,19 +1,14 @@
-function create_button(x, y, w, h, label_text, bg, text_color, on_click) {
+function setup_button(button, on_click, label_text, text_color, w, h) {
-    let button = add([
+    if (label_text != null) {
-        rect(w, h), 
+        button.add([
-        pos(x, y),
+            text(label_text, {
-        bg,
+                width: w / 1.5,
-        area(),
+                size: 28,
-    ]);
+            }),
-
+            text_color,
-    button.add([
+            pos(w / 2 - (label_text.length * 8), h / 2 - 18)
-        text(label_text, {
+        ]);
-            width: w / 1.5,
+    }
-            size: 28,
-        }),
-        text_color,
-        pos(w / 2 - (label_text.length * 8), h / 2 - 18)
-    ]);
 
     button.onClick(on_click);
     button.onHover(() => {
@@ -30,6 +25,26 @@ function create_button(x, y, w, h, label_text, bg, text_color, on_click) {
     return button;
 }
 
+function create_button(x, y, w, h, label_text, bg, text_color, on_click) {
+    let button = add([
+        rect(w, h), 
+        pos(x, y),
+        bg,
+        area(),
+    ]);
+    return setup_button(button, on_click, label_text, text_color, w, h);
+}
+
+function create_texturebutton(x, y, image_name, on_click) {
+    let button = add([
+        sprite(image_name), 
+        pos(x, y),
+        area(),
+    ]);
+
+    return setup_button(button, on_click);
+}
+
 function create_slider(x, y, w, min_val, max_val, initial_val, on_change) {
     const slider_height = 15;
     const handle_size = 30;

static/pumpkin_memory.js

@@ -1,12 +1,52 @@
+loadSprite("pumpkin", "/static/pumpkin.png")
+
 scene("game", (pumpkin_pairs) => {
+    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 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;
+
+    const start_x = (WIDTH - grid_width) / 2;
+    const start_y = (HEIGHT - grid_height) / 2;
+
+    let 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]];
+    }
+
+    for (let i = 0; i < arr.length; i++) {
+        let row =  Math.floor(i / cols);
+        let col = i % cols;
+
+        create_texturebutton(start_x + (col * (pumpkin_size + space_between)), start_y + (row * (pumpkin_size + space_between)), "pumpkin", () => {
+            
+        });
+    }
+
 })
 
 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", 6)], 
+        ["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", 9)],
+        ["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", 12)],
+        ["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", 15)]
+        ["Extra Hard", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("game", 20)]
     ], WIDTH / 2, HEIGHT / 8, HEIGHT / 50)
 })