-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
264 lines (261 loc) · 20 KB
/
index.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>どうも！ • Wordleの日本語バージョンへようこそ</title>
<meta name="description" content="お題の単語を6回のトライで当ててみてください。試行錯誤のゲームです。">
<meta property="og:url" content="https://wordle-jp.netlify.app/">
<meta property="og:type" content="website">
<meta property="og:title" content="どうも！ • Wordleの日本語バージョンへようこそ">
<meta property="og:description" content="お題の単語を6回のトライで当ててみてください。試行錯誤のゲームです。">
<meta property="og:image" content="https://i.ibb.co/N2sCFJP/samune.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="https://wordle-jp.netlify.app/">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="stylesheet" href="./app.css" id="app-css">
<script defer src="./app.js" id="app-js"></script>
<script defer src="https://plausible.io/js/plausible.js" data-domain="wordle-jp.netlify.app"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<!--TODO s LiveReload-->
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>')
</script>
<!--LiveReload-->
</head>
<body>
<main>
<header>
<h1>どうも！</h1>
<h2>Wordleの日本語バージョンへようこそ</h2>
<!--TODO I don't really want this to show up <p>Wordleの日本語バージョン（ロマ字）。お題の単語を6回のトライで当ててみてください。試行錯誤のゲームです！</p>-->
<button id="showInfo" class="circled">?</button>
<button id="showSettings">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 569.613 569.614">
<path d="M371.49,563.638l113.052-65.854c5.26-3.063,9.088-8.094,10.64-13.975c1.555-5.888,0.701-12.148-2.359-17.405
l-30.769-52.807c4.789-6.524,9.083-13.115,12.972-19.918c3.893-6.799,7.405-13.84,10.606-21.275l61.114-0.221
c6.086-0.021,11.915-2.464,16.202-6.781c4.287-4.32,6.687-10.165,6.665-16.255l-0.48-130.833
c-0.024-6.089-2.464-11.919-6.784-16.206c-4.299-4.269-10.113-6.662-16.166-6.662c-0.03,0-0.062,0-0.089,0l-61.182,0.242
c-6.444-14.462-14.428-28.14-23.871-40.913l30.417-53.143c6.294-11.001,2.481-25.025-8.52-31.316L369.403,5.335
c-5.281-3.023-11.545-3.822-17.424-2.231c-5.872,1.598-10.872,5.462-13.892,10.747L307.665,67
c-15.766-1.662-31.653-1.613-47.363,0.144l-30.796-52.892c-3.063-5.263-8.094-9.091-13.975-10.646
c-5.884-1.551-12.148-0.704-17.408,2.359L85.068,71.823c-10.949,6.38-14.657,20.429-8.28,31.38l30.765,52.831
c-4.761,6.484-9.048,13.076-12.953,19.899c-3.904,6.824-7.417,13.855-10.6,21.255l-61.139,0.235
C10.187,197.472-0.046,207.785,0,220.456L0.48,351.29c0.024,6.086,2.463,11.919,6.784,16.206
c4.299,4.269,10.11,6.661,16.166,6.661c0.028,0,0.058,0,0.086,0l61.203-0.229c6.432,14.452,14.413,28.131,23.868,40.915
l-30.413,53.141c-3.023,5.284-3.825,11.548-2.231,17.423c1.597,5.872,5.462,10.872,10.747,13.896l113.535,64.977
c3.596,2.056,7.513,3.032,11.38,3.032c7.962,0,15.701-4.146,19.942-11.552l30.417-53.149c15.799,1.671,31.684,1.619,47.348-0.144
l30.799,52.89c3.066,5.26,8.094,9.088,13.978,10.643C359.967,567.552,366.23,566.705,371.49,563.638z M341.129,465.911
c-4.902-8.418-14.599-12.815-24.137-10.994c-20.588,3.935-42.174,3.999-63.128,0.202c-9.572-1.735-19.184,2.741-24.015,11.181
l-26.748,46.745l-73.694-42.18l26.75-46.741c4.832-8.439,3.819-19.006-2.521-26.371c-13.978-16.239-24.685-34.594-31.818-54.554
c-3.265-9.131-11.918-15.227-21.61-15.227c-0.027,0-0.058,0-0.085,0l-53.825,0.199l-0.315-84.937l53.819-0.205
c9.722-0.04,18.366-6.197,21.576-15.374c3.69-10.557,7.962-20.019,13.06-28.917c5.101-8.914,11.089-17.387,18.311-25.897
c6.294-7.417,7.225-17.993,2.334-26.396l-27.081-46.509l73.385-42.754l27.078,46.497c4.893,8.4,14.544,12.821,24.095,11.004
c20.716-3.911,42.317-3.978,63.189-0.19c9.557,1.753,19.189-2.742,24.019-11.178l26.753-46.744l73.697,42.179l-26.753,46.742
c-4.826,8.437-3.816,19,2.521,26.368c13.956,16.221,24.669,34.587,31.842,54.59c3.271,9.119,11.919,15.202,21.604,15.202
c0.031,0,0.062,0,0.092,0l53.789-0.214l0.315,84.927l-53.783,0.192c-9.712,0.037-18.351,6.182-21.569,15.347
c-3.746,10.654-8.023,20.131-13.082,28.975c-5.064,8.847-11.067,17.338-18.356,25.958c-6.271,7.418-7.194,17.978-2.305,26.368
l27.078,46.472l-73.391,42.749L341.129,465.911z"/>
<path d="M392.531,346.458c16.472-28.773,20.746-62.24,12.047-94.232s-29.342-58.685-58.115-75.151
c-18.761-10.74-40.05-16.417-61.562-16.417c-44.446,0-85.762,23.944-107.822,62.485c-33.994,59.404-13.327,135.39,46.071,169.386
c18.764,10.737,40.052,16.411,61.564,16.411C329.158,408.943,370.475,385.001,392.531,346.458z M352.696,323.658
c-13.902,24.293-39.955,39.385-67.985,39.385c-13.528,0-26.934-3.58-38.764-10.349c-37.433-21.426-50.456-69.312-29.033-106.751
c13.905-24.291,39.958-39.385,67.987-39.385c13.528,0,26.932,3.58,38.762,10.355c18.136,10.379,31.142,27.197,36.628,47.359
C365.771,284.435,363.075,305.524,352.696,323.658z"/>
</svg>
</button>
<button id="showStatus" class="circled">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 57.884 57.884">
<path d="M45.975,37.031c-3.049,0-5.783,1.314-7.69,3.4l-16.566-7.968c0.396-1.103,0.622-2.282,0.622-3.521
c0-1.237-0.227-2.418-0.622-3.521l16.566-7.966c1.907,2.085,4.644,3.402,7.69,3.402c5.759,0,10.429-4.669,10.429-10.428
C56.404,4.669,51.734,0,45.975,0c-5.76,0-10.429,4.669-10.429,10.429c0,0.552,0.056,1.09,0.139,1.619l-17.635,8.479
c-1.724-1.26-3.842-2.012-6.141-2.012c-5.759,0-10.428,4.668-10.428,10.425c0,5.762,4.669,10.43,10.428,10.43
c2.299,0,4.417-0.752,6.14-2.014l17.634,8.481c-0.082,0.529-0.139,1.067-0.139,1.619c0,5.76,4.67,10.428,10.43,10.428
c5.759,0,10.428-4.668,10.428-10.428C56.402,41.697,51.734,37.031,45.975,37.031z"/>
</svg>
</button>
</header>
<article class="visible">
<section id="infoPopup" class="visible">
<h2>プレイ方法</h2>
<p>
お題の単語を6回のトライで当ててみてください。試行錯誤のゲームです。単語を入力し、（エンターを押すと、）文字の色がかわります。その色はお題の単語にどれぐらい近かいかを示しています。
</p>
<p><span class="letter hit">k</span><span class="letter">i</span><span class="letter">b</span><span class="letter">u</span><span class="letter">n</span></p>
<p><b>k</b>はお題の単語の中に含まれていて、正しいマスに入っています。</p>
<p><span class="letter">k</span><span class="letter">i</span><span class="letter near">n</span><span class="letter">o</span><span class="letter">u</span></span></p>
<p><b>n</b>はお題の単語の中に含まれていますが、別のマスに当てはまります。</p>
<p><span class="letter">m</span><span class="letter miss">u</span><span class="letter">g</span><span class="letter">e</span><span class="letter">n</span></p>
<p>そして、こちらの<b>u</b>はお題の単語の中に入っていません</p></br>
<p><b>毎日新しいパズルが出題されます。</b></p>
<hr>
<p>
※このゲームは、<a href="https://twitter.com/powerlanguish">@powerlanguishさん</a>によって作られた<a href="https://www.powerlanguage.co.uk/wordle/">Wordle</a>というゲームのcloneです。このサイトを作るために、<a href="https://twitter.com/twilliability">@twilliabilityさん</a>が作ってくださった<a href="https://jealousmarkup.xyz/szofejto/">ハンガリー語バージョン</a>のコードを使わせて頂きました。
</p>
<p>
<a href="http://compling.hss.ntu.edu.sg/wnja/index.ja.html">日本語ワードネット</a>© 2009-2011 NICT, 2012-2015 Francis Bond and 2016-2017 Francis Bond, Takayuki Kuribayashi
</p>
<p>
この Web サイトは、閲覧数を匿名で確認するため、オープンソースの Plausible Analytics を使用していますが、ユーザーからデータは収集しません。詳しくは、<a href="https://plausible.io/data-policy">Plausible Data Policy</a> をご確認ください。
</p>
<hr>
<p>
連絡先
<span class="right"><a href="https://github.com/silvtal/wordle-jp">Github</a> |
<a href="mailto:[email protected]">Email</a> |
<a href="https://ko-fi.com/silvtal">Ko-Fi</a></span>
<br>
<span class="right" id="info">abab</span>
</p>
<button class="close">X</button>
</section>
<section id="settingsPopup" data-nosnippet>
<h2>オプション</h2>
<hr>
<div class="setting">
<h3>
ライト／ダーク モード
<div id="darkLightSetting" class="darkLightSelector lightMode">
<img class="moon" src="data:image/png;base64,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" alt="Dark mode">
<img class="sun" src="data:image/png;base64,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" alt="Light mode">
<span class="thumb"> </span>
</div>
</h3>
</div>
<hr>
<div class="setting" id="colorSchemeSetting">
<h3>カラースキーム</h3>
<p class="settingNote">ターコイズ／オレンジのスキームはコントラストが強く、色覚異常の方におすすめです。</p>
<label>
<input type="radio" id="colorsRedGreen" name="colors">
<span><span class="red">■</span><span class="green">■</span> 赤／緑</span>
</label>
<label>
<input type="radio" id="colorsBlueOrange" name="colors">
<span><span class="blue">■</span><span class="orange">■</span> ターコイズ／オレンジ</span>
</label>
</div>
<button class="close">X</button>
</section>
<section id="statusPopup">
<h2>ゲーム結果</h2>
<p id="statusMsg"> </p>
<div id="shareGeneral">
<div id="sharePreview"> </div>
共有
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 57.884 57.884">
<path d="M45.975,37.031c-3.049,0-5.783,1.314-7.69,3.4l-16.566-7.968c0.396-1.103,0.622-2.282,0.622-3.521
c0-1.237-0.227-2.418-0.622-3.521l16.566-7.966c1.907,2.085,4.644,3.402,7.69,3.402c5.759,0,10.429-4.669,10.429-10.428
C56.404,4.669,51.734,0,45.975,0c-5.76,0-10.429,4.669-10.429,10.429c0,0.552,0.056,1.09,0.139,1.619l-17.635,8.479
c-1.724-1.26-3.842-2.012-6.141-2.012c-5.759,0-10.428,4.668-10.428,10.425c0,5.762,4.669,10.43,10.428,10.43
c2.299,0,4.417-0.752,6.14-2.014l17.634,8.481c-0.082,0.529-0.139,1.067-0.139,1.619c0,5.76,4.67,10.428,10.43,10.428
c5.759,0,10.428-4.668,10.428-10.428C56.402,41.697,51.734,37.031,45.975,37.031z"/>
</svg>
</div>
<p>次のパズルまであと<br><span id="timeLeft">00​:00​:00</span></p>
<button class="close">X</button>
</section>
</article>
<script> // TODO s
if (localStorage.getItem("games")) {
document.getElementsByTagName("article")[0].classList.remove("visible");
document.getElementById("infoPopup").classList.remove("visible");
}
</script>
<section id="grid">
<div class="row row0">
<div class="tile tile0"></div>
<div class="tile tile1"></div>
<div class="tile tile2"></div>
<div class="tile tile3"></div>
<div class="tile tile4"></div>
</div>
<div class="row row1">
<div class="tile tile0"></div>
<div class="tile tile1"></div>
<div class="tile tile2"></div>
<div class="tile tile3"></div>
<div class="tile tile4"></div>
</div>
<div class="row row2">
<div class="tile tile0"></div>
<div class="tile tile1"></div>
<div class="tile tile2"></div>
<div class="tile tile3"></div>
<div class="tile tile4"></div>
</div>
<div class="row row3">
<div class="tile tile0"></div>
<div class="tile tile1"></div>
<div class="tile tile2"></div>
<div class="tile tile3"></div>
<div class="tile tile4"></div>
</div>
<div class="row row4">
<div class="tile tile0"></div>
<div class="tile tile1"></div>
<div class="tile tile2"></div>
<div class="tile tile3"></div>
<div class="tile tile4"></div>
</div>
<div class="row row5">
<div class="tile tile0"></div>
<div class="tile tile1"></div>
<div class="tile tile2"></div>
<div class="tile tile3"></div>
<div class="tile tile4"></div>
</div>
</section>
<section id="keyboard">
<div class="row">
<div class="spacer"> </div>
<div class="key">q</div>
<div class="key">w</div>
<div class="key">e</div>
<div class="key">r</div>
<div class="key">t</div>
<div class="key">y</div>
<div class="key">u</div>
<div class="key">i</div>
<div class="key">o</div>
<div class="key">p</div>
<div class="spacer"> </div>
</div>
<div class="row">
<div class="spacer"> </div>
<div class="key">a</div>
<div class="key">s</div>
<div class="key">d</div>
<div class="key">f</div>
<div class="key">g</div>
<div class="key">h</div>
<div class="key">j</div>
<div class="key">k</div>
<div class="key">l</div>
<div class="spacer"> </div>
</div>
<div class="row">
<div class="spacer"> </div>
<div class="key">z</div>
<div class="key">x</div>
<div class="key">c</div>
<div class="key">v</div>
<div class="key">b</div>
<div class="key">n</div>
<div class="key">m</div>
<div class="spacer"> </div>
</div>
<div class="row">
<div class="spacer"> </div>
<div class="key back">⇐</div>
<div class="key enter">↵</div>
<div class="spacer"> </div>
</div>
</section>
<aside> </aside>
</main>
</body>
</html>