adding reset button

jaiminmoslake7020 · Nov 23, 2024 · 460e319 · 460e319
1 parent 409a084
commit 460e319
Show file tree

Hide file tree

Showing 9 changed files with 330 additions and 126 deletions.
diff --git a/js/components/TicTac.ts b/js/components/TicTac.ts
@@ -1,55 +1,81 @@
 import {createEL} from '../utils/index.js'
 import { TurnInfo } from './TurnInfo.js'
 import { TurnHandler } from './TurnHandler.js'
-import { TicTacCellRow } from './TicTacCellRow.js'
-import {MoveType, TicTacCellRowFunctionType} from '../types/index.js';
+import {
+  TicTacTableType,
+  TurnHandlerType,
+  TurnInfoType,
+} from '../types/index.js';
+import {TicTacTable} from './TicTacTable.js';
 
 export const TicTac = () => {
-  const wrapperDiv = createEL('div');
-  const ticTacTable = createEL('div');
-  const ticTacTableBody = createEL('div');
-
-  const trArray = [] as TicTacCellRowFunctionType[];
-  const { getTurn, changeTurn, getWinner, getWinnerSequence, getAnotherPersonTurns } = TurnHandler();
-  const turnInfoP = TurnInfo( getTurn() );
-
-  const handleChangeTurn = (v: MoveType) => {
-    changeTurn(v);
-    const newTurn = getTurn();
-    const winner = getWinner();
-    const winnerSequence = getWinnerSequence();
-    const anotherPersonTurns = getAnotherPersonTurns();
-    for (let i = 0 ; i < 3 ; i++)  {
-      trArray[i].update( newTurn , handleChangeTurn, winnerSequence, anotherPersonTurns);
+  let wrapperDiv :undefined | HTMLDivElement;
+  let turnInfoP: TurnInfoType | undefined;
+  let turnHandler: TurnHandlerType | undefined;
+  let ticTacTableType: TicTacTableType | undefined;
+
+  const getWrapperDiv = () : HTMLDivElement => {
+    return wrapperDiv as HTMLDivElement;
+  }
+
+  const setWrapperDiv = (item: HTMLDivElement) => {
+    wrapperDiv = item;
+  }
+
+  const setTurnInfoP = (item: TurnInfoType) => {
+    turnInfoP = item;
+  }
+
+  const setTurnHandlerType = (item: TurnHandlerType) => {
+    turnHandler = item;
+  }
+
+  const getTurnHandlerType = () : TurnHandlerType => {
+     return turnHandler as TurnHandlerType;
+  }
+
+  const setTicTacTable = (item: TicTacTableType) => {
+    ticTacTableType = item;
+  }
+
+  const getTicTacTable = () : TicTacTableType => {
+    return ticTacTableType as TicTacTableType;
+  }
+
+  const getTurnInfoP = () : TurnInfoType => {
+    if ( !turnInfoP ) {
+      const t = getTurnHandlerType();
+      setTurnInfoP( TurnInfo( t.getTurn() ) );
     }
-    turnInfoP.update( newTurn , winner);
+    return turnInfoP as TurnInfoType;
+  }
+
+  const reload = () => {
+    setTurnHandlerType( TurnHandler() );
+    const t = getTurnHandlerType();
+    const table = getTicTacTable();
+    table.reset();
+    getTurnInfoP().reset( t.getTurn() );
+  }
+
+  const updateInfo = () => {
+    const {
+      getTurn, getWinner
+    } = getTurnHandlerType();
+    getTurnInfoP().update( getTurn() , getWinner() , reload);
   }
 
   const render = () => {
-    for (let i = 0 ; i < 3 ; i++)  {
-      const turn = getTurn();
-      const tr = TicTacCellRow( i + 1 ,  turn, handleChangeTurn );
-      ticTacTableBody.append(tr.render());
-      trArray.push(tr);
-    }
-    ticTacTable.classList.add('tic-tac-table');
-    ticTacTableBody.classList.add('tic-tac-table-body');
-    ticTacTable.append(ticTacTableBody);
-    // const b = createEL('button');
-    // b.setAttribute('id', 'reset-button');
-    // b.setAttribute('type', 'button');
-    // b.innerHTML = 'Reset';
-    // b.addEventListener('click', () => {
-    //   findEl('table').remove();
-    //   b.remove()
-    //   findEl('p').remove();
-    //   render();
-    // })
-    // wrapperDiv.append( b );
-    wrapperDiv.append( turnInfoP.render() );
-    wrapperDiv.append(ticTacTable);
-    wrapperDiv.classList.add('wrapper-div')
-    return wrapperDiv;
+    setTurnHandlerType( TurnHandler() );
+    const t = getTurnHandlerType();
+    setTurnInfoP( TurnInfo( t.getTurn() ) );
+    setWrapperDiv( createEL('div') as HTMLDivElement );
+    getWrapperDiv().append( getTurnInfoP().render() );
+    const table = TicTacTable( getTurnHandlerType , updateInfo );
+    setTicTacTable(table);
+    getWrapperDiv().append(table.render());
+    getWrapperDiv().classList.add('wrapper-div')
+    return getWrapperDiv();
   }
 
   return {

diff --git a/js/components/TicTacCell.ts b/js/components/TicTacCell.ts
@@ -1,94 +1,129 @@
-import { findEl } from '../utils/index.js';
-import { TicTacCellIdentifier } from './TicTacCellIdentifier.js'
-import { TicTacCellValue } from './TicTacCellValue.js'
+import {findEl} from '../utils/index.js';
+import {TicTacCellIdentifier} from './TicTacCellIdentifier.js'
+import {TicTacCellValue} from './TicTacCellValue.js'
 import {
   AnotherPersonMovesTypeWithNull,
   ChangeFunctionType,
   ColumnIdType,
-  MoveType,
+  MoveType, TDClassIdType, TicTacCellValueType,
   TurnType,
   WiningSequenceTypeWithNull
 } from '../types/index.js';
 
 const StopAnimateMoveX = 200;
 
-const stopAnimateMoveSuccess  = () => {
-  let StopAnimateMoveSuccess = 400;
+const stopAnimateMoveSuccess = () => {
+  let StopAnimateMoveSuccess = 100;
 
   const get = () => {
     return StopAnimateMoveSuccess;
   }
 
+  const reset = () => {
+    StopAnimateMoveSuccess = 100;
+  }
+
   const increment = () => {
     StopAnimateMoveSuccess += 300;
   }
 
   return {
     get,
-    increment
+    increment,
+    reset
   };
 }
 
 const {
   get: getStopAnimateMoveSuccess,
-  increment:incrementStopAnimateMoveSuccess
+  increment: incrementStopAnimateMoveSuccess,
+  reset: resetStopAnimateMoveSuccess,
 } = stopAnimateMoveSuccess();
 
+export const tdClassList = {
+  typeO: 'type-O',
+  typeX: 'type-X',
+  typeError: 'type-Error',
+  typeSuccess: 'type-Success',
+  typeDisabled: 'type-Disabled',
+  stopAnimateMoveX: 'stop-animate-move-x',
+  stopAnimateMoveSuccess: 'stop-animate-move-success'
+} as Record<TDClassIdType, string>
 
-  export const TicTacCell = (columnId: ColumnIdType, firstTime: boolean, turn: TurnType, changeTurn: ChangeFunctionType) => {
-  const cv = TicTacCellValue( columnId,  firstTime);
-  const td = document.createElement('div');
 
+export const TicTacCell = (columnId: ColumnIdType, firstTime: boolean, turn: TurnType, changeTurn: ChangeFunctionType) => {
   let clicked = false;
 
-  const getMoveType = () : MoveType => {
-    return columnId.replace('-','') as MoveType
+  const getMoveType = (): MoveType => {
+    return columnId.replace('-', '') as MoveType
   }
 
   const setClicked = () => {
     clicked = true;
   }
 
-  const getTd = () => {
-    return findEl('#column-'+columnId)
+  const setUnClicked = () => {
+    clicked = false;
+  }
+
+  const removeAllNewClasses = (tdElement: HTMLDivElement) => {
+    Object.keys(tdClassList).map((keyname: string | TDClassIdType) => {
+      const className = tdClassList[keyname as TDClassIdType];
+      if (tdElement.classList.contains(className)) {
+        tdElement.classList.remove(className);
+      }
+    });
   }
 
-  const onClick = (appliedTurn: TurnType, appliedChangeTurn: ChangeFunctionType, e:Event ) => {
-    if ( !clicked ) {
-      getTd().classList.add('type-'+appliedTurn);
-      const cv = TicTacCellValue( columnId,  firstTime);
+  const onClick = (appliedTurn: TurnType, appliedChangeTurn: ChangeFunctionType, e: Event) => {
+    if (!clicked) {
+      (e.target as HTMLDivElement).classList.add('type-' + appliedTurn);
+      const cv = TicTacCellValue( appliedTurn );
       (e.target as HTMLDivElement).append(cv.render());
-      cv.update(appliedTurn);
       setClicked();
-      appliedChangeTurn( getMoveType() );
+      appliedChangeTurn(getMoveType());
     } else {
-      getTd().classList.add('type-Error');
+      console.log('clicked', clicked);
+      (e.target as HTMLDivElement).classList.add(tdClassList.typeError);
       setTimeout(() => {
-        getTd().classList.remove('type-Error');
+        (e.target as HTMLDivElement).classList.remove(tdClassList.typeError);
       }, 200);
     }
   }
 
-  const firstClick = (e: Event)  => {
-    onClick(turn, changeTurn, e);
-  }
-
-  const anotherPersonMove = () => {
-    getTd().classList.add('type-X');
+  const anotherPersonMove = (newElement: HTMLDivElement) => {
+    newElement.classList.add(tdClassList.typeX);
     setTimeout(() => {
-      getTd().classList.add('stop-animate-move-x');
-    },StopAnimateMoveX);
-    const cv = TicTacCellValue( columnId,  firstTime);
-    getTd().append(cv.render());
-    cv.update('X');
+      newElement.classList.add(tdClassList.stopAnimateMoveX);
+    }, StopAnimateMoveX);
+    const cv = TicTacCellValue( 'X' );
+    newElement.append(cv.render());
     setClicked();
   }
 
+  const reset = ( newTurn: TurnType, newChangeTurn: ChangeFunctionType ) => {
+    const element = findEl('#column-' + columnId);
+    // @ts-ignore
+    const cv = document.querySelector('#column-' + columnId+' > .tic-tac-cell-value');
+    if ( cv !== null ) {
+      cv.remove();
+    }
+    // Clone the element
+    const newElement = element.cloneNode(true) as HTMLDivElement;
+    // Replace the original element with the clone
+    // @ts-ignore
+    element.parentNode.replaceChild(newElement, element);
+    newElement.addEventListener('click', onClick.bind(null, newTurn, newChangeTurn));
+    removeAllNewClasses(newElement);
+    setUnClicked();
+    resetStopAnimateMoveSuccess();
+  }
+
   const update = (newTurn: TurnType, newChangeTurn: ChangeFunctionType, winnerSequence: WiningSequenceTypeWithNull, anotherPersonMoves: AnotherPersonMovesTypeWithNull) => {
-    const element = findEl('#column-'+columnId);
+    const element = findEl('#column-' + columnId);
 
     // Clone the element
-    const newElement = element.cloneNode(true);
+    const newElement = element.cloneNode(true) as HTMLDivElement;
 
     // Replace the original element with the clone
     // @ts-ignore
@@ -97,54 +132,52 @@ const {
     // console.log('anotherPersonTurns', anotherPersonTurns);
     if (Array.isArray(anotherPersonMoves) && winnerSequence === null) {
       if (
-        !anotherPersonMoves.includes( getMoveType() )
+        !anotherPersonMoves.includes(getMoveType())
       ) {
-        newElement.addEventListener('click', (e: Event) => {
-          onClick(newTurn, newChangeTurn, e);
-        });
-      } else if ( !getTd().classList.contains('type-X') ) {
-        anotherPersonMove();
+        newElement.addEventListener('click', onClick.bind(null, newTurn, newChangeTurn));
+      } else if (!newElement.classList.contains(tdClassList.typeX)) {
+        anotherPersonMove(newElement);
       }
     } else {
       if (winnerSequence === null) {
-        newElement.addEventListener('click', (e: Event) => {
-          onClick(newTurn, newChangeTurn, e);
-        });
-      } else if ( Array.isArray(winnerSequence) ) {
-        if ( winnerSequence.includes( getMoveType() ) ) {
+        newElement.addEventListener('click', onClick.bind(null, newTurn, newChangeTurn));
+      } else if (Array.isArray(winnerSequence)) {
+        if (winnerSequence.includes(getMoveType())) {
           setTimeout(() => {
-            getTd().classList.add('type-Success');
+            newElement.classList.add(tdClassList.typeSuccess);
             setTimeout(() => {
-              getTd().classList.add('stop-animate-move-success');
-            }, 200 );
-          }, getStopAnimateMoveSuccess() );
+              newElement.classList.add(tdClassList.stopAnimateMoveSuccess);
+            }, 200);
+          }, getStopAnimateMoveSuccess());
           incrementStopAnimateMoveSuccess();
           if (
             Array.isArray(anotherPersonMoves)
-            && anotherPersonMoves.includes( getMoveType() )
-            && !getTd().classList.contains('type-X')
+            && anotherPersonMoves.includes(getMoveType())
+            && !newElement.classList.contains(tdClassList.typeX)
           ) {
-            anotherPersonMove();
+            anotherPersonMove(newElement);
           }
         } else {
-          getTd().classList.add('type-Disabled');
+          newElement.classList.add(tdClassList.typeDisabled);
         }
       }
     }
   }
 
   const render = () => {
-    const id = TicTacCellIdentifier( columnId,  firstTime);
-    td.setAttribute('id', 'column-'+columnId);
+    const id = TicTacCellIdentifier(columnId, firstTime);
+    const td = document.createElement('div');
+    td.setAttribute('id', 'column-' + columnId);
     td.classList.add('tic-tac-cell');
     td.append(id.render());
-    td.addEventListener('click',  firstClick);
+    td.addEventListener('click', onClick.bind(null, turn, changeTurn) );
     // console.log('event listener added', 'column-'+columnId)
     return td;
   }
 
   return {
     render,
-    update
+    update,
+    reset
   };
 }
diff --git a/js/components/TicTacCellRow.ts b/js/components/TicTacCellRow.ts
@@ -26,13 +26,19 @@ export const TicTacCellRow = (rowId: number, turn: TurnType, changeTurn: ChangeF
 
   const update = (newTurn: TurnType, newChangeTurn: ChangeFunctionType, winnerSequence: WiningSequenceTypeWithNull, anotherPersonMoves: AnotherPersonMovesTypeWithNull) => {
     for (let i = 0 ; i < 3 ; i++)  {
-      // console.log('TicTacCellRow', newTurn);
       tdArray[i].update(newTurn, newChangeTurn, winnerSequence, anotherPersonMoves);
     }
   }
 
+  const reset = ( newTurn: TurnType, newChangeTurn: ChangeFunctionType ) => {
+    for (let i = 0 ; i < 3 ; i++)  {
+      tdArray[i].reset( newTurn, newChangeTurn );
+    }
+  }
+
   return {
     render,
-    update
+    update,
+    reset
   };
 }