-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
58 lines (55 loc) · 2.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rock Paper Scissors</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="A console-based rock paper scissors game.">
<link href="/assets/output.css" rel="stylesheet">
<link rel="preload" as="image" href="/assets/table-tie.svg">
<link rel="preload" as="image" href="/assets/table-win.svg">
<link rel="preload" as="image" href="/assets/table-loss.svg">
<link rel="preload" as="image" href="/assets/Player-Paper.png">
<link rel="preload" as="image" href="/assets/Player-Scissors.png">
<link rel="preload" as="image" href="/assets/Opponent-Paper.png">
<link rel="preload" as="image" href="/assets/Opponent-Scissors.png">
</head>
<body class="bg-black text-white text-center flex flex-col items-center gap-6 pb-48 select-none">
<p class="mt-20 italic opacity-50">First to 5 wins</p>
<section id="blankRound" class="hidden mt-12">
<div id="roundHeading" class="flex flex-col gap-2">
<h1 id="roundSign" class="text-sm font-bold text-amber-300 font-mono uppercase tracking-[0.4em]">Round 0</h1>
<p id="stepItems" class="font-bold text-center">
<span class="opacity-50">“Rock…</span>
<span class="opacity-50">Paper…</span>
<span class="opacity-50">Scissors…</span>
<span class="opacity-50">Shoot!”</span>
</p>
</div>
<div id="stage" class="relative mt-12">
<div id="hands" class="absolute inset-0 -top-8 flex flex-row justify-between px-[40px] h-[64px] transition">
<img id="playerHand" src="/assets/Player-Rock.png" alt="An emoji of a human fist representing the player's 'rock.'">
<img id="enemyHand" class="grayscale" src="/assets/Opponent-Rock.png" alt="An emoji of a human fist representing the opponent's 'rock.'">
</div>
<div id="table" class="relative -z-10">
<img id="glassImg" src="/assets/table.svg" alt="A glassImg table with a 3D perspective.">
<span id="winLose" class="hidden absolute inset-0 translate-y-2.5 text-4xl font-black opacity-30 uppercase">Win</span>
</div>
<div id="scoreboard" class="flex flex-row justify-between px-12 pt-1">
<p id="scoreLeft" class="font-mono text-center opacity-80 font-semibold">0</p>
<p id="whyOutcome" class="hidden italic opacity-80">Outcome.</p>
<p id="scoreRight" class="font-mono text-center opacity-80 font-semibold">0</p>
</div>
</div>
<p id="instruction" class="opacity-80 font-medium">Tap anywhere</p>
</section>
<div id="choices" class="hidden flex flex-col gap-6 items-start font-bold -translate-x-20">
<button id="Rk" class="btn before:content-['🪨_']">Rock</button>
<button id="Pr" class="btn before:content-['📄_']">Paper</button>
<button id="Ss" class="btn before:content-['✂️_']">Scissors</button>
</div>
<button id="nextBtn" class="btn hidden mb-48">Next Round</button>
<p id="final" class="hidden text-8xl font-black opacity-30 uppercase mt-32 mb-40 px-12 mx-auto"></p>
<script src="/game.js"></script>
</body>
</html>