minesweeperd/sweeper.html at main · thenml/minesweeperd · 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
<!DOCTYPE html>
<html style="font-size: 16px; overflow: hidden;">

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">

	<title>minesweeperd</title>
	<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">

	<link rel="stylesheet" href="/code/global.css" media="screen">
	<link rel="stylesheet" href="/code/css/sweeper.css" media="screen">
	<script src="https://unpkg.com/pixi.js@7.x/dist/pixi.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="/code/global.js"></script>

	<!-- <script src="/code/js/mine/utils.js"></script> -->
</head>
<style id="mine-theme">
</style>
<div id="control-height" style="height: 100vh;width: 0;position: absolute;"></div>
<body style="text-align: center; overflow: hidden;">
	<div style="position:absolute;left:0;right:0;top:0;bottom:0;display:flex;background-color:#0008;" onclick="genTempBoard(); this.remove();"><p style="width:100%;padding-top:50vh;">click to start</p></div>
	<!-- <img style="height:64px;left:50%;position:absolute;transform:translateX(-50%);" src="https://media.tenor.com/v9E1MSawA4kAAAAC/monkey-bloons-td6.gif"> i dont want to remove my boi -->
	<main style="--bar-height:0">
		<div class="settings">
			<button onclick="camera.parentElement.requestFullscreen();this.hidden=true;this.parentElement.lastElementChild.hidden=false">⇱</button>
			<button hidden onclick="document.exitFullscreen();this.hidden=true;this.parentElement.firstElementChild.hidden=false">⇲</button>
		</div>
		<!-- everything in this .html and sweeper.css file is temporary -->
		<div id="container"> </div>
		<div class="settings">
			<p id="debug-info"></p>
			<button onclick="genBasicBoard({init: true});">🎲</button>
			<button onclick="genDailyBoard();">🗓</button>
			<button onclick="genInfiniteBoard();">♾️</button>
			<span>
				<img src="" style="width: 1.5em;image-rendering:pixelated">
				<span id="mine-count"></span>
			</span>
			<div hidden>
				<input type="number" id="inp-width" min="10" max="40" placeholder="20">
				<input type="number" id="inp-height" min="10" max="40" placeholder="20">
				<input type="range" id="inp-ratio" min="2" max="8" value="4">
			</div>
			<textarea style="resize: none; overflow: hidden;" hidden id="mine-string" rows="1" readonly wrap="off"></textarea>
		</div>
	</main>
	<!-- <footer>-nml<br>sound effects from <a href="https://www.zapsplat.com">https://www.zapsplat.com</a></footer> -->
</body>
<script src="/code/js/sweeper.js"></script>
<script src="/code/js/mine/animation.js"></script>
<script src="/code/js/mine/board.js"></script>
<script src="/code/js/mine/controls.js"></script>
</html>