-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (139 loc) · 6.11 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<title>Set</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Header -->
<div class="header">
<nav>
<img src="./imgs/GameLogo.png" class="img">
<ul class="header_lists">
<!-- New button will restart the timer and reset the players scores -->
<li class="btn" id="start-timer" onclick="newGame()">New Game</li>
<li class="btn" id="open-cards" onclick="openNewCards()">Open New Cards</li>
<li class="btn" id="one-player"><a href="./one_player_mode.html">1 Player</a></li>
<!-- Should two player mode be a defauld or should we have a button for it as well-->
<li class="btn" id="start-timer-2" onclick="newGame()">2 players</li>
<div class="dropDown">
<li class="btn">Hints</li>
<div class="dropDown_hints">
<a id="hint1" onclick="hint()">😱1 card</a>
<a id="hint2" onclick="hint2()">🥵2 cards</a>
</div>
</div>
<li><a href="javascript:void(0)" onclick="document.getElementById('pop-up').style.display='block'; document.getElementById('fade').style.display='block'" class="btn">About</a></li>
</ul>
<button type="button" onclick="toggle()" id="dmbtn"><span></span></button>
</nav>
</div>
<div class="about_page" id="pop-up">
<a href="javascript:void(0)" onclick="document.getElementById('pop-up').style.display='none'; document.getElementById('fade').style.display='none'" class="btn"> close </a>
<img src="./imgs/ABout_pop_up.png" class="about-img">
</div>
<!-- Left Column -->
<div class="left_column">
<ul>
<div class="time-layout">
<li>Time:</li>
<div class="metadata">
<li id="timer">00:00 sec</li>
</div>
</div>
<div class="points-layout">
<li style="text-align: left;">Points:</li>
<div>
<li>Player 1</li>
<div class="metadata">
<li id="points1">00 points</li>
</div>
<li>Player 2</li>
<div class="metadata">
<li id="points2">00 points</li>
</div>
</div>
</div>
<div>
<li>Player 1 press the key 'A' for your turn</li>
<br>
<li>Player 2 press the key 'L' for your turn</li>
</div>
</ul>
</div>
<!-- Displays various messages; who's turn, whether a set or not -->
<div id="message-container"> Please press the 'New Game' button to play the game:</div>
<!-- deck of cards -->
<div class="container">
<div class="card" id="card1" onclick="handleClick(1)"></div>
<div class="card" id="card2" onclick="handleClick(2)"></div>
<div class="card" id="card3" onclick="handleClick(3)"></div>
<div class="card" id="card4" onclick="handleClick(4)"></div>
<div class="card" id="card5" onclick="handleClick(5)"></div>
<div class="card" id="card6" onclick="handleClick(6)"></div>
<div class="card" id="card7" onclick="handleClick(7)"></div>
<div class="card" id="card8" onclick="handleClick(8)"></div>
<div class="card" id="card9" onclick="handleClick(9)"></div>
<div class="card" id="card10" onclick="handleClick(10)"></div>
<div class="card" id="card11" onclick="handleClick(11)"></div>
<div class="card" id="card12" onclick="handleClick(12)"></div>
</div>
<script>
/*
* toggle function calls the light mode function to change the
* game's theme for dark to light and vice-versa
*/
function toggle(){
var btn=document.getElementById("dmbtn");
btn.classList.toggle("active")
lightMode();
}
/*
* lightMode function changes from dark themed game to light themed game
*/
function lightMode(){
var page=document.querySelector('body');
page.classList.toggle('light-mode');
var selected_cards=document.querySelectorAll('.card.selected');
selected_cards.forEach(function(card){
card.classList.toggle('.light-mode .card.selected');
});
}
/*
* Function to reset scores when 'New Game' is clicked
*/
const reset_score=document.getElementById('start-timer');
reset_score.addEventListener('click', function(){
resetScores();
});
/*
* Start timer and update timer;
* Start timer already starts the timer when the page loads and whenever 'New Game'
* is pressed it restarts the timer
* Update timer updates the time
*/
document.getElementById('start-timer').addEventListener('click', start_timer);
document.getElementById('start-timer-2').addEventListener('click', start_timer);
let sec=0;
let min=0;
let duration;
function start_timer(){
sec=0;
min=0;
clearInterval(duration)
duration=setInterval(update_timer,1000)
}
function update_timer(){
const timer=document.getElementById('timer');
sec++;
if(sec >= 60){
sec=0;
min++;
}
const converted_time=`${min.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')} secs`;
timer.textContent=converted_time;
}
</script>
<script src="script.js"></script>
</body>
</html>