-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
225 lines (196 loc) · 11.3 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ワンナイト人狼 サポートツール</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link href="main.css" media="all" rel="stylesheet" />
</head>
<body>
<div class="header">
<h1>ワンナイト人狼 サポートツール</h1>
</div>
<div class="gettingDark">
<form class="pure-form" name="gettingDarkForm">
<fieldset>
<strong>ノーマル:</strong>
<label for="cards-seer"><input type="checkbox" id="cards-seer" name="cards" value="seer" /> 占い師(墓地も選べる)</label>
<label for="cards-seer-same-witch"><input type="checkbox" id="cards-seer-same-witch" name="cards" value="seerSameWitch" /> 占い師(墓地を選べない)</label>
<label for="cards-werewolf"><input type="checkbox" id="cards-werewolf" name="cards" value="werewolf" /> 人狼</label>
<label for="cards-phantom-thief"><input type="checkbox" id="cards-phantom-thief" name="cards" value="phantomThief" /> 怪盗</label>
</fieldset>
<fieldset>
<strong>モンスターver:</strong>
<label for="cards-gj-hunter"><input type="checkbox" id="cards-gj-hunter" name="cards" value="gjHunter" /> GJハンター</label>
<label for="cards-lil-witch"><input type="checkbox" id="cards-lil-witch" name="cards" value="lilWitch" /> 魔女っこ</label>
<label for="cards-wolf-king"><input type="checkbox" id="cards-wolf-king" name="cards" value="wolfKing" /> 大狼</label>
<label for="cards-zombie"><input type="checkbox" id="cards-zombie" name="cards" value="zombie" /> ゾンビ</label>
<label for="cards-vampire"><input type="checkbox" id="cards-vampire" name="cards" value="vampire" /> 吸血鬼</label>
</fieldset>
<p>
<label>カウント</label>
<select id="countupSelect">
<option>5</option>
<option>8</option>
<option selected="selected">10</option>
<option>12</option>
</select>
</p>
<button class="button-xlarge pure-button" id="gettingDarkButton">夜になります</button>
</form>
</div>
<div class="detail">
<p><a href="http://1nite-jinro.strikingly.com/">ワンナイト人狼</a>を遊んでいて、</p>
<ul>
<li>マスターが狼になって顔を上げたら、声の響きで正体がバレてしまった</li>
<li>マスターが声を出すタイミングに気をとられて、占い師や怪盗の仕事に集中できない</li>
</ul>
<p>こんなこまった事態があったので、サポートツールを作りました。</p>
<p>使用するカードを選択して「夜になります」ボタンを押すと、自動で文章を読み上げ始めますので、後は指示に従ってください。</p>
<p>Web Speech API を利用しています。<br/>
iOS Safari でしか動作確認していません。</p>
<p><b>2016-07-19:</b>
モンスターverを買ったので、モンスターverでも遊べるようにしました。<br />
読み上げ前に使うカードを選択してください。</p>
</div>
<div class="footer">
<p>オススメ</p>
<p>
<a href="http://www.amazon.co.jp/gp/product/B00DS4125C/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=B00DS4125C&linkCode=as2&tag=onw-support-22"><img border="0" src="http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B00DS4125C&Format=_SL110_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=onw-support-22" ></a><img src="http://ir-jp.amazon-adsystem.com/e/ir?t=onw-support-22&l=as2&o=9&a=B00DS4125C" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a href="http://www.amazon.co.jp/gp/product/B00YM7IRXE/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=B00YM7IRXE&linkCode=as2&tag=onw-support-22"><img border="0" src="http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B00YM7IRXE&Format=_SL110_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=onw-support-22" ></a><img src="http://ir-jp.amazon-adsystem.com/e/ir?t=onw-support-22&l=as2&o=9&a=B00YM7IRXE" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a href="http://www.amazon.co.jp/gp/product/B00Q2GME6Y/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=B00Q2GME6Y&linkCode=as2&tag=onw-support-22"><img border="0" src="http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B00Q2GME6Y&Format=_SL110_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=onw-support-22" ></a><img src="http://ir-jp.amazon-adsystem.com/e/ir?t=onw-support-22&l=as2&o=9&a=B00Q2GME6Y" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
</p>
<p><a type="amzn" search="ワンナイト人狼">ワンナイト人狼</a></p>
<p>
ワンナイト人狼の iPhone アプリはカードがなくても遊べて、進行も自動なので、困ったことにはならないですね。<br/>
<a href="https://geo.itunes.apple.com/jp/app/wannaito-ren-langwo-zui-di3renno/id886948262?mt=8" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:165px;height:40px;"></a>
</p>
<p>
でも、顔を上げてカードをめくったり入れ替えたりしたいんです。<br/>
「カードの向きが変わってる」とか「隣の人が動いた」とか言えるのが対面人狼の面白いところかなーと思ってます。
</p>
</div>
<script>
var btn = document.getElementById('gettingDarkButton');
var buildSynthesJP = function(text) {
var synthes = new SpeechSynthesisUtterance(text);
synthes.lang = "ja-JP"
synthes.rate = 1.1;
synthes.pitch = 1;
return synthes;
};
var speakJP = function(text) {
speechSynthesis.speak(buildSynthesJP(text));
};
var seeds = {
seer: [
[ 8000, '占い師は目を覚まし、誰か一人、または、墓地のカード2枚のいずれかを選び、占って下さい。' ]
],
seerSameWitch: [
[ 5000, '占い師は目を覚まし、誰か一人を選び占ってください。' ]
],
werewolf: [
[ 5000, 'じんろうは目を覚まし、じんろう同士、仲間を確認してください。' ]
],
phantomThief: [
[ 7000, '怪盗は目を覚まし、誰かの心を盗んで下さい。交換後のカードの確認を忘れずに。' ]
],
gjHunter: [
[ 8000, 'グッ、ジョブ、ハンターは目を覚まし、墓地にあるカードを1枚選んで、ハントしてください。中身は見ません。' ]
],
lilWitch: [
[ 6000, '魔女っこは目を覚まし、誰か一人を選び占ってください。墓地は選べません。' ]
],
wolfKing: [
[ 6000, 'おおおおかみは目を覚まし、仲間をみつけ、墓地のカードをすべて確認してください。' ]
],
zombie: [
[ 10000, 'ゾンビは目を覚まし、墓地のカードを一枚選び、自分のカードを捨ててください。新しいカードを確認して、その役割の仕事を行って下さい。' ]
],
vampire: [
[ 9000, '吸血鬼は目を覚まし、自分のカードとほかのカードを交換してください。交換したカードの内容を忘れずに確認してください。' ]
],
finish: [
[ 4000, '顔を伏せてください。' ]
],
afterDark: [
[ 3000, '夜になりました。みなさん、顔を伏せて机を軽く叩いてください。' ]
],
morning: [
[ 2000, '朝になりました。みなさん、目覚めて顔をあげましょう。' ]
],
countup: [
[ 1200, 'いち' ],
[ 1200, 'にい' ],
[ 1200, 'さん' ],
[ 1200, 'よん' ],
[ 1200, 'ごお' ],
[ 1200, 'ろく' ],
[ 1200, 'なな' ],
[ 1200, 'はち' ],
[ 1200, 'きゅう' ],
[ 1200, 'じゅう' ],
]
}
var nextSpeech = function(scenario, i) {
if (scenario[i] == undefined) return;
console.log(scenario[i]);
var time = scenario[i][0];
var text = scenario[i][1];
speakJP(text);
setTimeout(function(i) {
nextSpeech(scenario, i + 1);
}, time, i);
};
var buildScenario = function(countup, cards) {
var scenario = [];
var allCards = [
'gjHunter',
'seer',
'seerSameWitch',
'lilWitch',
'wolfKing',
'werewolf',
'zombie',
'phantomThief',
'vampire'
]
var push = Array.prototype.push;
push.apply(scenario, seeds['afterDark']);
if (countup > 10) countup = 10;
if (countup <= 0) push.apply(scenario, [[5000, 'カウントは行いません。']]);
else push.apply(scenario, [[5000, 'カウントは、' + countup + 'までです。']]);
for (i = 0; i < allCards.length; i++) {
var card = allCards[i];
if (cards.includes(card)) {
push.apply(scenario, seeds[card]);
push.apply(scenario, seeds['countup'].slice(0, countup));
push.apply(scenario, seeds['finish']);
}
}
push.apply(scenario, seeds['morning']);
return scenario;
};
var getCards = function() {
var inputs = document.querySelectorAll('input[type=checkbox][name=cards]:checked');
var cards = [];
var cardsLen = inputs.length;
console.log(cardsLen);
for (i=0; i < cardsLen; i++) cards.push(inputs[i].value);
return cards;
}
btn.addEventListener('click', function(event) {
var countup = Number(document.getElementById('countupSelect').value);
var cards = getCards();
console.log(cards);
var scenario = buildScenario(countup, cards);
console.log(scenario);
speakJP("");
setTimeout(function() { nextSpeech(scenario, 0); }, 1000);
event.preventDefault();
}, false);
</script>
<SCRIPT charset="utf-8" type="text/javascript" src="http://ws-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Famazontail-22%2F8005%2F10281f4d-de6b-4e6a-a04e-d260a015df1a"> </SCRIPT> <NOSCRIPT><A HREF="http://ws-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&MarketPlace=JP&ID=V20070822%2FJP%2Famazontail-22%2F8005%2F10281f4d-de6b-4e6a-a04e-d260a015df1a&Operation=NoScript">Amazon.co.jp ウィジェット</A></NOSCRIPT>
</body>
</html>