Update 2025-04-13_16:26:56

2025-04-13 16:26:57 +02:00
commit e1f088f10f
2311 changed files with 422629 additions and 0 deletions
--- a/static/app.js
+++ b/static/app.js
@ -0,0 +1,88 @@
+// Simpler approach to show 3s 'Get ready...' and then start dynamic loop
+
+let lastGrid = [];
+let currentGrid = [];
+let gameStartTime = null;
+
+// Linear formula: from 3s down to 1s over 60s
+function getInterval(secondsElapsed) {
+    return Math.max(1, -secondsElapsed / 30 + 3);
+}
+
+function renderGrid(grid) {
+    const gridDiv = document.getElementById('grid');
+    gridDiv.innerHTML = '';
+    grid.forEach((num, idx) => {
+        const cell = document.createElement('button');
+        cell.textContent = num;
+        cell.onclick = () => guess(idx);
+        gridDiv.appendChild(cell);
+    });
+}
+
+function initGame() {
+    // 1) Fetch grid once
+    fetch('/get_grid')
+        .then(r => r.json())
+        .then(grid => {
+            currentGrid = [...grid];
+            renderGrid(currentGrid);
+
+            // 2) Show 'Get ready...' for 3s
+            const feedback = document.getElementById('feedback');
+            feedback.textContent = "⏳ Get ready...";
+
+            setTimeout(() => {
+                feedback.textContent = "";
+
+                // 3) Now start the game
+                lastGrid = [...currentGrid];
+                gameStartTime = Date.now();
+                startStats();
+                startDynamicLoop();
+            }, 3000);
+        })
+        .catch(err => {
+            console.error('Init fetch error:', err);
+        });
+}
+
+function startDynamicLoop() {
+    // Repeatedly fetch grid at decreasing intervals
+    function loop() {
+        const secondsElapsed = (Date.now() - gameStartTime) / 1000;
+        const nextInterval = getInterval(secondsElapsed);
+        fetchGrid();
+        setTimeout(loop, nextInterval * 1000);
+    }
+    loop();
+}
+
+function fetchGrid() {
+    fetch('/get_grid')
+        .then(r => r.json())
+        .then(grid => {
+            lastGrid = [...currentGrid];
+            currentGrid = [...grid];
+            renderGrid(currentGrid);
+        })
+        .catch(err => {
+            console.error('Fetch grid error:', err);
+        });
+}
+
+function guess(idx) {
+    const feedback = document.getElementById('feedback');
+    if (lastGrid.length === 9 && currentGrid[idx] !== lastGrid[idx]) {
+        feedback.textContent = "✅ Correct!";
+        incrementCorrect();
+    } else {
+        feedback.textContent = "❌ Try again!";
+        incrementWrong();
+    }
+    setTimeout(() => feedback.textContent = "", 1500);
+}
+
+// Kick off
+initGame();
+
--- a/static/index.html
+++ b/static/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>🔢 FlipNum</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>🔢 Guess the Changed Number!</h1>
+        <div id="stats">
+            <div id="timer">⏱️ 00:00</div>
+            <div id="score">✅ 0 | ❌ 0</div>
+        </div>
+        <div id="grid"></div>
+        <div id="feedback"></div>
+    </div>
+
+    <script src="/static/app.js"></script>
+    <script src="/static/stats.js"></script>
+</body>
+</html>
+
--- a/static/stats.js
+++ b/static/stats.js
@ -0,0 +1,28 @@
+let startTime = null;
+let correctGuesses = 0;
+let wrongGuesses = 0;
+
+function startStats() {
+    startTime = Date.now();
+    updateStats();
+    setInterval(updateStats, 1000);
+}
+
+function updateStats() {
+    const elapsed = Math.floor((Date.now() - startTime) / 1000);
+    const minutes = String(Math.floor(elapsed / 60)).padStart(2, '0');
+    const seconds = String(elapsed % 60).padStart(2, '0');
+    document.getElementById('timer').textContent = `⏱️ ${minutes}:${seconds}`;
+    document.getElementById('score').textContent = `✅ ${correctGuesses} | ❌ ${wrongGuesses}`;
+}
+
+function incrementCorrect() {
+    correctGuesses++;
+    updateStats();
+}
+
+function incrementWrong() {
+    wrongGuesses++;
+    updateStats();
+}
+
--- a/static/style.css
+++ b/static/style.css
@ -0,0 +1,41 @@
+body {
+    background-color: #282C34;
+    color: #61DAFB;
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    padding-top: 40px;
+}
+
+.container {
+    margin: auto;
+    max-width: 400px;
+}
+
+#grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    margin-top: 20px;
+}
+
+button {
+    font-size: 2em;
+    padding: 20px;
+    cursor: pointer;
+    background: #20232A;
+    border: 2px solid #61DAFB;
+    color: #61DAFB;
+    border-radius: 8px;
+    transition: background 0.2s, color 0.2s;
+}
+
+button:hover {
+    background: #61DAFB;
+    color: #20232A;
+}
+
+#feedback {
+    font-size: 1.5em;
+    margin-top: 15px;
+}
+