remote.html

1	<!DOCTYPE html>
2	<html lang="en">
3
4	<head>
5	<meta charset="utf-8" />
6	<title>Dao Game</title>
7	<meta name="viewport" content="width=device-width, initial-scale=1" />
8	<link rel="icon" href="yin-yang.svg" type="image/svg+xml" />
9	<link rel="stylesheet" href="styles.css" />
10	<script defer src="dist/pages/remote.js"></script>
11	</head>
12
13	<body>
14	<div id="placeholders" class="invisible">
15	<p class="piece p1-piece" id="default-p1-piece"></p>
16	<p class="piece p2-piece" id="default-p2-piece"></p>
17	</div>
18	<main class="invisible">
19	<div class="controls">
20	<span class="p1-turn-text">Red</span>
21	<span class="p2-turn-text">Blue</span>
22	</div>
23
24	<table id="table"></table>
25	</main>
26
27	<hr />
28	<div id="share-container" class="invisible info">
29	Press this button to share a link with your opponent.
30	<button id="share-link">Share <img src="share.png" /></button>
31	</div>
32	<hr />
33
34	<div class="title">
35	<p>Board game <a href="https://en.wikipedia.org/wiki/Dao_(game)" target="_blank" rel="noopener">Dao</a>.</p>
36	</div>
37
38	<div class="info">
39	The game consists of only one simple rule and three ways to win.
40
41	Rules:
42	<ul>
43	<li>
44	Pieces move in a straight line, including diagonally, as far as possible with no jumps.
45	</li>
46	</ul>
47	Ways to win:
48	<ol>
49	<li>Arrange your pieces in a straight line on the board (not diagonally)</li>
50	<li>Occupy four corners of the board</li>
51	<li>Form a 2x2 square anywhere on the board</li>
52	</ol>
53	</div>
54
55	<hr />
56
57	<div class="info">
58	<p>
59	Here is the
60	<a href="https://gitlab.com/fuzzy-rp/dao-game" target="_blank" rel="noopener">source code</a>
61	</p>
62	</div>
63
64	<div id="other-mouse">
65	<img src="./cursor.png" alt="cursor" />
66	</div>
67
68	</body>
69
70	</html>