-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (106 loc) · 6.32 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
<!DOCTYPE html>
<html>
<head>
<base href="/tiko/" />
<title>Juego</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="semantic/semantic.min.css"/>
<link rel="stylesheet" type="text/css" href="css/actions.css"/>
<link rel="stylesheet" type="text/css" href="css/card.css"/>
<link rel="stylesheet" type="text/css" href="css/die.css"/>
<link rel="stylesheet" type="text/css" href="css/dice.css"/>
<link rel="stylesheet" type="text/css" href="css/board.css"/>
<link rel="stylesheet" type="text/css" href="css/player.css"/>
<link rel="stylesheet" type="text/css" href="css/messages.css"/>
<link rel="stylesheet" type="text/css" href="css/figure.css"/>
<link rel="stylesheet" type="text/css" href="css/player-board.css"/>
<script src="jquery/jquery-3.2.1.min.js"></script>
<script src="semantic/semantic.min.js"></script>
<script src="angular-1.6.4/angular.min.js"></script>
<script src="lodash/lodash.min.js"></script>
<script src="game/game.js"></script>
<script src="game/controllers.js"></script>
<script src="game/services/utils.js"></script>
<script src="game/factories/card.js"></script>
<script src="game/factories/board.js"></script>
<script src="game/factories/player.js"></script>
<script src="game/factories/deck.js"></script>
<script src="game/directives/card.js"></script>
<script src="game/directives/figure.js"></script>
<script src="game/directives/playerBoard.js"></script>
</head>
<body ng-app="game" ng-controller="GameController as ctrl" ng-init="ctrl.init()" ng-keypress="ctrl.phase && $event.key == ' ' && ctrl.playPhase()">
<div class="ui container">
<div class="ui grid">
<div id="actions" class="center aligned row" ng-if="ctrl.players.length < ctrl.config.player.amount">
<div class="column">
<input type="color" ng-model="ctrl.new_player.color">
<div class="ui action input">
<input type="text" ng-model="ctrl.new_player.name" placeholder="Nombre">
<button class="ui blue button" ng-click="ctrl.addPlayer()">Agregar jugador</button>
</div>
</div>
</div>
<div id="messages" class="row">
<div class="ui icon message" ng-if="ctrl.phase">
<i class="info circle icon"></i>
<div class="content">
<div class="header">Fase actual</div>
<p>{{ctrl.phase.text}}</p>
</div>
</div>
<div class="ui icon message" ng-if="ctrl.message" ng-class="ctrl.message.type">
<i class="warning circle icon"></i>
<div class="content">
<div class="header">{{ctrl.message.header}}</div>
<p>{{ctrl.message.message}}</p>
</div>
</div>
</div>
<div id="players" class="equal width row">
<div class="center aligned column" ng-repeat="player in ctrl.players" >
<div class="ui compact segment player" ng-class="{active: player.active, finished: player.finished}">
<div class="ui horizontal segments" ng-style="{background: player.color}">
<div class="ui compact segment">
<span class="ui circular label" ng-class="player.finished ? 'red' : 'black'">{{player.score}}</span>
</div>
<div class="ui name compact segment">{{player.name}}</div>
<div class="ui compact segment">
<i class="circular inverted link grid layout icon" ng-click="ctrl.showBoard(player)"></i>
</div>
</div>
<div class="player-cards">
<span class="player-card" ng-repeat="player_card in player.player_cards" ng-style="{'background-color': player.color}"></span>
<span ng-hide="player.player_cards.length">-</span>
</div>
<div class="hand">
<div class="ui horizontal segments">
<div class="ui segment" ng-repeat="number_card in player.hand" >
<card card="number_card" ng-click="number_card.active = player.active && !number_card.active" ></card>
</div>
</div>
</div>
</div>
</div>
<player-board></player-board>
</div>
<div id="dice" class="centered row">
<div class="ui horizontal segments">
<span class="ui die compact segment" ng-repeat="die in ctrl.dice" ng-class="[die.color, {active: die.active}, die.number ? 'die-'+die.number : 'die-0']" ng-click="die.active = !die.active"></span>
</div>
<input type="number" ng-model="ctrl.number" ng-if="ctrl.config.debug">
</div>
<div class="board centered row">
<div class="ui compact segments">
<div class="ui horizontal segments" ng-repeat="row in ctrl.board.rows">
<div class="ui segment" ng-repeat="number_card in row" >
<card ng-click="number_card.active = !number_card.active" card="number_card"></card>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>