git/TheMathWizard
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

modified gamecode, styling of some parts of the website, cleaned up unneeded files and code, added remember me function

Browse source
This commit is contained in:
Patryk Hegenberg 2023-01-22 18:50:14 +01:00
parent b020956466
commit 0055c8ef85
11 changed files with 176 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

4
controllers/login.php
View file

@ -8,5 +8,7 @@ $db = new Database($config['database'], $username, $password);
if (isset($_POST["submit"])) { if (isset($_POST["submit"])) {
$db->login([$_POST["username"], $_POST["password"]]); $db->login([$_POST["username"], $_POST["password"]]);
} }
if (isset($_POST["remember"])) {
setcookie("user", $_POST["username"], time() + (86400 * 30), "/");
}
require "views/login.view.php"; require "views/login.view.php";

86
scripts/game.js
View file

@ -1,7 +1,7 @@
(function (w) { (function (w) {
var playerStats = document.getElementById("playerStats").innerHTML; var playerStats = document.getElementById("playerStats").innerHTML;
function convertData(stats) { const convertData = (stats) => {
var player = {}; var player = {};
stats = stats.replace("'", "").replace("{","").replace("}",""); stats = stats.replace("'", "").replace("{","").replace("}","");
stats = stats.split(","); stats = stats.split(",");
@ -25,8 +25,8 @@
*** resources *** *** resources ***
*****************/ *****************/
// This tileset is from kenney.nl // This tileset is from 0x72
// It's the "microrogue" tileset // It's the "16x16 DungeonTileset" tileset
const tileSet = document.createElement("img"); const tileSet = document.createElement("img");
tileSet.src = "./../images/16x16DungeonTileset.png"; tileSet.src = "./../images/16x16DungeonTileset.png";
@ -60,8 +60,6 @@
height: 40, height: 40,
}; };
//const usePointer = true;
//const useArrows = true;
const touchOffsetY = -20; // move the center by this much const touchOffsetY = -20; // move the center by this much
const scaleMonitor = 3; // scale computer screens by this much const scaleMonitor = 3; // scale computer screens by this much
const turnLengthMS = 200; // shortest time between turns const turnLengthMS = 200; // shortest time between turns
@ -128,7 +126,7 @@
playerAllowedToMove: true, playerAllowedToMove: true,
}; };
function init(game) { const init = (game) => {
game.map = {}; game.map = {};
game.items = {}; game.items = {};
game.display = new ROT.Display(tileOptions); game.display = new ROT.Display(tileOptions);
@ -147,7 +145,7 @@
count = 1; count = 1;
} }
function nextStage(game, stage, stats) { const nextStage = (game, stage, stats) => {
game.map = {}; game.map = {};
game.items = {}; game.items = {};
game.display = new ROT.Display(tileOptions); game.display = new ROT.Display(tileOptions);
@ -172,7 +170,7 @@
game.engine.start();; game.engine.start();;
} }
function destroy(game) { const destroy = (game) => {
removeListeners(game); removeListeners(game);
if (game.engine) { if (game.engine) {
@ -246,13 +244,13 @@
} }
} }
function takeFreeCell(freeCells) { const takeFreeCell = (freeCells) => {
const index = Math.floor(ROT.RNG.getUniform() * freeCells.length); const index = Math.floor(ROT.RNG.getUniform() * freeCells.length);
const key = freeCells.splice(index, 1)[0]; const key = freeCells.splice(index, 1)[0];
return key; return key;
} }
function posFromKey(key) { const posFromKey = (key) => {
const parts = key.split(","); const parts = key.split(",");
const x = parseInt(parts[0]); const x = parseInt(parts[0]);
const y = parseInt(parts[1]); const y = parseInt(parts[1]);
@ -334,7 +332,7 @@
*** the player *** *** the player ***
******************/ ******************/
function makePlayer(x, y) { const makePlayer = (x, y) => {
return { return {
_x: x, _x: x,
_y: y, _y: y,
@ -350,16 +348,11 @@
}, },
}; };
} }
const checkItem = (entity) => {
function checkItem(entity) {
const key = entity._x + "," + entity._y; const key = entity._x + "," + entity._y;
if (key == Game.door) { if (key == Game.door) {
if(count < 5) { (count < 5 ? nextStage(Game, ++count, Game.player.stats) : win());
nextStage(Game, ++count, Game.player.stats); } else if (key == Game.stairs && Game.monsters.length == 0) {
} else {
win();
}
} else if (key == Game.stairs) {
nextStage(Game, ++count, Game.player.stats); nextStage(Game, ++count, Game.player.stats);
}else if (Game.items[key] == "g") { }else if (Game.items[key] == "g") {
Game.player.stats.gold += 1; Game.player.stats.gold += 1;
@ -370,13 +363,12 @@
} }
drawTile(Game, key); drawTile(Game, key);
} }
const movePlayer = (dir) => {
function movePlayer(dir) {
const p = Game.player; const p = Game.player;
return movePlayerTo(p._x + dir[0], p._y + dir[1]); return movePlayerTo(p._x + dir[0], p._y + dir[1]);
} }
function movePlayerTo(x, y) { const movePlayerTo = (x, y) => {
const p = Game.player; const p = Game.player;
const newKey = x + "," + y; const newKey = x + "," + y;
@ -453,14 +445,14 @@
const map = Game.map; const map = Game.map;
const display = Game.display; const display = Game.display;
const passableCallback = function (x, y) { const passableCallback = (x, y) => {
return walkable.indexOf(map[x + "," + y]) != -1; return walkable.indexOf(map[x + "," + y]) != -1;
}; };
const astar = new ROT.Path.AStar(p._x, p._y, passableCallback, { const astar = new ROT.Path.AStar(p._x, p._y, passableCallback, {
topology: 4, topology: 4,
}); });
const path = []; const path = [];
const pathCallback = function (x, y) { const pathCallback = (x, y) => {
path.push([x, y]); path.push([x, y]);
}; };
astar.compute(m._x, m._y, pathCallback); astar.compute(m._x, m._y, pathCallback);
@ -489,7 +481,7 @@
} }
} }
function playerAt(x, y) { const playerAt = (x, y) => {
return Game.player && Game.player._x == x && Game.player._y == y return Game.player && Game.player._x == x && Game.player._y == y
? Game.player ? Game.player
: null; : null;
@ -520,12 +512,8 @@
/****************************** /******************************
*** combat/win/lose events *** *** combat/win/lose events ***
******************************/ ******************************/
function checkSolution(solution, answer) { const checkSolution = (solution, answer) => {
if (solution == answer) { return solution == answer;
return true;
} else {
return false;
}
} }
async function setupButtons(answerValue) { async function setupButtons(answerValue) {
@ -544,8 +532,7 @@
} }
if (random1 < 1) { if (random1 < 1) {
random1 = 1 + randomValue(0,2); random1 = 1 + randomValue(0,2);
} } else if (random2 < 1) {
if (random2 < 1) {
random2 = 1 + randomValue(0, 2); random2 = 1 + randomValue(0, 2);
} }
if (randomVar === 1) { if (randomVar === 1) {
@ -613,7 +600,7 @@
Game.engine.unlock(); Game.engine.unlock();
} }
function win() { const win = () => {
Game.engine.lock(); Game.engine.lock();
Game.player.stats.xp += 10; Game.player.stats.xp += 10;
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
@ -626,7 +613,7 @@
showScreen("win"); showScreen("win");
} }
function lose() { const lose = () => {
Game.engine.lock(); Game.engine.lock();
const p = Game.player; const p = Game.player;
p.character = "T"; p.character = "T";
@ -650,7 +637,7 @@
const $$ = document.querySelectorAll.bind(document); const $$ = document.querySelectorAll.bind(document);
NodeList.prototype.forEach = Array.prototype.forEach; NodeList.prototype.forEach = Array.prototype.forEach;
function resetCanvas(el) { const resetCanvas = (el) => {
$("#canvas").innerHTML = ""; $("#canvas").innerHTML = "";
$("#canvas").appendChild(el); $("#canvas").appendChild(el);
window.onkeydown = keyHandler; window.onkeydown = keyHandler;
@ -658,7 +645,7 @@
showScreen("game"); showScreen("game");
} }
function rescale(x, y, game) { const rescale = (x, y, game) => {
const c = $("canvas"); const c = $("canvas");
const scale = scaleMonitor; const scale = scaleMonitor;
const offset = game.touchScreen ? touchOffsetY : 0; const offset = game.touchScreen ? touchOffsetY : 0;
@ -689,7 +676,7 @@
} }
} }
function removeListeners(game) { const removeListeners = (game) => {
if (game.engine) { if (game.engine) {
game.lastArrow = null; game.lastArrow = null;
clearInterval(game.arrowInterval); clearInterval(game.arrowInterval);
@ -703,7 +690,7 @@
} }
} }
function showScreen(which, ev) { const showScreen = (which, ev) => {
ev && ev.preventDefault(); ev && ev.preventDefault();
const el = $("#" + which); const el = $("#" + which);
const actionbutton = $("#" + which + ">.action"); const actionbutton = $("#" + which + ">.action");
@ -720,11 +707,13 @@
} }
} }
function setEndScreenValues(xp, gold) { const setEndScreenValues = (xp, gold) => {
$$(".xp-stat").forEach((el) => (el.textContent = Math.floor(xp))); $$(".xp-stat").forEach((el) => (el.textContent = Math.floor(xp)));
$$(".gold-stat").forEach((el) => (el.textContent = gold)); $$(".gold-stat").forEach((el) => (el.textContent = gold));
statsOfPlayer["coins"] += gold; statsOfPlayer["coins"] += gold;
statsOfPlayer["username"] = Game.player.name.trim().replace('"',''); statsOfPlayer["username"] = Game.player.name.trim().replace('"','');
if ((statsOfPlayer['xp'] + xp) > 150) { if ((statsOfPlayer['xp'] + xp) > 150) {
statsOfPlayer["level"] = Number(statsOfPlayer["level"]) + 1; statsOfPlayer["level"] = Number(statsOfPlayer["level"]) + 1;
statsOfPlayer["xp"] += xp; statsOfPlayer["xp"] += xp;
@ -733,6 +722,7 @@
statsOfPlayer["level"] = Number(statsOfPlayer["level"]); statsOfPlayer["level"] = Number(statsOfPlayer["level"]);
statsOfPlayer["xp"] += xp; statsOfPlayer["xp"] += xp;
} }
var json = JSON.stringify(statsOfPlayer); var json = JSON.stringify(statsOfPlayer);
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open("POST", "/updateData", true); xhr.open("POST", "/updateData", true);
@ -742,11 +732,10 @@
console.log(this.responseText); console.log(this.responseText);
} }
} }
console.log(json);
xhr.send(json); xhr.send(json);
} }
function renderStats(stats) { const renderStats = (stats) => {
const st = $("#hud"); const st = $("#hud");
st.innerHTML = ""; st.innerHTML = "";
for (let s in stats) { for (let s in stats) {
@ -754,7 +743,7 @@
} }
} }
function battleMessage(messages) { const battleMessage = (messages) => {
const components = messages.reduce(function (msgs, m) { const components = messages.reduce(function (msgs, m) {
return msgs return msgs
.concat( .concat(
@ -768,7 +757,7 @@
return el("span", {}, components); return el("span", {}, components);
} }
function toast(message) { const toast = (message) => {
const m = $("#message"); const m = $("#message");
if ( if (
Game.scheduler._current == Game.player || Game.scheduler._current == Game.player ||
@ -785,7 +774,7 @@
} }
} }
function hideToast(instant) { const hideToast = (instant) => {
const m = $("#message"); const m = $("#message");
if (instant) { if (instant) {
m.classList.remove("show"); m.classList.remove("show");
@ -801,7 +790,7 @@
} }
} }
function el(tag, attrs, children) { const el = (tag, attrs, children) => {
const node = document.createElement(tag); const node = document.createElement(tag);
for (a in attrs) { for (a in attrs) {
node[a] = attrs[a]; node[a] = attrs[a];
@ -816,12 +805,12 @@
return node; return node;
} }
function attach(node, el) { const attach = (node, el) => {
node.appendChild(el); node.appendChild(el);
return el; return el;
} }
function rmel(node) { const rmel = (node) => {
node.parentNode.removeChild(node); node.parentNode.removeChild(node);
} }
@ -831,7 +820,6 @@
function keyHandler(ev) { function keyHandler(ev) {
const code = ev.keyCode; const code = ev.keyCode;
console.log(code);
if (code == 187 || code == 189) { if (code == 187 || code == 189) {
ev.preventDefault(); ev.preventDefault();
return; return;

30
scripts/web.js
View file

@ -1,30 +0,0 @@
!(function () {
const e = document,
t = e.documentElement,
n = e.body,
i = e.getElementById("lights-toggle"),
s = (window.sr = ScrollReveal());
function a() {
let e = i.parentNode.querySelector(".label-text");
i.checked
//? (n.classList.remove("lights-off"), e && (e.innerHTML = "dark"))
? (n.classList.add("lights-off"), e && (e.innerHTML = "light"))
: (n.classList.add("lights-off"), e && (e.innerHTML = "light"));
}
t.classList.remove("no-js"),
t.classList.add("js"),
window.addEventListener("load", function () {
n.classList.add("is-loaded");
}),
n.classList.contains("has-animations") &&
window.addEventListener("load", function () {
s.reveal(".feature", {
duration: 600,
distance: "20px",
easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
origin: "right",
viewFactor: 0.2,
});
}),
i && (window.addEventListener("load", a), i.addEventListener("change", a));
})();

26
styles/style.css
View file

@ -497,6 +497,32 @@ main {
text-align: center; text-align: center;
background-color: #3f2a34; background-color: #3f2a34;
} }
.learn {
height: 1000px;
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: space-between;
text-align: center;
align-items: flex-start;
background-color: #3f2a34;
border-radius: 5px;
box-shadow: #3f2a34;
}
.learnContainer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 auto;
margin-top: 20px;
height: 150px;
background-color: #2e1e26;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 4px #433e4c
}
.profile { .profile {
height: 1200px; height: 1200px;
display: flex; display: flex;

2
views/game.view.php
View file

@ -87,7 +87,7 @@
<a href="https://opengameart.org/content/spinning-pixel-coin-0" <a href="https://opengameart.org/content/spinning-pixel-coin-0"
target="_blank">irmirx</a></li> target="_blank">irmirx</a></li>
<li>Parts of the Gamelogic and Design by <li>Parts of the Gamelogic and Design by
<a href="http://roguebasin.com/index.php/Roguelike_Browser_Boilerplate">chr15m</a</li> <a href="http://roguebasin.com/index.php/Roguelike_Browser_Boilerplate" target="_blank">chr15m</a></li>
</ul> </ul>
</div> </div>
<button class="nes-btn is-success action">Ok</button> <button class="nes-btn is-success action">Ok</button>

8
views/index.view.php
View file

@ -29,7 +29,7 @@
<div class="feature is-revealing"> <div class="feature is-revealing">
<div class="feature-inner"> <div class="feature-inner">
<div class="feature-icon"> <div class="feature-icon">
<img class="asset-dark" src="./images/weapon_sword_ruby.png" alt="Feature 01"> <img src="./images/weapon_sword_ruby.png" alt="Feature 01">
</div> </div>
<div class="feature-content"> <div class="feature-content">
<h3 class="feature-title mt-0">Immer neue Level</h3> <h3 class="feature-title mt-0">Immer neue Level</h3>
@ -40,7 +40,7 @@
<div class="feature is-revealing"> <div class="feature is-revealing">
<div class="feature-inner"> <div class="feature-inner">
<div class="feature-icon"> <div class="feature-icon">
<img class="asset-dark" src="./images/monster_imp.png" alt="Feature 02"> <img src="./images/monster_imp.png" alt="Feature 02">
</div> </div>
<div class="feature-content"> <div class="feature-content">
<h3 class="feature-title mt-0">Angepasste Schwierigkeit</h3> <h3 class="feature-title mt-0">Angepasste Schwierigkeit</h3>
@ -51,7 +51,7 @@
<div class="feature is-revealing"> <div class="feature is-revealing">
<div class="feature-inner"> <div class="feature-inner">
<div class="feature-icon"> <div class="feature-icon">
<img class="asset-dark" src="./images/npc_knight_green.png" alt="Feature 03"> <img src="./images/npc_knight_green.png" alt="Feature 03">
</div> </div>
<div class="feature-content"> <div class="feature-content">
<h3 class="feature-title mt-0">Fokus auf das was zählt</h3> <h3 class="feature-title mt-0">Fokus auf das was zählt</h3>
@ -62,7 +62,7 @@
<div class="feature is-revealing"> <div class="feature is-revealing">
<div class="feature-inner"> <div class="feature-inner">
<div class="feature-icon"> <div class="feature-icon">
<img class="asset-dark" src="./images/monster_necromancer.png" alt="Feature 04"> <img src="./images/monster_necromancer.png" alt="Feature 04">
</div> </div>
<div class="feature-content"> <div class="feature-content">
<h3 class="feature-title mt-0">Lernfortschritt immer im Blick</h3> <h3 class="feature-title mt-0">Lernfortschritt immer im Blick</h3>

208
views/learn.view.php
View file

@ -1,113 +1,107 @@
<?php require('partials/head.php') ?> <?php require('partials/head.php') ?>
<?php require('partials/nav.php') ?> <?php require('partials/nav.php') ?>
<div class="isolate bg-white my-10"> <main style="background-color: #3f2a34;">
<main> <div class="container learn">
<div class="relative px-6 lg:px-8 min-h-screen">
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
<div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 gap-5">
<!--Card 1-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 1</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 2-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 2</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 3-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 3</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 4-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 4</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 5-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 5</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 6-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 6</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 7-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 7</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 8-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 8</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 9-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 9</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 10-->
<div class="nes-container rounded ">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-center">1 x 10</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary inline-block px-6 py-2.5 ">Los geht's</button>
</a>
</div>
</div>
<!--Card 1-->
<div class="learnContainer">
<div>
<div>1 x 1</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary">Los geht's</button>
</a>
</div> </div>
</div> </div>
<!--Card 2-->
<div class="learnContainer">
<div class="px-6 py-4">
<div>1 x 2</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary">Los geht's</button>
</a>
</div>
</div>
<!--Card 3-->
<div class="learnContainer">
<div>
<div>1 x 3</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary">Los geht's</button>
</a>
</div>
</div>
<!--Card 4-->
<div class="learnContainer">
<div>
<div>1 x 4</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary">Los geht's</button>
</a>
</div>
</div>
<!--Card 5-->
<div class="learnContainer">
<div>
<div>1 x 5</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary">Los geht's</button>
</a>
</div>
</div>
<!--Card 6-->
<div class="learnContainer">
<div>
<div>1 x 6</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary">Los geht's</button>
</a>
</div>
</div>
<!--Card 7-->
<div class="learnContainer">
<div">
<div>1 x 7</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary">Los geht's</button>
</a>
</div>
<!--Card 8-->
<div class="learnContainer">
<div>
<div>1 x 8</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary">Los geht's</button>
</a>
</div>
</div> </div>
</main>
<?php require('partials/footer.php') ?> <!--Card 9-->
<div class="learnContainer">
<div>
<div>1 x 9</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary">Los geht's</button>
</a>
</div>
</div>
<!--Card 10-->
<div class="learnContainer">
<div>
<div>1 x 10</div>
<a href="/1x1">
<button type="button" class="nes-btn is-primary">Los geht's</button>
</a>
</div>
</div>
</div>
</main>
<?php require('partials/footer.php') ?>

2
views/login.view.php
View file

@ -19,7 +19,7 @@
</div> </div>
<div class="container"> <div class="container">
<label> <label>
<input type="checkbox" class="nes-checkbox is-dark" /> <input type="checkbox" name="remember" class="nes-checkbox is-dark" />
<span>Angemeldet bleiben</span> <span>Angemeldet bleiben</span>
</label> </label>
<div> <div>

1
views/partials/footer.php
View file

@ -12,6 +12,5 @@
</footer> </footer>
</div> </div>
<script src="./../scripts/web.js"></script>
</body> </body>
</html> </html>

2
views/partials/nav.php
View file

@ -1,6 +1,6 @@
<body class="is-boxed"> <body class="is-boxed">
<div class="body-wrap boxed-container"> <div class="body-wrap boxed-container">
<header class="site-header has-bottom-divider"> <header class="site-header">
<div class="container"> <div class="container">
<nav> <nav>
<div class="site-header-inner"> <div class="site-header-inner">

2
views/profile.view.php
View file

@ -17,7 +17,7 @@
<h3>Was möchtest du tun?</h3> <h3>Was möchtest du tun?</h3>
</div> </div>
<div> <div>
<!--<a href="/learn" class="<?= urlIs("/learn") ?> nes-btn">Lernen</a>--> <a href="/learn" class="<?= urlIs("/learn") ?> nes-btn">Lernen</a>
<a href="/game" class="<?= urlIs("/game") ?> nes-btn">Üben</a> <a href="/game" class="<?= urlIs("/game") ?> nes-btn">Üben</a>
</div> </div>
</div> </div>