forked from Codenames-Online/front
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (170 loc) · 5.34 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
---
---
<head>
<title>Codebois Online</title>
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/temp-data.js"></script>
<script src="js/utils.js"></script>
<script src="js/constants.js"></script>
<script src="js/overlays.js"></script>
<script src="js/pages/registration.js"></script>
<script src="js/pages/lobby-registration.js"></script>
<script src="js/pages/roster.js"></script>
<script src="js/pages/game.js"></script>
<script src="js/socket.js"></script>
<script src="js/main.js"></script>
</head>
<body user-team="blue" user-role="operative">
<!-- Section 1: Player Registration -->
<div class="registration-page-cont">
<div class="registration-inner">
<div class="text">What is your name?</div>
<input type="text" placeholder="Enter your name">
<button class="btn green disabled" id="register">Enter</button>
</div>
</div>
<!-- Section 1: Lobby Picking -->
<div class="lobby-registration-page-cont">
<div class="lobby-registration-inner">
<div class="join-lobby-cont">
<h2>Join an Existing Lobby</h2>
<input type="text" placeholder="Enter a lobby access code">
<span class="error-msg">We couldn’t find a lobby with that access code!</span>
<button class="btn green disabled" id="joinLobby">Join Lobby</button>
</div>
<div class="create-lobby-cont">
<h3>Don't have a lobby to join?</h3>
<button class="btn green" id="createLobby">Create A Lobby</button>
</div>
</div>
</div>
<!-- Section 2: Lobby Page -->
<div class="roster-page-cont">
<div class="roster-cont">
<div class="lobby">
Access Code:
<span id="access-code"></span>
</div>
<div class="blue roster">
<div class="title">Blue Team</div>
<div class="players">
<!-- Blue team players inserted here -->
<!-- Ex: <div class="player self">John Doe</div> -->
</div>
</div>
<div class="red roster">
<div class="title">Red Team</div>
<div class="players">
<!-- Red team players inserted here -->
</div>
</div>
<button class="btn green" id="switch-teams">Switch Teams</button>
<button class="btn green disabled" id="start-game">Start</button>
<div class="player-count-msg">
There need to be at least two players <br>
on each team to start a game.
</div>
</div>
</div>
<!-- Section 3: Game interface -->
<div class="game-page-cont">
<div class="game-page">
<header>
<span class="name">Samantha</span> | <span class="role">Operative</span>
</header>
<div class="game-interface">
<div class="score-board">
<h2 class="title">Cards Left</h2>
<div class="score-cont">
<span class="score blue">0</span>
<div class="divider"></div>
<span class="score red">0</span>
</div>
</div>
<div class="side-roster">
<div class="roster blue">
<div class="title">Blue Team</div>
<div class="players"></div>
</div>
<div class="roster red">
<div class="title">Red Team</div>
<div class="players"></div>
</div>
</div>
<div class="clue" data-team="">
<div class="text"></div>
<div class="team-sect">
<div class="turn-img"></div>
<div class="turn-text"></div>
</div>
</div>
<div class="board">
{% for i in (1..25) %}
<div class="card selectable">
<span>Codename</span>
<div class="overlay">
<div class="icon-cont"></div>
</div>
</div>
{% endfor %}
</div>
<div class="chat">
<h1>Chat</h1>
<div class="msg-cont">
</div>
<div class="send-msg">
<input type="text" placeholder="Type a message">
<input type="submit" value="Send Message">
<div class="cant-send-msg">
As the spymaster, you can only communicate with operatives via clues.
</div>
</div>
</div>
<div class="guess-panel">
Pick your guess above based on your spymaster's clue.
<br><br>
<button class="btn green" id="submit-guess">Submit Guess</button>
<button class="btn red" id="end-turn">End Turn</button>
<br><br>
Unanimous consensus on the guess is needed before submitting.
</div>
</div>
</div>
</div>
<div class="window-overlay">
<div class="overlay-msg" id="word-on-board">
That word is on the board! Please try again!
<br><br>
<button class="btn red close-overlay">Close</button>
</div>
<div class="overlay-msg" id="not-in-dict">
That word isn’t in our dictionary. Please try again!
<br><br>
<button class="btn red close-overlay">Close</button>
</div>
<div class="overlay-msg" id="invalid-num-guesses">
That is not a valid number of guesses. Please try again!
<br><br>
<button class="btn red close-overlay">Close</button>
</div>
<div class="overlay-msg" id="end-game-red">
<h1>Red Wins!</h1>
<div class="overlay-body">
Thanks for trying my version of Codenames. @Drybaby
</div>
</div>
<div class="overlay-msg end-game" id="end-game-blue">
<h1>Blue Wins!</h1>
<div class="overlay-body">
Thanks for trying my version of Codenames. @Drybaby
</div>
</div>
<div class="overlay-msg" id="websocket-error">
<h3>We're having trouble connecting to our servers</h3>
<p>
It seems the Codenames back-end servers might not be working right now, as we couldn't register you into the game.
</p>
</div>
</div>
</body>