Add TechTacular fifty-fifty joker

src/main/resources/static/css/techtacular.css

@@ -225,6 +225,17 @@ body.tt-body {
 
 .tt-q-answers { display: grid; gap: 0.6rem; }
 
+.tt-joker-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.55rem 0.8rem;
+  margin: 0 0 0.9rem;
+}
+.tt-joker { padding: 0.42rem 0.75rem; font-size: 0.82rem; }
+.tt-joker:disabled { cursor: default; opacity: 0.62; }
+.tt-joker-note { color: var(--muted); font-size: 0.78rem; }
+
 .tt-answer {
   text-align: left;
   padding: 0.75rem 1rem;
@@ -240,6 +251,13 @@ body.tt-body {
 .tt-answer:disabled { cursor: default; }
 .tt-answer.correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
 .tt-answer.wrong   { border-color: var(--danger);  background: color-mix(in srgb, var(--danger) 14%, transparent);  color: var(--danger); }
+.tt-answer.eliminated {
+  border-color: var(--border);
+  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
+  color: var(--muted);
+  opacity: 0.62;
+  text-decoration: line-through;
+}
 
 .tt-q-feedback { margin-top: 0.9rem; font-weight: 700; min-height: 1.2rem; }
 .tt-q-feedback.correct { color: var(--success); }

src/main/resources/static/js/techtacular.js

@@ -21,6 +21,8 @@
   const qAnswers  = document.getElementById('tt-q-answers');
   const qFeedback = document.getElementById('tt-q-feedback');
   const qNext     = document.getElementById('tt-q-next');
+  const jokerBtn  = document.getElementById('tt-fifty-fifty');
+  const jokerNote = document.getElementById('tt-joker-note');
 
   const resultEl    = document.getElementById('tt-result');
   const resultScore = document.getElementById('tt-result-score');
@@ -38,7 +40,8 @@
   let timerId = null;
   let running = false;
   let current = null;      // gerade offene Kachel
-  const submitted = [];    // {questionId, answerId} für /finish
+  let jokerUsed = false;   // genau ein Joker pro Runde
+  const submitted = [];    // {questionId, answerId, hintUsed} für /finish
 
   function formatTime(s) {
     return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
@@ -100,6 +103,10 @@
     qFeedback.textContent = '';
     qFeedback.className = 'tt-q-feedback';
     qNext.hidden = true;
+    jokerBtn.disabled = jokerUsed;
+    jokerNote.textContent = jokerUsed
+      ? 'Der 50:50-Joker wurde in dieser Runde bereits eingesetzt.'
+      : 'Entfernt zwei falsche Antworten. Richtige Antwort: halbe Punkte.';
 
     qAnswers.innerHTML = '';
     state.data.answers.forEach((answer) => {
@@ -121,13 +128,13 @@
     const buttons = Array.from(qAnswers.querySelectorAll('.tt-answer'));
     buttons.forEach((b) => { b.disabled = true; });
 
-    submitted.push({ questionId: state.data.questionId, answerId });
+    submitted.push({ questionId: state.data.questionId, answerId, hintUsed: Boolean(state.hintUsed) });
 
     try {
       const res = await fetch('/api/techtacular/answer', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ questionId: state.data.questionId, answerId })
+        body: JSON.stringify({ questionId: state.data.questionId, answerId, hintUsed: Boolean(state.hintUsed) })
       });
       const data = await res.json();
 
@@ -157,6 +164,38 @@
     qNext.hidden = false;
   }
 
+  async function useFiftyFifty() {
+    if (!current || current.answered || jokerUsed) return;
+    jokerBtn.disabled = true;
+    jokerNote.textContent = 'Joker wird eingesetzt ...';
+
+    try {
+      const res = await fetch(`/api/techtacular/hint?questionId=${encodeURIComponent(current.data.questionId)}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      const removedIds = Array.isArray(data.removeAnswerIds) ? data.removeAnswerIds : [];
+      if (removedIds.length === 0) {
+        jokerNote.textContent = 'Der Joker ist fuer diese Frage nicht verfuegbar.';
+        return;
+      }
+
+      const buttons = Array.from(qAnswers.querySelectorAll('.tt-answer'));
+      current.data.answers.forEach((answer, index) => {
+        if (removedIds.includes(answer.id)) {
+          buttons[index].disabled = true;
+          buttons[index].classList.add('eliminated');
+        }
+      });
+      current.hintUsed = true;
+      jokerUsed = true;
+      jokerNote.textContent = 'Zwei falsche Antworten entfernt. Richtige Antwort: halbe Punkte.';
+    } catch (err) {
+      jokerBtn.disabled = false;
+      jokerNote.textContent = 'Joker konnte nicht geladen werden.';
+      console.error(err);
+    }
+  }
+
   function closeQuestion() {
     if (!current) return;
     const state = current;
@@ -225,7 +264,7 @@
 
   async function newGame() {
     stopTimer();
-    seconds = 0; score = 0; answeredCount = 0; current = null;
+    seconds = 0; score = 0; answeredCount = 0; current = null; jokerUsed = false;
     submitted.length = 0;
     timeEl.textContent = '0:00';
     resultEl.hidden = true;
@@ -261,6 +300,7 @@
   finishBtn.addEventListener('click', finishGame);
   cancelBtn.addEventListener('click', cancelGame);
   qNext.addEventListener('click', closeQuestion);
+  jokerBtn.addEventListener('click', useFiftyFifty);
 
   loadStats();
   newGame();

src/main/resources/templates/techtacular.html

@@ -6,7 +6,7 @@
   <title>TechTacular – SysnaptiK Neural</title>
   <link rel="stylesheet" href="/css/theme.css?v=3">
   <script src="/js/theme.js?v=4"></script>
-  <link rel="stylesheet" href="/css/techtacular.css?v=4">
+  <link rel="stylesheet" href="/css/techtacular.css?v=5">
 </head>
 <body class="tt-body">
 
@@ -50,6 +50,10 @@
       </div>
       <p class="tt-q-instruction">Antwort – finde die passende Frage:</p>
       <h2 id="tt-q-text" class="tt-q-text"></h2>
+      <div class="tt-joker-row">
+        <button type="button" id="tt-fifty-fifty" class="tt-btn tt-btn-secondary tt-joker">50:50-Joker</button>
+        <span id="tt-joker-note" class="tt-joker-note">Entfernt zwei falsche Antworten. Richtige Antwort: halbe Punkte.</span>
+      </div>
       <div id="tt-q-answers" class="tt-q-answers"></div>
       <p id="tt-q-feedback" class="tt-q-feedback"></p>
       <div class="tt-q-actions">
@@ -72,6 +76,6 @@
     </div>
   </div>
 
-  <script src="/js/techtacular.js?v=3" defer></script>
+  <script src="/js/techtacular.js?v=4" defer></script>
 </body>
 </html>