-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
118 lines (115 loc) · 7.88 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alquerque</title>
<link rel="stylesheet" href="./game.css">
</head>
<body align="center">
<div class="background"></div>
<div class="page">
<div class="game">
<h1 align="center" style="margin:13px 0px">A𝔩𝔮𝔲𝔢𝔯𝔮𝔲𝔢</h1>
<canvas id="celebrationCanvas"></canvas>
<div class="seperator">
<img src="./images/border.svg" alt="Border">
</div>
<div id="gameOptionsModal" class="options-screen">
<div class="options-screen-content">
<div class="options-screen-body">
<h2 style="margin-top:1px">G𝔞𝔪𝔢 O𝔭𝔱𝔦𝔬𝔫𝔰</h2>
<div class="player-options">
<label class="player-option">
<input type="radio" name="playerMode" value="single" checked>
<span class="single-player-icon">
<img src="./images/white-knight.svg" alt="White Knight">
</span>
S𝔦𝔫𝔤𝔩𝔢 P𝔩𝔞𝔶𝔢𝔯
</label>
<label class="player-option">
<input type="radio" name="playerMode" value="multi">
<span class=" multi-player-icon">
<img src="./images/white-knight.svg" style="filter:invert(1)" alt="Black Knight">
<img src="./images/white-knight.svg" alt="White Knight">
</span>
M𝔲𝔩𝔱𝔦 P𝔩𝔞𝔶𝔢𝔯
</label>
</div>
<div class="piece-options">
<label class="piece-option">
<input type="radio" name="playerColor" value="black">
<span class="bpi"></span>
B𝔩𝔞𝔠𝔨 P𝔦𝔢𝔠𝔢
</label>
<label class="piece-option">
<input type="radio" name="playerColor" value="white" checked>
<span class="wpi"></span>
W𝔥𝔦𝔱𝔢 P𝔦𝔢𝔠𝔢
</label>
</div>
<br />
<div class="startGameBtn">
<img src="./images/battle.svg" alt="Battle" class="battle">
<div>S𝔱𝔞𝔯𝔱 G𝔞𝔪𝔢</div>
</div>
</div>
</div>
</div>
<div class="board-container" hidden align="center">
<div class="board-top">
<div class="sound">
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g id="volume-up">
<polygon fill="none" points="2.9 9 6.9 9 11.9 3 11.9 21 6.9 16 1.9 16 1.9 9 2.9 9" stroke="#000000"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path class="volbars" d="M15.5,19.5a7.3,7.3,0,0,0,7-7.5,7.3,7.3,0,0,0-7-7.5 M15.5,15a3,3,0,0,0,0-6"
fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path class="cross" d="M15 8 L20 17Z M20 8 L15 17 Z" fill="none" stroke="#000000" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" />
</g>
</svg>
</div>
<div class="reset">ℜ𝔢𝔰𝔢𝔱</div>
<div class="player-turn white-piece"></div>
</div>
<div class="board-container">
<svg class="board-design">
<!--<rect x="36" y="36" width="216" height="216" stroke="black" fill="transparent"/>-->
</svg>
<table id="table">
</table>
</div>
</div>
</div>
<div class="instructions">
<h2 align="center">I𝔫𝔰𝔱𝔯𝔲𝔠𝔱𝔦𝔬𝔫𝔰</h2>
A𝔩𝔮𝔲𝔢𝔯𝔮𝔲𝔢 𝔦𝔰 𝔞 𝔱𝔴𝔬-𝔭𝔩𝔞𝔶𝔢𝔯 𝔞𝔟𝔰𝔱𝔯𝔞𝔠𝔱 𝔰𝔱𝔯𝔞𝔱𝔢𝔤𝔶 𝔤𝔞𝔪𝔢 𝔟𝔢𝔩𝔦𝔢𝔳𝔢𝔡 𝔱𝔬
𝔥𝔞𝔳𝔢 𝔬𝔯𝔦𝔤𝔦𝔫𝔞𝔱𝔢𝔡 𝔦𝔫 𝔱𝔥𝔢 𝔪𝔦𝔡𝔡𝔩𝔢 𝔢𝔞𝔰𝔱. 𝔗𝔥𝔢 𝔤𝔞𝔪𝔢 𝔦𝔰 𝔠𝔬𝔫𝔰𝔦𝔡𝔢𝔯𝔢𝔡 𝔱𝔬
𝔟𝔢 𝔱𝔥𝔢 𝔭𝔞𝔯𝔢𝔫𝔱 𝔬𝔣 𝔇𝔯𝔞𝔲𝔤𝔥𝔱𝔰 𝔞𝔫𝔡 𝔉𝔞𝔫𝔬𝔯𝔬𝔫𝔞. A𝔩𝔩 𝔭𝔦𝔢𝔠𝔢𝔰 𝔞𝔯𝔢 𝔩𝔞𝔦𝔡 𝔬𝔲𝔱
𝔦𝔫 𝔞 𝔭𝔞𝔱𝔱𝔢𝔯𝔫𝔢𝔡 𝔟𝔬𝔞𝔯𝔡 𝔴𝔦𝔱𝔥 𝔬𝔫𝔩𝔶 𝔬𝔫𝔢 𝔳𝔞𝔠𝔞𝔫𝔱 𝔭𝔬𝔦𝔫𝔱 𝔞𝔱 𝔱𝔥𝔢 𝔠𝔢𝔫𝔱𝔢𝔯.
𝔈𝔞𝔠𝔥 𝔭𝔩𝔞𝔶𝔢𝔯 𝔰𝔱𝔞𝔯𝔱𝔰 𝔴𝔦𝔱𝔥 12 𝔭𝔦𝔢𝔠𝔢𝔰 𝔴𝔥𝔦𝔠𝔥 𝔞𝔯𝔢 𝔭𝔩𝔞𝔠𝔢𝔡 𝔬𝔫 𝔬𝔭𝔭𝔬𝔰𝔦𝔱𝔢
𝔰𝔦𝔡𝔢𝔰. W𝔥𝔦𝔱𝔢 𝔰𝔱𝔞𝔯𝔱𝔰 𝔣𝔦𝔯𝔰𝔱. 𝔓𝔩𝔞𝔶𝔢𝔯𝔰 𝔞𝔩𝔱𝔢𝔯𝔫𝔞𝔱𝔢 𝔱𝔲𝔯𝔫 𝔱𝔬 𝔭𝔩𝔞𝔶. 𝔗𝔥𝔢
𝔞𝔦𝔪 𝔦𝔰 𝔱𝔬 𝔠𝔞𝔭𝔱𝔲𝔯𝔢 𝔞𝔩𝔩 𝔬𝔣 𝔬𝔭𝔭𝔬𝔫𝔢𝔫𝔱'𝔰 𝔭𝔦𝔢𝔠𝔢𝔰 𝔱𝔬 𝔴𝔦𝔫. 𝔗𝔥𝔢 𝔯𝔲𝔩𝔢𝔰 𝔞𝔯𝔢
𝔞𝔰 𝔣𝔬𝔩𝔩𝔬𝔴𝔦𝔫𝔤
<ul>
<li>ℑ𝔫 𝔢𝔞𝔠𝔥 𝔱𝔲𝔯𝔫 𝔞 𝔭𝔩𝔞𝔶𝔢𝔯 𝔠𝔞𝔫 𝔪𝔬𝔳𝔢 𝔞 𝔭𝔦𝔢𝔠𝔢 𝔬𝔫𝔢 𝔰𝔱𝔢𝔭 𝔞𝔩𝔬𝔫𝔤 𝔞 𝔪𝔞𝔯𝔨𝔢𝔡 𝔩𝔦𝔫𝔢 𝔱𝔬 𝔞𝔫 𝔞𝔡𝔧𝔞𝔠𝔢𝔫𝔱 𝔢𝔪𝔭𝔱𝔶 𝔭𝔬𝔦𝔫𝔱 (𝔞𝔫𝔶 𝔡𝔦𝔯𝔢𝔠𝔱𝔦𝔬𝔫; 𝔟𝔞𝔠𝔨, 𝔣𝔯𝔬𝔫𝔱 𝔬𝔯 𝔰𝔦𝔡𝔢𝔴𝔞𝔶𝔰).</li>
<li>
A 𝔭𝔦𝔢𝔠𝔢 𝔠𝔞𝔫 𝔠𝔞𝔭𝔱𝔲𝔯𝔢 𝔬𝔭𝔭𝔬𝔫𝔢𝔫𝔱 𝔭𝔦𝔢𝔠𝔢 𝔟𝔶 𝔧𝔲𝔪𝔭𝔦𝔫𝔤 𝔬𝔳𝔢𝔯 𝔦𝔱 𝔞𝔫𝔡 𝔩𝔞𝔫𝔡𝔦𝔫𝔤 𝔱𝔬 𝔢𝔪𝔭𝔱𝔶 𝔭𝔬𝔦𝔫𝔱 𝔧𝔲𝔰𝔱 𝔟𝔢𝔶𝔬𝔫𝔡 𝔦𝔱 (𝔰𝔦𝔪𝔦𝔩𝔞𝔯 𝔱𝔬 𝔡𝔯𝔞𝔲𝔤𝔥𝔱𝔰).
</li>
<li>
ℭ𝔞𝔭𝔱𝔲𝔯𝔢𝔰 𝔞𝔯𝔢 𝔪𝔞𝔫𝔞𝔱𝔬𝔯𝔶 𝔦𝔣 𝔭𝔬𝔰𝔰𝔦𝔟𝔩𝔢 𝔞𝔫𝔡 𝔪𝔬𝔯𝔢 𝔱𝔥𝔞𝔫 𝔬𝔫𝔢 𝔠𝔞𝔭𝔱𝔲𝔯𝔢 𝔠𝔞𝔫 𝔟𝔢 𝔡𝔬𝔫𝔢 𝔦𝔫 𝔱𝔥𝔢 𝔰𝔞𝔪𝔢 𝔱𝔲𝔯𝔫 𝔦𝔣 𝔭𝔬𝔰𝔰𝔦𝔟𝔩𝔢.
</li>
<li>
𝔗𝔥𝔢 𝔤𝔞𝔪𝔢 𝔦𝔰 𝔴𝔬𝔫 𝔟𝔶 𝔱𝔥𝔢 𝔭𝔩𝔞𝔶𝔢𝔯 𝔴𝔥𝔬 𝔠𝔞𝔭𝔱𝔲𝔯𝔢𝔰 𝔞𝔩𝔩 𝔬𝔣 𝔬𝔭𝔭𝔬𝔫𝔢𝔫𝔱 𝔭𝔦𝔢𝔠𝔢𝔰. A 𝔭𝔩𝔞𝔶𝔢𝔯 𝔠𝔞𝔫 𝔞𝔩𝔰𝔬 𝔩𝔬𝔰𝔢 𝔦𝔣 𝔥𝔢/𝔰𝔥𝔢 𝔥𝔞𝔰 𝔫𝔬 𝔞𝔳𝔞𝔦𝔩𝔞𝔟𝔩𝔢 𝔪𝔬𝔳𝔢𝔰.
</li>
</ul>
</div>
<div class="replay" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m31 25.5-4.2-4.2h-4.4l-1-1a7 7 0 0 0 .1-8.6L26 7.2C26.6 8 27 9 27.6 10c1.5-3.1 2.7-6.2 3.4-9.2-3 .8-6.1 2-9.2 3.4 1.1.5 2 1 2.9 1.8l-4.5 4.4a7 7 0 0 0-8.6 0L7.2 6C8 5.3 9 4.7 10.1 4.2A53 53 0 0 0 .9.8c.7 3 2 6.1 3.4 9.2.4-1 1-2 1.6-2.7l4.5 4.5a7 7 0 0 0 0 8.4l-1 1.1H5L1 25.5H5l-.6.7 1.3 1.3.6-.6V31l4.2-4.3v-4.2l1.2-1.2a7 7 0 0 0 8.2.1l1.3 1.3v4l4.2 4.3v-4l1.3 1.2L28 27l-1.4-1.5H31zM20 16c0 .8-.2 1.6-.6 2.3L17.2 16l2.3-2.3c.4.7.6 1.4.6 2.2zm-4-4.2c.8 0 1.6.3 2.2.7L16 14.7l-2.2-2.3c.6-.4 1.4-.7 2.3-.7zM11.7 16c0-.8.2-1.5.6-2.1l2.2 2.3-2 2c-.5-.6-.8-1.4-.8-2.2zM16 20c-.7 0-1.5-.2-2-.6l2-2 2.1 2c-.6.4-1.3.6-2 .6z"/></svg>
ℜ𝔢𝔭𝔩𝔞𝔶
</div>
</div>
<script src="./game.js"></script>
</body>
</html>