-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (134 loc) · 5.85 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cluedo Notes</title>
<link rel="stylesheet" href="./styles.css" />
<link rel="canonical" href="https://mikeybinnswebdesign.github.io/cluedo-notes/" />
<link rel="icon" type="image/png" href="./icons/favicon.png" />
<link rel="manifest" href="./manifest.json" />
</head>
<body class="nojs">
<script>
document.getElementsByTagName('body')[0].classList.replace('nojs', 'js');
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/cluedo-notes/sw.js', { scope: '/cluedo-notes/' });
}
</script>
<header class="site_header">
<img class="logo" src="./img/cluedo.jpg" alt="Cluedo logo." />
<h1 class="site_title">detective notes</h1>
</header>
<noscript>
<div class="js_required_banner">
<p>
Javascript is required for this site to work. Don't worry, this site doesn't use any tracking or ad software,
only the javascript required to make the page work. Please enable javascript and refresh.
</p>
</div>
</noscript>
<main>
<div class="start_screen" id="start_screen">
<form method="POST" id="start_form">
<fieldset class="players">
<legend>Players:</legend>
<div class="fieldset">
<legend>Player count</legend>
<input type="radio" name="player_count" id="player_count_2" value="2" />
<label for="player_count_2"><span>2</span></label>
<input type="radio" name="player_count" id="player_count_3" value="3" />
<label for="player_count_3"><span>3</span></label>
<input type="radio" name="player_count" id="player_count_4" value="4" checked />
<label for="player_count_4"><span>4</span></label>
<input type="radio" name="player_count" id="player_count_5" value="5" />
<label for="player_count_5"><span>5</span></label>
<input type="radio" name="player_count" id="player_count_6" value="6" />
<label for="player_count_6"><span>6</span></label>
</div>
<script type="module">
import { update_player_fields } from './js/create_start_form.js';
update_player_fields();
const player_count_buttons = document.querySelectorAll(
'[name="player_count"]'
);
for (let button of player_count_buttons) {
button.addEventListener("change", update_player_fields);
}
</script>
<div class="field" id="field_player_1">
<label for="player_1">Player one</label><br />
<input type="text" name="player_1" id="player_1" placeholder="Frodo Baggins" />
</div>
<div class="field" id="field_player_2">
<label for="player_2">Player two</label><br />
<input type="text" name="player_2" id="player_2" placeholder="Sam-wise Gamgee" />
</div>
<div class="field" id="field_player_3">
<label for="player_3">Player three</label><br />
<input type="text" name="player_3" id="player_3" placeholder="Merry Brandybuck" />
</div>
<div class="field" id="field_player_4">
<label for="player_4">Player four</label><br />
<input type="text" name="player_4" id="player_4" placeholder="Pippin Took" />
</div>
<div class="field" id="field_player_5">
<label for="player_5">Player five</label><br />
<input type="text" name="player_5" id="player_5" placeholder="Gandalf The White" />
</div>
<div class="field" id="field_player_6">
<label for="player_6">Player six</label><br />
<input type="text" name="player_6" id="player_6" placeholder="Bilbo Baggins" />
</div>
</fieldset>
<fieldset class="game_version_field_group">
<legend>Game Version:</legend>
<div class="field game_version_field game_version_new_field selected" id="game_version_new_field">
<label for="game_version_new">
<span class="label_text">Dr. Orchid</span>
<img src="./img/dr-orchid.jpg" alt="" />
<input type="radio" name="game_version" id="game_version_new" value="orchid" required checked />
</label>
</div>
<div class="field game_version_field game_version_old_field" id="game_version_old_field">
<label for="game_version_old">
<span class="label_text">Mrs. White</span>
<img src="./img/mrs-white.jpg" alt="" />
<input type="radio" name="game_version" id="game_version_old" value="white" required />
</label>
</div>
<script type="text/javascript">
const game_version_new = document.getElementById('game_version_new'),
game_version_old = document.getElementById('game_version_old');
game_version_new.addEventListener('click', function () {
document.getElementById('game_version_new_field').classList.add('selected');
document.getElementById('game_version_old_field').classList.remove('selected');
});
game_version_old.addEventListener('click', function () {
document.getElementById('game_version_old_field').classList.add('selected');
document.getElementById('game_version_new_field').classList.remove('selected');
});
</script>
</fieldset>
<input type="submit" class="start_button" value="Create notes table" />
<script type="module">
import { catch_form_submit } from './js/create_table.js';
catch_form_submit();
</script>
</form>
</div>
<table id="notes_table" class="notes_table hide">
<thead>
<tr id="players_row">
<!-- scope defined for some assistive tech: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#scoping_rows_and_columns -->
</tr>
</thead>
<tbody id="notes_table_body"></tbody>
</table>
<p class="legal_footnote">
This site has no affiliation with Cluedo or Hasbro. The Cluedo name and logo are trademarks of Hasbro. Cluedo
© Hasbro. Site by Mikey Binns.
</p>
</main>
</body>
</html>