-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (121 loc) · 6.99 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
<!DOCTYPE html>
<html lang="en" ng-app="tdGameApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protodice</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="assets/favicon.ico" type="image/x-icon">
</head>
<body ng-controller="MainController as mainCtrl">
<div class="game-container">
<h1>Tower Defense Dice Game</h1>
<div class="controls">
<button ng-click="mainCtrl.togglePlaySection()">Play</button>
<button ng-click="mainCtrl.toggleHelpSection()">Help</button>
<button ng-click="mainCtrl.goBack()" ng-show="mainCtrl.showBackButton">Back</button>
<button ng-click="mainCtrl.startGame()" ng-show="mainCtrl.showStartButton">Start Game</button>
<button ng-click="mainCtrl.rollDice()" ng-show="mainCtrl.showRollDiceButton">Roll Dice</button>
</div>
<div id="playSection" ng-show="mainCtrl.showPlaySectionFlag">
<div class="options">
<div class="play-options">
<div id="playerSelection">
<label>Select number of players:</label><br>
<input type="radio" id="numPlayers1" name="numPlayers" value="1" ng-model="mainCtrl.numPlayers">
<label for="numPlayers1">1</label><br>
<input type="radio" id="numPlayers2" name="numPlayers" value="2" ng-model="mainCtrl.numPlayers">
<label for="numPlayers2">2</label><br>
</div>
<div id="playerNames">
<label for="player1Name">Player 1 Name:</label>
<input type="text" id="player1Name" ng-model="mainCtrl.player1Name"><br>
<label for="player2Name" ng-show="mainCtrl.numPlayers > 1">Player 2 Name:</label>
<input type="text" id="player2Name" ng-show="mainCtrl.numPlayers > 1" ng-model="mainCtrl.player2Name">
</div>
<div id="swapSides">
<label for="swapSides">Swap Sides (Play as Monsters):</label>
<input type="checkbox" id="swapSides" ng-model="mainCtrl.swapSides">
</div>
<div id="waveSelection">
<label for="waveSelect">Select Max Waves:</label>
<select id="waveSelect" ng-model="mainCtrl.selectedMaxWaves" ng-options="option for option in mainCtrl.waveOptions"></select>
</div>
</div>
</div>
</div>
<div id="helpSection" ng-show="mainCtrl.showHelpSectionFlag">
<h2>Help</h2>
<p>Instructions on how to play the game.</p>
</div>
<div class="game-area" ng-show="mainCtrl.showGameArea">
<table>
<tbody>
<tr ng-repeat="(rowIndex, row) in mainCtrl.gameData.track">
<td ng-repeat="(colIndex, cell) in row track by $index"
ng-class="{
'defense-zone': colIndex < 4,
'bridge-zone': colIndex === 4,
'monster-zone': colIndex > 4
}"
id="cell-{{rowIndex}}-{{colIndex}}"
ng-drop="mainCtrl.onDropCell($event, rowIndex, colIndex)"
ng-drag-over="mainCtrl.allowDrop($event)"
class="droppable">
<!-- Game cell content -->
<div class="defense" ng-if="cell && cell.type === 'defense'">
<img class="defense-img" ng-src="assets/images/{{cell.content.type | lowercase}}.png" alt="{{cell.content.type}}">
<div class="hp-bar">
<div class="hp" ng-style="{'width': (cell.content.currentHp / cell.content.maxHp) * 100 + '%'}"></div>
</div>
</div>
<div class="monster" ng-if="cell && cell.type === 'monster'">
<img class="monster-img" ng-src="assets/images/{{cell.content.type | lowercase}}.png" alt="{{cell.content.type}}">
<div class="hp-bar">
<div class="hp" ng-style="{'width': (cell.content.currentHp / cell.content.maxHp) * 100 + '%'}"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div id="defenseHolder" ng-show="mainCtrl.currentDefense" draggable="true"
ng-drag-start="mainCtrl.dragDefense($event, mainCtrl.currentDefense)">
<div class="defense draggable">
<img class="defense-img" ng-src="assets/images/{{mainCtrl.currentDefense.type | lowercase}}.png" alt="{{mainCtrl.currentDefense.type}}">
<div class="hp-bar">
<div class="hp" ng-style="{'width': (mainCtrl.currentDefense.currentHp / mainCtrl.currentDefense.maxHp) * 100 + '%'}"></div>
</div>
</div>
</div>
<div id="monsterHolder" ng-show="mainCtrl.currentMonster" draggable="true"
ng-drag-start="mainCtrl.dragMonster($event, mainCtrl.currentMonster)">
<div class="monster draggable">
<img class="monster-img" ng-src="assets/images/{{mainCtrl.currentMonster.type | lowercase}}.png" alt="{{mainCtrl.currentMonster.type}}">
<div class="hp-bar">
<div class="hp" ng-style="{'width': (mainCtrl.currentMonster.currentHp / mainCtrl.currentMonster.maxHp) * 100 + '%'}"></div>
</div>
</div>
</div>
<div id="turnIndicator" ng-show="mainCtrl.showTurnIndicator">
<h3>Current Turn: <span id="currentPlayerName" ng-bind="mainCtrl.currentPlayerName"></span></h3>
<h3>Dice Roll: <span id="diceRollResult" ng-bind="mainCtrl.diceRollResult"></span></h3>
<h3>Wave: <span id="currentWave">{{ mainCtrl.gameData.waveCount }} / {{ mainCtrl.gameData.maxWaves === 9999 ? '∞' : mainCtrl.gameData.maxWaves }}</span></h3>
</div>
<button ng-click="mainCtrl.finishTurn()" ng-show="mainCtrl.showFinishTurnButton">Finish Turn</button>
</div>
</div>
<!-- Custom alert overlay -->
<div id="customAlertOverlay" ng-show="alertService.showCustomAlert" class="overlay"></div>
<!-- Custom alert box -->
<div id="customAlert" ng-class="{'active': alertService.showCustomAlert, 'info': alertService.alertType === 'info', 'success': alertService.alertType === 'success', 'warning': alertService.alertType === 'warning', 'error': alertService.alertType === 'error'}">
<div class="alert-content">
<span ng-bind="alertService.alertMessage"></span>
</div>
<button ng-click="alertService.hideAlert()">OK</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="dist/angular-drag-and-drop-lists.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>