diff --git a/06week/mastermind/index.html b/06week/mastermind/index.html index ef79e3aae..98fb109c0 100644 --- a/06week/mastermind/index.html +++ b/06week/mastermind/index.html @@ -6,6 +6,22 @@ +

Mastermind

+
+
+

Peg choices

+
+
+
+ + + +
+
+
+
+
+ diff --git a/06week/mastermind/script.js b/06week/mastermind/script.js index 9a6b571df..62a60f124 100644 --- a/06week/mastermind/script.js +++ b/06week/mastermind/script.js @@ -2,4 +2,246 @@ document.addEventListener('DOMContentLoaded', () => { // Your code here -}); + const MAXGUESSES = 10; + const boardColors = ['red', 'blue', 'green', 'white', 'yellow', 'purple', 'orange', 'black']; + let turn = 0; + // let guess = 0; + + function guess() { + this.pegs = []; + this.hint = ''; + } + + let board = { + code: [], + guesses: [], + createCode: function() { + for (let i = 0; i < 4; i++) { + const randomIndex = getRandomInt(0, boardColors.length); + this.code.push(randomIndex); + } + /**** COMMENT OUT FOR GAME ***/ + this.showAnswer(); + return true; + + function getRandomInt(min, max) { + return Math.floor(Math.random() * (max - min)) + min; + } + }, // createCode() method + + showAnswer: function() { + let ansPegs = document.getElementById('answerRow').childNodes; + for (let i=0; i { + if (peg === solutionArr[index]) { + exactMatch++; + // clear out value. This sets us up to look for correct peg test later. These won't be considered. + solutionArr[index] = null; + myGuessArr[index] = null; + } + }); + console.log('after match, before correct peg'); + console.log(solutionArr); + console.log(myGuessArr); + + // This piece of code tests for correct peg only + myGuessArr.forEach((peg) => { + if (peg) { // peg could be null from previous forEach statement. + matchIndex = solutionArr.indexOf(peg); // Let's find a matching peg in the solution! + if (matchIndex !== -1) { // We found a peg match in the string. + correctPeg++ + solutionArr[matchIndex] = null; // clear out value so value won't be considered with next peg tests. + } + } // closing brace for if (peg) + }); + console.log('after correct peg'); + console.log(solutionArr); + console.log(myGuessArr); + console.log(`${exactMatch} | ${correctPeg}`); + return `${exactMatch} | ${correctPeg}`; + } // generateHint + } // board object + + createPegCanvas(); + addListenersToButtons(); + generateBoard(); + board.createCode(); + // board.showAnswer(); + + + function createPegCanvas() { + const colorsCanvas = document.getElementById('boardColors'); + for(let i = 0; i < boardColors.length; i++){ + const pegColor = document.createElement('div'); + pegColor.id = i; + pegColor.className = `${boardColors[i]} box`; + pegColor.addEventListener('click', (color) => { + board.populateChoice(color.target.id); + }); + colorsCanvas.appendChild(pegColor); + } + } // createPegCanvas() + + function addListenersToButtons() { + //** Submit Guess button **// + // This button take the current row and first checks for a win. + // If there is a win, it congratulates the user + // If there is no win, it calls + const checkBtn = document.getElementsByName('submit'); + checkBtn[0].addEventListener('click', () => { + const currentGuess = board['guesses'][board['guesses'].length-1]; + const theCode = board['code'].join(''); // makes it simpler to compare + const theGuess = currentGuess.pegs.join(''); // makes it easy to compare + if (theCode === theGuess) { + alert('Wow, you won! Press New Game to restart'); + const clearBtn = document.getElementsByName('clear'); + clearBtn[0].disabled = true; + checkBtn[0].disabled = true; + } else { + currentGuess['hint'] = board.generateHint(theCode, theGuess); + board.displayRow(); + board['guesses'].push(new guess()); // Adding a new guess row. + } + }); + + // We want the ability to clear the current row prior to submitting. + // This will give the player the ability to change their answer. + const clearBtn = document.getElementsByName('clear'); + clearBtn[0].addEventListener('click', () => { + board['guesses'].pop(); // removing the current guess. + board['guesses'].push(new guess()) // Adding an empty guess. + board.displayRow(); + }); + + // New Game button. Needs to clear out code and guesses arrays. + // Needs to clear the entire board. + const newBtn = document.getElementsByName('new'); + newBtn[0].addEventListener('click', () => { + board['code'] = []; // clearing array. + board['guesses'] = []; // clearing array. + clearBoard(); + const checkBtn = document.getElementsByName('submit'); + const clearBtn = document.getElementsByName('clear'); + clearBtn[0].disabled = false; + checkBtn[0].disabled = false; + board.createCode(); + }); + } // addListenersToButtons() + + function generateBoard() { + // This section creates the code breaker's guess. + const boardTable = document.createElement("table"); + boardTable.id = 'boardTbl'; + document.getElementById('board').appendChild(boardTable); + for(let i = 0; i < MAXGUESSES ; i++) { + const guessRow = document.createElement("tr"); + guessRow.className = 'guessRow'; + boardTable.appendChild(guessRow); + for (let j = 0; j < 5; j++) { + const guessCol = document.createElement("td"); + j < 4? guessCol.className = `peg` : guessCol.className = `hint`; + guessRow.appendChild(guessCol); + } + } + // Displays the Codemaker's Code. + const ansTable = document.createElement("table"); + ansTable.id = 'answer'; + document.getElementById('board').appendChild(ansTable); + const ansRow = document.createElement("tr"); + // document.cre + ansRow.id = 'answerRow'; + ansTable.appendChild(ansRow); + for (let j = 0; j < 5; j++) { + const ansCol = document.createElement("td"); + j < 4? ansCol.className = `peg` : null; + ansRow.appendChild(ansCol); + } + } // ending to generateBoard + +function clearBoard() { + const guessRows = document.getElementById('boardTbl').childNodes; + console.log(guessRows); + guessRows.forEach((row) => { + const pegsAndHint = row.childNodes; + pegsAndHint.forEach((val, index) => { + index !== 4? val.className = `peg` : val.textContent = null; + }); + }); + const ansRow = document.getElementById('answerRow').childNodes; + console.log(ansRow); + ansRow.forEach((val, index) => { + index !== 4? val.className = `peg` : null; + }); +} // clearBoard() + +}); //document.addEventListener('DOMContentLoaded'... diff --git a/06week/mastermind/style.css b/06week/mastermind/style.css index e69de29bb..7a51b80d4 100644 --- a/06week/mastermind/style.css +++ b/06week/mastermind/style.css @@ -0,0 +1,124 @@ +/*Basic stylings to handle font and page form*/ +body{ + font-family: Arial; + background-color: gray; +} + +h1 { + text-align: center; +} + +h3 { + text-align: center; + margin: auto; +} + +.container { + display: flex; + width: 50vw; + margin: auto; + +} + +/*The following are styles within the control div*/ +/*These styles paint the skin for peg selections, and buttons*/ +#boardColors { + display: flex; + justify-content: flex-end; + flex-wrap: wrap; + +} + +#buttons { + display: flex; + justify-content: flex-end; + flex-direction: column; + margin: auto 10px auto 300px; +} + +#buttons * { + margin-top: 20px; +} + + +.box { + width: 25px; + height: 25px; + font-size: 30px; + text-align: center; + border: 2px solid black; + border-radius: 15px; + color: white; + margin: 2px; +} + +.box:hover { + transform: scale(1.5); +} + +/*Styles below handle the skin of the mastermind board*/ +table { + width: 300px; + border: 5px solid black; + border-radius: 10px; +} + +#answer { + margin-top: 10px; +} +.guessRow{ + background-color: darkgray; +} + +.peg { + width: 20px; + height: 20px; + border-radius: 20px; + border: 7px solid darkgray; + background-color: darkslategray; + +} +.peg:hover { + transform: scale(1.5); +} + +.hint { + text-align: center; + font-size: 20pt; + font-weight: bold; +} + +/*Ah, the colors!*/ +.red { + background-color: red; +} + +.blue { + background-color: blue; +} + +.green { + background-color: green; +} + +.white { + background-color: white; + color: black; +} + +.yellow { + background-color: yellow; + color: black; +} + +.purple { + background-color: purple; +} + +.orange { + background-color: orange; +} + +.black { + background-color: black; +} diff --git a/06week/ticTacToe/script.js b/06week/ticTacToe/script.js index 9a6b571df..ea952b3ab 100644 --- a/06week/ticTacToe/script.js +++ b/06week/ticTacToe/script.js @@ -1,5 +1,56 @@ 'use strict'; +// let mySquares = []; document.addEventListener('DOMContentLoaded', () => { - // Your code here -}); + + const wins = [ + [0,1,2], [3,4,5], [6,7,8], // horizontal wins + [0,3,6], [1,4,7], [2,5,8], // vertical wins + [0,4,8], [2,4,6] // diagonal wins + ]; + let playerTurn = 'X'; + let turnCount = 0; + + let mySquares = document.querySelectorAll("[data-cell]"); + + // document.querySelector("[data-cell='0']").addEventListener("click", (square) => { + mySquares.forEach(aSquare => { + aSquare.addEventListener("click", square => { + // display the current click count inside the clicked div + if (!square.target.textContent) { + document.getElementById('announce-winner').textContent = null; + square.target.textContent = playerTurn; + turnCount++ + if (checkForWin()) { //checkForWin returns TRUE if someone won. It returns FALSE if no win yet. + document.getElementById('announce-winner').textContent = `Congratulations ${playerTurn}. You won! Start a new game by pressing Clear Board below.`; + } else if (turnCount == 9) { // If there have been 9 turns but no winner. It is a tie. + document.getElementById('announce-winner').textContent = `We have a tie folks. Start a new game by pressing 'Clear Board' below.`; + } else { // Ok, toggle token to the opposite player. + playerTurn = playerTurn === 'X'? 'O' : 'X'; + } + } else { // Ah, the user tried to click on an occupied square. + document.getElementById('announce-winner').textContent = 'Try again please. That square is taken.'; + } + }); + }); + + // This code handles actions when player presses "Clear Board" button. + // We pretty much just initialize everything. + document.getElementById('clear').addEventListener("click", (event)=> { + playerTurn = 'X'; + turnCount = 0 + mySquares.forEach(aSquare => { + aSquare.textContent = null; + }) + document.getElementById('announce-winner').textContent = null; + }) + + + function checkForWin() { + // wins array stores all the win combinations. wincombo array is one of the wins. + // wins.some ... at least one of these win combos needs to be true. + // wincombo.every ... for a win, all the squares in the particular wincombo must equal the players token (X or O) + return wins.some(winCombo => winCombo.every(index => mySquares[index].textContent === playerTurn)); + } + +}, false);