-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (120 loc) · 5.01 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Day at the Races</title>
<link rel="stylesheet" href="styles.css">
<style>
.center-button {
display: flex;
justify-content: center;
}
.notification-card, .winner-card {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
text-align: center;
}
.center-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.header {
position: absolute;
top: 10px;
right: 10px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
</style>
</head>
<body>
<div class="header">
<div id="high-score">
High Score: <span id="high-score-value">0</span> coins
</div>
<div id="bank">
Bank: <span id="bank-value">0</span> coins
</div>
</div>
<div id="start-screen" class="center-content">
<img src="startImg.png" alt="A Day at the Races" class="start-image">
<div class="center-button">
<button class="start-button" onclick="showBettingScreen()">Add Coins</button>
</div>
<p>Welcome to A Day at the Races! Start with 10 coins and try to win big by betting on your favorite horse!</p>
</div>
<div id="betting-screen" class="center-content" style="display: none;">
<h1>Place Your Bet</h1>
<div id="betting">
<div>
<label for="bet-slider">Bet amount (1-<span id="available-balance">10</span> coins):</label>
<input type="range" id="bet-slider" min="1" max="10" value="1" oninput="updateBetAmount()">
<span id="bet-amount">1</span> coins
</div>
<div>
<label>Select your horse:</label>
<div class="center-button">
<button class="horse-select" data-horse="1" style="background-color: blue;" onclick="selectHorse(1)">Mr. Blue</button>
<button class="horse-select" data-horse="2" style="background-color: red;" onclick="selectHorse(2)">Red Rocket</button>
<button class="horse-select" data-horse="3" style="background-color: green;" onclick="selectHorse(3)">Green Thunder</button>
<button class="horse-select" data-horse="4" style="background-color: pink;" onclick="selectHorse(4)">Pink Lightning</button>
</div>
</div>
<p>You've chosen: <span id="chosen-horse">None</span></p>
<div class="center-button">
<button onclick="startRace()">Start Race</button>
</div>
</div>
</div>
<div id="game-screen" class="center-content" style="display: none;">
<h1>A Day at the Races</h1>
<p>Balance: <span id="coins">0</span> coins</p>
<p>Bet Amount: <span id="current-bet-amount">1</span> coins</p>
<p>Horse Bet On: <span id="current-chosen-horse">None</span></p>
<div class="race-track">
<div class="lane" id="lane1">
<div class="runner horse" id="runner1" style="color: blue;">🐎</div>
</div>
<div class="lane" id="lane2">
<div class="runner horse" id="runner2" style="color: red;">🐎</div>
</div>
<div class="lane" id="lane3">
<div class="runner horse" id="runner3" style="color: green;">🐎</div>
</div>
<div class="lane" id="lane4">
<div class="runner horse" id="runner4" style="color: pink;">🐎</div>
</div>
</div>
<p id="result-message"></p>
</div>
<div id="result-popup" class="center-content" style="display: none;">
<h1>Race Result</h1>
<p id="result-message-popup"></p>
<button id="next-race-button" onclick="nextRace()">Next Race</button>
<button id="back-to-menu-button" onclick="backToMenu()">Back to Menu</button>
<p id="no-funds-message" style="display: none; color: red;">Sorry, you have no funds to bid on the next race.</p>
</div>
<div id="notification-card" class="notification-card">
<h1>Notification</h1>
<p id="notification-message"></p>
<button onclick="closeNotification()">OK</button>
</div>
<div id="winner-card" class="winner-card">
<h1>Winner</h1>
<p id="winner-message"></p>
<button onclick="closeWinnerCard()">OK</button>
</div>
<script src="script.js"></script>
</body>
</html>