forked from KatFT/Othello
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (120 loc) · 5.75 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!--
Dezembro de 2020
Catarina Teixeira, up201805042
Cheila Alves, up201805089
-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="accordion.css">
<link rel="stylesheet" type="text/css" href="opjogo.css">
<meta name="viewport" content="width=device-width, height=device-height initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<script src="Othello1.js" defer></script>
<script src="loader.js" defer></script>
<meta charset=UTF-8> <!-- para caracteres acentuados -->
<title>Othello</title> <!-- texto na decoração da janela -->
</head>
<body>
<!-- div geral -->
<div class="base">
<!-- autenticaçao -->
<div class="form" id="form">
<div> <img class="logotipo-form" src="othellolog.png" alt="Othello" style="margin: auto"></div>
<button class="jogIA" id="jogIA" onclick="mostrarOps()">JOGAR COM COMPUTADOR</button>
<h1>Autenticação</h1>
<div class="form-group">
<p class="dados_autenticacao">Identificador</p>
<input type="text" id="username" placeholder="Username" class="form-control" required>
</div>
<div class="form-group">
<p class="dados_autenticacao">Password</p>
<div id="msgPassIncorreta"></div>
<input type="password" id="password" placeholder="Password" class="form-control" required>
</div>
<!-- botao que ao clicar faz desaparecer o login e aparecer o outro div -->
<button id="login" class="btn" onclick="areaAutenticacao()">REGISTAR / LOGIN</button>
</div>
<!-- Fim da div de autenticaçao-->
<div id="area-de-jogo"></div>
<div id="area-logotipo"></div>
<table id="ranking"></table>
<!-- Opções de jogo-->
<div class="Op" id="op-jogo">
<div class="opcao">Opções de Jogo</div>
<div class="corpo">
<div class="cor">
<div class="op-cor">
<p class="titulo">Cor</p>
<input type="radio" name="Cor" value="P" id="preto">
<label for="preto"> Preto</label>
<input type="radio" name="Cor" value="B" id="branco">
<label for="branco"> Branco</label>
</div>
</div>
<div class="dificuldade">
<div class="op-dificuldade">
<p class="titulo">Dificuldade</p>
<input type="radio" name="dificuldade" id="facil">
<label for="facil"> Fácil</label>
<input type="radio" name="dificuldade" id="medio">
<label for="medio"> Médio</label>
<input type="radio" name="dificuldade" id="dificil">
<label for="dificil"> Difícil</label>
</div>
</div>
<button onclick="escolhaOp()" id="continue" class="continue">Continuar</button>
</div>
</div>
<!-- Fim da div de opçoes de jogo-->
<!-- Menu accordion que mostra as regras e as classificações -->
<div class="container" id="container">
<button class="accordion">Regras de jogo</button>
<div class="accordion-content">
<p> A peça deve ser colocada de forma que uma peça do oponente, ou uma sequência de peças do oponente, fique encurralada pelas suas peças. Todas as peças adversárias que estiverem entre as suas peças mudam de cor, tornando-se suas.</p>
<p>Um movimento consiste na colocação de uma peça em uma casa vazia. Se você não pode fazer uma jogada legal (por exemplo: você não pode capturar nenhuma das peças do adversário), você tem de passar, e é a vez do oponente. Se nenhum dos jogadores puder fazer um lance, isso significa que o jogo está terminado, e o jogador que tiver mais peças vence.</p>
<p>Você pode capturar sequências verticais, horizontais e diagonais de peças. Além disso, você pode capturar mais de uma sequência de uma vez só.</p>
</div>
<!-- classificaçoes vao estar vazias por agora-->
<button class="accordion ">Classificações</button>
<div class="accordion-content">
<p id="cont-classifica"></p> <!-- vai se colocar aqui a nossa classificaçao-->
</div>
</div>
<!-- Fim da div do menu accordion -->
<canvas id="canvas" width=350 height=350></canvas>
<!-- Pontuação -->
<div class="pontuacao" id="pontuacao">
<p id="ppreto">Preto: 2</p>
<p id="pbranco"> Branco: 2</p>
<p id="clivre"> Livres: 60</p>
</div>
<!-- Fim da div de pontuaçao-->
<!-- BOTÃO DE PASSAR JOGADA -->
<button id="passar">Passar</button>
<!-- Fim do botao para passar jogada-->
<!-- BOTAO NOVO JOGO-->
<button id="desistir">Desistir</button>
<!-- Fim do botao para começar novo jogo-->
<!-- o que vai fazer aqui e basicamente fecha tudo e volta para a area de autenticaçao, e o jogo reseta(ainda por implementar)-->
<button class="logout" id="logout" onclick="sair(username.value,password.value)">Logout</button>
<!--fim do botao de logout-->
<!-- MENSAGEM VITORIA -> INDICA QUAL O JOGADOR QUE GANHOU OU EMPATE-->
<!-- vai ser vazia pq e a partir do codigo javascript que vai imprimir o vencedor/empate-->
<div id="msgFimJogo">
JOGADOR Preto GANHOU! <!-- ISTO TEM Q SER VAZIO DEPOIS-->
</div>
<!--Fim da div da mensagem de vitoria-->
<!-- VEZ DE JOGADA-->
<div id="vezJogada">
Vez do preto
</div>
<!-- Jogada impossivel-->
<div id="impossivel">
Jogada impossível
</div>
</div>
<!-- Fim da div da base-->
</body>
</html>