downstack-practice/tspin-challenge.html at main · himitsuconfidential/downstack-practice · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-QCQK6ZQ0DE"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-QCQK6ZQ0DE');
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Tetris Tspin Challenge</title>
    <link rel="stylesheet" href="style.css">
    <script src="style-scripts.js"></script>

</head>
<body>
    <div class="banner">
        <h1 hidden> Tspin Challenge</h1>
        <a class="title" href="/downstack-practice/tspin-challenge.html"> Tetris T-Spin Puzzle - Challenge</a>
        <a class="setting_icon" onclick="toggleSettings()"> ⚙️</a>
        <div class="nav">
            <ul class="dropdown">
                <li><a href="javascript:void(0);" onclick="toggleSettings()">Settings</a></li>
                <li><a href="/downstack-practice/tspin-challenge.html">T-Spin Challenge</a></li>
                <li><a href="/downstack-practice/">Downstack Practice</a></li>
                <li><a href="/downstack-practice/pc-practice.html">Mid-game PC Practice</a></li>
                <li><a href="/downstack-practice/usermode.html">Usermode (Includes PC Practice)</a></li>
                <li><a href="/downstack-practice/tspin-practice.html">T-Spin Practice</a></li>
                <li><a href="/downstack-practice/advance-tspin-practice.html">Advanced T-Spin Practice</a></li>
                <li><a href="/downstack-practice/quad-practice.html">Quad Practice</a></li>
                <li><a href="/downstack-practice/upstack-practice.html">Upstack Practice</a></li>

            </ul>
        </div>
        <div class="burger" onclick="toggleBurger()">
            <span></span>
        </div>
    </div>

    <div id="setting">
        <div class="settings-container">
            <h1>Settings</h1>
            <a class="close-button" href="javascript:void(0);" onclick="closeSettings()"></a>
            <table>
                <tbody>
                <tr><td class="setting-label">Move Left</td><td><input class='keybind' id="input1" type="text" size="7" value="" readOnly></td></tr>
                <tr><td class="setting-label">Move Right</td><td><input class='keybind' id="input2" type="text" size="7" value="" readOnly></td></tr>
                <tr><td class="setting-label">Soft Drop</td><td><input class='keybind' id="input3" type="text" size="7" value="" readOnly></td></tr>
                <tr><td class="setting-label">Hard Drop</td><td><input class='keybind' id="input4" type="text" size="7" value="" readOnly></td></tr>
                <tr><td class="setting-label">Rotate Left</td><td><input class='keybind' id="input5" type="text" size="7" value="" readOnly></td></tr>
                <tr><td class="setting-label">Rotate Right</td><td><input class='keybind' id="input6" type="text" size="7" value="" readOnly></td></tr>
                <tr><td class="setting-label">Rotate 180</td><td><input class='keybind' id="input7" type="text" size="7" value="" readOnly></td></tr>
                <tr><td class="setting-label">Hold</td><td><input class='keybind' id="input8" type="text" size="7" value="" readOnly></td></tr>
                <tr><td class="setting-label">Retry</td><td><input class='keybind' id="input9" type="text" size="7" value="" readOnly></td></tr>
                <tr><td class="setting-label">Show Answer</td><td><input class='keybind' id="input10" type="text" size="7" value="" readOnly></td></tr>
                <tr><td class="setting-label">DAS (1 to 200)</td><td><input id="input11" type="number" min="1" max='200'></td></tr>
                <tr><td class="setting-label">ARR (0 to 100)</td><td><input id="input12" type="number" min="0" max='100'></td></tr>
                <tr><td class="setting-label">Generate New Map on Win</td><td><input id="input12.1" type="checkbox" min="0" max='100'></td></tr>

                </tbody>
            </table>
        </div>
    </div>
    <div id="startpanel" >
        <div id="score" >
            <div id="score-container" >
                <h3 id="result2">Solve as much puzzles as possible in 5 minutes</h3>
                <label>Enter your nickname to record your achievement: </label>
                <label>[Reminder: dont enter your real name or personal information here]</label>
                <br>
                <input id='your_name' type="text" maxlength="30">
                <button class="mini_button green" onclick="this.previousElementSibling.value = this.previousElementSibling.value.slice(0,30);submit_score()">submit</button>
            </div>
        </div>
        <h2>Leaderboard</h2>
        <div id="scrollable" >
            <table id="leaderboard">
                <tbody>

                    <tr> <th width="125">Rank</th> <th width="125">Name</th> <th width="125">Solved Puzzles</th> </tr>
                    <tr> <td>-</td> <td>-</td> <td>-</td> </tr>


                </tbody>
            </table>
        </div>
        <p id="result">Solve as much puzzles as possible in 5 minutes</p>
        <button id="game_button" class="game_button green" onclick="start_challenge()">Start Challenge</button>
    </div>
    <div class="flex" style="display:none">

        <div id="leftpanel" class="panel">

            <h2>Winning Requirement</h2>
            <div id="winning_requirement">
                <p id="winning_requirement1">Do a Tspin Double</p>
                <p id="winning_requirement2">No Empty Space below Blocks at the end</p>
            </div>
            <button class="game_button purple" onclick="start_challenge(); board.focus()">Restart</button><br>
            <button class="game_button orange" onclick="retry(); board.focus()">Retry</button>


        </div>

        <div id="tetris" >
            <canvas id="board" tabindex='1' width="520" height="610" z-index="4"></canvas>
        </div>

        <div id="rightpanel" class="panel">

            <h2>Solve as much puzzles as possible</h2>
            <div id="winning_requirement">
                <p >Time left: </p>
                <label id="timer"></label>
            </div>


        </div>
    </div>

    <div id = "tcc" style class = "tc">
        <div>
            <span id="tc-dr">↺</span>
            <span id="tc-h">⇄</span>
            <span id="tc-hd">⤓</span>
            </div>
            <div>
            <span id="tc-l">←</span>
            <span id="tc-r">→</span>
            <span id="tc-d">↓</span>
            <span id="tc-cc">↰</span>
            <span id="tc-c">↱</span>
            </div>
        <canvas id="mobile_controls"></canvas>
    </div>
    <script src="header.js"></script>
    <script src="script7.js"></script>

</body>
</html>