From 32a3fc268e5f2d9e2451be880e420a11e30fd4cb Mon Sep 17 00:00:00 2001 From: James Date: Wed, 19 Jan 2022 11:31:08 +0100 Subject: [PATCH] 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]}
+
+ ))} +
+ ) +}