-
Notifications
You must be signed in to change notification settings - Fork 1
/
reupload.html
172 lines (171 loc) · 7.87 KB
/
reupload.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
<!DOCTYPE html>
<!--
Reuload of the Heptaveegesimal Minesveeper Advent Calendar 2023 by Joshua
Play the original here: https://heptaveegesimal.com/2023/advent-calendar/
Do not remove this note in a reupload!
-->
<html>
<head>
<title>Heptaveegesimal</title>
<link href="style_base.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style_switch.css" rel="stylesheet" type="text/css" />
<link href="style_overlay.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<!--- Head Of Page --->
<div class="topbar">
<noscript>
<div class="nojs" style="padding: 3px">
<center>
Javascript is disabled or not supported by this browser, this site will only be partially functional!
</center>
</div>
</noscript>
<div class="topbar-inner">
<table id="topbar-1" style="width:100%"><tr><td>
<table><tr id="topbarDyn">
<td style="padding-right: 3px">
<div class="dropdown" id="tbarcont-home">
<a href="https://heptaveegesimal.com/"><button class="dropbtn">Home</button></a>
</div>
</table>
<td style="padding-right: 3px">
<table style="float: right; display: inline-block;"><tr><td style="padding-right: 3px">
<div id="tbarcont-about">
<a class="btnlink" href="https://heptaveegesimal.com/2023/advent-calendar">Minesveeper</a>
</div>
</table>
</table>
<table style="width:100%" id="topbar-2" class="hide"></table>
<table style="width:100%" id="topbar-3" class="hide"></table>
<table style="width:100%" id="topbar-4" class="hide"></table>
<table style="width:100%" id="topbar-5" class="hide"></table>
</div>
</div>
<div class="topline"></div>
<!--- Actual Page Content --->
<span id="loadMetadata" class="hide" version="1"></span>
<div class="normalText">
<div class="vscroll">
<center>
<h1 id="title_day">Minesveeper Template</h1>
</center>
</div>
<div class="vscroll" id="board-section">
<center>
<table class="vscroll bluetab" style="margin-left:10px; margin-right:10px">
<tr>
<td class="bluetab">
<canvas id="main_canvas" width="322" height="322"></canvas>
<td width="200" valign="top" style="position:relative">
<div style="margin:7px">
<!--- Top Display --->
<div style="width:172px;"><center><button type="button" class="hide" id="mobileLR" style="margin-bottom:10px;">Left Click</button></center></div>
<div id="count_sec_open">
<img src="images/Closed.png"><div id="count_tex_open" style="display:inline; margin-left:7px">...</div>
<br>
</div>
<div id="count_sec_rflag">
<img src="images/Flag_R.png"><div id="count_tex_rflag" style="display:inline; margin-left:7px">...</div>
<br>
</div>
<div id="count_sec_rxflag">
<img src="images/Flag_RX.png"><div id="count_tex_rxflag" style="display:inline; margin-left:7px">...</div>
<br>
</div>
<div id="count_sec_gflag">
<img src="images/Flag_G.png"><div id="count_tex_gflag" style="display:inline; margin-left:7px">...</div>
<br>
</div>
<div id="count_sec_gxflag">
<img src="images/Flag_GX.png"><div id="count_tex_gxflag" style="display:inline; margin-left:7px">...</div>
<br>
</div>
<div id="count_sec_bflag">
<img src="images/Flag_B.png"><div id="count_tex_bflag" style="display:inline; margin-left:7px">...</div>
<br>
</div>
<div id="count_sec_bxflag">
<img src="images/Flag_BX.png"><div id="count_tex_bxflag" style="display:inline; margin-left:7px">...</div>
<br>
</div>
</div>
<div style="position:absolute; bottom:0px; left:0px"><div style="margin:7px">
<!--- Bottom Text --->
<b>Time:<div id="regularTimer" style="font-family:'Courier New'; font-size:20px; margin-left:16px">0:00.000</div></b>
<div style="width:172px;"><center><button type="button" class="redbutton" id="restartButton">Restart</button></center></div>
</div></div>
</table>
</center>
</div>
<br>
<div class="vscroll">
<center>
<div id="description-day" class="out_blue"><p align="left">
Hello, I am <span title="There were many name suggestions on the Discord of varying quality!">John Tryglop</span>.<br>
Over the past month I've been following the <a href="https://heptaveegesimal.com/2023/advent-calendar/">2023 Minesveeper Advent Calendar</a>.
It has now come to an end and with the code for it got released so that people like me could modify it however they would like.
So I took this template, for making my own settings where I can modify <span class="code">js/settings.js</span> to create my very own custom Minesveeper setting.
No longer shall I be restricted by the features that are possible to implement with Minesveeper 61, now I can code whatever mechanic I want to have.<br><br>
This template provides the minimal requirements for creating a single Minesveeper game.<br>
No entire page with many days to select from, just a single day and some basic settings.<br>
This template can be freely modified and re-uploaded for any non-commercial purposes, given that a link to the original is kept.
<br><br><font size="5"><b>Settings</b></font><br>
</p>
<p align="left"><br>
The controls for this game are adjusted when played on mobile. In the vast majority of situations this game should automatically detect if it is played on a mobile device.
However, in case that this detection fails. This option will let you manually switch between normal and mobile mode.<br><br>
</p>
<table align="left"><tr><td>
<b>Invert Mobile Detection</b><br><br>
<td class="tinygap">
<td>
<div id="switch-inv-mobile" class="switch-off"></div><br>
</table><br><br>
<p align="left"><br>
When you are in mobile mode an icon will appear fixed to the top left of your screen.
This serves as an always visible indicator, if you are in flag or dig mode and will also let you switch between the top, without needing to scroll the button on the side.
In case you do not want this icon and would rather just use the button like in older variants, this option will let you disable it.<br><br>
</p>
<table align="left"><tr><td>
<b>Disable Mode Icon</b><br><br>
<td class="tinygap">
<td>
<div id="switch-disable-shovel" class="switch-off"></div><br>
</table><br><br>
<p align="left"><br>
Settings are persistently stored using local storage, this information is only stored on the client and is not sent to the server.
If you want to delete this information use the button below:<br><br>
</p>
<center><button id="delete-my-data" class="redbutton">Delete My Data</button></center><br>
</div>
<br><br><br>
</center>
</div>
</div>
<!-- Overlay -->
<div id="grayBg" class="hide"></div>
<div id="overlayContainer">
<center>
<div id="warning-overlay" class="hide">
<div id="warning-content"></div><br><br>
<center><button type="button" class="daybutton_active" id="warning-got-it" style="width:120px;">Got It!</button></center>
</div>
<div id="choice-overlay" class="hide">
<div id="choice-content"></div><br><br>
<center>
<button type="button" class="daybutton_active" id="choice-cancel" style="width:140px;">Cancel</button>
<button type="button" class="daybutton_active" id="choice-continue" style="width:140px;">Continue</button>
</center>
</div>
</center>
</div>
<div class="hide" style="position:fixed;top:10px;left:10px;" id="mobile-indicator-sec"><img id="mobile-indicator-img" src="images/Shovel.png" style="height:32px;image-rendering:pixelated;"></div>
<!-- Scripts -->
<script language="javascript" type="text/javascript" src="menu_reupload.js"></script>
<script language="javascript" type="text/javascript" src="init_reupload.js"></script>
</body>
</html>