-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
128 lines (114 loc) · 5.95 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
<title>Bug in the code</title>
</head>
<body class="container">
<header>
<img src="img/logo_sm.png" alt="logo" class="logo">
</header>
<div class="background-color">
<form id="names">
<input type="text" name="name1" placeholder="Player 1 name" id="name1">
<input type="text" name="name2" placeholder="Player 2 name" id="name2">
<input type="text" name="name3" placeholder="Player 3 name" id="name3">
<input type="text" name="name4" placeholder="Player 4 name" id="name4"><br>
<button type="submit" name="names" id="start-game" class="btn btn-dark">Start the Game</button>
</form>
<div class="night hide" id="night-intro">
<h4>Night has come, all developers have left the office after a long day of coding. <span class="player-name .alt-text">Player</span> receives the device, views their role, and gives the device to the next player once finished.</h4>
<button type="button" name="begin-night" id="begin-night" class="next-role btn btn-dark">Begin</button>
</div>
<div class="night" id="night-begin-roles">
<div id="night-player-intros" class="hide">
<span class="img" id="night-player-img"></span>
<h5>Hand the device to this player. Click on the avatar above once you are ready.</h5>
<button type="button" name="continue" id="continue-night" class="hide continue-role btn btn-dark">Start Turn</button>
</div>
<div id="developer" class="hide role">
<h3>//DEVELOPER//</h3>
<img src="img/dev3.png" alt="dev" class="player-img">
<br><br>
<h5>Later, during the day you will discuss with your coworkers who the potential bug may be.</h5>
<button type="button" name="continue" class="next-role btn btn-dark" id="developer-end-turn">Okay</button>
</div>
<div id="bug" class="hide role">
<h3>//BUG//</h3>
<img src="img/bug3.png" alt="bug" class="player-img">
<br>
<h5>You are the bug.</h5>
<h5>Select a player's code to infect.</h5>
<div class="bug-candidates">
</div>
<button type="button" name="continue" class="next-role btn btn-dark hide" id="bug-end-turn">Infect Code</button>
</div>
<div class="day hide" id="night-end-roles">
<h4>Morning has come, the office awakens.</h4>
<button type="button" name="begin-day" id="begin-day" class="btn btn-dark">Ready</button>
</div>
</div>
<div class="day hide" id="day-intro">
<div id="bug-victim">
<span id="bug-victim-img"></span>
<h4><span id="victim">NAME</span> was fired for buggy code.</h4>
<h4>The former employee is not allowed to talk until the end of the game.</h4>
<button type="button" name="bug-victim-accept" id="bug-victim-accept" class="btn btn-dark">Done</button>
</div>
<div id="begin-discussion" class="hide">
<h4>All players now openly discuss yesterday's events and who might be the bug. Everybody should say their opinion. After the discussion, every player will vote on who they think the bug is. The person with the most votes will be fired.</h4>
<div id="time" class="hide">
<button id="discussion" type="button" class="btn btn-dark">Start Discussion</button>
<div id='timeClock'>
</div>
</div>
</div>
</div>
<div class="day hide" id="day-begin-roles">
<div class="day" id="day-voting">
<h4>The voting will begin.</h4>
<button type="button" name="begin-vote" id="begin-vote" class="btn btn-dark">Continue</button>
</div>
<div class="player-vote hide">
<h4>Vote for who you think corrupted the code.</h4>
<span class="img" id="day-player-img"></span>
<div class="candidates">
</div>
</div>
</div>
<div class="day hide" id="vote-result">
<div class="hide" id="vote-victim">
<span id="vote-victim-img"></span>
<h4>The office has voted, <span id="vote-victim-name">NAME</span> was fired for buggy code. The remaining developers get back to work for the day</h4>
<h4>The former employee is not allowed to talk until the end of the game.</h4>
</div>
<div class="day hide" id='vote-draw'>
<h4>The office could not agree on who the bug was. No more developers will be fired today</h4>
</div>
<button type="button" name="day-end" id="day-end" class="btn btn-dark">Done</button>
</div>
<div class="night hide" id="day-end-roles">
<h4>The work day has ended. Developers go home for the night.</h4>
<button type="button" name="begin-night" id="day-end-begin-night" class="btn btn-dark">Ready</button>
</div>
<div class="night hide" id="end-game">
<div class="hide" id="bug-win">
<img src="img/bug_win.png" alt="bug won" class="player-img-bug">
<h4>The bugs have won!</h4>
<h5>The company has gone backrupt; bad management may have been a factor.</h5>
</div>
<div class="hide" id="dev-win">
<img src="img/dev_win.png" alt="bug won" class="player-img">
<h4>Congratulations! You have voted out the bug!</h4>
<h5>You should probably still try to find a different company to work for though. This place seems to have a high turnover rate...</h5>
</div>
<!-- js populates either "Bugs have corrupted all the code" or "Devs have found bug" -->
</div>
</div>
</body>
</html>