-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathkaruta.html
99 lines (86 loc) · 3.05 KB
/
karuta.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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>