-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·138 lines (119 loc) · 4.93 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Quartlet</title>
<script src="assets/modal.js"></script>
<script src="assets/card.js"></script>
<script src="assets/logic.js"></script>
<script src="assets/bundle.js"></script>
<link rel="stylesheet" href="assets/hamburgers.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
</head>
<body>
<div id="gameSettings" class="gameSettings settingsHidden" style="align-items: center;">
<!-- settingsHidden -->
<button class="hamburger hamburger--3dx" id="hamburger" onclick="toggleSettings()">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="settingsContent hidden">
<!-- hidden -->
<div style="width:250px; margin:auto; padding:0px;">
<h1 onclick="killState()">Play Quartlet!</h1>
<p>
There are currently
<b><span id="numQuartets"></span></b>
quartlets on the board!
Can you find one?
</p>
<div id="playWithFriends1">
<input type="text" id="userName" placeholder="Username" data-lpignore="true" oninput="enableButton()"></input>
<input type="text" id="roomName" placeholder="Room_Name" data-lpignore="true" oninput="enableButton()" value="room"></input>
<button class="btn" id="joinRoomButton" onclick="playWithFriends()" disabled>Play with Friends!</button>
</div>
<div id="playWithFriends2" class="hidden">
<b>Waiting For:</b> <span id="playersNotReady"></span><br>
<b>Players Ready:</b> <span id="playersReady"></span>
<button class="btn" id="startGame" disabled onclick="imReady()">I'm Ready!</button>
</div>
<hr>
<button id="hint" onclick="hint()" class="btn">hint</button>
</div>
</div>
<!-- info is stuff that floats above the page
next to the hamburger menu.
-->
<div id="info" class="row">
<button id="leaveGame" class="btn" onclick="killState();location.href=location.href;">
New Game
</button>
<div id="timingInfo"></div>
<div id="scores"></div>
</div>
</div>
<div id="table" class="table" class="shadow"></div>
<div id="console">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script>
window.username = "localMe";
window.countedDown = true; // no countdown for single-player.
// window.sharedState = {
// roomName: "C00L_R00M",
// type: "state", // message type is state and not newId
// timestamp: 0, // when was this state last updated.
// gameStartTime: null,
// gameEndTime: null,
// peers: {
// "jwleijf8": {
// name: "James",
// deck: [],
// ready: false
// },
// "2o8fjo8j": {
// name: "Jack",
// deck: [],
// ready: false
// }
// },
// deck: [], // cards not on the table or in players' decks.
// tableCards: [] // cards on the table
// };
function decrement(el){
el.innerHTML = Date.now();
}
document.body.onload = function(){
let table = document.querySelector("#table");
window.selectedCards = [];
window.myId = 'localMe';
loadState();
for(let i=0; i<12; i++){
table.appendChild(createCard(0, "blue", "square"));
}
// try to rejoin a room you were previously in...
if(oldId in sharedState.peers
&& oldId != "localMe"
&& sharedState.roomName != "C00L_R00M"){
let roomName = sharedState.roomName;
let username = sharedState.peers[oldId].name;
console.log(`Trying to rejoin room "${roomName}" as "${username}"`);
rejoinRoom(roomName, username);
} else{
animateState();
}
}
</script>
</body>
</html>