Explorer
project
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
<div class="solitaire-app">
<header class="bar">
<div class="brand">
<span class="logo">♠</span>
<h1>Rloop Solitaire</h1>
</div>
<div class="stats">
<div class="stat"><span class="label">Moves</span><span id="moves">0</span></div>
<div class="stat"><span class="label">Score</span><span id="score">0</span></div>
<div class="stat"><span class="label">Time</span><span id="time">00:00</span></div>
</div>
<div class="actions">
<button id="undo-btn" class="btn ghost" type="button">Undo</button>
<button id="new-btn" class="btn solid" type="button">New Game</button>
</div>
</header>
<main class="board">
<section class="top-row">
<div class="pile stock" id="stock" data-pile="stock"></div>
<div class="pile waste" id="waste" data-pile="waste"></div>
<div class="spacer"></div>
<div class="pile foundation" data-pile="foundation" data-index="0" data-suit="♠"></div>
<div class="pile foundation" data-pile="foundation" data-index="1" data-suit="♥"></div>
<div class="pile foundation" data-pile="foundation" data-index="2" data-suit="♦"></div>
<div class="pile foundation" data-pile="foundation" data-index="3" data-suit="♣"></div>
</section>
<section class="tableau" id="tableau">
<div class="pile tableau-pile" data-pile="tableau" data-index="0"></div>
<div class="pile tableau-pile" data-pile="tableau" data-index="1"></div>
<div class="pile tableau-pile" data-pile="tableau" data-index="2"></div>
<div class="pile tableau-pile" data-pile="tableau" data-index="3"></div>
<div class="pile tableau-pile" data-pile="tableau" data-index="4"></div>
<div class="pile tableau-pile" data-pile="tableau" data-index="5"></div>
<div class="pile tableau-pile" data-pile="tableau" data-index="6"></div>
</section>
</main>
<div class="win-overlay" id="win" hidden>
<div class="win-card">
<div class="win-glow"></div>
<h2>You Win!</h2>
<p id="win-summary">Great play.</p>
<button id="win-again" class="btn solid" type="button">Play Again</button>
</div>
</div>
</div>
rloop.dev/p/Pr-E16