added frustration meter game

2025-07-22 11:50:29 +02:00 · 2025-07-22 11:50:29 +02:00 · 9acc806b1b
commit 9acc806b1b
parent 75f77c14cd
1 changed files with 132 additions and 0 deletions
--- a/frustrationmeter/index.html
+++ b/frustrationmeter/index.html
@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Dev Frustration Meter</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    body {
+      font-family: sans-serif;
+      background-color: #0f172a;
+      color: white;
+    }
+    .key-indicator.active {
+      transform: scale(1.1);
+      background-color: #4f46e5;
+      box-shadow: 0 0 25px rgba(79, 70, 229, 0.7);
+      color: white;
+    }
+  </style>
+</head>
+<body class="flex flex-col items-center justify-center min-h-screen p-4 text-center">
+  <h1 class="text-4xl font-bold text-indigo-400 mb-2">Dev Frustration Meter</h1>
+  <p class="text-gray-300 mb-6 text-lg">Hold <kbd class="bg-gray-700 px-2 py-1 rounded">.</kbd> to express your frustration</p>
+
+  <div id="statement" class="bg-gray-800 p-6 rounded-lg mb-4 max-w-xl text-xl text-yellow-300 shadow">
+    <!-- Tester quote will appear here -->
+  </div>
+
+  <div id="dot-display" class="text-indigo-300 text-4xl mb-2 h-20 overflow-hidden break-words"></div>
+  <div class="text-sm text-gray-400 mb-6">Dots: <span id="dot-count">0</span></div>
+
+  <div id="result" class="text-2xl font-bold mt-4 hidden"></div>
+  <button id="restart" class="mt-6 bg-indigo-600 hover:bg-indigo-700 px-6 py-2 rounded text-white hidden">Try Another</button>
+
+  <script>
+    const statements = [
+      { text: "It works on my machine.", target: 18 },
+      { text: "Have you tried restarting?", target: 12 },
+      { text: "Looks like a you problem.", target: 25 },
+      { text: "This is a feature, not a bug.", target: 20 },
+      { text: "Can you reproduce it?", target: 10 },
+      { text: "QA approved it yesterday.", target: 15 },
+      { text: "Let's deploy on Friday evening.", target: 30 },
+      { text: "I don't see an error message.", target: 14 }
+    ];
+
+    const statementEl = document.getElementById('statement');
+    const dotDisplay = document.getElementById('dot-display');
+    const dotCountEl = document.getElementById('dot-count');
+    const resultEl = document.getElementById('result');
+    const restartBtn = document.getElementById('restart');
+
+    let gameInterval = null;
+    let currentDots = 0;
+    let isHolding = false;
+    let currentTarget = 0;
+
+    function pickStatement() {
+      const s = statements[Math.floor(Math.random() * statements.length)];
+      statementEl.textContent = `"${s.text}"`;
+      currentTarget = s.target;
+    }
+
+    function startPress() {
+      if (isHolding) return;
+      isHolding = true;
+      currentDots = 0;
+      dotDisplay.textContent = '';
+      dotCountEl.textContent = '0';
+      resultEl.classList.add('hidden');
+      restartBtn.classList.add('hidden');
+
+      gameInterval = setInterval(() => {
+        currentDots++;
+        dotDisplay.textContent += '.';
+        dotCountEl.textContent = currentDots;
+      }, 40);
+    }
+
+    function stopPress() {
+      if (!isHolding) return;
+      isHolding = false;
+      clearInterval(gameInterval);
+      judge();
+    }
+
+    function judge() {
+      const diff = Math.abs(currentTarget - currentDots);
+      let feedback = '';
+
+      if (diff === 0) feedback = "Perfect Frustration Match 😤✅";
+      else if (diff <= 3) feedback = "Nailed it 💯";
+      else if (diff <= 8) feedback = "Close enough 😅";
+      else if (currentDots > currentTarget) feedback = "Too harsh! 😬";
+      else feedback = "You went too easy... 😐";
+
+      resultEl.textContent = `${feedback} (${currentDots} vs expected ${currentTarget})`;
+      resultEl.classList.remove('hidden');
+      restartBtn.classList.remove('hidden');
+    }
+
+    function restartGame() {
+      dotDisplay.textContent = '';
+      dotCountEl.textContent = '0';
+      resultEl.textContent = '';
+      resultEl.classList.add('hidden');
+      restartBtn.classList.add('hidden');
+      pickStatement();
+    }
+
+    window.addEventListener('keydown', (e) => {
+      if (e.key === '.') {
+        e.preventDefault();
+        startPress();
+      }
+    });
+
+    window.addEventListener('keyup', (e) => {
+      if (e.key === '.') {
+        e.preventDefault();
+        stopPress();
+      }
+    });
+
+    restartBtn.addEventListener('click', restartGame);
+
+    // Start first round
+    pickStatement();
+  </script>
+</body>
+</html>