From 2ecb46cd450d7c0fd959c6ffd62774348f8a543e Mon Sep 17 00:00:00 2001 From: MurilloCunha Date: Fri, 25 Jun 2021 18:17:27 -0300 Subject: [PATCH 1/6] game stats component --- src/components/game-stats/index.css | 39 ++++++++++++++++++++ src/components/game-stats/index.jsx | 55 +++++++++++++++++++++++++++++ src/styles/index.css | 1 + 3 files changed, 95 insertions(+) create mode 100644 src/components/game-stats/index.css create mode 100644 src/components/game-stats/index.jsx diff --git a/src/components/game-stats/index.css b/src/components/game-stats/index.css new file mode 100644 index 0000000..00c88eb --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/game-stats/index.jsx b/src/components/game-stats/index.jsx new file mode 100644 index 0000000..f64db10 --- /dev/null +++ b/src/components/game-stats/index.jsx @@ -0,0 +1,55 @@ +import React, { useContext } from 'react' +import Match from '../../context/status' + +function GameStats(props) { + const MatchPlayers = useContext(Match) + + 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 + } + + console.log(playerLowerScore) + return ( +
+
+

+ V + E + N + C + E + D + O + R + (A) +

+

{winner.name}

+
+
+
    +
  • Maior pontuação: {higherScore.score}({higherScore.player})
    • +
  • Menor pontuação: {lowerScore.score}({lowerScore.player})
    • +
  • Tempo de jogo: {props.time}
    • +
+
+
+ ) +} + +export default GameStats diff --git a/src/styles/index.css b/src/styles/index.css index fcf016f..dc2f283 100644 --- a/src/styles/index.css +++ b/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/); From 476358caf39909e2bf833f23b41f033dd540f18e Mon Sep 17 00:00:00 2001 From: MurilloCunha Date: Fri, 25 Jun 2021 18:42:52 -0300 Subject: [PATCH 2/6] game-stats time --- src/components/game-stats/index.jsx | 7 ++++--- src/components/logo/index.css | 1 + src/components/table/index.css | 2 +- src/context/duration.jsx | 8 ++++++++ src/models/game-duration/index.js | 25 +++++++++++++++++++++++++ src/views/players-setup/index.jsx | 4 +++- src/views/scoreboard/index.jsx | 12 ++++++++++-- 7 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 src/context/duration.jsx create mode 100644 src/models/game-duration/index.js diff --git a/src/components/game-stats/index.jsx b/src/components/game-stats/index.jsx index f64db10..78c9349 100644 --- a/src/components/game-stats/index.jsx +++ b/src/components/game-stats/index.jsx @@ -1,8 +1,10 @@ import React, { useContext } from 'react' import Match from '../../context/status' +import MatchDuration from '../../context/duration' -function GameStats(props) { +function GameStats() { const MatchPlayers = useContext(Match) + const matchTimer = useContext(MatchDuration) const winner = MatchPlayers.all.reduce((compare,player) => compare.totalScore > player.totalScore ? compare : player @@ -24,7 +26,6 @@ function GameStats(props) { player:playerLowerScore.name } - console.log(playerLowerScore) return (
@@ -45,7 +46,7 @@ function GameStats(props) {
  • Maior pontuação: {higherScore.score}({higherScore.player})
  • Menor pontuação: {lowerScore.score}({lowerScore.player})
    • -
  • Tempo de jogo: {props.time}
    • +
  • Tempo de jogo: {matchTimer.getDuration()}
diff --git a/src/components/logo/index.css b/src/components/logo/index.css index 533fee8..29844e9 100644 --- a/src/components/logo/index.css +++ b/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{ diff --git a/src/components/table/index.css b/src/components/table/index.css index e7955b8..c7d21d4 100644 --- a/src/components/table/index.css +++ b/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; } diff --git a/src/context/duration.jsx b/src/context/duration.jsx new file mode 100644 index 0000000..1e3396c --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/models/game-duration/index.js b/src/models/game-duration/index.js new file mode 100644 index 0000000..bf5558b --- /dev/null +++ b/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` + } + +} \ No newline at end of file diff --git a/src/views/players-setup/index.jsx b/src/views/players-setup/index.jsx index ed8365f..2b194b4 100644 --- a/src/views/players-setup/index.jsx +++ b/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 && } - + ) diff --git a/src/views/scoreboard/index.jsx b/src/views/scoreboard/index.jsx index f9f3868..19a32f8 100644 --- a/src/views/scoreboard/index.jsx +++ b/src/views/scoreboard/index.jsx @@ -1,13 +1,16 @@ 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() @@ -16,14 +19,19 @@ function Scoreboard() { setModal(!modal) }, [modal]) + const handleEndGame = useCallback(()=>{ + matchTimer.setEndTime() + setModalContent() + setModal(!modal) + },[matchTimer, modal]) + return (
- + {modal && {modalContent}} - ) } From 861776d4f0f535b2b345c12cd4766b35878b9146 Mon Sep 17 00:00:00 2001 From: MurilloCunha Date: Fri, 25 Jun 2021 18:49:37 -0300 Subject: [PATCH 3/6] end-game go to first screen --- src/components/modal/index.css | 4 +++- src/components/modal/index.jsx | 3 ++- src/views/scoreboard/index.jsx | 4 +++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/modal/index.css b/src/components/modal/index.css index 5fdb87a..d12f0d7 100644 --- a/src/components/modal/index.css +++ b/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; diff --git a/src/components/modal/index.jsx b/src/components/modal/index.jsx index 9e7aa08..6449c22 100644 --- a/src/components/modal/index.jsx +++ b/src/components/modal/index.jsx @@ -1,11 +1,12 @@ import React from 'react' +import { Link } from 'react-router-dom' function Modal(props) { return (
- +
{props.children}
diff --git a/src/views/scoreboard/index.jsx b/src/views/scoreboard/index.jsx index 19a32f8..cfcfc2f 100644 --- a/src/views/scoreboard/index.jsx +++ b/src/views/scoreboard/index.jsx @@ -13,6 +13,7 @@ function Scoreboard() { const matchTimer = useContext(MatchDuration) const [modal, setModal] = useState('') const [modalContent, setModalContent] = useState() + const [address, setAddress] = useState() const handleModal = useCallback((content) => { setModalContent(content) @@ -21,6 +22,7 @@ function Scoreboard() { const handleEndGame = useCallback(()=>{ matchTimer.setEndTime() + setAddress('/') setModalContent() setModal(!modal) },[matchTimer, modal]) @@ -30,7 +32,7 @@ function Scoreboard() {
- {modal && {modalContent}} + {modal && {modalContent}} ) } From 07be1bd433d43ae9c1769f638cd7b5c585717e13 Mon Sep 17 00:00:00 2001 From: MurilloCunha Date: Fri, 25 Jun 2021 18:55:49 -0300 Subject: [PATCH 4/6] clear playersList at game end --- src/models/playersList/index.js | 14 ++------------ src/views/scoreboard/index.jsx | 3 ++- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/src/models/playersList/index.js b/src/models/playersList/index.js index 5e5b433..298f191 100644 --- a/src/models/playersList/index.js +++ b/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) - } } \ No newline at end of file diff --git a/src/views/scoreboard/index.jsx b/src/views/scoreboard/index.jsx index cfcfc2f..6db031a 100644 --- a/src/views/scoreboard/index.jsx +++ b/src/views/scoreboard/index.jsx @@ -18,7 +18,8 @@ function Scoreboard() { const handleModal = useCallback((content) => { setModalContent(content) setModal(!modal) - }, [modal]) + address === '/' && matchPlayers.restore() + }, [address, matchPlayers, modal]) const handleEndGame = useCallback(()=>{ matchTimer.setEndTime() From d8d19bafa848d261adb6d190085ab78c812a0623 Mon Sep 17 00:00:00 2001 From: MurilloCunha Date: Mon, 28 Jun 2021 13:38:39 -0300 Subject: [PATCH 5/6] center modal content --- src/components/modal/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/modal/index.css b/src/components/modal/index.css index d12f0d7..6e9dba5 100644 --- a/src/components/modal/index.css +++ b/src/components/modal/index.css @@ -38,4 +38,5 @@ padding: 0 2rem; overflow:scroll; height: 50vh; + width:100%; } \ No newline at end of file From ac8854012198e00c80d3c7aa7229f11a2a0a16fb Mon Sep 17 00:00:00 2001 From: MurilloCunha Date: Mon, 28 Jun 2021 13:42:44 -0300 Subject: [PATCH 6/6] score-input default value 0 --- src/components/score-input/index.jsx | 2 +- src/components/table/index.jsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/score-input/index.jsx b/src/components/score-input/index.jsx index 90dc156..69b22c5 100644 --- a/src/components/score-input/index.jsx +++ b/src/components/score-input/index.jsx @@ -3,7 +3,7 @@ import React from 'react' function ScoreInput(props) { return ( - + ) } diff --git a/src/components/table/index.jsx b/src/components/table/index.jsx index 5dcdd0d..722ee50 100644 --- a/src/components/table/index.jsx +++ b/src/components/table/index.jsx @@ -37,8 +37,9 @@ function Table({ playersList }) { {playersList.map(player => )}
+ {console.log(player.score[scoreRow])} { - player.score[scoreRow] ? player.score[scoreRow] : handleScoreChange(event,player)} /> + player.score[scoreRow] >=0 ? player.score[scoreRow] : handleScoreChange(event,player)} /> }