Eight Queens v0.2.0 - timer

TODO.md

@@ -1,7 +1,5 @@
 # Future Developments
 
-* timer that starts on page load and stops when a solution is found
-
 * `[New Game]` button
 
 * `[Easy Mode]` option:
@@ -10,3 +8,5 @@
 
 * add notice to this project from old
   [attogram/8queens](https://github.com/attogram/8queens) repo
+
+* restart timer if solved game becomes unsolved due to queen removal

src/EightQueens.js

@@ -7,11 +7,12 @@ import * as attack from './UnderAttack.js';
 import * as helpers from './helpers.js';
 import Chessboard from 'chessboardjsx';
 import Status from './Status.js';
+import Timer from './Timer.js';
 import Title from './Title.js';
 import queenUnderAttackSvg from './queenUnderAttack.svg';
 
 const gameName    = 'Eight Queens';
-const gameVersion = '0.1.1';
+const gameVersion = '0.2.0';
 const gameHome    = 'https://github.com/attogram/EightQueens';
 
 class EightQueens extends Component {
@@ -23,6 +24,9 @@ class EightQueens extends Component {
         this.state = {
             attacked: [], // Array of queens under attack
             position: {}, // Object of current board position
+            gameStatus: 'playing',
+            queensOnBoard: 0,
+            queensUnderAttack: 0,
         }
     }
 
@@ -52,9 +56,22 @@ class EightQueens extends Component {
            }
         });
 
+        let queensOnBoard = Object.keys(position).length;
+        let queensUnderAttack = 0;
+        if (attacked) {
+            queensUnderAttack = attacked.length;
+        }
+        let gameStatus = 'playing';
+        if (queensOnBoard === 8 && queensUnderAttack === 0) {
+            gameStatus = 'solved';
+        }
+
         this.setState({
             attacked: attacked,
-            position: position
+            position: position,
+            queensOnBoard: queensOnBoard,
+            queensUnderAttack: queensUnderAttack,
+            gameStatus: gameStatus,
         });
     };
 
@@ -64,11 +81,6 @@ class EightQueens extends Component {
     render() {
         // force board refresh by using FEN string in _position_ and _key_ Chessboard props
         const fenPosition = helpers.objToFen(this.state.position);
-        const queensOnBoard = Object.keys(this.state.position).length;
-        let queensUnderAttack = 0;
-        if (this.state.attacked) {
-            queensUnderAttack = this.state.attacked.length;
-        }
         return (
             <div className="EightQueens">
                 <div className="EightQueens-header">
@@ -78,8 +90,8 @@ class EightQueens extends Component {
                         gameVersion={gameVersion}
                     />
                     <Status
-                        queensOnBoard={queensOnBoard}
-                        queensUnderAttack={queensUnderAttack}
+                        queensOnBoard={this.state.queensOnBoard}
+                        queensUnderAttack={this.state.queensUnderAttack}
                     />
                 </div>
                 <Chessboard
@@ -103,6 +115,9 @@ class EightQueens extends Component {
                         )
                     }}
                 />
+                <Timer
+                    gameStatus={this.state.gameStatus}
+                />
                 <p>
                     - Place <b>Eight Queens</b> with none under attack!<br />
                     - Click a square to place a Queen<br />

src/Timer.css

@@ -0,0 +1,7 @@
+.EightQueens-timer {
+    border: 1px solid #988010;
+    background-color: #fcebb4;
+    color: black;
+    margin-top: 8px;
+    padding: 8px;
+}

src/Timer.js

@@ -0,0 +1,51 @@
+/**
+ * Eight Queens chess game
+ * Timer box
+ */
+import React, { Component } from 'react';
+import './Timer.css';
+
+class Timer extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            currentTime: new Date().valueOf(),
+            startTime: new Date().valueOf(),
+        };
+
+        this.tick = this.tick.bind(this)
+    }
+
+    componentDidMount(){
+        this.timer = setInterval(this.tick, 1000)
+    }
+
+    componentWillUnmount(){
+        clearInterval(this.timer);
+    }
+
+    tick() {
+        this.setState({ currentTime: new Date().valueOf() });
+    }
+
+    render() {
+        if (this.props.gameStatus === 'solved') {
+            clearInterval(this.timer);
+        }
+
+        const seconds = Math.floor((this.state.currentTime - this.state.startTime) / 1000);
+        //const minutes = Math.floor(seconds/60);
+        //const hours = Math.floor(minutes/60);
+        //const days = Math.floor(hours/24);
+
+        return (
+            <div className="EightQueens-timer">
+                <small>{this.props.gameStatus} </small>
+                {seconds}
+                <small> seconds</small>
+            </div>
+        );
+    }
+}
+
+export default Timer;