-
Notifications
You must be signed in to change notification settings - Fork 24
/
Copy pathfishtrain.html
472 lines (443 loc) · 24.5 KB
/
fishtrain.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
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A tool to help with planning a fun fishing session with friends or community." />
<meta name="author" content="Carbuncle Plushy (Balmung)" />
<link rel="icon" type="image/png" href="favicon.png" />
<title>FFX|V Fish Tracker App: Fish Train Tool</title>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XYY4Q1MGX8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XYY4Q1MGX8');
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore-contrib/0.3.0/underscore-contrib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.1.3/doT.min.js"></script>
<script src="public/js/lib/dateFns/2.25.0/dateFns.min.js?20221015_1417"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rest.js/15.2.6/octokit-rest.min.js"
integrity="sha512-uiSucQ5TdEImoU68Gp+mxXJ54l4lQm5bTd+T0tj7KcCupCDrKr+FdmgXipF+2Exfc6xDAcnPbr5rXB5bEZS0bw=="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="public/images/sprite.css?7.2_20250325_0341" />
<link rel="stylesheet" href="css/semantic_ui_overrides.css?20230305_1820" />
<link rel="stylesheet" href="css/overlay.css?20250104_1413" />
<link rel="stylesheet" href="css/dark_overlay.css?20230305_1820" />
<style>
/* Hide Zone Name to condense display more */
table#fishtrain .col-location .zone-name {
display: none;
}
</style>
<script type="text/javascript" src="js/app/checkForUpdates.js?20221001_1235"></script>
<!-- Localization Support script -->
<script type="text/javascript" src="js/app/localization.js?20111013_2022"></script>
<!-- Include the data -->
<script type="text/javascript" src="js/app/data.js?7.2_20250325_0341"></script>
<script type="text/javascript" src="js/app/data_ex.js?20240227_1941"></script>
<script type="text/javascript" src="js/app/fish_info_data.js?7.2_20250325_0341"></script>
<!--
- Scripts
- * NOTE: The order is somewhat important. Care must be taken to avoid
- circular dependencies. Where it cannot be avoided, defer references
- to other classes until an initialization method can be called safely.
-->
<script type="text/javascript" src="js/app/time.js?20111013_2022"></script>
<script type="text/javascript" src="js/app/fish.js?20240706_1217"></script>
<script type="text/javascript" src="js/app/weather.js?20230112_1911"></script>
<script type="text/javascript" src="js/app/fishwatcher.js?20240313_1943"></script>
<script type="text/javascript" src="js/app/sorters.js?20221001_0144"></script>
<script type="text/javascript" src="js/app/templates.js?20250325_0341"></script>
<script type="text/javascript" src="js/app/fishtrain.js?20250325_0341"></script>
<script type="text/javascript" src="js/app/map.js?20250310_2300"></script>
<script type="text/javascript" src="js/app/carbyutils.js?20240117_2324"></script>
<script type="text/javascript">
const octokit = new Octokit();
$(() => {
// Initialize FishTrain tool.
FishTrain.initialize();
});
</script>
</head>
<body class="dark">
<div id="topmenu" class="ui text top fixed menu">
<div class="ui container">
<div class="ui dropdown icon item" id="main-menu">
<i class="bars icon"></i>
<div class="menu">
<a class="item" target="_blank" href="index.html"><i class="home icon"></i> Main Fish Tracker Page</a>
<a class="item" target="_blank" href="weatherForecaster.html"><i class="cloud sun rain icon"></i> Weather Forecaster</a>
<a class="item" target="_blank" href="feedback.html"><i class="comment outline icon"></i> Feedback</a>
</div>
</div>
<div class="header item">FFX|V Fish Tracker App: Fish Train Tool</div>
<div class="ui right borderless menu">
<!-- Light/Dark Mode Toggle (sun/moon) -->
<div class="item" id="theme-toggle" title="Toggle theme">
<span class="toggle dark-mode-toggle" data-theme="dark">🌙</span>
<span class="toggle light-mode-toggle" data-theme="light">☀️</span>
</div>
<!-- Language Selector -->
<div class="ui dropdown item" id="languageChoice">
<input type="hidden" name="language">
<!-- <i class="dropdown icon"></i> -->
<div class="default text" title="Switch language"><i class="flag icon"></i></div>
<div class="ui left mini menu">
<div class="item" data-value="en"><i class="us flag"></i><span class="text">English</span></div>
<div class="item" data-value="ja"><i class="jp flag"></i><span class="text">日本語</span></div>
<div class="item" data-value="de"><i class="de flag"></i><span class="text">Deutsch</span></div>
<div class="item" data-value="fr"><i class="fr flag"></i><span class="text">Français</span></div>
<div class="item" data-value="ko"><i class="kr flag"></i><span class="text">한국어</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="ui main container">
<h1>FFX|V Fish Tracker App: Fish Train Tool</h1>
<p>
Want to plan out a fun fishing trip with a bunch of friends? Need to know what fish will be up during your next stream? The Fish Train Tool is here to help not only with planning, but also guide your friends or community during the event by providing customized itinerary. Just fill in the forms below, and select fish to create a schedule.
</p>
<p>
Developed by <a target="_blank" href="https://na.finalfantasyxiv.com/lodestone/character/221572/">Carbuncle Plushy</a> of Balmung.
</p>
<div id="popups-storage">
<div id="timeline-window-details" class="ui popup hidden">
<div class="header">Window Details</div>
<div class="content"></div>
<div class="actions">
<div class="ui green approve button">Add to schedule</div>
</div>
</div>
<div id="schedule-entry-details" class="ui popup hidden">
<div class="header"></div>
<div class="content" style="white-space: nowrap;">
<b>Window Start:</b> <span class="window-start"></span> (<span class="window-start-ingame"></span> ET)<br/>
<b>Window End:</b> <span class="window-end"></span> (<span class="window-end-ingame"></span> ET)<br/>
<b>Location:</b> <span class="location-name"></span><br/>
<b>Bait:</b> <span class="bait-info" style="display: inline-block;"></span>
</div>
<div class="actions">
<div class="ui red approve button">Remove from schedule</div>
</div>
</div>
</div>
<div class="ui modal" id="fishingSpotMapModal">
<div class="content map-container">
<canvas height="2048" width="2048"></canvas>
</div>
<div class="ui active dimmer">
<div class="ui text loader">Loading Map...</div>
</div>
</div>
<!-- Modal for printing train passes -->
<div id="generate-train-pass-modal" class="ui tiny modal">
<i class="close icon"></i>
<div class="header">Your Fish Train Boarding Pass</div>
<div class="content">
<div class="ui form">
<p>Share the following URL with friends or community before departure.</p>
<div class="field">
<textarea rows="2" id="generate-train-pass-data" style="font-family: monospace;"></textarea>
</div>
<p>You can also use this URL as a Browser Source in OBS to display as an overlay during your stream. Please see the Wiki article on <a target="_blank" href="https://github.com/icykoneko/ff14-fish-tracker-app/wiki/Fish-Train-Streaming-Tips">Fish Train Streaming Tips</a> for more details.</p>
<p>Access this fish train via Teamcraft: <a style="white-space: nowrap;" id="generate-train-pass-tclink" href="" target="_blank"></a>.</p>
<p>Your <b>Conductor Token</b> is: <span style="font-size: larger; font-family: monospace; font-weight: bold; white-space: nowrap;" id="generate-train-pass-conductorToken"></span>. You will need to enter this into Teamcraft to <i>claim</i> this train when it starts, or to make edits later. DO NOT LOSE IT!</p>
</div>
</div>
<div class="actions">
<div id="generate-train-pass-copy-conductorToken" class="ui labeled icon button" data-clipboard-target="#generate-train-pass-conductorToken">
<i class="copy icon"></i>
Copy Token
</div>
<div id="generate-train-pass-copy-link" class="ui labeled icon button" data-clipboard-target="#generate-train-pass-data">
<i class="copy icon"></i>
Copy Link
</div>
</div>
</div>
<!-- Modal for edit an existing train pass -->
<div id="edit-existing-train-modal" class="ui tiny modal">
<div class="header">Edit an Existing Train</div>
<div class="content">
<form class="ui form">
<p>Need to make a change to an existing train? Enter the train pass ID, or the full URL below.</p>
<p>NOTE: In order to submit changes, you must have the original Conductor Token used to create this train. You'll need to enter that once you're finished editing.</p>
<div class="field" id="edit-existing-train-field">
<label>Existing Train Pass</label>
<textarea name="edit-existing-train-data" rows="2" id="edit-existing-train-data" style="font-family: monospace;"></textarea>
</div>
<div class="ui error message"></div>
</form>
</div>
<div class="actions">
<div id="edit-existing-train-load" class="ui approve button">Load</div>
<div class="ui deny button">Cancel</div>
</div>
</div>
<!-- Modal for updating an existing train pass -->
<div id="update-existing-train-modal" class="ui tiny modal">
<div class="header">Update an Existing Train</div>
<div class="content">
<form class="ui form">
<p>All done making changes to your train? In order to edit it on Teamcraft, you must provide the original Conductor Token used to create this train. Your token which was associated with <i>this device</i> has been pre-filled. If you originally created this train using another device or browser, you'll need to edit it, then click Submit.</p>
<div class="field" id="update-existing-train-token">
<label>Conductor Token</label>
<div class="ui input">
<input type="text" name="conductorToken" placeholder="Enter your conductorToken here" />
</div>
</div>
<div class="ui error message"></div>
</form>
</div>
<div class="actions">
<div id="update-existing-train-submit" class="ui approve button">Submit Changes</div>
<div class="ui deny button">Cancel</div>
</div>
</div>
<div id="existing-train-information" class="ui attached message hidden">
<div class="content">
<p>Current editing existing train <b><span id="existing-train-tcid">TCID</span></b>.</p>
</div>
</div>
<div class="ui grid">
<div class="twelve wide column">
<div class="ui fluid accordion">
<div class="fitted title">
<i class="dropdown icon"></i>
Instructions
</div>
<div class="content" data-controlname="instructions">
<h2>Before you Begin:</h2>
<p>This tool is still in beta testing and under active development. It was designed primarily for desktop users so it may be difficult to use on mobile devices.</p>
<h2>Instructions:</h2>
<p>Start by selecting the start and end date. You should try to limit this to about 4 hours. Each interval displayed is 8 Eorzean bells (hours), aligned to 0, 8, and 16.</p>
<p>Adjust the filters by patch and type, and adjust the sorting if you wish. These work the same way as the main tracker. Once you are finished, click the <b>Update List</b> button to populate the Fish Table. In this beta version, if you wish to change any of these settings, you must click the Update List button again. This will also clear out your schedule, so please keep that in mind.</p>
<p>The green shaded regions indicate the fish is available during that interval of time, and the brighter green box in the middle represents the actual window. Depending on the fish, these can get rather tiny. Clicking on the bright green box will display the exact time that window starts and prompt you to add the fish to your schedule. You can click elsewhere to close the prompt. Please note that in this beta version, you may only add each fish to the schedule once.</p>
<p>Adding a fish to your schedule will place it in both the <i>Schedule List</i> and <i>Schedule Bar</i>. The bar displays the fish's window with each interval hashed out. From here, you can click on the fish to see more details, and have the option to remove it from your schedule. The list displays the fish in order and resembles the main tracker. Only conditions are omitted, and the availability column always displays a countdown when the fish is less than 4 hours from being available (otherwise the scheduled time is displayed). After the scheduled window has passed, the entry in the list will be dimmed and shrunk.</p>
<h2>Sharing Train with Others:</h2>
<p>You can assign a name for your fish train too, or accept the default "Fish Train" title. A good example would be your streamer handle, or an event name. This will be displayed on the train pass.</p>
<p>Once you are happy with the train, you can click the <b>Generate Train Pass</b> button to create a URL to share with friends and community. Have your friends visit the link, and they will see just the schedule list view.</p>
<p>Please note that this link is static. If you make changes to the schedule on this page, a new pass needs to be created to have the updated information.</p>
<h2>Streaming Overlay Support:</h2>
<p>It's possible to add the schedule list as an overlay on your stream. Please see the Wiki article on <a target="_blank" href="https://github.com/icykoneko/ff14-fish-tracker-app/wiki/Fish-Train-Streaming-Tips">Fish Train Streaming Tips</a> for more details.</p>
</div>
<div class="fitted title active">
<i class="dropdown icon"></i>
<span class="static-title">Configuration</span>
<span class="inactive-details" style="padding-left: 1em;"></span>
</div>
<div class="content active" data-controlname="configuration">
<div class="ui form">
<div class="two fields">
<div class="field">
<label>Title</label>
<div class="ui input">
<input type="text" name="fishTrainTitle" placeholder="Fish Train" />
</div>
</div>
<div class="field">
<label>World</label>
<div class="ui bordered dropdown" id="fish-train-worldName">
<input type="hidden" name="worldName" value=""/>
<div class="default text">Select World</div>
<i class="dropdown icon"></i>
</div>
</div>
</div>
<!--
Select time for the event. Rarity will be based on each fish's rarity
as of the beginning of the event itself.
-->
<div class="three fields">
<div class="field">
<label>Start</label>
<div class="ui calendar" id="rangestart">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="datetime" placeholder="Start" />
</div>
</div>
</div>
<div class="field">
<label>End</label>
<div class="ui calendar" id="rangeend">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="datetime" placeholder="End" />
</div>
</div>
</div>
<div class="disabled field">
<label>Interval</label>
<div class="ui compact selection dropdown" id="timelineInterval">
<input type="hidden" name="timelineInterval" value="8"/>
<i class="dropdown icon"></i>
<div class="default text">Interval</div>
<div class="menu">
<div class="item" data-value="8">8 bells</div>
<div class="item" data-value="4">4 bells</div>
<div class="item" data-value="2">2 bells</div>
<div class="item" data-value="1">1 bell</div>
</div>
</div>
</div>
<div style="flex: 1 0 auto; align-self: center; place-content: end; display: flex;">
<div class="ui button" id="updateList">Update List</div>
</div>
</div>
<div class="three fields">
<div class="field" id="filterPatch" style="width: unset;">
<label>Filter by Expansion or Patch:</label>
<expansionSelectors></expansionSelectors>
</div>
<div class="field" style="/*width: unset;*/">
<label>Fish Filter Type</label>
<div class="ui mini compact buttons" id="filterExtra">
<div class="ui active button" data-filter="all">All</div>
<div class="ui button" data-filter="big">Big</div>
<div class="ui button" data-filter="collectable">Collectable</div>
<div class="ui button" data-filter="aquarium">Aquarium</div>
</div>
</div>
<div class="grouped fields" id="sortingType">
<div class="row">
<div class="field">
<label>Sorting</label>
<div class="ui radio checked checkbox">
<input type="radio" name="sortingType" checked="checked" class="hidden" value="windowPeriods"/>
<label>Window Periods</label>
</div>
</div>
</div>
<div class="row">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="sortingType" class="hidden" value="overallRarity"/>
<label>Overall Rarity</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="four wide column">
<div class="ui vertical spaced mini buttons">
<div class="ui disabled button" id="generatePass">Generate Train Pass</div>
<div class="ui button" id="editExistingTrain">Edit Existing Train</div>
</div>
</div>
</div>
<div class="ui fluid accordion">
<div class="fitted title active">
<i class="dropdown icon"></i>
Schedule List
</div>
<div class="content active" data-controlname="schedulelist">
<div class="ui plain compact segment fishtrain-schedule-list">
<div class="scroll-context">
<table class="ui very compact unstackable striped table">
<thead>
<tr>
<th class="fish-name-col">Name</th>
<th class="fish-availability-col">Availability</th>
<th class="fish-location-col">Location</th>
<th class="fish-requirements-col">Bait</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="fitted title active">
<i class="dropdown icon"></i>
Schedule Bar
</div>
<div class="content active" data-controlname="schedulebar">
<div class="ui plain compact segment fishtrain-schedule">
<!-- <div class="left aligned floating ui label">Schedule:</div> -->
<div class="scroll-context">
<div class="current-time-indicator-bar">
<div class="current-time-indicator"></div>
</div>
<div class="bar interval-30min">
</div>
<div class="items small-fish-icons small-fish-entries">
</div>
</div>
</div>
</div>
<div class="fitted title active">
<i class="dropdown icon"></i>
Fish Table
</div>
<div class="content active" data-controlname="fishtable">
<div class="fishtrain-fishtable">
<div class="ui form" id="fishTableWeatherSetting">
<div class="inline fields">
<label>Display Weather:</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fishTableWeather" value="none">
<label>Disabled</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fishTableWeather" value="currentOnly">
<label>Only Current</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fishTableWeather" checked="checked" value="firstPrevious">
<label>First Previous</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="fishTableWeather" value="both">
<label>Current & Previous</label>
</div>
</div>
</div>
</div>
<div class="scroll-context">
<table id="fishtrain" class="ui very compact single line unstackable table show-weather show-previous-weather-first">
<thead>
<tr>
<th class="sticky col-fish">Fish</th>
<th class="sticky col-location">Location</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<materialsFooter></materialsFooter>
</div>
<div class="ui bottom fixed menu">
<div id="site-last-update" class="item"><b>Last Update: ​</b> <span id="site-version"></span></div>
<script>
CheckForUpdates.checkForUpdates("");
</script>
<siteFooterLinks></siteFooterLinks>
</div>
</body>
</html>