-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaliases.html
166 lines (154 loc) · 8.87 KB
/
aliases.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
<!DOCTYPE html>
<html>
<head>
<!-- meta tags for mobile support -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS for Bootstrap library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- JavaScript for Bootstrap libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- JavaScript for random/hash libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.0/spark-md5.min.js"></script>
<title>Aliases</title>
<base href="aliases/index.html">
<link rel="shortcut icon" href="../TacoOper.png">
<!-- CSS project files -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/buttons.css">
<!-- JavaScript project files -->
<script src="js/main.js"></script>
<script src="js/buttons.js"></script>
<script src="js/constants.js"></script>
<script src="js/generator.js"></script>
<script src="data/words.js"></script>
<script src="../common/buttons.js"></script>
</head>
<body class="bg-dark" onresize="scaleAliasTable()" onorientationchange="scaleAliasTable()">
<div class="container">
<!-- controls for generating aliases from game ID -->
<div class="d-flex flex-wrap justify-content-center">
<div class="p-3 my-auto">
<span class="text-light">Enter Game ID:</span>
</div>
<div class="p-3">
<input type="text" class="form-control bg-dark text-light" id="game-id-input">
</div>
<div class="p-3">
<button type="button" class="btn btn-warning" id="generate-button">Generate</button>
</div>
</div>
<!-- message for start of first game -->
<div class="d-flex justify-content-center" id="start-game-span">
<span class="text-light p-5">Read the instructions below to start your first game of Aliases...</span>
</div>
<!-- table of aliases generated from game ID -->
<div class="d-flex flex-wrap justify-content-center">
<table class="table table-borderless">
<tbody id="alias-table">
</table>
</div>
<!-- display remaining aliases for each team and controls for ending current turn -->
<div class="d-flex flex-wrap justify-content-center">
<div class="my-auto">
<button type="button" class="btn btn-blue-team btn-no-click text-light" id="blue-turn-button"
disabled="">Blue Team:</button>
</div>
<div class="p-3">
<input type="text" class="form-control bg-dark text-light" id="blue-team-input" disabled="">
</div>
<div class="my-auto">
<button type="button" class="btn btn-no-click text-light" id="red-turn-button"
disabled="">Red Team:</button>
</div>
<div class="p-3">
<input type="text" class="form-control bg-dark text-light" id="red-team-input" disabled="">
</div>
<div class="p-3">
<button type="button" class="btn btn-light" id="end-turn-button">End Turn</button>
</div>
</div>
<!-- controls for selecting player/spymaster mode -->
<div class="d-flex flex-wrap justify-content-center">
<div class="p-3 my-auto">
<span class="text-light">Select Mode:</span>
</div>
<div class="p-3 btn-group">
<button type="button" class="btn btn-primary" id="player-button">Player</button>
<button type="button" class="btn btn-light" id="spymaster-button">Spymaster</button>
</div>
</div>
<!-- message for end of every game -->
<div class="d-flex justify-content-center p-4">
<button type="button" class="btn btn-no-click" id="end-game-button" disabled=""></button>
</div>
<!-- message with helpful instructions and info -->
<div class="card">
<div class="card-header bg-secondary" data-toggle="collapse" data-target="#collapse-instructions">
<a class="text-light">Instructions</a>
</div>
<div id="collapse-instructions" class="collapse">
<div class="card-body bg-dark text-light">
<ul>
<li>Choose a unique "Game ID" to use, which must be verbally shared and entered by everyone
in your group.</li>
<li>Click the "Generate" button to create a grid of unique Alias cards based on the "Game
ID". Verbally verify that everyone is starting with the same local game state.</li>
<li>One chosen member of each team must select "Spymaster" mode to view the hidden colors
associated with all cards. Everyone else must remain in "Player" mode.</li>
<li>The "Blue Team" and "Red Team" counters show the remaining unrevealed cards on each
team.</li>
<li>Always starting with the Blue team, the Spymaster verbally provides a clue word to the
other team members.</li>
<li>After verbally deciding which card to select, everyone on both teams must click that
card to reveal the color.</li>
<li>Alternatively, if using video chat, one Player could screen-share to everyone else so
that only that game state is used for all Players (Spymasters still require their own
local game state with revealed Alias cards).</li>
<li>In accordance with the standard rules, teams alternate selecting cards using clues
provided by the Spymaster. Everyone must click each card in sequence to locally maintain
the latest game state.</li>
<li>The game ends when either team reveals all of their cards first or the Assassin card is
unintentionally revealed.</li>
<li>To play another game, choose a new "Game ID" to share and generate another grid of
Alias cards.</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-secondary" data-toggle="collapse" data-target="#collapse-about">
<a class="text-light">About</a>
</div>
<div id="collapse-about" class="collapse">
<div class="card-body bg-dark text-light">
This project is a front-end only variant of the popular "Codenames" board game. Therefore, no
server is used to maintain a common game state between all players. Your verbal discussion
effectively acts as the server to update everyone's local game state. Each player initially
generates the same unique grid of Aliases based on the verbally shared "Game ID", but each card
must be manually and independently clicked by everyone from that point forward. The current
team's end of turn and any card selections should be easily synchronized during group
discussion.
</div>
</div>
</div>
</div>
</body>
<footer>
<hr class="bg-light">
<div class="d-flex flex-wrap justify-content-center">
<div class="p-3">
<span class="text-light" id="version-span">
</div>
<div class="p-3">
<span class="text-light">-</span>
</div>
<div class="p-3">
<a href="https://github.com/tacooper/tacooper.github.io">Source Code</a>
</div>
</div>
</footer>
</html>