-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
72 lines (69 loc) · 7.73 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Claw & Order</title>
</head>
<body>
<div class="main">
<div class="table story"></div>
<img data-f="skip" class="cat story" src="data:image/png;base64,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" />
<div class="cops">
<div data-f="difficulty" class="cop1 story"></div>
<div class="cop2-wrapper">
<div data-f="sound" class="cop2 story"></div>
</div>
</div>
<div data-f="story" class="story-area box story">
<h1 style="text-align: center; border-top: 8px solid #000; border-bottom: 8px solid #000; max-width: 200px; margin: 0 auto">Claw & Order</h1>
<br>
<div>Bennet: Hello, I'm detective Bennet. I'll be cat translating through this interrogation. Tap on this text to proceed, left cop (or 's') to toggle sound. Right cop (or 'd') to toggle difficulty, cat (or 'space bar') to skip story.</div>
</div>
<div class="game-area-wrapper game hide">
<div class="game-area top">
<div class="zones box stats">
<div class="center"><select class="select">
</select></div>
<h3 class="center">-Stashes-</h3>
<div style="display: inline-block;"><div>♠: <span></span></div>
<div>♥: <span></span></div></div>
<div style="display: inline-block; float: right;"><div>♦: <span></span></div>
<div>♣: <span></span></div></div>
<div><div>'🂡'/'🂫'/'🃟': <span></span></div></div>
<hr>
<div class="center" style="margin-top: 6px;"><button data-f="pass">Pass turn</button>
<div><h3>Total: <span></span>/<span></span></h3></div></div>
</div>
<div class="zones box controls">
<div>20x♣<button data-f="add">Add 2</button></div>
<div>20x♠<button data-f="subtract">Subtract 3</button></div>
<div>20x♦<button data-f="redraw">Redraw</button></div>
<div>10x♠♣♦<button data-f="remove">Remove Card</button></div>
<div>60x♠♣♦♥<button data-f="addFaceCard">Add Face Card</button></div>
</div>
<div class="zones box text-area">Bennet: He says the rules are as follows.
<ul style="color:red">
<li>The goal of the game is to win a round with 20 Aces, Jokers or face cards in our deck.</li>
<li>Use the dropdown in the top left to see what's currently in our base deck.</li>
<li>Tap on the deck to draw cards. Each card adds to a stash (♥♣♠♦).</li>
<li>When the stashes get large enough we can use the abilities to the left.</li>
<li>Draw at least 2 cards without exceeding the max of 23, similar to Blackjack.</li>
<li>If the total is exactly 23 after drawing a card we win the round!</li>
<li>If we go over the max and pass or have 0 ♥'s in our stash we immediately lose.</li>
<li>We can pass at any time after we have drawn the required number of cards but if we are under our max that will be subtracted from our ♥ stash.</li>
</ul>
</div>
</div>
<div class="game-area">
<div data-f="draw" class="zones box deck zone-area"></div>
<div class="zones box play zone-area"></div>
</div>
<div class="game-area">
<div class="zones box discard zone-area"></div>
</div>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>