Skip to content

Commit

Permalink
[IMP] update files and add div to control sound
Browse files Browse the repository at this point in the history
  • Loading branch information
@RicardoBritoBrens
RicardoBritoBrens committed Jul 1, 2023
1 parent d790223 commit 06611a8
Show file tree
Hide file tree
Showing 3 changed files with 250 additions and 78 deletions.
10 changes: 10 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Tres en Raya</title>
</head>

Expand Down Expand Up @@ -50,6 +51,15 @@ <h2 style="color: white;">You win</h2>
<img src="./assets/gifs/12430.gif" alt="">
</div> -->

<div id="sound">
<div id="enable">
<a onclick="enableSounds()" class="material-icons" style="font-size:60px;color:#91C9FF;">volume_up</i>
</div>
<div id="disable" class="display-none">
<a onclick="disableSounds()" class="material-icons" style="font-size:60px;color:#91C9FF;">volume_off</i>
</div>
</div>

<script src="index.js"></script>
</body>

Expand Down
216 changes: 189 additions & 27 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ let playerOne = '';
let playerTwo = '';
let turn = '';
let winnersMovesAndCoordinates = ['', []];
let allowGameSounds = false;

// Constants
const selectPlayersDivName = "select-players-div";
Expand Down Expand Up @@ -206,68 +207,214 @@ function drawCornerWinnerGreenLine(orientation, context, width) {
}

// Board movements functions
<<<<<<< HEAD
function moveTo(id) {
switch (id) {
function moveTo(coordinate) {

switch (coordinate[0]) {
case 0:
setClassToLink(0, getNextIconMove());
console.log('Player move');
board[0] = 1;
setClassToLink(0, getNextPlayerIcon());
board[0] = [0, getPlayerName(), 'F'];
if (isThereAWinner()) {
return;
}
machineAutoMove();
break;
case 1:
setClassToLink(1, getNextIconMove());
board[1] = 1;
setClassToLink(1, getNextPlayerIcon());
board[1] = [1, getPlayerName(), 'F'];
if (isThereAWinner()) {
return;
}
machineAutoMove();
break;
case 2:
setClassToLink(2, getNextIconMove());
board[2] = 1;
setClassToLink(2, getNextPlayerIcon());
board[2] = [2, getPlayerName(), 'F'];
if (isThereAWinner()) {
return;
}
machineAutoMove();
break;
case 3:
setClassToLink(3, getNextIconMove());
board[3] = 1;
setClassToLink(3, getNextPlayerIcon());
board[3] = [3, getPlayerName(), 'F'];
if (isThereAWinner()) {
return;
}
machineAutoMove();
break;
case 4:
setClassToLink(4, getNextIconMove());
board[4] = 1;
setClassToLink(4, getNextPlayerIcon());
board[4] = [4, getPlayerName(), 'F'];
if (isThereAWinner()) {
return;
}
machineAutoMove();
break;
case 5:
setClassToLink(5, getNextIconMove());
board[5] = 1;
setClassToLink(5, getNextPlayerIcon());
board[5] = [5, getPlayerName(), 'F'];
if (isThereAWinner()) {
return;
}
machineAutoMove();
break;
case 6:
setClassToLink(6, getNextIconMove());
board[6] = 1;
setClassToLink(6, getNextPlayerIcon());
board[6] = [6, getPlayerName(), 'F'];
if (isThereAWinner()) {
return;
}
machineAutoMove();
break;
case 7:
setClassToLink(7, getNextIconMove());
board[7] = 1;
setClassToLink(7, getNextPlayerIcon());
board[7] = [7, getPlayerName(), 'F'];
if (isThereAWinner()) {
return;
}
machineAutoMove();
break;
case 8:
setClassToLink(8, getNextIconMove());
board[8] = 1;
setClassToLink(8, getNextPlayerIcon());
board[8] = [8, getPlayerName(), 'F'];
if (isThereAWinner()) {
return;
}
machineAutoMove();
break;
default:
break;
}
}

function getPlayerName() {
if (players === 1) {
return playerOne;
} else if (turn === playerOne) {
turn = playerTwo;
} else if (turn === playerTwo) {
turn = playerOne;
}
return turn;
}

function isThereAWinner() {

let tempWinnerBoard = board.slice();

let playerOneMoves = tempWinnerBoard.filter(x => x[1] === playerOne);
let playerTwoMoves = tempWinnerBoard.filter(x => x[1] === playerTwo);

if (isThereAHorizontalWinner(playerOneMoves, playerTwoMoves)) {
winnersMovesAndCoordinates = ['horizontal', []]
return true;
}

if (isThereAVerticalWinner(playerOneMoves, playerTwoMoves)) {
return true;
}

if (isThereARightToLeftWinner(playerOneMoves, playerTwoMoves)) {
return true;
};

if (isThereALeftToRightWinner(playerOneMoves, playerTwoMoves)) {
return true;
};

}

function isThereAHorizontalWinner(playerOneMoves, playerTwoMoves) {
let output = false;
if (horizontalWinnersMoves.some(winnerMoves => winnerMoves.every(x => playerOneMoves.map(a => a[0]).includes(x)))) {
winnersMovesAndCoordinates = findWinnerDetails(horizontalWinnersMoves, playerOneMoves);
console.log("player one horizontal winner won");
output = true;
};

if (horizontalWinnersMoves.some(winnerMoves => winnerMoves.every(x => playerTwoMoves.map(a => a[0]).includes(x)))) {
winnersMovesAndCoordinates = findWinnerDetails(horizontalWinnersMoves, playerTwoMoves);
console.log("player two horizontal winner won");
output = true;
};
return output;
}

function isThereAVerticalWinner(playerOneMoves, playerTwoMoves) {
let output = false;
if (verticalWinnersMoves.some(winnerMoves => winnerMoves.every(x => playerOneMoves.map(a => a[0]).includes(x)))) {
winnersMovesAndCoordinates = findWinnerDetails(horizontalWinnersMoves, playerTwoMoves);
console.log("player one vertical winner won");
output = true;
};
if (verticalWinnersMoves.some(winnerMoves => winnerMoves.every(x => playerTwoMoves.map(a => a[0]).includes(x)))) {
winnersMovesAndCoordinates = findWinnerDetails(horizontalWinnersMoves, playerTwoMoves);
console.log("player two vertical winner won");
output = true;
};
return output;
}

function isThereARightToLeftWinner(playerOneMoves, playerTwoMoves) {
let output = false;
if (upLeftRoRightDownWinners.some(winnerMoves => winnerMoves.every(x => playerOneMoves.map(a => a[0]).includes(x)))) {
winnersMovesAndCoordinates = findWinnerDetails(upLeftRoRightDownWinners, playerOneMoves);
console.log("player one right to left winner won");
output = true;
};
if (upLeftRoRightDownWinners.some(winnerMoves => winnerMoves.every(x => playerTwoMoves.map(a => a[0]).includes(x)))) {
winnersMovesAndCoordinates = findWinnerDetails(upLeftRoRightDownWinners, playerTwoMoves);
console.log("player two right to left winner won");
output = true;
};
return output;
}

function isThereALeftToRightWinner(playerOneMoves, playerTwoMoves) {
let output = false;
if (upRightToLeftDownWinners.some(winnerMoves => winnerMoves.every(x => playerOneMoves.map(a => a[0]).includes(x)))) {
winnersMovesAndCoordinates = findWinnerDetails(upRightToLeftDownWinners, playerOneMoves);
console.log("player one left to right winner won");
output = true;
};
if (upRightToLeftDownWinners.some(winnerMoves => winnerMoves.every(x => playerTwoMoves.map(a => a[0]).includes(x)))) {
winnersMovesAndCoordinates = findWinnerDetails(upRightToLeftDownWinners, playerTwoMoves);
console.log("player two left to right winner won");
output = true;
};
return output;
}

function findWinnerDetails(winnerMoves, playerMoves) {
let output = ['', []];
for (let i = 0; i < winnerMoves.length; i++) {
let current = winnerMoves[i].every(x => playerMoves.map(a => a[0]).includes(x));
if (current) {
output = [playerMoves[0][1], winnerMoves[i]];
console.log(`player:${playerMoves[0][1]}, coordinates:${winnerMoves[i]}`);
return output;
}
}
return output;
}

function machineAutoMove() {
if (players === 1) {
let filterBoardWithAvaileableMove = board.filter(x => x !== 1);
let randomMoveIndex = Math.floor(Math.random() * filterBoardWithAvaileableMove.length)
setClassToLink(randomMoveIndex, getNextIconMove());
board[randomMoveIndex] = 1;
let randomMoveIndex = 0;
for (let i = 0; i <= board.length; i++) {
randomMoveIndex = Math.abs(Math.floor(Math.random() * board.length));
if (board[randomMoveIndex][2] === '') {
break;
}
}
setClassToLink(randomMoveIndex, machineIcon);
board[randomMoveIndex][0] = randomMoveIndex;
board[randomMoveIndex][1] = playerTwo;
board[randomMoveIndex][2] = 'F';
console.log('Machine move');
if (isThereAWinner()) {
return;
}
}
}

Expand All @@ -285,6 +432,21 @@ function getNextPlayerIcon() {
}
}

function enableSounds() {
debugger;
let enable = document.getElementById('disable')
enable.classList.remove('display-none');
let disable = document.getElementById('enable')
disable.classList.add('display-none');
}

function disableSounds() {
debugger;
let disable = document.getElementById('enable')
enable.classList.remove('display-none');
let enable = document.getElementById('disable')
disable.classList.add('display-none');
}
// TODO: SIMULATE ONE PLAYER VS IA AS WINNER TO CHECK IF I CAN GET THE WINNER AND THE COORDINATES

// Testing set icon
Expand All @@ -308,4 +470,4 @@ function getNextPlayerIcon() {
//drawThirdColumnWinner();

//drawUpLeftToRightDownWinner();
//drawUpRightToLeftDownWinner();
//drawUpRightToLeftDownWinner();
Loading

0 comments on commit 06611a8

Please sign in to comment.