-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
128 lines (110 loc) · 5.6 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
<html>
<head>
<title>Finesse training</title>
<link rel="stylesheet" href="style.css?v=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="script.js?v=1"></script>
<meta property="og:title" content="Finesse Training">
<meta property="og:description" content="By D_00">
<meta property="og:image" content="https://d-002.github.io/finesse/thumbnail.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://d-002.github.io/finesse/thumbnail.png">
<meta property="og:url" content="https://d-002.github.io/finesse">
</head>
<body onload="javascript:start()">
<div>
<noscript>
<h1>Javascript disabled</h1>
<p>In order for this page to work, you must enable Javascript.</p>
</noscript>
<h1>Finesse training</h1>
<span id="toggle-message">Desktop website -</span>
<a href="javascript:toggleDevice()">Toggle</a>
<div class="invisible">
<a href="javascript:playSound(restartSFX);restart()" class="pseudo-button">Restart</a>
<a href="javascript:stop()" id="stop" class="pseudo-button">Stop</a>
</div>
<div class="invisible">
<a href="javascript:openKeysSettings()" id="settings-button" class="pseudo-button">Keys settings</a>
<a href="javascript:openHelp()" class="pseudo-button">Help</a>
</div>
<h2>Piece settings</h2>
<form id="settings-form" action="javascript:updateSettings()">
<h3 id="allowed-pieces">Allowed pieces</h3><br>
<h3 id="allowed-positions">Allowed horizontal positions</h3><br>
<h3 id="allowed-rotations">Allowed rotations</h3><br>
<br>
<input type="submit" value="Apply changes" id="apply" class="input-button">
</form>
<h2>Finesse</h2>
<p id="total-finesse">Finesse: 0F (0.00%)</p>
<p id="total-pieces">Total pieces: 0</p>
<p id="pps">PPS: -</p>
<p id="tips">Tips: -</p>
</div>
<canvas width=400 height=800 id="canvas">Your browser does not support canvases.</canvas>
<div id="mobile-controls-div" class="invisible">
<button linked-action="left"><img src="images/l.png" alt="←"></button>
<button linked-action="right"><img src="images/r.png" alt="→"></button>
<button linked-action="rotate180"><img src="images/180.png" alt="↻"></button>
<button linked-action="rotateCCW"><img src="images/ccw.png" alt="↶"></button>
<button linked-action="rotateCW"><img src="images/cw.png" alt="↷"></button>
<button linked-action="hardDrop"><img src="images/drop.png" alt="↓"></button>
</div>
<div id="cookie-popup" class="invisible">
<p>
This webpage uses cookies to save your preferences.
<a href="javascript:openHelp()" class="pseudo-button">Learn more</a>
<a href="javascript:hideCookiePopup()" class="pseudo-button">Got it</a>
</p>
</div>
<div id="ad" class="invisible">
<div id="ad-inner" class="invisible">
<a href="https://www.youtube.com/@D_00" target="_blank"><img src="https://yt3.ggpht.com/ytc/AKedOLRJDu7qwF0q--FsWRnJ69k0osTkCO7gvwTFNAEf=s88-c-k-c0x00ffffff-no-rj" width=66 height=66></a>
<div class="invisible">
<p>Finesse training</p>
<p>by D_00</p>
</div>
</div>
<p>Design inspired by <a href="https://four.lol">four.lol</a></p>
<p>Same sound effects as <a href="https://TETR.IO">TETR.IO</a></p>
</div>
<div id="keys-settings" class="invisible">
<div id="keys-settings-inner">
<h1>Handling settings</h1>
<h2>Keybinds</h2>
<p>Click in a box and press a key to change its value</p>
<form action="javascript:1" id="keys-settings-form">
</form>
<h2>Other</h2>
<form>
<label for="DAS">DAS (ms)</label>
<input id="DAS" value="67" ondrop="return false;" onpaste="return false;" onkeypress="return event.charCode>=48 && event.charCode<=57" required><br>
<label for="ARR">ARR (ms)</label>
<input id="ARR" value="5" ondrop="return false;" onpaste="return false;" onkeypress="return event.charCode>=48 && event.charCode<=57" required><br>
</form>
<div class="invisible">
<a href="javascript:closeKeysSettings()" class="pseudo-button">Save and close</a>
</div>
</div>
</div>
<div id="help" class="invisible">
<div id="help-inner">
<h1>Help</h1>
<h2>General</h2>
<p>Place pieces one at a time, mimic the shadow with your piece placement.</p>
<p>You can change the pieces you want to train on, their positions and rotations using the <a>Piece settings</a> section. Don't forget to apply your changes.</p>
<p>You can change your keybinds, DAR and ARR in the <a>Keys settings</a> menu.</p>
<p>Expect your PPS to be slower than usual, as there is no way to look ahead for next placements.</p>
<h2>Mobile</h2>
<p>This trainer is also available for mobile devices, working similarly to <a href="https://jstris.jezevec10.com">Jstris</a>.</p>
<h2>Cookies</h2>
<p>Cookies are used exclusively to save your preferences, and expire after 30 days. By using this finesse trainer, you accept the use of cookies.</p>
<div class="invisible">
<a href="javascript:closeHelp()" class="pseudo-button">Close</a>
</div>
</div>
</div>
</body>
</html>