-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (116 loc) · 4.48 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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Oswald:400,600" rel="stylesheet">
<link rel="stylesheet" href="./semantic/button.min.css">
<link rel="stylesheet" href="./css/style.css">
<title>BattleCards</title>
</head>
<body>
<header>
<div class="header-box" id="p1-board">
<div id="player1nameinput" class="ui right labeled left icon input" hidden>
<input class="inputfield" id="p1-name-input" type="text" value="" placeholder="Please enter your name" autofocus>
</div>
<span id="p1-score"></span>
<div id="p1-name">
<span >Player 1</span><br>
<em>Click to change name</em>
</div>
</div>
<div class="header-box" id="card-stack">
<h1 id="title">WELCOME TO BATTLECARDS</h1>
</div>
<div class="header-box" id="p2-board">
<div id="player2nameinput" class="ui right labeled left icon input" hidden>
<input class="inputfield" id="p2-name-input" type="text" value="" placeholder="Please enter your name" autofocus>
</div>
<span id="p2-score"></span>
<div id="p2-name">
<span >Player 2</span><br>
<em>Click to change name</em>
</div>
</div>
</header>
<div id="infoboard">
<div id="input-div" class="ui right labeled left icon input">
<a class="ui tag label">
How many rounds to play?
</a>
<input class="inputfield" id="roundselector" type="number" value="1" placeholder="Enter a number">
</div>
<div id="infobox">
<div id="infobox-button-div" class="ui inverted segment">
<button id="infobox-button" class="ui large inverted teal button">START GAME</button>
</div>
</div>
</div>
<div id="story-title-div">
<h3 id="story-title"></h3>
</div>
<gameboard>
<div class="p-stack" id="p1-stack">
<div class="p-cards p1-cards">
</div>
</div>
<div id="battle-field">
<div id="bf-p1"></div>
<dice>
<div id="dice" hidden>Dice •ᴗ•</div>
</dice>
<div id="summary">
<h1><em>I N S T R U C T I O N S</em></h1>
<h4>It is a two player game. You got to <em>share your mouse</em> and switch
players. The current player's scoreboard will be highlighted. How to play?
</h4>
<p>Each round has <em>three phases</em> :</p>
<ol>
<li><em>Who is first?</em> --- You roll the dice to decide who picks the first card.</li>
<li><em>Create your little army!</em> --- Each player has to
<em>pick up three</em> cards. You <em>switch turns</em> after picking one.
</li>
<li><em>Time for Battle!</em> --- Each player <em>picks one</em> card for battle. The current player <em>chooses
one of the character traits</em> to attack with. Then both players <em>throw the dice</em> to add some luck
to their score.</li>
</ol>
</div>
<div id="bf-p2"></div>
</div>
<div class="p-stack" id="p2-stack">
<div class="p-cards p2-cards">
</div>
</div>
</gameboard>
<footer>
<div class="instructions-div" hidden>
<h3>INSTRUCTIONS</h3>
<p id="instr">You are not anonymous. Change your name and click START to begin the game.</p>
</div>
<div class="story-div">
<p id="story"></p>
</div>
<div id="sound-div" class="ui inverted segment" hidden>
<button id="sound-button" class="ui small inverted violet button">Music OFF</button>
</div>
</footer>
<audio id="snd-startBattle" src="audio/startBattle.ogg"></audio>
<audio id="snd-dice" src="audio/dice.ogg"></audio>
<audio id="snd-click" src="audio/beep.ogg"></audio>
<audio id="snd-score" src="audio/score.ogg"></audio>
<audio id="snd-init" src="audio/init.ogg"></audio>
<audio id="snd-endgame" src="audio/endofgame.ogg"></audio>
<audio id="bg-music" src="audio/Bog-Creatures-On-the-Move.ogg" loop="infinite"></audio>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./js/utils.js"></script>
<script src="./js/Character.js"></script>
<script src="./js/Player.js"></script>
<script src="./js/Game.js"></script>
<script src="./js/main.js"></script>
</body>
</html>