flag btn

1 files changed, 37 insertions, 13 deletions

diff --git a/static/script.js b/static/script.js
index 23ee2b2..e15dc88 100644
--- a/static/script.js
+++ b/static/script.js
@@ -2,6 +2,7 @@
 
 var currentBoard = null;
 var selected = {};
+var won = []
 
 function newGroup() {
     var categoryPoint = Math.random();
@@ -11,7 +12,6 @@ function newGroup() {
         }
         var group = category.groups[category.groups.length * Math.random() << 0]
         var clues = randomSelect(group.clues, 4)
-        console.log(category.name)
         break;
     }
 
@@ -22,10 +22,14 @@ function newGroup() {
     };
 }
 
+function first(xs) {
+    return xs[0]
+}
+
 function newNonintersectingGroup(oldGroups) {
     var group = newGroup();
     for (var oldGroup of oldGroups) {
-        var intersection = oldGroup.fullClues.filter(value => group.fullClues.includes(value));
+        var intersection = oldGroup.fullClues.map(first).filter(value => group.fullClues.map(first).includes(value));
         if (intersection.length > 0) {
             return newNonintersectingGroup(oldGroups);
         }
@@ -75,6 +79,7 @@ function clear() {
 }
 
 function consume(grp) {
+    won.push(grp)
     selected = {}
     var els = document.querySelectorAll(`[x-group="${grp}"]`);
     for (var el of els) {
@@ -84,11 +89,29 @@ function consume(grp) {
 
     document.getElementById('answers').innerHTML +=
         `<div class="answer">
-            <div class="answerline">${group.hint}</div>
-            <div class="clues">${group.clues.map(renderClue).join(', ')}</div>
+            <div class="answerline">${group.hint} <a class="flag" href="#" x-flag="${group.hint}">[flag]</a></div>
+            <div class="clues">${group.clues.map(renderAnswerClue).join('')}</div>
         </div>`;
 }
 
+document.getElementById('answers').addEventListener('click', function(evt) {
+    if (evt.target.classList.contains('flag')) {
+        evt.preventDefault();
+        let options = {
+            method: 'GET',
+            headers: {}
+        };
+
+        fetch('/flag?q=' + encodeURIComponent(evt.target.getAttribute('x-flag')), options)
+        .then(body => {
+            var el = document.createElement('span')
+            el.innerText = `flagged`
+            el.classList.add('flagged')
+            evt.target.replaceWith(el)
+        });
+    }
+});
+
 function checkGuess(selected) {
     var ans = null;
     for (var clue of Object.keys(selected)) {
@@ -102,8 +125,9 @@ function checkGuess(selected) {
     return [true, group];
 }
 
-function renderClue(clue) {
-    return clue.split('_').join(' ');
+function renderAnswerClue(clue) {
+    var s = `<details class="answerclue"><summary>${clue[0]}</summary><span class="definition">${clue[1]}</span></details>`;
+    return s
 }
 
 function serializeBoard(board) {
@@ -142,6 +166,7 @@ function startBoard(board) {
     var el = document.getElementById('board');
 
     currentBoard = board;
+    won = [];
 
     var clues = [];
     for (var [i, group] of board.entries()) {
@@ -153,17 +178,16 @@ function startBoard(board) {
     shuffle(clues);
     el.innerHTML = ``;
     for (var [i, j, clue] of clues) {
-        el.innerHTML += `<div class="box" x-group=${i} x-clue=${j}>${renderClue(clue)}</div>`;
+        el.innerHTML += `<div class="box" x-group=${i} x-clue=${j}>${clue[0]}</div>`;
     }
 }
 
 function giveUp() {
-    document.getElementById('board').innerHTML = '';
-    document.getElementById('answers').innerHTML = '';
-    consume(0);
-    consume(1);
-    consume(2);
-    consume(3);
+    for (var i = 0; i < 4; i++) {
+        if (!won.includes(i)) {
+            consume(i);
+        }
+    }
 }
 
 document.getElementById('board').addEventListener('click', function(evt) {