-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (142 loc) · 9.83 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="2048 Master takes everyone's favorite game of 2048 and turns it into a Master competition where everyone is given the exact same board to compete for Master high scores.">
<meta name="keywords" content="2048,wordle">
<title>2048 Master</title>
<script src="src/script.js" type="module"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="./src/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./src/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./src/img/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header class="header">
<button data-help-btn="" class="icon-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path></svg>
</button>
<button data-stats-btn="" class="icon-btn">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><rect fill="none" height="24" width="24"></rect><g><path d="M7.5,21H2V9h5.5V21z M14.75,3h-5.5v18h5.5V3z M22,11h-5.5v10H22V11z"></path></g></svg>
</button>
<h1 class="title">2048 Master</h1>
<div class="score-container stat-container">
<span class="stat-label">Score</span>
<div data-score="" class="score">
<div data-score-amount="" class="stat-amount score-amount">0</div>
</div>
</div>
</header>
<main id="main-game" class="game-board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</main>
<template data-help-modal-template="">
<div class="modal" data-modal="" role="dialog" aria-labelledby="helpModalTitle">
<button aria-label="Close" class="modal-close-btn" data-modal-close="">×</button>
<header class="modal-header">
<h2 id="helpModalTitle" class="modal-title">How To Play</h2>
</header>
<div class="modal-body">
<div class="modal-section">
<p>Combine tiles of the same number in an attempt to create a tile with the value 2048.</p>
<p>Pressing the arrow keys or swiping across the game board will move all tiles in the direction of the key pressed/swipe. After all the tiles are done moving a new tile with the value of 2 or 4 will be created in a random empty cell.</p>
<p>Two tiles with the same number will merge when they collide to create a single tile with double the value.</p>
<p>The game is over when there are no valid ways for you to move the tiles.</p>
</div>
<div class="modal-section game-container">
<svg class="arrow-keys" data-arrow-keys="" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 178 752 356">
<g>
<path class="arrow-left" d="m293.72 485.37h-99.562c-4.8242 0-8.7344-3.9102-8.7344-8.7344v-99.562c0-4.8242 3.9102-8.7344 8.7344-8.7344h99.562c4.8242 0 8.7344 3.9102 8.7344 8.7344v99.562c0 4.8242-3.9102 8.7344-8.7344 8.7344zm-90.828-17.469h82.094v-82.094h-82.094z"></path>
<path class="arrow-down" d="m426.48 485.37h-99.562c-4.8242 0-8.7344-3.9102-8.7344-8.7344v-99.562c0-4.8242 3.9102-8.7344 8.7344-8.7344h99.562c4.8242 0 8.7344 3.9102 8.7344 8.7344v99.562c-0.003907 4.8242-3.9102 8.7344-8.7344 8.7344zm-90.832-17.469h82.094v-82.094h-82.094z"></path>
<path class="arrow-up" d="m426.48 352.62h-99.562c-4.8242 0-8.7344-3.9102-8.7344-8.7344v-99.562c0-4.8242 3.9102-8.7344 8.7344-8.7344h99.562c4.8242 0 8.7344 3.9102 8.7344 8.7344v99.562c-0.003907 4.8242-3.9102 8.7344-8.7344 8.7344zm-90.832-17.469h82.094v-82.094h-82.094z"></path>
<path class="arrow-right" d="m559.21 485.37h-99.562c-4.8242 0-8.7344-3.9102-8.7344-8.7344v-99.562c0-4.8242 3.9102-8.7344 8.7344-8.7344h99.562c4.8242 0 8.7344 3.9102 8.7344 8.7344v99.562c0 4.8242-3.9102 8.7344-8.7344 8.7344zm-90.828-17.469h82.094v-82.094h-82.094z"></path>
<path class="arrow-up" d="m360.1 302.85c-2.2344 0-4.4688-0.85156-6.1719-2.5547-3.4141-3.4102-3.4141-8.9375-0.007812-12.352l16.586-16.602c1.6367-1.6406 3.8594-2.5625 6.1758-2.5625h0.003906c2.3164 0 4.5352 0.92188 6.1758 2.5586l16.582 16.582c3.4102 3.4102 3.4102 8.9414 0 12.352-3.4102 3.4102-8.9414 3.4102-12.352 0l-10.402-10.402-10.41 10.422c-1.7031 1.7031-3.9414 2.5586-6.1797 2.5586z"></path>
<path class="arrow-down" d="m376.7 452.17c-2.2305 0-4.4609-0.85156-6.168-2.5508l-16.613-16.574c-3.4141-3.4062-3.4219-8.9336-0.015624-12.352 3.4062-3.4141 8.9336-3.4219 12.352-0.015624l10.445 10.418 10.426-10.414c3.4141-3.4102 8.9414-3.4062 12.352 0.007812 3.4062 3.4141 3.4062 8.9414-0.007812 12.352l-16.594 16.574c-1.7109 1.7031-3.9414 2.5547-6.1758 2.5547z"></path>
<path class="arrow-right" d="m509.46 452.17c-2.2344 0-4.4688-0.85156-6.1758-2.5586-3.4102-3.4102-3.4102-8.9414 0-12.352l10.402-10.402-10.422-10.41c-3.4141-3.4102-3.4141-8.9375-0.007813-12.352 3.4102-3.4141 8.9375-3.4141 12.352-0.007812l16.602 16.586c1.6406 1.6367 2.5625 3.8594 2.5625 6.1758 0 2.3164-0.91797 4.5391-2.5586 6.1797l-16.582 16.582c-1.7031 1.7031-3.9375 2.5586-6.1719 2.5586z"></path>
<path class="arrow-left" d="m243.94 452.17c-2.2344 0-4.4688-0.85156-6.1719-2.5547l-16.602-16.586c-1.6406-1.6367-2.5625-3.8594-2.5625-6.1758 0-2.3164 0.91797-4.5391 2.5586-6.1797l16.582-16.582c3.4102-3.4102 8.9414-3.4102 12.352 0s3.4102 8.9414 0 12.352l-10.402 10.402 10.422 10.41c3.4141 3.4102 3.4141 8.9375 0.007813 12.352-1.7109 1.707-3.9492 2.5625-6.1836 2.5625z"></path>
</g>
</svg>
<div id="instruction-board" class="game-board"></div>
</div>
<div class="modal-section">
<p><strong>IMPORTANT:</strong> Each day a new game is generated which is exactly the same for everyone in the world. Come back each day and share your results with your friends so you can claim your title as the best 2048 player.</p>
</div>
</div>
</div>
</template>
<template data-stats-modal-template="">
<div class="modal stat-modal" data-modal="" role="dialog" aria-labelledby="statsModalTitle">
<button aria-label="Close" class="modal-close-btn" data-modal-close="">×</button>
<header class="modal-header">
<h2 id="statsModalTitle" class="modal-title">Statistics</h2>
</header>
<div class="modal-body">
<div class="modal-section">
<div class="stat-grid">
<div class="stat-container" data-stat-container="">
<div class="stat-label">Current Score</div>
<div class="stat-amount" data-current-game-score=""></div>
</div>
<div class="stat-container" data-stat-container="">
<div class="stat-label">Current Streak</div>
<div class="stat-amount" data-current-streak=""></div>
</div>
<div class="stat-container" data-stat-container="">
<div class="stat-label">Current Largest Tile</div>
<div class="stat-amount" data-current-game-highest-tile=""></div>
</div>
<div class="stat-container" data-stat-container="">
<div class="stat-label">High Score</div>
<div class="stat-amount" data-high-score=""></div>
</div>
<div class="stat-container" data-stat-container="">
<div class="stat-label">Max Streak</div>
<div class="stat-amount" data-max-streak=""></div>
</div>
<div class="stat-container" data-stat-container="">
<div class="stat-label">All Time Largest Tile</div>
<div class="stat-amount" data-highest-tile=""></div>
</div>
</div>
</div>
<div class="modal-section">
<div class="stats-bottom-section">
<div class="stat-container next-game-time-container">
<div class="next-game-label stat-label">Next Game</div>
<div class="next-game-time stat-amount" data-next-game-time=""></div>
</div>
<button class="share-btn" data-share-btn="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none"></path><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path>
</svg>
Share
</button>
</div>
</div>
</div>
</div>
</template>
</body>
</html>