forked from Poincurry/priconne-shiritori-kor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
304 lines (272 loc) · 16.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
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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="icon" href="images/game/yuni.png">
<title>Princess Connect! Re:Dive - 끝말잇기 헬퍼</title>
<meta name="title" content="Princess Connect! Re:Dive - Shiritori Helper"/>
<!-- META DATA -->
<meta name="description" content="Help for the Shiritori Minigame ('Great Battle! Shiritori Dragons') introduced in the 'Dragon Explorers' event in 'Princess Connect! Re:Dive' (プリンセスコネクト! Re:Dive).">
<meta name="author" content="S'pugn">
<meta name="keywords" content="Princess Connect Re:Dive, プリンセスコネクト! Re:Dive, Shiritori, S'pugn">
<!-- OPEN GRAPH / FACEBOOK META DATA -->
<meta property="og:title" content="Princess Connect! Re:Dive - Shiritori Helper"/>
<meta property="og:description" content="Help for the Shiritori Minigame ('Great Battle! Shiritori Dragons') introduced in the 'Dragon Explorers' event in 'Princess Connect! Re:Dive' (プリンセスコネクト! Re:Dive)."/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://raw.githubusercontent.com/Expugn/priconne-shiritori/master/images/game/yuni.png"/>
<meta property="og:image:width" content="64"/>
<meta property="og:image:height" content="64"/>
<meta property="og:url" content="https://expugn.github.io/priconne-shiritori/"/>
<meta property="og:locale" content="en_US"/>
<!-- TWITTER META DATA -->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@eSpugn"/>
<meta name="twitter:creator" content="@eSpugn"/>
<meta name="twitter:title" content="Princess Connect! Re:Dive - Shiritori Helper"/>
<meta name="twitter:description" content="Help for the Shiritori Minigame ('Great Battle! Shiritori Dragons') introduced in the 'Dragon Explorers' event in 'Princess Connect! Re:Dive' (プリンセスコネクト! Re:Dive)."/>
<!-- SCRIPTS -->
<script src="scripts/jquery-3.4.1.min.js"></script>
<script src="scripts/treant/vendor/raphael.js"></script>
<script src="scripts/treant/Treant.js"></script>
<!-- <script src="scripts/wanakana.min.js"></script> -->
<script src="scripts/console.js"></script>
<script src="scripts/read-word-list-json.js"></script>
<script src="scripts/shiritori-game.js"></script>
<script src="scripts/webpage.js"></script>
<script src="scripts/phrase-table.js"></script>
<!-- CSS STYLE SHEETS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/phrase-tree.css">
<link rel="stylesheet" href="scripts/treant/Treant.css" type="text/css">
</head>
<body class="background">
<!-- TITLE -->
<div>
<h1 class="title webpage-text">Princess Connect! Re:Dive</h1>
<h2 class="title webpage-text">Shiritori Helper</h2>
</div>
<hr>
<!-- GAME DIV -->
<div id="game-div">
<!-- SETTINGS AREA -->
<div>
<br>
<button onclick="open_word_list()">Open Word List</button><button style="margin-left: 30px" onclick="show_tips()">Show Tips</button>
<br><br>
<button onclick="reset_game()">Reset Game</button>
<br><br>
</div>
<hr>
<!-- GAME STATUS AREA -->
<div>
<h2 id="turn-text" class="webpage-text centerText" hidden>Turn <span id="turn-counter">0</span></h2>
<h3 id="game-start-tip" class="webpage-text centerText">Select the card <span style="color:gold">Kaya</span> selected to begin.</h3>
<div id="latest-selection" class="webpage-text centerText" hidden>
<img id="latest-selection-image" src="images/game/placeholder.png" alt=""><br>
<img class="latest-selection-character-circle" src="images/webpage/character_circle.png" alt=""><br>
<div id="latest-selection-character" class="latest-selection-character">x</div><br>
<div id="latest-selection-text" class="centerText" style="color: gold;">phrase_text</div>
</div>
<div class="centerText">
<button id="undo-button" onclick="undo_phrase()" disabled hidden>Made a mistake? Undo!</button>
</div>
<h3 id="your-turn-text" class="webpage-text centerText" hidden><span style="color:gold">Your turn.</span><br>Select the option you chose in game.</h3>
<h3 id="opponent-turn-text" class="webpage-text centerText" hidden><span style="color:gold">Kaya</span>'s turn.<br>Select the card that <span style="color:gold">Kaya</span> selected.</h3>
<h3 id="rush-mode-button-text" class="centerText" hidden>
<button id="rush-mode-button" class="rush-mode-button low-opacity" onclick="toggle_rush_mode()">
<img class="rush-mode-button" title="Toggle Rush Mode" src="images/webpage/rush.png" alt="">
</button>
</h3>
<h3 id="rush-mode-text" class="webpage-text centerText" hidden><span style="color:gold">Rush Mode</span> activated.<br>Select the cards that you collected during rush mode.<br><br><span style="color:red">All selections will be saved to your word list.</span></h3>
</div>
<hr>
<!-- SELECTION AREA -->
<div>
<h3 id="n-character-hit-text" class="webpage-text centerText" hidden>The <span style="color:gold">ん</span> character has been hit.<br>There are no more possible selections.<br><br>Click <span style="color:gold">Reset Game</span> to play again.</h3>
<table class="centerTable">
<tbody id="selection-table"></tbody>
</table>
</div>
</div>
<!-- WORD LIST DIV -->
<div id="word-list-div" hidden>
<br>
<button onclick="close_word_list()">Close Word List</button><button style="margin-left: 30px" onclick="toggle_word_search()">Word Search</button>
<br><br>
<div class="futsuyomi webpage-text">일반 읽기 (<span id="futsuyomi-count">0</span>/<span id="futsuyomi-total-count">0</span>)</div>
<br>
<div class="urayomi webpage-text">숨은 뜻 읽기 (<span id="urayomi-count">0</span>/<span id="urayomi-total-count">0</span>)</div>
<br>
<div class="priconneyomi webpage-text">프리코네 뜻 (<span id="priconneyomi-count">0</span>/<span id="priconneyomi-total-count">0</span>)</div>
<br>
<button onclick="reset_data()">Reset Data</button> <button onclick="allset_data()">All Check</button>
<br><br>
<div id="word-list-contents">
<h3 class="webpage-text centerText">Progress can be added or removed by <span style="color: gold">clicking</span> on the phrase.</h3>
<br>
<div id="word-list"></div>
</div>
<h3 id="word-list-hidden-warning" class="webpage-text centerText" hidden>Word list progress cannot be modified while a game is in progress.<br><span style="color: gold">Reset the game to make the word list visible again.</span></h3>
</div>
<!-- WORD SEARCH DIV -->
<div id="word-search-div" hidden>
<br>
<button onclick="toggle_word_search()">Close Word Search</button><button id="reset-word-search-button" style="margin-left: 30px" onclick="reset_word_search()" hidden>Reset Word Search</button>
<br><br>
<label for="low-opacity-word-search-checkbox" class="webpage-text">Mark Obtained Words? : </label>
<input id="low-opacity-word-search-checkbox"
type="checkbox"
onchange="build_phrase_list()">
<label for="result-search-checkbox" class="webpage-text" style="margin-left: 30px">Find Resulting Words? : </label>
<input id="result-search-checkbox"
type="checkbox"
onchange="create_table(_phrase_table_js.word_searched)">
<br><br>
<hr>
<div id="phrase-table-div" hidden>
<table class="centerTable"><tbody><tr><th><div class="chart" id="tree-simple"></div></th></tr></tbody></table>
</div>
<br>
<table class="centerTable">
<tbody id="word-search-table"></tbody>
</table>
</div>
<!-- TIPS DIV -->
<div id="tips-div" hidden>
<br>
<button onclick="hide_tips()">Hide Tips</button>
<br><br>
<hr>
<h2 class="webpage-text centerText">Card Highlighting</h2>
<p class="webpage-text">
Cards are highlighted based off the chance you can collect a new phrase.<br><br>
<img src="images/game/yuni.png" style="max-height: 64px" class="priconneyomi" alt=""><br>
A <span style="color: rgb(255, 127, 170); font-weight: bold">red</span> color surrounding the card means that <span style="color: gold">Kaya</span> and the Player has a chance of both choosing a new phrase, depending on <span style="color: gold">Kaya</span>'s choice.<br>
<span style="color: gold; font-weight: bold">This should be the highest priority card to select if there are no new cards available.</span>
<br><br>
<img src="images/game/yuni.png" style="max-height: 64px" class="futsuyomi" alt=""><br>
A <span style="color: rgb(115, 175, 85); font-weight: bold">green</span> color surrounding the card means that <span style="color: gold">Kaya</span> has a chance of choosing a new phrase.
<br><br>
<img src="images/game/yuni.png" style="max-height: 64px" class="urayomi" alt=""><br>
A <span style="color: rgb(46, 169, 255); font-weight: bold">blue</span> color surrounding the card means that the Player has a chance of choosing a new phrase on their next turn, depending on <span style="color: gold">Kaya</span>'s choice.
<br><br>
<img src="images/game/yuni.png" style="max-height: 64px" class="gold-outline" alt=""><br>
On <span style="color: gold">Kaya</span>'s turn, cards that are highlighted <span style="color: gold; font-weight: bold">gold</span> have new phrases for the Player if <span style="color: gold">Kaya</span> selects them.
<br><br>
<img src="images/game/yuni.png" style="max-height: 64px" alt=""><br>
No coloring means that there is no chance <span style="color: gold">Kaya</span> or the Player will obtain a new phrase by the Player's next turn.
<br><br><br>
Only one color will highlight the card, but there can be other options available.<br>
You can see these options by hovering over the card.
<br><br>
Cards will ONLY be highlighted <span style="color: rgb(255, 127, 170); font-weight: bold">Red</span>, <span style="color: rgb(115, 175, 85); font-weight: bold">Green</span>, or <span style="color: rgb(46, 169, 255); font-weight: bold">Blue</span> on the Player's turn.<br>
Cards will ONLY be highlighted <span style="color: gold; font-weight: bold">Gold</span> on <span style="color: gold">Kaya</span>'s turn.
<br><br>
Color Priority:<br>
<span style="color: rgb(255, 127, 170); font-weight: bold">Red Color</span> > <span style="color: rgb(115, 175, 85); font-weight: bold">Green Color</span> > <span style="color: rgb(46, 169, 255); font-weight: bold">Blue Color</span>
</p>
<hr>
<h2 class="webpage-text centerText">Image Styling Meanings</h2>
<p class="webpage-text">
Cards may have different styling to help you get more information out of them.<br><br>
<img src="images/game/yuni.png" style="max-height: 64px" class="low-opacity" alt=""><br>
A card with low opacity means that you have already collected the phrase it has.<br>
Clicking on the card will not help you fill up your word album as a result.
<br><br>
<img src="images/game/yuni.png" style="max-height: 64px" class="grayscale" alt=""><br>
A card that is grayscale means that this card will not normally be available.<br>
Cards can only be grayscale if it is <span style="color: gold">Kaya</span>'s turn and if the card is a "<span style="color: rgb(255, 127, 170); font-weight: bold">Priconneyomi (プリコネヨミ)</span>" phrase.
<br>
<span style="color: gold">Kaya</span> will NEVER use a "<span style="color: rgb(255, 127, 170); font-weight: bold">Priconneyomi</span>" card, so if a "<span style="color: rgb(255, 127, 170); font-weight: bold">Priconneyomi</span>" is available, you should prioritize using that card if possible.
</p>
<hr>
<h2 class="webpage-text centerText">Tooltip (Title) Information</h2>
<p class="webpage-text">
While the game is in progress, the Player can hover over a card to reveal more information about it.
<br><br>
<img src="images/game/yuni.png" style="max-height: 64px" alt="" title="" onload="this.title = 'ユニ\n\n'+
'Kaya has a chance of choosing a new phrase!\n'+
' - rabbit;にんぎよう;futsuyomi\n'+
' - ninon;ニノン;futsuyomi\n'+
'\n'+
'Player has a chance of choosing a new phrase!\n'+
' - meat;にく;futsuyomi -> (14 New Choices)\n'+
' - cat;にやんこ;urayomi -> (15 New Choices)\n'+
' - rabbit;にんぎよう;futsuyomi -> (14 New Choices)\n'+
'\n'+
'Kaya and Player has a chance of choosing new phrases!\n'+
' - rabbit;にんぎよう;futsuyomi -> (14 New Choices)'">
<br>
<span style="color: gold">Hover your cursor over this card to see some example information.</span>
<br><br>
You can find the card's phrase on the top.
<br><br>
If the card is highlighted, additional information will be displayed.
<br><br>
Cards capable of obtaining a <span style="color: rgb(115, 175, 85); font-weight: bold">green</span> highlight will display the available phrases <span style="color: gold">Kaya</span> will select from.
<br><br>
Cards capable of obtaining a <span style="color: rgb(46, 169, 255); font-weight: bold">blue</span> highlight will display the phrase(s) <span style="color: gold">Kaya</span> can choose from to reveal the new phrases the Player can choose from.<br>
The amount of possible new choices will also be displayed.
<br><br>
Cards capable of obtaining a <span style="color: rgb(255, 127, 170); font-weight: bold">red</span> highlight will display the phrase <span style="color: gold">Kaya</span> needs to select as well as the amount of new phrases the Player can choose from.
<br><br>
For the best efficiency, it would be wise to pause the minigame and consider your choices for the best chance of getting a new phrase.
</p>
</div>
<!-- LOCALSTORAGE WARNING -->
<div id="localstorage-warning-div" hidden>
<h3 class="title webpage-text">Your browser does not support the use of LocalStorage.<br>This webpage cannot be used.</h3>
</div>
<hr>
</body>
<footer>
<p class="footer webpage-text">Made With <span style="color:#ff4d4d">❤</span> By S'pugn and Translated & Minorly Editted</p>
<p class="footer">
<a href="https://github.com/Expugn/priconne-shiritori" target="_blank" style="text-decoration: none;">
<img src="images/webpage/GitHub-Mark-Light-32px.png" style="text-decoration: none;" alt="GitHub">
</a>
</p>
</footer>
<script>
// LOCAL STORAGE SUPPORT DOES NOT EXIST
if (typeof(Storage) === "undefined")
{
console.log(get_colored_message("System", "LocalStorage is not supported on this browser!", message_status.WARNING));
document.getElementById("game-div").hidden = true;
document.getElementById("localstorage-warning-div").hidden = false;
}
else
{
setup();
}
function setup()
{
if (!word_list_loaded)
{
setTimeout(function () {
setup();
}, 1000);
}
else
{
build_all_choices();
build_word_list();
// SAVED DATA EXISTS
if (localStorage.getItem(shiritori_game.localstorage_location) !== null)
{
console.log(get_colored_message(shiritori_game.sender_name, "Loading saved data...", message_status.INFO));
let saved_data = JSON.parse(localStorage.getItem(shiritori_game.localstorage_location));
for (let i = 0 ; i < saved_data.length ; i++)
{
// 0 = WORD ; 1 = PHRASE ; 2 = PHRASE_TYPE
let word_data = saved_data[i].split(';');
add_word_to_collection(word_data[0], word_data[1], word_data[2]);
}
console.log(get_colored_message(shiritori_game.sender_name, "User saved data loaded!", message_status.SUCCESS));
build_all_choices();
}
build_phrase_list();
}
}
</script>
</html>