From 7d136f91d206d22f0a669a47dfdcfaf6572618cf Mon Sep 17 00:00:00 2001
From: daiking1756 <daiking1756@gmail.com>
Date: Fri, 17 Nov 2023 09:12:01 +0900
Subject: [PATCH 1/4] Copy from kosen-opendata/sample/kosen_emblem.html

---
 karuta.html | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 karuta.html
diff --git a/karuta.html b/karuta.html
new file mode 100644
index 0000000..6f12709
--- /dev/null
+++ b/karuta.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
+<title>KOSEN Emblem</title>
+</head><body>
+
+<h1>KOSEN Emblem</h1>
+<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");
+shuffle(data);
+for (const d of data) {
+  const img = new Image();
+  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}`);
+}
+</script>
+
+<div><a href=https://github.com/codeforkosen/kosen-opendata/>data and src on GitHub</a></div>
+
+<style>
+body {
+  text-align: center;
+}
+</style>
+
+</body>
+</html>

From 44cd81a63fb20258c67db7d2bc6e3ce63b1c0457 Mon Sep 17 00:00:00 2001
From: daiking1756 <daiking1756@gmail.com>
Date: Sat, 18 Nov 2023 06:09:16 +0900
Subject: [PATCH 2/4] Add karuta game

---
 karuta.html | 78 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 73 insertions(+), 5 deletions(-)

diff --git a/karuta.html b/karuta.html
index 6f12709..f76a724 100644
--- 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 {

From b6dda0990b91dfbb580693e255377a933d290b71 Mon Sep 17 00:00:00 2001
From: daiking1756 <daiking1756@gmail.com>
Date: Sat, 18 Nov 2023 06:13:42 +0900
Subject: [PATCH 3/4] Add link to karuta game in README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 198c8fa..489d5ae 100644
--- a/README.md
+++ b/README.md
@@ -5,5 +5,6 @@
 ## apps
  
 - [高専ランキング](https://codeforkosen.github.io/kosen-apps/ranking.html)
+- [高専かるた](https://codeforkosen.github.io/kosen-apps/karuta.html)
 - [福井高専カリキュラム](https://codeforkosen.github.io/kosen-apps/fukui-all.html)
 - [福井プロコン掲示板#33](https://procon.code4fukui.org/)

From 0c3d55aee10c6b9562668e8ca36abcde61e52366 Mon Sep 17 00:00:00 2001
From: daiking1756 <daiking1756@gmail.com>
Date: Sat, 18 Nov 2023 06:24:44 +0900
Subject: [PATCH 4/4] Fix indent in karuta.html

---
 karuta.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/karuta.html b/karuta.html
index f76a724..2a8da2e 100644
--- a/karuta.html
+++ b/karuta.html
@@ -31,15 +31,15 @@ <h2>御手付きの回数: <span id=wrong-count-text>0</span></h2>
   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("お疲れ様。それぞれの高専のことを覚えてくれたかな？")
-      }
+    if(wrongCount == 0) {
+    alert("素晴らしい！君は高専博士だ！")
+    } else if (wrongCount > 1 && wrongCount < 10) {
+    alert("すごい！君は高専マニアだ！")
+    } else if (wrongCount > 11 && wrongCount < 20) {
+    alert("いいね！君は高専人だ！")
+    } else {
+    alert("お疲れ様。それぞれの高専のことを覚えてくれたかな？")
+    }
   }
 }
 
