-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (130 loc) · 7.01 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
136
137
138
139
<!DOCTYPE html>
<html ng-app="app" lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script src="game.min.js?updateVersion=56af1b1d290c6278ba3e7a13e2524bab"></script>
<link rel="stylesheet" href="style.min.css?updateVersion=56af1b1d290c6278ba3e7a13e2524bab">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Colorama</title>
</head>
<body ng-controller="GameController">
<div class="content" ng-cloak>
<div class="logo">
<div>
Colorama
<button class="help" ng-click="showHelp()">
<i class="fas fa-question"></i>
</button>
<button class="help" ng-click="showStats()">
<i class="fas fa-chart-bar"></i>
</button>
</div>
<div class="credits">
por <a href="https://gabrielsilva.dev.br" target="_blank">Gabriel Silva</a>
</div>
</div>
<div class="container">
<div class="game">
<div class="board" ng-repeat="(key, board) in game.boards" ng-class="{'active': game.currentBoard == key}">
<div class="ball" ng-repeat="guess in board.guesses track by $index" ng-class="guess"></div>
<div class="tips">
<div ng-repeat="tip in board.tips track by $index" ng-class="tip"></div>
</div>
</div>
</div>
<div class="btns">
<button ng-click="submitGuess()">✅ Confirmar</button>
<button class="clear" ng-click="clearGuess()">❌ Limpar</button>
</div>
<div class="options">
<button ng-repeat="color in colors" ng-class="{'active': currentGuess == color, [color]: true}" ng-disabled="colorUsed(color)" ng-click="setGuess(color)"></button>
</div>
</div>
<div class="dialog" ng-if="victory">
<div class="body">
<h1>Parabéns! 😄</h1>
<h2>Você acertou em <u>{{game.currentBoard + 1}} tentativas</u>.</h2>
<h3>Resposta:</h3>
<div class="answer">
<div ng-repeat="color in game.answer" ng-class="color"></div>
</div>
<h4>Compartilhe seu resultado!</h4>
<div class=" share">
<button ng-click="share('twitter')"><i class="fab fa-twitter"></i></button>
<button ng-click="share('copy')"><i class="fas fa-copy"></i></button>
</div>
<button class="play-again" ng-click="playAgain()">✅ Jogar novamente</button>
</div>
</div>
<div class="dialog" ng-if="fail">
<div class="body">
<h1>Não foi dessa vez! 😭</h1>
<h2>Você não conseguiu acertar a senha.</h2>
<h3>Resposta:</h3>
<div class="answer">
<div ng-repeat="color in game.answer" ng-class="color"></div>
</div>
<h4>Compartilhe seu resultado!</h4>
<div class=" share">
<button ng-click="share('twitter')"><i class="fab fa-twitter"></i></button>
<button ng-click="share('copy')"><i class="fas fa-copy"></i></button>
</div>
<button class="play-again" ng-click="playAgain()">✅ Jogar novamente</button>
</div>
</div>
<div class="dialog" ng-if="help">
<div class="body">
<h1>Colorama 🔒</h1>
<h2>Você é capaz de acertar a senha?</h2>
<h3 class="mb-0">Como jogar:</h3>
<p>
O objetivo do jogo é acertar as 4 cores que compõem a senha usando o mínimo de tentativas possíveis.
</p>
<p>
Na parte inferior da tela, escolha quatro entre as cores disponíveis e clique em <strong>CONFIRMAR</strong> para dar seu chute, então observe as dicas ao lado direito de cada tentativa.
</p>
<p>
⚫️ Uma <strong>bolinha preta</strong> significa que uma das cores escolhidas está <strong>correta e no lugar correto</strong> na senha.
</p>
<p>
⚪️ Uma <strong>bolinha branca</strong> significa que uma das cores escolhidas está <strong>correta, porém no lugar errado</strong> na senha.
</p>
<p class="mb-0">
<strong>A ordem das dicas não segue a ordem das cores da senha.</strong>
</p>
<button class="play-again" ng-click="closeHelp()">✅ Vamos lá!</button>
</div>
</div>
<div class="dialog" ng-if="status">
<div class="body">
<h1>Suas Estatísticas 📊</h1>
<div class="row mt-5 mb-2">
<div class="col-6">
<h2 class="mb-0">😄 Vitórias</h2>
<h1>{{stats.wins}}</h1>
</div>
<div class="col-6">
<h2 class="mb-0">😭 Derrotas</h2>
<h1>{{stats.loss}}</h1>
</div>
<div class="col-6 mt-4">
<h2 class="mb-0">🎮 Total de jogos</h2>
<h1>{{stats.wins + stats.loss}}</h1>
</div>
<div class="col-6 mt-4">
<h2 class="mb-0">🏅 Média de vitórias</h2>
<h1>{{((100 * stats.wins) / (stats.wins + stats.loss) || 0) | number: 0}}%</h1>
</div>
</div>
<button class="play-again" ng-click="closeStats()">✅ Fechar</button>
</div>
</div>
</div>
<script src="responsive.min.js?updateVersion=56af1b1d290c6278ba3e7a13e2524bab"></script>
</body>
</html>