Add karuta game

codeforkosen · Nov 17, 2023 · 44cd81a · 44cd81a
1 parent 7d136f9
commit 44cd81a
Showing 1 changed file with 73 additions and 5 deletions.
diff --git a/karuta.html b/karuta.html
@@ -1,25 +1,93 @@
 <!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
-<title>KOSEN Emblem</title>
+<title>高専かるた</title>
 </head><body>
 
-<h1>KOSEN Emblem</h1>
+<h1>高専かるた</h1>
+<!-- <h2 id=question-text></h2> -->
+<h2>読み札: <span id=question-text></span></h2>
+<h2>御手付きの回数: <span id=wrong-count-text>0</span></h2>
+<button id=show-hint-button onclick=showHint()>ヒント（校章の由来）</button>
+<button id=show-answer-button onclick=showAnswer()>取札を強調</button>
+<button id=draw-karuta-button onclick=drawNextKaruta() disabled>次の読札</button>
 <main id=main></main>
 
 <script type="module">
 import { CSV } from "https://js.sabae.cc/CSV.js";
 import { shuffle } from "https://js.sabae.cc/shuffle.js";
 
-const data = await CSV.fetchJSON("../data/kosen_school_emblem.csv");
+window.showHint = () => {
+  alert(currentKaruta.origin_emblem_text);
+}
+
+window.showAnswer = () => {
+  const taregetKaruta = document.getElementById(currentKaruta.id);
+  taregetKaruta.border = 10;
+}
+
+window.drawNextKaruta = () => {
+  disableDraw = true;
+  toggleBtn();
+  const drawnKaruta = data.pop()
+  questionText.textContent = drawnKaruta.name_ja;
+  currentKaruta = drawnKaruta;
+  if (data.length == 0) {
+      if(wrongCount == 0) {
+      alert("素晴らしい！君は高専博士だ！")
+      } else if (wrongCount > 1 && wrongCount < 10) {
+      alert("すごい！君は高専マニアだ！")
+      } else if (wrongCount > 11 && wrongCount < 20) {
+      alert("いいね！君は高専人だ！")
+      } else {
+      alert("お疲れ様。それぞれの高専のことを覚えてくれたかな？")
+      }
+  }
+}
+
+const toggleBtn = () => {
+  showHintBtn.disabled = !disableDraw;
+  showAnswerBtn.disabled = !disableDraw;
+  drawKarutaBtn.disabled = disableDraw;
+}
+
+const url = "https://codeforkosen.github.io/kosen-opendata/data/kosen_school_emblem.csv";
+const data = await CSV.fetchJSON(url);
+const questionText = document.getElementById("question-text");
+const wrongCountText = document.getElementById("wrong-count-text");
+const showHintBtn = document.getElementById("show-hint-button");
+const showAnswerBtn = document.getElementById("show-answer-button");
+const drawKarutaBtn = document.getElementById("draw-karuta-button");
+let wrongCount = 0;
+let currentKaruta;
+let disableDraw = true;
 shuffle(data);
+
 for (const d of data) {
   const img = new Image();
+  img.id=d.id
   img.src = d.img_emblem;
   main.appendChild(img);
-  img.onclick = () => alert(`${d.name_ja}\n${d.name_en}\n\n校章の由来:\n${d.origin_emblem_text}\n出典:${d.origin_emblem_url}`);
+  img.onclick = (event) => {
+    alert(`${d.name_ja}\n${d.name_en}\n\n校章の由来:\n${d.origin_emblem_text}\n出典:${d.origin_emblem_url}`);
+    if (currentKaruta.id == event.target.id) {
+      alert('正解です');
+      event.target.remove();
+      disableDraw = false;
+      toggleBtn();
+    } else {
+      alert('御手付きです');
+      wrongCount ++;
+      wrongCountText.textContent = wrongCount;
+    }
+  }
 }
+
+shuffle(data);
+drawNextKaruta();
+
 </script>
 
-<div><a href=https://github.com/codeforkosen/kosen-opendata/>data and src on GitHub</a></div>
+<div><a href=https://github.com/codeforkosen/kosen-opendata/blob/main/data/kosen_school_emblem.csv/>data on GitHub</a></div>
+<div><a href=https://github.com/daiking1756/kosen-apps/blob/main/karuta.html>src on GitHub</a></div>
 
 <style>
 body {