forked from Nick-Vasquez-CSU/Rock-Paper-Scissors
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
50 lines (43 loc) · 2.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rock, Paper, Scissors Simulator</title>
<!-- <link rel="stylesheet" href="nontail.css"> -->
<link rel="stylesheet" href="/newtitles/output.css">
</head>
<body class="px-6 md:px-24 xl:px-52" style="background-color: grey;">
<!-- Round and score counters in top left corner -->
<div id= "gameTitle">
<h1 class="titleTEXT1 mt-6 p-6 text-center text-4xl font-bold">Rock, Paper, Scissors</h1>
<h3 class="text-xl font-semibold">Round <span id="roundNumber"></span></h3>
<h3 class="titleTEXT2 text-xl">Current Score</h3>
<h4 class="scoreTEXT text-xl" style="color: blue;">User: <span id="userText"></span></h4>
<h4 class="scoreTEXT text-xl" style = "color: red;">CPU: <span id="cpuText"></span></h4>
</div>
<!-- Rock paper scissors images -->
<h4 class="flex justify-center items-center text-xl mt-5">Make your selection by clicking below!</h4>
<div id= "gamePlay" class="flex justify-center items-center p-1 space-x-24 px-5 py-5">
<button class="chooser" id="Rock"><img class="h-64" src="assets/images/Rock.png" alt = "image of Rock icon"> </button>
<button class="chooser" id="Paper"><img class="h-64" src="assets/images/Paper.png" alt = "image of Paper icon"> </button>
<button class="chooser" id="Scissors"><img class="h-64" src="assets/images/Scissors.png" alt = "image of Scissors icon"> </button>
</div>
<!-- 'You played' and 'CPU played' text -->
<div id= "picks" class="flex justify-center items-center space-x-20 px-20 py-5">
<p class="text-xl" id="userPick"> </p>
<p class="text-xl" id="cpuPick"> </p>
</div>
<!-- Game result text -->
<div class="flex justify-center items-center space-x-20 px-20 py-5">
<p class="text-xl" id="results"> </p>
</div>
<!-- Game history -->
<div id= "gameHistory">
<h2 class="footTEXT1 text-lg" style="color: orange ;">History: </h2>
</div>
<main>
<!-- Inside main is where history will be generated -->
</main>
<script type="module" src="game.js"></script>
</body>
</html>