Merge pull request #11 from MurilloCunha/dev

First Release

src/components/game-stats/index.css

@@ -0,0 +1,39 @@
+.game-stats{
+  width: 100%;
+  height:100%;
+  box-sizing: border-box;
+  padding: 2rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #000
+}
+
+.game-stats__winner{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.game-stats__winner h2{
+  margin-top:0rem;
+}
+
+.game-stats__winner h3 {
+  color: var(--scrabble-tile-text);
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 2rem 0;
+}
+
+.game-stats__stats {
+  margin-top:2rem;
+}
+.game-stats__stats li{
+  color: var(--scrabble-tile-text);
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 0.5rem 0;
+}

src/components/game-stats/index.jsx

@@ -0,0 +1,56 @@
+import React, { useContext } from 'react'
+import Match from '../../context/status'
+import MatchDuration from '../../context/duration'
+
+function GameStats() {
+  const MatchPlayers = useContext(Match)
+  const matchTimer = useContext(MatchDuration)
+
+  const winner = MatchPlayers.all.reduce((compare,player) =>
+   compare.totalScore > player.totalScore ? compare : player
+  )
+
+  const playerhigherScore = MatchPlayers.all.reduce((compare,player) => 
+    Math.max(compare.score) > Math.max(player.score) ? compare : player
+    )
+  const higherScore = {
+    score:Math.max(...playerhigherScore.score),
+    player:playerhigherScore.name
+  }
+
+  const playerLowerScore = MatchPlayers.all.reduce((compare,player) => 
+    Math.min(...player.score) > Math.min(compare.score)  ? player : compare
+  )
+  const lowerScore = {
+    score:Math.min(...playerLowerScore.score),
+    player:playerLowerScore.name
+  }
+
+  return (
+    <section className="game-stats">
+      <article className="game-stats__winner">
+        <h2 className="logo__title">
+              <span className="logo__title--tile">V</span>
+              <span className="logo__title--tile">E</span>
+              <span className="logo__title--tile">N</span>
+              <span className="logo__title--tile">C</span>
+              <span className="logo__title--tile">E</span>
+              <span className="logo__title--tile">D</span>
+              <span className="logo__title--tile">O</span>
+              <span className="logo__title--tile">R</span>
+              <span className="logo__title--tile">(A)</span>
+          </h2>
+        <h3>{winner.name}</h3>
+      </article>
+      <article className="game-stats__stats"> 
+        <ul>
+         <li>Maior pontuação: {higherScore.score}({higherScore.player})</li> 
+         <li>Menor pontuação: {lowerScore.score}({lowerScore.player})</li>
+         <li>Tempo de jogo: {matchTimer.getDuration()}</li> 
+        </ul>
+      </article>
+    </section>
+  )
+}
+
+export default GameStats

src/components/logo/index.css

@@ -22,6 +22,7 @@
     box-shadow: inset -3px -3px 1px #BB9469;
     box-sizing: border-box;
     padding-left:0.2rem;
+    margin: 0 0.05rem;
 }
 
 .logo__title--tile::after{

src/components/modal/index.css

@@ -20,7 +20,9 @@
   flex-wrap: wrap;
 
 }
-
+.modal__container a{
+  width: 100%;
+}
 .modal__close-button{
   background-color: transparent;
   box-sizing: border-box;
@@ -36,4 +38,5 @@
   padding: 0 2rem;
   overflow:scroll;
   height: 50vh;
+  width:100%;
 }

src/components/modal/index.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 
 function Modal(props) {
 
   return (
     <section className="modal">
       <div className="modal__container">
-        <button className="modal__close-button"type="button" {...props}>x</button>
+        <Link to={props.to}><button className="modal__close-button"type="button" {...props}>x</button></Link>
         <div className="modal__content">{props.children}</div>
         </div>
     </section>

src/components/score-input/index.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 function ScoreInput(props) {
 
     return (
-    <input className="score-input" type="number" min={0} {...props}></input>
+    <input className="score-input" type="number" min={0} {...props} defaultValue={0}></input>
     )
 }
 

src/components/table/index.css

@@ -26,7 +26,7 @@ tfoot {
     border-bottom: 2px solid #fff;
 }
 
-.scoreboard__table tr td:first-child{
+.scoreboard__table tr td:not(:last-child){
     border-right: 2px solid #fff;
 }
 

src/components/table/index.jsx

@@ -37,8 +37,9 @@ function Table({ playersList }) {
             {playersList.map(player =>
             <td key={`${player.name}_${scoreRow}`}>
               <span>
+                {console.log(player.score[scoreRow])}
                 {
-                  player.score[scoreRow] ? player.score[scoreRow] : <ScoreInput onBlur={(event) => handleScoreChange(event,player)} />
+                  player.score[scoreRow] >=0 ? player.score[scoreRow] : <ScoreInput onBlur={(event) => handleScoreChange(event,player)} />
                 }
               </span>
             </td>)}

src/context/duration.jsx

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+import { gameDuration } from '../models/game-duration'
+
+const matchTime = new gameDuration() 
+
+const MatchDuration = createContext(matchTime)
+
+export default MatchDuration

src/models/game-duration/index.js

@@ -0,0 +1,25 @@
+export class gameDuration {
+  constructor(){
+    this._startTime = 0
+    this._endTime = 0
+  }
+
+  setStartTime(){
+    const currentDate = new Date()
+    this._startTime = [currentDate.getHours(),currentDate.getMinutes(),currentDate.getSeconds()]
+  }
+
+  setEndTime(){
+    const currentDate = new Date()
+    this._endTime = [currentDate.getHours(),currentDate.getMinutes(),currentDate.getSeconds()]
+  }
+
+  getDuration(){
+    const hours = Math.abs(this._endTime[0] - this._startTime[0])
+    const minutes = Math.abs(this._endTime[1] - this._startTime[1])
+    const seconds = Math.abs(this._endTime[2] - this._startTime[2])
+
+    return `${hours}h ${minutes}m ${seconds}s`
+  }
+
+}

src/models/playersList/index.js

@@ -13,19 +13,9 @@ export class playersList{
         this._playersList.push(new player(id,name))
     }
 
-    remove(playerID){
-        this._playersList.splice(playerID,1)
+   restore(){
+        this._playersList= [new player(1,''),new player(2,'')]
     }
 
-    updatePlayerName(updateID,value){
-        this._playersList[updateID].setName(value)
-    }
-
-    addPlayerScore(updateID,value){
-        this._playersList[updateID].addScore(value)
-    }
 
-    removePlayerScore(updateID,scoreID){
-        this._playersList[updateID].removeScore(scoreID)
-    }
 }

src/styles/index.css

@@ -9,6 +9,7 @@
 @import url(../components/score-input/);
 @import url(../components/search-result/);
 @import url(../components/modal/);
+@import url(../components/game-stats/);
 @import url(../views/home/);
 @import url(../views/players-setup/);
 @import url(../views/scoreboard/);

src/views/players-setup/index.jsx

@@ -2,12 +2,14 @@ import React, { useCallback, useContext, useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import Match from '../../context/status'
+import MatchDuration from '../../context/duration'
 import PlayerInput from '../../components/player-input/'
 import Button from '../../components/button/'
 
 function PlayersSteup() {
   const [playersCount,setPlayersCount] = useState(0)
   const matchPlayers = useContext(Match)
+  const matchTimer = useContext(MatchDuration)
 
   const handleAddPlayer = useCallback(() => {
     playersCount < 4 && matchPlayers.add({ id: matchPlayers.all.length + 1, name: '' })
@@ -21,7 +23,7 @@ function PlayersSteup() {
       )}
       {matchPlayers.all.length < 4 && <Button variant="ghost" onClick={handleAddPlayer}>+</Button>}
       <Link to="/scoreboard">
-        <Button>Começar</Button>
+        <Button onClick={() => matchTimer.setStartTime()}>Começar</Button>
       </Link>
     </section>
   )

src/views/scoreboard/index.jsx

@@ -1,29 +1,40 @@
 import React, { useCallback, useContext, useState } from 'react'
 
 import Match from '../../context/status'
+import MatchDuration from '../../context/duration'
 import Table from '../../components/table/'
 import SearchInput from '../../components/search-input/'
 import Button from '../../components/button/'
 import Modal from '../../components/modal/'
+import GameStats from '../../components/game-stats'
 
 function Scoreboard() {
   const matchPlayers = useContext(Match)
+  const matchTimer = useContext(MatchDuration)
   const [modal, setModal] = useState('')
   const [modalContent, setModalContent] = useState()
+  const [address, setAddress] = useState()
 
   const handleModal = useCallback((content) => {
     setModalContent(content)
     setModal(!modal)
-  }, [modal])
+    address === '/' && matchPlayers.restore()
+  }, [address, matchPlayers, modal])
+
+  const handleEndGame = useCallback(()=>{
+    matchTimer.setEndTime()
+    setAddress('/')
+    setModalContent(<GameStats />)
+    setModal(!modal)
+  },[matchTimer, modal])
 
   return (
     <section className='scoreboard'>
       <SearchInput resultHandler={handleModal}/>
       <Table playersList={matchPlayers.all} />
-      <Button>Finalizar</Button>
-      {modal && <Modal onClick={handleModal} >{modalContent}</Modal>}
+      <Button onClick={handleEndGame}>Finalizar</Button>
+      {modal && <Modal onClick={handleModal} to={address}>{modalContent}</Modal>}
     </section>
-
   )
 }