Skip to content

Commit c111fa9

Browse files
ManunGarManunGar
committed
Styling and Change Structure
1 parent 7781e63 commit c111fa9

10 files changed

Lines changed: 508 additions & 262 deletions

File tree

‎TASK.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
Ver si puedo implementar el rePaintDest dentro de las funciones importantes para no tener que hacer el rePaint al final
22

3-
Cuando la reina come en cadena, la siguiente posicion que puede ir nada más es al siguiente que a comido. Habría que implemetar para que pueda ir más alla y seguir comiendo en cadena
3+
Cuando la reina come en cadena, la siguiente posicion que puede ir nada más es al siguiente que ha comido. Habría que implemetar para que pueda ir más alla y seguir comiendo en cadena

‎img/githubBlack.png‎

6.47 KB
Loading

‎img/githubWhite.png‎

6.16 KB
Loading

‎index.html‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,49 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Document</title>
6+
<title>Checkers</title>
7+
<link rel="icon" href="./img/tokenWhiteQueen.png">
78
<link rel="stylesheet" href="styles/styleIndex.css">
8-
</head>
9+
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet"></head>
913
<body>
10-
<div id="container" player="white" >
11-
<button id="startButton">JUGAR</button>
14+
<div id="container" >
1215

13-
<div id="desk" class="hide" eat = false>
16+
<div id="header">
17+
<div id="title">
18+
Checkers
19+
</div>
20+
<div id="social">
21+
<ul>
22+
<li><a href="https://github.com/ManunGar"></a></li>
23+
</ul>
24+
</div>
25+
<div id="switch">
26+
<div id="circleSwitch" class="dark"></div>
27+
</div>
28+
</div>
1429

30+
<div id="selectionContainer">
31+
<div class="squarePlayer">
32+
<img src="./img/tokenWhite.png" alt="image token" id="playerOne" class="imgToken">
33+
<h1 id="namePlayerOne" class="namePlayer">WHITE</h1>
34+
</div>
35+
<div id="buttonsPanel">
36+
<a href="pages/desk.html"><button>PLAY GAME</button></a>
37+
<a href="" class="bloqued"><button>CHANGE COLORS</button></a>
38+
<a href="" class="bloqued"><button>HOW TO PLAY</button></a>
39+
<a href="" class="bloqued"><button>PUTO</button></a>
40+
</div>
41+
<div class="squarePlayer">
42+
<img src="./img/tokenBlack.png" alt="image token" id="playerTwo" class="imgToken">
43+
<h1 id="namePlayerTwo" class="namePlayer">BLACK</h1>
44+
</div>
1545
</div>
1646

1747
</div>
1848

1949
<script src="js/index.js"></script>
20-
<script src="js/models/Tokens.js"></script>
21-
<script src="js/models/QueensTokens.js"></script>
2250
</body>
2351
</html>

‎js/index.js‎

Lines changed: 4 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -1,209 +1,9 @@
11
let start = document.getElementById('startButton')
2-
let desk = document.getElementById('desk')
3-
let contentPlayer = document.getElementById('container')
4-
let matrixDesk
52

6-
let row // Cogemos la fila del cuadrado seleccionado para cuando se mueva o coma un enemigo
7-
let colum // Cogemos la columna del cuadrado seleccionado para cuando se mueva o coma un enemigo
8-
let countEnemyEat = 0
9-
let canEatAtributte = false
103

11-
start.onclick = function (){
12-
start.classList.add('hide')
13-
desk.classList.remove('hide')
14-
generateDesk()
15-
}
16-
17-
/* Matrices puestas para ser probadas al generar el tablero:
18-
Tablero vacio:
19-
[0,0,0,0,0,0,0,0],
20-
[0,0,0,0,0,0,0,0],
21-
[0,0,0,0,0,0,0,0],
22-
[0,0,0,0,0,0,0,0],
23-
[0,0,0,0,0,0,0,0],
24-
[0,0,0,0,0,0,0,0],
25-
[0,0,0,0,0,0,0,0],
26-
[0,0,0,0,0,0,0,0]
27-
28-
Tablero en disposición de juego:
29-
[2,0,2,0,2,0,2,0],
30-
[0,2,0,2,0,2,0,2],
31-
[2,0,2,0,2,0,2,0],
32-
[0,0,0,0,0,0,0,0],
33-
[0,0,0,0,0,0,0,0],
34-
[0,1,0,1,0,1,0,1],
35-
[1,0,1,0,1,0,1,0],
36-
[0,1,0,1,0,1,0,1]
37-
*/
38-
39-
function generateDesk() {
40-
matrixDesk = [ //Este sera el Tablero, donde se le aplicaran todos los cambios
41-
[2,0,2,0,2,0,2,0],
42-
[0,2,0,2,0,2,0,2],
43-
[2,0,2,0,2,0,2,0],
44-
[0,0,0,0,0,0,0,0],
45-
[0,0,0,0,0,0,0,0],
46-
[0,1,0,1,0,1,0,1],
47-
[1,0,1,0,1,0,1,0],
48-
[0,1,0,1,0,1,0,1]]
49-
/*Para entender que tipo de cuadrado es cada número:
50-
Blancas = 1
51-
Negras = 2
52-
Reinas Blancas = 3.1
53-
Reinas Negras = 3.2
54-
Camino de las Blancas = 0.1
55-
Camino de las Negras = 0.2
56-
*/
57-
for(let i=0;i<8;i++){//La i es la fila: posicion de las listas internas en la lista principal
58-
for(let j=0; j<8;j++){//La j es la columna: posicion del elemento dentro de la lista interna
59-
let square = document.createElement('div') //Se crea el DIV
60-
square.setAttribute('class','square')// Le ponemos una clase para estilizarla en el CSS
61-
square.setAttribute('type', matrixDesk[i][j]) // Le pones el tipo de cuadrado que será gracias a la matriz
62-
square.setAttribute('colum',j) // Su columna dentro del tablero
63-
square.setAttribute('row',i )// Su fila dentro del tablero
64-
square.setAttribute('caneat', false)// Para comprobar si es un camino cuyo movimiento lleva consigo el comerse a un enemigo
65-
square.setAttribute('queenmove', false)// Para comprobar si es un camino que pertenece a una reina
66-
desk.appendChild(square) //Añadimos el DIV al tablero en el HTML
67-
68-
square.onclick = function(){clickOnSquare(square)}// Añade la funcion cuando se hace click
69-
}
70-
}
71-
72-
}
73-
let squareList = document.getElementsByClassName('square')// Genera la lista de los cuadrados
74-
75-
//Tras hacer click en un cuadro comprueba que funcion hacer dependiendo del tipo de cuadrado que se ha seleccionado
76-
function clickOnSquare(square){
77-
let typeSquare = getTypeSquare(square)
78-
if(getColorSquare(square) == getPlayerDesk()){// Si la ficha seleccionada no es del mismo color que el turno de la partida no realiza ninguna funcion, si si es el mismo las realiza
79-
if(typeSquare >= 1 && typeSquare < 3){// Cuando el cuadrado es 1 o 2
80-
desk.getAttribute('eat') == 'false' ? squareFunctions(square) : console.log('sigue comiendo')
81-
//Si hay un cuadrado que esta comiendo, es decir, esta comiendo en cadena, imposibilita la opción de que se pueda seleccionar otra ficha, obligando a acabar el movimiento en cadena
82-
}else if(typeSquare < 1){// Cuando el cuadrado es 0.1 o 0.2
83-
squarePathFunctions(square)
84-
}else{// Cuando el cuadrado es 3.1 o 3.2
85-
desk.getAttribute('eat') == 'false' ? queenFunctions(square) : console.log('sigue comiendo')
86-
}
87-
}
88-
}
89-
90-
/*
91-
Funcion para los cuadrados 1 o 2:
92-
Elimina cualquier camino restante que haya quedado de otro cuadrado.
93-
Muestra el camino del cuadrado seleccionado.
94-
Repinta el Tablero ya que se ha modificado la matriz
95-
*/
96-
function squareFunctions(square){
97-
removeNextMovePath()
98-
nextMovePath(square)
99-
rePaintDesk()
100-
}
101-
102-
/*
103-
Funcion para cuando lo cuadrados seleccionados son caminos (0.1 o 0.2):
104-
Mueve el cuadrado que ha mostrado el camino: move()
105-
Si el camino seleccionado lleva consigo el comer al enemigo realiza las siguientes funciones{
106-
Ponemos el atributo eat a true para decir al tablero que hay una ficha que esta comiendo a un enemigo,
107-
esto sera útil para poder comer en cadena y mostrar el camino de esta acción.
108-
Come al enemigo: eatEnemySquare()
109-
Elimina los caminos que se han creado.
110-
Comprueba que pueda seguir comiendo para mantener el atributo 'eat' a true y
111-
así realizar el movimiento de comer en cadena. Tanto para los cuadrados normales o reinas.
112-
}Si es un camino normal{
113-
Elimina los caminos que se han creado.
114-
}
115-
Comprobar si le cuadrado que se ha movido se puede transformar en reina
116-
Repinta el tablero
117-
Cambia el turno del jugador
118-
119-
*/
120-
function squarePathFunctions(square){
121-
move(square, row, colum)
122-
if(square.getAttribute('caneat') == 'true'){
123-
desk.setAttribute('eat', true)
124-
eatEnemySquare(square,row,colum)
125-
removeNextMovePath()
126-
if(square.getAttribute('queenmove') == 'false'){
127-
checkCanEat(square)
128-
}else{
129-
checkQueenCanEat(square, getColorSquare(square))
130-
}
131-
132-
}else{
133-
removeNextMovePath()
134-
}
135-
checkCanTransformQueen(square)
136-
rePaintDesk()
137-
changePlayer()
138-
}
4+
let switchButton = document.getElementById('circleSwitch')
1395

140-
/*
141-
Funcion para los cuadrado 3.1 y 3.2
142-
(igual que para 1 o 2 pero con una funcion para los caminos de las reinas)
143-
*/
144-
function queenFunctions(square){
145-
removeNextMovePath()
146-
queenNextMovePath(square,getColorSquare(square))
147-
rePaintDesk();
148-
149-
}
150-
151-
152-
/*
153-
Coge el color del jugador al cual pertenece el turno de la partida
154-
*/
155-
function getPlayerDesk(){
156-
return contentPlayer.getAttribute('player') == 'white' ? 1 : 2
157-
}
158-
159-
160-
/*
161-
Cambia el turno de la partida, se le establece un setTimeout para que en el CSS
162-
los cambios de estilos no sean instantaneos
163-
*/
164-
function changePlayer(){
165-
setTimeout(function(){
166-
if(contentPlayer.getAttribute('player') == 'white'){
167-
contentPlayer.setAttribute('player', 'black')
168-
}else {
169-
contentPlayer.setAttribute('player','white')
170-
}
171-
}, 200)
172-
}
173-
174-
175-
/*
176-
Elimina los caminos de las fichas que estan en el tablero, para ello
177-
recorre la matriz cambiando los valores 0.1 y 0.2 por 0
178-
*/
179-
function removeNextMovePath(){
180-
let n = 0;
181-
for(let i=0;i<8;i++){
182-
for(let j=0; j<8;j++){
183-
let valueSquare = matrixDesk[i][j]
184-
if(valueSquare == 0.1 || valueSquare == 0.2){
185-
matrixDesk[i][j] = 0
186-
}
187-
/*Si el cuadrado camino tenía un atributo de caneat o queenmove los pone a 0 para restablecerlo*/
188-
squareList[n].setAttribute('caneat', false)
189-
squareList[n].setAttribute('queenmove', false)
190-
n++
191-
}
192-
}
6+
switchButton.onclick = function(){
7+
let stateSwitch = switchButton.getAttribute('class')
8+
stateSwitch == 'dark' ? switchButton.setAttribute('class', 'light') : switchButton.setAttribute('class', 'dark')
1939
}
194-
195-
196-
/*
197-
Al aplicar todas las funciones establecidas en el clickOnSquare los cambios de mover, eliminar o mostrar
198-
el camino se realizan sobre la matriz. Con el Repaint cambamos los tipos de cada cuadro (DIV) del tablero
199-
para que los cambios se hagan visibles en la página
200-
*/
201-
function rePaintDesk(){
202-
let squareIndex = 0
203-
for(let i=0;i<8;i++){
204-
for(let j=0; j<8;j++){
205-
squareList[squareIndex].setAttribute('type', matrixDesk[i][j])
206-
squareIndex++
207-
}
208-
}
209-
}

0 commit comments

Comments
 (0)