-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (129 loc) · 5.13 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
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;1,700&family=Montserrat:wght@500;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="cards.css" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="images/card-favicon.png" type="image/x-icon">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="app.js"></script>
<title>Concentration game</title>
</head>
<body>
<h1>Concentration</h1>
<div id="start-screen" class="screen">
<img
src="images/aces.png"
alt="picture of poker cards"
/>
<div id="button-container">
<button id="start-button">Start game</button><br />
</div>
</div>
<div id="input-screen" class="screen">
<section class="rules">
<div id="rules-container">
<h3>Rules of the game</h3>
<p>A deck of 52 cards is split equally between the player and computer. You and the computer will take turns putting down one card. The next turn, the current card (of the previous turn) will move into the previous card slot, and the previous card will move into the discard pile. </p>
<p>When the previous and current cards meet a certain condition(s), press the ‘SNAP’ button faster than the computer. </p>
<h4>Conditions to press the SNAP button</h4>
<p>Level 1:</p>
<ul>
<li>Two cards of the same rank/value (eg. Q♠ & Q♦)</li>
</ul>
<p>Level 2:</p>
<ul>
<li>Two cards of the same rank/value (eg. Q♠ & Q♦) OR </li>
<li>Two cards of the same suit (eg. 4♥ & J♥)</li>
</ul>
<p>If you ‘snap’ correctly, the discard pile will be added to the computer’s deck.</p>
<p>If you ‘snap’ wrongly or ‘snap’ slower than the computer, the discard pile will be added to your deck.</p>
<h4>How to win</h4>
<p>The winner is the one who finishes all his cards first.</p>
</div>
</section>
<section class="input">
<h3>Input your name:</h3>
<input id="input-name" placeholder="Type your name here" /><br />
<h3 class="level">Choose your level:</h3>
<select name="level" id="select-level">
<option value="1">Level 1</option>
<option value="2">Level 2</option>
</select>
<br>
<br>
<button id="go-button">Go!</button>
</br>
</br>
<button id="back-to-start-button">Back</button>
</section>
</div>
<div id="game-screen" class="screen playingCards simpleCards">
<div class="container">
<div>
<div class="caption">Computer's deck</div>
<div class="card-container computer-deck card back">
Computer's cards:
<br />
<span class="computer-count count">26</span>
</div>
</div>
<br />
<br />
<div class="mid-cards">
<div class="caption">Discard deck
</div>
<div class="card-container discard-deck card back">
Discard pile:
<br />
<span class="discard-count count">0</span>
</div>
</div>
<div class="mid-cards">
<div>Previous card</div>
<div class="card placeholder-suit" id="previous-card-container">
<span class="rank previous-card-rank"></span>
<span class="suit previous-card-suit"></span>
</div>
</div>
<div class="mid-cards">
<div>Current card</div>
<div class="card placeholder-suit" id="current-card-container">
<span class="rank current-card-rank"></span>
<span class="suit current-card-suit"></span>
</div>
</div>
<div class="turn-result-message"></div>
<div class="buttons-container">
<button class="snap-button button" role="button">SNAP</button> <br />
<button class="start-game-button button">Start game</button>
<button class="pause-game-button button">Pause game</button>
</div>
<div>
</br>
<div class="caption"><span id="player-name">Player</span>'s deck</div>
<div class="card-container player-deck card back">
Player's cards:
<br />
<span class="player-count count">26</span>
</div>
</div>
</div>
</div>
<div id="post-game-screen" class="screen">
<div id="post-game-result-container">
<h1 id="post-game-result-message"></h1>
</div>
<button class="restart-game-button">Restart game</button>
</div>
</body>
</html>