From e30093cd57b6827b70f3e6a68dec57e9330e8ee6 Mon Sep 17 00:00:00 2001
From: James <james.sturgis@univ-amu.fr>
Date: Tue, 18 Jan 2022 23:24:22 +0100
Subject: [PATCH] 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
                   </Dialog.Title>
-                  <div className="mt-2">
-                    <p>trys = {String(trys(stats))}</p>
-                    <p>success rate = {String(successRate(stats))}%</p>
-                    <p>Best streak is {String(bestStreak(stats))} currently {String(currentStreak(stats))}</p>
+                  <div className="flex justify-center m-1">          
+                    <div className="items-center justify-center m-1 w-1/4 bg-blue-300">
+                      <div className="text-3xl font-bold">{String(trys(stats))} </div>
+                      <div className="text-sm">Total trys</div>
+                    </div>
+                    <div className="items-center justify-center m-1 w-1/4 bg-blue-300">
+                      <div className="text-3xl font-bold">{String(successRate(stats))}% </div>
+                      <div className="text-sm">Success rate</div>
+                    </div>
+                    <div className="items-center justify-center m-1 w-1/4 bg-blue-300">
+                      <div className="text-3xl font-bold">{String(currentStreak(stats))}</div>
+                      <div className="text-sm">Current streak</div>
+                    </div>
+                    <div className="items-center justify-center m-1 w-1/4 bg-blue-300">
+                      <div className="text-3xl font-bold">{String(bestStreak(stats))}</div>
+                      <div className="text-sm">Best streak</div>
+                    </div>
                   </div>
                   <Dialog.Title
                     as="h3"
                     className="text-lg leading-6 font-medium text-gray-900"
                   >
-                  Distribution
+                  Guess Distribution
                   </Dialog.Title>
-                    <p>1 {String(stats[0])}</p>
-                    <p>2 {String(stats[1])}</p>
-                    <p>3 {String(stats[2])}</p>
-                    <p>4 {String(stats[3])}</p>
-                    <p>5 {String(stats[4])}</p>
-                    <p>6 {String(stats[5])}</p>
+                  <div className="columns-1 justify-left m-2 bg-blue-300 text-sm">
+                    <div className="flex justify-left m-1 bg-blue-200">
+                      <div>1 {String(stats[0])}</div>
+                    </div>
+                    <div className="flex justify-left m-1 bg-blue-200">
+                      <div>2 {String(stats[1])}</div>
+                    </div>
+                    <div className="flex justify-left m-1 bg-blue-200">
+                      <div>3 {String(stats[2])}</div>
+                    </div>
+                    <div className="flex justify-left m-1 bg-blue-200">
+                      <div>4 {String(stats[3])}</div>
+                    </div>
+                    <div className="flex justify-left m-1 bg-blue-200">
+                      <div>5 {String(stats[4])}</div>
+                    </div>
+                    <div className="flex justify-left m-1 bg-blue-200">
+                      <div>6 {String(stats[5])}</div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>