csd4ni3l/loginween
1
0
Fork 0
mirror of https://github.com/csd4ni3l/loginween.git synced 2025-11-05 02:58:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
csd4ni3l
2025-11-01 18:02:38 +01:00
parent 233ab2f878
commit e7293aeb09
9 changed files with 256 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app.py
View File

@@ -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")

76
static/game.js
View File

@@ -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), () => {
localStorage.setItem(currentKey, value);
create_slider(x, y, 400, Number(settings_dict.min), Number(settings_dict.max), Number(value), (new_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)
});

221
static/pumpkin_memory.js
View File

@@ -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) => {
create_button(5, 5, 150, 75, "Back", color(127, 127, 127), color(0, 0, 0, 0), scene_lambda("main_menu"))
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"))
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;
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]];
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));
}
}
else {
arr = pumpkin_array;
}
if (revealed == null) {
revealed = [];
found_pairs = [];
start = performance.now();
}
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;
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 = [];
}
const start_x = (WIDTH - grid_width) / 2;
const start_y = (HEIGHT - grid_height) / 2;
if (revealed.length > 2) {
revealed = [];
}
if (pumpkin_pairs == found_pairs.length - 1) {
create_label(520, 320, `You win!\nTime took: ${(elapsed / 1000).toFixed(1)} s`, 48);
return;
}
let arr;
if (pumpkin_array == null) {
arr = [...Array(pumpkin_pairs).keys(), ...Array(pumpkin_pairs).keys()];
const elapsed = performance.now() - start;
const timer_label = create_label(520, 5, `Time spent: ${(elapsed / 1000).toFixed(1)} s`);
const timer_interval_id = setInterval(() => {
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) {
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`
}, 100);
const timer_label = create_label(520, 5, `Time spent: ${(elapsed / 1000).toFixed(1)} s`);
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++) {
let row = Math.floor(i / cols);
let col = i % cols;
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);
})
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;
let index = i;
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)
})
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);
})
}
}
});
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];
}

38
static/pumpkin_roll.js Normal file
View File

@@ -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];
}

3
templates/countdown.jinja2
View File

@@ -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>

3
templates/index.jinja2
View File

@@ -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>

3
templates/profile.jinja2
View File

@@ -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>

9
templates/pumpkin_memory.jinja2
View File

@@ -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 %}

41
templates/pumpkin_roll.jinja2 Normal file
View File

@@ -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 %}