Merge pull request #1 from daiking1756/add_karuta

アプリ、追加ありがとうございます！
codeforkosen · Nov 17, 2023 · 5281579 · 5281579
2 parents 111d8f0 + 0c3d55a
commit 5281579
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 0 deletions.
diff --git 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/)
diff --git a/karuta.html b/karuta.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
+<title>高専かるた</title>
+</head><body>
+
+<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";
+
+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 = (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/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 {
+  text-align: center;
+}
+</style>
+
+</body>
+</html>