Game-3in-a-row/PROG2700-Assignment4B-3inarow_StarterFiles/game.js
// FUNCTION: This function takes in the rows array from the data returned from the fetch call within the startGame function. It then creates a table, and assigns each table cell td tag two attributes. These two attributes combined references the index of the corresponding object within the rows array.
This function takes in the rows array from the data returned from the fetch call within the startGame function. It then creates a table, and assigns each table cell td tag two attributes. These two attributes combined references the index of the corresponding object within the rows array.
This function takes in the rows array from the data returned from the fetch call within the startGame function . It then creates a table and assigns each table cell td tag two attributes . These two attributes combined references the index of the corresponding object within the rows array .
function createGameElements({ rows: gameRows }) {
        let newGameTable = document.createElement('table');
        gameRows.forEach((row, index) => {
          let newRow = document.createElement('tr');
          for (let i = 0; i < row.length; i++) {
            let newSquare = setTileDefaults(row[i]); 
            newSquare.setAttribute('data-row', index);
            newSquare.setAttribute('data-cell', i);
            newRow.appendChild(newSquare);
            console.log(newSquare);
          }
          newGameTable.appendChild(newRow); 
        });
      let gameHeader = document.createElement('H1');
      gameHeader.appendChild(document.createTextNode("Feranmi's 3-In-A-Row-Puzzle"));
      let gridSizeIndicator = document.createElement('H3');
      gridSizeIndicator.appendChild(document.createTextNode(`Grid Size: ${gameRows.length} / ${gameRows.length}`));
      let statusCheckButton = document.createElement('button');
      statusCheckButton.addEventListener('click', () => { checkProgress(); });
      statusCheckButton.appendChild(document.createTextNode("Check"));
      let buttonContainer = document.createElement('sec');
      buttonContainer.appendChild(statusCheckButton);
      let errorCheckbox = document.createElement('input');
      errorCheckbox.addEventListener('change', () => { displayIncorrectSquares(); });
      errorCheckbox.setAttribute('type', 'checkbox');
      let errorCheckboxLabel = document.createElement('label');
      errorCheckboxLabel.appendChild(document.createTextNode("Show incorrect Squares "));
      errorCheckboxLabel.appendChild(errorCheckbox);
      buttonContainer.appendChild(errorCheckboxLabel);
      document.querySelector('#theGame').appendChild(gameHeader);
      document.querySelector('#theGame').appendChild(gridSizeIndicator);
      document.querySelector('#theGame').appendChild(newGameTable);
      document.querySelector('#theGame').appendChild(statusCheckButton);
      document.querySelector('#theGame').appendChild(errorCheckboxLabel);
    }
function createGameElements ( { rows : gameRows } ) { let newGameTable = document . createElement ( 'table' ) ; gameRows . forEach ( ( row , index ) => { let newRow = document . createElement ( 'tr' ) ; for ( let i = 0 ; i < row . length ; i ++ ) { let newSquare = setTileDefaults ( row [ i ] ) ; newSquare . setAttribute ( 'data-row' , index ) ; newSquare . setAttribute ( 'data-cell' , i ) ; newRow . appendChild ( newSquare ) ; console . log ( newSquare ) ; } newGameTable . appendChild ( newRow ) ; } ) ; let gameHeader = document . createElement ( 'H1' ) ; gameHeader . appendChild ( document . createTextNode ( "Feranmi's 3-In-A-Row-Puzzle" ) ) ; let gridSizeIndicator = document . createElement ( 'H3' ) ; gridSizeIndicator . appendChild ( document . createTextNode ( ` ${ gameRows . length } ${ gameRows . length } ` ) ) ; let statusCheckButton = document . createElement ( 'button' ) ; statusCheckButton . addEventListener ( 'click' , ( ) => { checkProgress ( ) ; } ) ; statusCheckButton . appendChild ( document . createTextNode ( "Check" ) ) ; let buttonContainer = document . createElement ( 'sec' ) ; buttonContainer . appendChild ( statusCheckButton ) ; let errorCheckbox = document . createElement ( 'input' ) ; errorCheckbox . addEventListener ( 'change' , ( ) => { displayIncorrectSquares ( ) ; } ) ; errorCheckbox . setAttribute ( 'type' , 'checkbox' ) ; let errorCheckboxLabel = document . createElement ( 'label' ) ; errorCheckboxLabel . appendChild ( document . createTextNode ( "Show incorrect Squares " ) ) ; errorCheckboxLabel . appendChild ( errorCheckbox ) ; buttonContainer . appendChild ( errorCheckboxLabel ) ; document . querySelector ( '#theGame' ) . appendChild ( gameHeader ) ; document . querySelector ( '#theGame' ) . appendChild ( gridSizeIndicator ) ; document . querySelector ( '#theGame' ) . appendChild ( newGameTable ) ; document . querySelector ( '#theGame' ) . appendChild ( statusCheckButton ) ; document . querySelector ( '#theGame' ) . appendChild ( errorCheckboxLabel ) ; }
FUNCTION: This function takes in the rows array from the data returned from the fetch call within the startGame function.
FUNCTION : This function takes in the rows array from the data returned from the fetch call within the startGame function .
// creates a new table row for each row of object // function returns styled and clickable tile // adds new row to game table // Inserting game elements to DOM // header // game grid size // Save button // Error showing checkbox // inserting elements to DOM