From 13e0663c0c22a6840e5506406b43bd02e2fc3985 Mon Sep 17 00:00:00 2001 From: tcuc Date: Mon, 17 Jan 2022 19:43:05 +0100 Subject: [PATCH 01/13] add dockerfile, and build instuctions --- Dockerfile | 7 +++++++ README.md | 8 ++++++++ 2 files changed, 15 insertions(+) create mode 100644 Dockerfile diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..4a2e42a --- /dev/null +++ b/Dockerfile @@ -0,0 +1,7 @@ +FROM node + +COPY . . +RUN npm install + +EXPOSE 3000 +CMD npm run start diff --git a/README.md b/README.md index 1225d9b..3fd5c8f 100644 --- a/README.md +++ b/README.md @@ -28,5 +28,13 @@ $ npm install $ npm run start ``` +_To build/run docker container:_ +```bash +$ cd wordle +$ docker build -t notwordle . +$ docker run -d -p 3000:3000 notwordle +``` +open http://localhost:3000 in browser. + ### I'm looking for a junior developer role Please feel free to contact me on [linkedin](https://www.linkedin.com/in/hannahpark1000/) and learn more about me [here](https://www.hannahmariepark.com/) From 8fc56f011bf5d3377d21eaf74d8a51f6a934bbf2 Mon Sep 17 00:00:00 2001 From: James Date: Mon, 17 Jan 2022 23:41:46 +0100 Subject: [PATCH 02/13] Added x button to modal dialogs Issue #20 --- src/components/modals/AboutModal.tsx | 7 +++++++ src/components/modals/InfoModal.tsx | 7 +++++++ src/components/modals/WinModal.tsx | 9 ++++++++- 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/components/modals/AboutModal.tsx b/src/components/modals/AboutModal.tsx index 2ed1dbc..025c09e 100644 --- a/src/components/modals/AboutModal.tsx +++ b/src/components/modals/AboutModal.tsx @@ -1,5 +1,6 @@ import { Fragment } from 'react' import { Dialog, Transition } from '@headlessui/react' +import { XCircleIcon } from '@heroicons/react/outline' type Props = { isOpen: boolean @@ -44,6 +45,12 @@ export const AboutModal = ({ isOpen, handleClose }: Props) => { leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" >
+
+ handleClose()} + /> +
{ leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" >
+
+ handleClose()} + /> +
- + {/* This element is to trick the browser into centering the modal contents. */}
+
+ handleClose()} + /> +
Date: Tue, 18 Jan 2022 11:45:25 +0100 Subject: [PATCH 03/13] Adding a stats dialog and persistent data storage and recovery --- src/App.tsx | 18 +++++++ src/components/modals/StatsModal.tsx | 74 ++++++++++++++++++++++++++++ src/lib/localStorage.ts | 16 ++++++ 3 files changed, 108 insertions(+) create mode 100644 src/components/modals/StatsModal.tsx diff --git a/src/App.tsx b/src/App.tsx index 256878c..7518896 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,10 +6,13 @@ import { Keyboard } from './components/keyboard/Keyboard' import { AboutModal } from './components/modals/AboutModal' import { InfoModal } from './components/modals/InfoModal' import { WinModal } from './components/modals/WinModal' +import { StatsModal } from './components/modals/StatsModal' import { isWordInWordList, isWinningWord, solution } from './lib/words' import { loadGameStateFromLocalStorage, saveGameStateToLocalStorage, + loadStatsFromLocalStorage, + saveStatsToLocalStorage } from './lib/localStorage' function App() { @@ -36,6 +39,13 @@ function App() { saveGameStateToLocalStorage({ guesses, solution }) }, [guesses]) + const maxStreak = 7 + const currentStreak = 8 + const [stats, setStats ] = useState(() => { + const loaded = loadStatsFromLocalStorage() + return loaded + }) + useEffect(() => { if (isGameWon) { setIsWinModalOpen(true) @@ -67,10 +77,18 @@ function App() { setCurrentGuess('') if (winningWord) { + stats[currentStreak]++ + stats[guesses.length + 1]++ + if( stats[currentStreak] > stats[maxStreak] ){ + stats[maxStreak] = stats[currentStreak] } + saveStatsToLocalStorage({ stats }) return setIsGameWon(true) } if (guesses.length === 5) { + stats[currentStreak] = 0 + stats[guesses.length + 1]++ + saveStatsToLocalStorage({ stats }) setIsGameLost(true) return setTimeout(() => { setIsGameLost(false) diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx new file mode 100644 index 0000000..b091e95 --- /dev/null +++ b/src/components/modals/StatsModal.tsx @@ -0,0 +1,74 @@ +import { Fragment } from 'react' +import { Dialog, Transition } from '@headlessui/react' +import { XCircleIcon } from '@heroicons/react/outline' + +type Props = { + isOpen: boolean + handleClose: () => void +} + +export const StatsModal = ({ isOpen, handleClose }: Props) => { + return ( + + +
+ + + + + {/* This element is to trick the browser into centering the modal contents. */} + + +
+
+ handleClose()} + /> +
+
+
+ + Statistics + +
+
+
+
+
+ +
+ + + ) +} diff --git a/src/lib/localStorage.ts b/src/lib/localStorage.ts index 4f5c825..f72ca07 100644 --- a/src/lib/localStorage.ts +++ b/src/lib/localStorage.ts @@ -14,3 +14,19 @@ export const loadGameStateFromLocalStorage = () => { return state ? (JSON.parse(state) as StoredGameState) : null } + +const gameStatKey = 'gameStats' + +type StoredGameStats = { + stats: number[] +} + +export const saveStatsToLocalStorage = ( gameStats: StoredGameStats) => { + localStorage.setItem(gameStatKey, JSON.stringify(gameStats)) +} + +export const loadStatsFromLocalStorage = () => { + const stats = localStorage.getItem(gameStatKey) + + return /* stats ? (JSON.parse(stats) as StoredGameStats) :*/ [0,0,0,0,0,0,0,0,0] +} From a9318f792c9a8175e4770dcb9c4f89c5c2aad08f Mon Sep 17 00:00:00 2001 From: James Date: Tue, 18 Jan 2022 15:34:52 +0100 Subject: [PATCH 04/13] Stats object need dialog and save/restore --- src/App.tsx | 32 +++++++-------- src/components/modals/StatsModal.tsx | 4 ++ src/lib/localStorage.ts | 8 ++-- src/lib/stats.ts | 58 ++++++++++++++++++++++++++++ 4 files changed, 80 insertions(+), 22 deletions(-) create mode 100644 src/lib/stats.ts diff --git a/src/App.tsx b/src/App.tsx index 7518896..6f4d240 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,5 @@ import { InformationCircleIcon } from '@heroicons/react/outline' +import { ChartBarIcon } from '@heroicons/react/outline' import { useState, useEffect } from 'react' import { Alert } from './components/alerts/Alert' import { Grid } from './components/grid/Grid' @@ -8,11 +9,10 @@ import { InfoModal } from './components/modals/InfoModal' import { WinModal } from './components/modals/WinModal' import { StatsModal } from './components/modals/StatsModal' import { isWordInWordList, isWinningWord, solution } from './lib/words' +import { addEvent } from './lib/stats' import { loadGameStateFromLocalStorage, saveGameStateToLocalStorage, - loadStatsFromLocalStorage, - saveStatsToLocalStorage } from './lib/localStorage' function App() { @@ -21,6 +21,7 @@ function App() { const [isWinModalOpen, setIsWinModalOpen] = useState(false) const [isInfoModalOpen, setIsInfoModalOpen] = useState(false) const [isAboutModalOpen, setIsAboutModalOpen] = useState(false) + const [isStatsModalOpen, setIsStatsModalOpen] = useState(false) const [isWordNotFoundAlertOpen, setIsWordNotFoundAlertOpen] = useState(false) const [isGameLost, setIsGameLost] = useState(false) const [shareComplete, setShareComplete] = useState(false) @@ -38,14 +39,7 @@ function App() { useEffect(() => { saveGameStateToLocalStorage({ guesses, solution }) }, [guesses]) - - const maxStreak = 7 - const currentStreak = 8 - const [stats, setStats ] = useState(() => { - const loaded = loadStatsFromLocalStorage() - return loaded - }) - + useEffect(() => { if (isGameWon) { setIsWinModalOpen(true) @@ -77,18 +71,12 @@ function App() { setCurrentGuess('') if (winningWord) { - stats[currentStreak]++ - stats[guesses.length + 1]++ - if( stats[currentStreak] > stats[maxStreak] ){ - stats[maxStreak] = stats[currentStreak] } - saveStatsToLocalStorage({ stats }) + addEvent(guesses.length) return setIsGameWon(true) } if (guesses.length === 5) { - stats[currentStreak] = 0 - stats[guesses.length + 1]++ - saveStatsToLocalStorage({ stats }) + addEvent(guesses.length + 1) setIsGameLost(true) return setTimeout(() => { setIsGameLost(false) @@ -115,6 +103,10 @@ function App() { className="h-6 w-6 cursor-pointer" onClick={() => setIsInfoModalOpen(true)} /> + setIsStatsModalOpen(true)} + />
setIsInfoModalOpen(false)} /> + setIsStatsModalOpen(false)} + /> setIsAboutModalOpen(false)} diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx index b091e95..d2f05c9 100644 --- a/src/components/modals/StatsModal.tsx +++ b/src/components/modals/StatsModal.tsx @@ -1,6 +1,7 @@ import { Fragment } from 'react' import { Dialog, Transition } from '@headlessui/react' import { XCircleIcon } from '@heroicons/react/outline' +import { trysStat, successRateStat, bestStreakStat, currentStreakStat } from '../../lib/stats' type Props = { isOpen: boolean @@ -62,6 +63,9 @@ export const StatsModal = ({ isOpen, handleClose }: Props) => { Statistics
+

trys = {trysStat}

+

success rate = {successRateStat}

+

Best streak is {bestStreakStat} currently {currentStreakStat}

diff --git a/src/lib/localStorage.ts b/src/lib/localStorage.ts index f72ca07..215d470 100644 --- a/src/lib/localStorage.ts +++ b/src/lib/localStorage.ts @@ -11,14 +11,15 @@ export const saveGameStateToLocalStorage = (gameState: StoredGameState) => { export const loadGameStateFromLocalStorage = () => { const state = localStorage.getItem(gameStateKey) - return state ? (JSON.parse(state) as StoredGameState) : null } const gameStatKey = 'gameStats' type StoredGameStats = { - stats: number[] + data: number[] + bestStreak: number + currentStreak: number } export const saveStatsToLocalStorage = ( gameStats: StoredGameStats) => { @@ -27,6 +28,5 @@ export const saveStatsToLocalStorage = ( gameStats: StoredGameStats) => { export const loadStatsFromLocalStorage = () => { const stats = localStorage.getItem(gameStatKey) - - return /* stats ? (JSON.parse(stats) as StoredGameStats) :*/ [0,0,0,0,0,0,0,0,0] + return stats ? (JSON.parse(stats) as StoredGameStats) : null } diff --git a/src/lib/stats.ts b/src/lib/stats.ts new file mode 100644 index 0000000..9164d5f --- /dev/null +++ b/src/lib/stats.ts @@ -0,0 +1,58 @@ +/** +** An attempt at a statistics object and its interface +** +** James Sturgis 18/1/2022 +**/ + +import { + loadStatsFromLocalStorage, + saveStatsToLocalStorage +} from './localStorage' + +var bestStreak: number = 0 +var currentStreak: number = 0 +var data: number[] = [0,0,0,0,0,0,0] // Persistent data + +export const addEvent = (count: number) => { + // Count is number of incorrect guesses before end. + if(count < 0) { count = 0 } // Should not really need this + if( count > 5 ){ // A fail situation + currentStreak = 0 // End current streak + data[6] += 1 // Increase number of fails + } else { + data[count] += 1 // Increase counters + currentStreak += 1 + if( bestStreak < currentStreak ){ + bestStreak = currentStreak + } + } + saveStats() +} + +export const resetStats = () => { + currentStreak = 0 + bestStreak = 0 + data = [0,0,0,0,0,0,0] +} + +export const saveStats = () => { + saveStatsToLocalStorage({ data, bestStreak, currentStreak }) +} + +export const loadStats = () => { + const loaded = loadStatsFromLocalStorage() + resetStats() + if( loaded ){ + data = loaded.data + bestStreak = loaded.bestStreak + currentStreak = loaded.currentStreak + } +} + +const trys = data.reduce((a,b) => a+b , 0 ) + +export const trysStat = String(trys) +export const successRateStat = String(Math.round((100*(trys - data[6])/Math.max(trys,1))))+"%" +export const bestStreakStat = String(bestStreak) +export const currentStreakStat = String(currentStreak) + From d58fe922fc9782ebcea8b499d524d8c8ac228286 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 18 Jan 2022 15:36:03 +0100 Subject: [PATCH 05/13] Oops an error --- src/lib/stats.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/lib/stats.ts b/src/lib/stats.ts index 9164d5f..488411f 100644 --- a/src/lib/stats.ts +++ b/src/lib/stats.ts @@ -1,7 +1,5 @@ /** ** An attempt at a statistics object and its interface -** -** James Sturgis 18/1/2022 **/ import { From fc19abbdf46e9f8df86d2db3f4f14171f9874ad5 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 18 Jan 2022 18:45:02 +0100 Subject: [PATCH 06/13] Logic and maths working need interface --- src/App.tsx | 12 +++-- src/components/modals/StatsModal.tsx | 23 +++++++--- src/lib/localStorage.ts | 6 +-- src/lib/stats.ts | 67 ++++++++++++++++------------ 4 files changed, 69 insertions(+), 39 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 6f4d240..e7972bb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,7 @@ import { InfoModal } from './components/modals/InfoModal' import { WinModal } from './components/modals/WinModal' import { StatsModal } from './components/modals/StatsModal' import { isWordInWordList, isWinningWord, solution } from './lib/words' -import { addEvent } from './lib/stats' +import { addEvent, loadStats } from './lib/stats' import { loadGameStateFromLocalStorage, saveGameStateToLocalStorage, @@ -36,6 +36,11 @@ function App() { return loaded.guesses }) + const [stats, setStats] = useState(() => { + const loaded = loadStats() + return loaded + }) + useEffect(() => { saveGameStateToLocalStorage({ guesses, solution }) }, [guesses]) @@ -71,12 +76,12 @@ function App() { setCurrentGuess('') if (winningWord) { - addEvent(guesses.length) + setStats(addEvent(stats, guesses.length)) return setIsGameWon(true) } if (guesses.length === 5) { - addEvent(guesses.length + 1) + setStats(addEvent(stats, guesses.length + 1)) setIsGameLost(true) return setTimeout(() => { setIsGameLost(false) @@ -134,6 +139,7 @@ function App() { setIsStatsModalOpen(false)} + stats={stats} /> void + stats: number[] } -export const StatsModal = ({ isOpen, handleClose }: Props) => { +export const StatsModal = ({ isOpen, handleClose, stats }: Props) => { return ( { Statistics
-

trys = {trysStat}

-

success rate = {successRateStat}

-

Best streak is {bestStreakStat} currently {currentStreakStat}

+

trys = {String(trys(stats))}

+

success rate = {String(successRate(stats))}%

+

Best streak is {String(bestStreak(stats))} currently {String(currentStreak(stats))}

+ + Distribution + +

1 {String(stats[0])}

+

2 {String(stats[1])}

+

3 {String(stats[2])}

+

4 {String(stats[3])}

+

5 {String(stats[4])}

+

6 {String(stats[5])}

diff --git a/src/lib/localStorage.ts b/src/lib/localStorage.ts index 215d470..81fca8e 100644 --- a/src/lib/localStorage.ts +++ b/src/lib/localStorage.ts @@ -17,9 +17,9 @@ export const loadGameStateFromLocalStorage = () => { const gameStatKey = 'gameStats' type StoredGameStats = { - data: number[] - bestStreak: number - currentStreak: number + distribution: number[] + current: number + best: number } export const saveStatsToLocalStorage = ( gameStats: StoredGameStats) => { diff --git a/src/lib/stats.ts b/src/lib/stats.ts index 488411f..c0e08f6 100644 --- a/src/lib/stats.ts +++ b/src/lib/stats.ts @@ -7,50 +7,61 @@ import { saveStatsToLocalStorage } from './localStorage' -var bestStreak: number = 0 -var currentStreak: number = 0 -var data: number[] = [0,0,0,0,0,0,0] // Persistent data +// In stats array elements 0-5 are successes in 1-6 trys +// stats[6] is the number of failures +// stats[7] is the currentStreak +// stats[8] is the bestStreak -export const addEvent = (count: number) => { - // Count is number of incorrect guesses before end. - if(count < 0) { count = 0 } // Should not really need this - if( count > 5 ){ // A fail situation - currentStreak = 0 // End current streak - data[6] += 1 // Increase number of fails +export const failures = (stats: number[] ) => { return stats[6] } +export const currentStreak = (stats: number[] ) => { return stats[7] } +export const bestStreak = (stats: number[] ) => { return stats[8] } + +export const addEvent = (stats: number[], count: number) => { + // Count is number of incorrect guesses before end. + if(count < 0) { count = 0 } // Should not really need this + if( count > 5 ){ // A fail situation + stats[7] = 0 // End current streak + stats[6] += 1 // Increase number of fails } else { - data[count] += 1 // Increase counters - currentStreak += 1 - if( bestStreak < currentStreak ){ - bestStreak = currentStreak + stats[count] += 1 // Increase counters + stats[7] += 1 + if( bestStreak(stats) < currentStreak(stats) ){ + stats[8] = currentStreak(stats) } } - saveStats() + saveStats(stats) + return stats } export const resetStats = () => { - currentStreak = 0 - bestStreak = 0 - data = [0,0,0,0,0,0,0] + return [0,0,0,0,0,0,0,0,0] } -export const saveStats = () => { - saveStatsToLocalStorage({ data, bestStreak, currentStreak }) +export const saveStats = (stats: number[]) => { + const distribution = stats.slice(0,7) + const current = currentStreak(stats) + const best = bestStreak(stats) + saveStatsToLocalStorage({ distribution , current, best }) } export const loadStats = () => { const loaded = loadStatsFromLocalStorage() - resetStats() + var stats = resetStats() if( loaded ){ - data = loaded.data - bestStreak = loaded.bestStreak - currentStreak = loaded.currentStreak + stats = loaded.distribution + stats[7] = loaded.current + stats[8] = loaded.best } + return ( stats ) +} + +export const trys = (stats: number[] ) => { + return(stats.slice(0,7).reduce((a,b) => a+b , 0 )) +} + +export const successRate = (stats: number[] ) => { + return(Math.round((100*(trys(stats) - failures(stats)))/Math.max(trys(stats),1))) } -const trys = data.reduce((a,b) => a+b , 0 ) -export const trysStat = String(trys) -export const successRateStat = String(Math.round((100*(trys - data[6])/Math.max(trys,1))))+"%" -export const bestStreakStat = String(bestStreak) -export const currentStreakStat = String(currentStreak) From e30093cd57b6827b70f3e6a68dec57e9330e8ee6 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 18 Jan 2022 23:24:22 +0100 Subject: [PATCH 07/13] Part 1 of dialog OK need histogram --- src/components/modals/StatsModal.tsx | 53 ++++++++++++++++++++++------ 1 file changed, 42 insertions(+), 11 deletions(-) diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx index b0c2e50..6f66276 100644 --- a/src/components/modals/StatsModal.tsx +++ b/src/components/modals/StatsModal.tsx @@ -3,6 +3,10 @@ import { Dialog, Transition } from '@headlessui/react' import { XCircleIcon } from '@heroicons/react/outline' import { trys, successRate, currentStreak, bestStreak } from '../../lib/stats' +//const boxItem = ( label: string, value: string ) => { +// return () +// } + type Props = { isOpen: boolean handleClose: () => void @@ -63,23 +67,50 @@ export const StatsModal = ({ isOpen, handleClose, stats }: Props) => { > Statistics -
-

trys = {String(trys(stats))}

-

success rate = {String(successRate(stats))}%

-

Best streak is {String(bestStreak(stats))} currently {String(currentStreak(stats))}

+
+
+
{String(trys(stats))}
+
Total trys
+
+
+
{String(successRate(stats))}%
+
Success rate
+
+
+
{String(currentStreak(stats))}
+
Current streak
+
+
+
{String(bestStreak(stats))}
+
Best streak
+
- Distribution + Guess Distribution -

1 {String(stats[0])}

-

2 {String(stats[1])}

-

3 {String(stats[2])}

-

4 {String(stats[3])}

-

5 {String(stats[4])}

-

6 {String(stats[5])}

+
+
+
1 {String(stats[0])}
+
+
+
2 {String(stats[1])}
+
+
+
3 {String(stats[2])}
+
+
+
4 {String(stats[3])}
+
+
+
5 {String(stats[4])}
+
+
+
6 {String(stats[5])}
+
+
From cd1a4ccaf38e37222ca5beb05b97314d591afed4 Mon Sep 17 00:00:00 2001 From: Thor Date: Wed, 19 Jan 2022 05:57:42 +0100 Subject: [PATCH 08/13] assume dir context is in repo top level for Pullrequest #29 https://github.com/hannahcode/wordle/pull/29 --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 3fd5c8f..ce6c142 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,6 @@ $ npm run start _To build/run docker container:_ ```bash -$ cd wordle $ docker build -t notwordle . $ docker run -d -p 3000:3000 notwordle ``` From 32a3fc268e5f2d9e2451be880e420a11e30fd4cb Mon Sep 17 00:00:00 2001 From: James Date: Wed, 19 Jan 2022 11:31:08 +0100 Subject: [PATCH 09/13] With working stats modal --- src/components/histogram/histogram.tsx | 18 ++++++++++ src/components/histogram/progress.tsx | 23 ++++++++++++ src/components/modals/StatsModal.tsx | 50 +++++--------------------- src/components/statline/statline.tsx | 19 ++++++++++ 4 files changed, 68 insertions(+), 42 deletions(-) create mode 100644 src/components/histogram/histogram.tsx create mode 100644 src/components/histogram/progress.tsx create mode 100644 src/components/statline/statline.tsx diff --git a/src/components/histogram/histogram.tsx b/src/components/histogram/histogram.tsx new file mode 100644 index 0000000..09ca247 --- /dev/null +++ b/src/components/histogram/histogram.tsx @@ -0,0 +1,18 @@ +import {Progress} from './progress' + +type Props = { + data: number[] +} + +export const Histogram = ({ data }: Props) => { + const min = 10 + const max = Math.ceil(Math.max.apply(null, data)*1.2) + return( +
+ { data.map(( value, i ) => ( + + )) + } +
+ ) +} diff --git a/src/components/histogram/progress.tsx b/src/components/histogram/progress.tsx new file mode 100644 index 0000000..25b90cb --- /dev/null +++ b/src/components/histogram/progress.tsx @@ -0,0 +1,23 @@ + +type Props = { + index: number, + size: number, + label: string +} + +export const Progress = ( {index, size, label}: Props ) => { + return( +
+
{index+1}
+
+
{label} +
+
+
+ ) +} + + diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx index 6f66276..03edce2 100644 --- a/src/components/modals/StatsModal.tsx +++ b/src/components/modals/StatsModal.tsx @@ -2,10 +2,8 @@ import { Fragment } from 'react' import { Dialog, Transition } from '@headlessui/react' import { XCircleIcon } from '@heroicons/react/outline' import { trys, successRate, currentStreak, bestStreak } from '../../lib/stats' - -//const boxItem = ( label: string, value: string ) => { -// return () -// } +import { Histogram } from '../histogram/histogram' +import { StatLine } from '../statline/statline' type Props = { isOpen: boolean @@ -14,6 +12,10 @@ type Props = { } export const StatsModal = ({ isOpen, handleClose, stats }: Props) => { + const labels = ["Total trys", "Success rate", + "Current streak", "Best streak"] + const values = [String(trys(stats)), String(successRate(stats))+'%', + String(currentStreak(stats)), String(bestStreak(stats))] return ( { > Statistics -
-
-
{String(trys(stats))}
-
Total trys
-
-
-
{String(successRate(stats))}%
-
Success rate
-
-
-
{String(currentStreak(stats))}
-
Current streak
-
-
-
{String(bestStreak(stats))}
-
Best streak
-
-
+ Guess Distribution -
-
-
1 {String(stats[0])}
-
-
-
2 {String(stats[1])}
-
-
-
3 {String(stats[2])}
-
-
-
4 {String(stats[3])}
-
-
-
5 {String(stats[4])}
-
-
-
6 {String(stats[5])}
-
-
+
diff --git a/src/components/statline/statline.tsx b/src/components/statline/statline.tsx new file mode 100644 index 0000000..b4a1777 --- /dev/null +++ b/src/components/statline/statline.tsx @@ -0,0 +1,19 @@ + + +type Props = { + labels: string[] + values: string[] +} + +export const StatLine = ({labels, values}: Props) => { + return ( +
+ {values.map((value,i ) => ( +
+
{value}
+
{labels[i]}
+
+ ))} +
+ ) +} From 397b232ba1d37c7a8157107eda7219b40c15967a Mon Sep 17 00:00:00 2001 From: James Sturgis Date: Thu, 20 Jan 2022 17:23:51 +0100 Subject: [PATCH 10/13] Update src/components/histogram/histogram.tsx Co-authored-by: Hannah Park <70654324+hannahcode@users.noreply.github.com> --- src/components/histogram/histogram.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/histogram/histogram.tsx b/src/components/histogram/histogram.tsx index 09ca247..4e93383 100644 --- a/src/components/histogram/histogram.tsx +++ b/src/components/histogram/histogram.tsx @@ -8,7 +8,7 @@ export const Histogram = ({ data }: Props) => { const min = 10 const max = Math.ceil(Math.max.apply(null, data)*1.2) return( -
+
{ data.map(( value, i ) => ( )) From ce1404fc268e6f4b8c9ddfe7c0b96a3cdf2c93e4 Mon Sep 17 00:00:00 2001 From: James Sturgis Date: Thu, 20 Jan 2022 17:24:00 +0100 Subject: [PATCH 11/13] Update src/components/histogram/progress.tsx Co-authored-by: Hannah Park <70654324+hannahcode@users.noreply.github.com> --- src/components/histogram/progress.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/histogram/progress.tsx b/src/components/histogram/progress.tsx index 25b90cb..53e3e3b 100644 --- a/src/components/histogram/progress.tsx +++ b/src/components/histogram/progress.tsx @@ -7,7 +7,7 @@ type Props = { export const Progress = ( {index, size, label}: Props ) => { return( -
+
{index+1}
Date: Thu, 20 Jan 2022 20:17:28 +0100 Subject: [PATCH 12/13] Add unique keys to avoid warning --- src/components/histogram/histogram.tsx | 5 +++-- src/components/statline/statline.tsx | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/histogram/histogram.tsx b/src/components/histogram/histogram.tsx index 4e93383..edab521 100644 --- a/src/components/histogram/histogram.tsx +++ b/src/components/histogram/histogram.tsx @@ -1,4 +1,4 @@ -import {Progress} from './progress' + import {Progress} from './progress' type Props = { data: number[] @@ -10,7 +10,8 @@ export const Histogram = ({ data }: Props) => { return(
{ data.map(( value, i ) => ( - + )) }
diff --git a/src/components/statline/statline.tsx b/src/components/statline/statline.tsx index b4a1777..a3b3240 100644 --- a/src/components/statline/statline.tsx +++ b/src/components/statline/statline.tsx @@ -8,11 +8,11 @@ type Props = { export const StatLine = ({labels, values}: Props) => { return (
- {values.map((value,i ) => ( -
+ {values.map((value,i ) => ( +
{value}
{labels[i]}
-
+
))}
) From aa51a486e4e5d6d2861fcaa216e6c79eee97e986 Mon Sep 17 00:00:00 2001 From: Hannah Park <70654324+hannahcode@users.noreply.github.com> Date: Thu, 20 Jan 2022 19:46:36 -0500 Subject: [PATCH 13/13] Update src/components/statline/statline.tsx --- src/components/statline/statline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/statline/statline.tsx b/src/components/statline/statline.tsx index a3b3240..5e1d07d 100644 --- a/src/components/statline/statline.tsx +++ b/src/components/statline/statline.tsx @@ -9,7 +9,7 @@ export const StatLine = ({labels, values}: Props) => { return (
{values.map((value,i ) => ( -
+
{value}
{labels[i]}