From d2809940a687b8c2bd03caafaaae3f356d9ba861 Mon Sep 17 00:00:00 2001
From: Paul Clarke <paulioclarke@icloud.com>
Date: Thu, 3 Oct 2024 17:21:07 +1000
Subject: [PATCH] added mobile friendly viewing and bug bash

---
 src/App.css                 | 83 +++++++++++++++++++++++++++++++++++++
 src/milestones/MSScreen.css |  8 ++--
 src/visualiser/App.tsx      | 61 ++++++++++++++++++++++++++-
 3 files changed, 146 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index fee9ae3..12c472b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -200,4 +200,87 @@ body {
   justify-content: center;
   align-items: center;
   margin-bottom: 1em;
+}
+
+/** MOBILE CSS STUFF **/
+
+.mobile-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  height: 100vh;
+  width: 100vw;
+  gap: 2em;
+}
+
+.mobile-container>.donation-container {
+  width: 100%;
+  border-radius: 0;
+}
+
+.mobile-milestone-container {
+  width: 100%;
+  height: 20vh;
+  font-size: 15px;
+}
+
+@keyframes avatar-movement-mobile {
+  0% { height: 35% }
+  50% { height: 38% }
+  100% { height: 35% }
+}
+
+.mobile-container>.avatar-container {
+  position: absolute;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: space-between;
+  width: 100%;
+  animation-name: avatar-movement-mobile; 
+  animation-duration: 4s;
+  animation-duration: alternate;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite; 
+}
+
+.mobile-container>.title {
+  margin-bottom: 4px solid black;
+  background-color: rgb(232, 232, 232);
+  width: 100%;
+}
+
+.mobile-milestone-container>.milestone {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-left: 3em;
+  padding-right: 3em;
+  text-align: justify;
+}
+
+.mobile-milestone-container>.milestone>:nth-child(2) {
+  font-size: 25px;
+}
+
+.mobile-milestone-container>div {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mobile-container>.mobile-milestone-container>.progress {
+  gap: 2%;
+}
+
+.mobile-container>.mobile-milestone-container>.progress>span:first-child {
+  font-size: 50px;
+}
+
+.mobile-container>.mobile-milestone-container>.progress>span:last-child {
+  /* font-size: 40px; */
+  margin-top: 30px;
 }
\ No newline at end of file
diff --git a/src/milestones/MSScreen.css b/src/milestones/MSScreen.css
index c6ace3b..b06dbb7 100644
--- a/src/milestones/MSScreen.css
+++ b/src/milestones/MSScreen.css
@@ -36,7 +36,10 @@
     border: 10px solid black;
     width: 80%;
     text-align: center;
-    overflow: hidden;
+    /* overflow: auto; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .ms-tab-root {
@@ -90,7 +93,4 @@
     width: 100%;
     margin-left: auto;
     margin-right: auto;
-}
-
-.tab-container {
 }
\ No newline at end of file
diff --git a/src/visualiser/App.tsx b/src/visualiser/App.tsx
index 959207d..67c919b 100644
--- a/src/visualiser/App.tsx
+++ b/src/visualiser/App.tsx
@@ -11,6 +11,8 @@ import MilestoneScreen from '../milestones/MilestoneScreen';
 import WheelScreen from '../wheel/Wheel';
 import Competition from '../competition/Competition';
 import RaffleScreen from '../raffle/Raffle';
+import { useMediaQuery } from 'react-responsive';
+import CombinedAvatars from './Avatar';
 
 function App() {
   // internal state
@@ -18,7 +20,12 @@ function App() {
   const [milestones, setMilestones] = useState<Milestone[]>(DefaultMilestones);
   const [type, setType] = useState<ScreenTypes>("visual");
 
-  const [currentProgress, setCurrentProgress] = useState<number>(0);
+  const [currentProgress, _setCurrentProgress] = useState<number>(0);
+
+  const setCurrentProgress = (num: number) => {
+    const newNum = Number(num.toPrecision(2));
+    _setCurrentProgress(newNum);
+  }
 
   const activeMilestone = useMemo(() => { 
     const nextMilestones = milestones.filter(milestone => milestone.value > donations);
@@ -130,9 +137,21 @@ function App() {
     }
   }, [])
 
+  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
+  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' });
+
+  const useMobileStyle = isTabletOrMobile && isPortrait;
+
   // rendering
   return (
-    type === "visual" ? <>
+    type === 'visual' && useMobileStyle ? 
+      <MobileView 
+        donations={donations}
+        activeTeacup={activeTeacup}
+        activeMilestone={activeMilestone}
+        currentProgress={currentProgress}
+      />
+    : type === "visual" ? <>
       <div className="title">
         <span>THE ROYAL TEA FUNDRAISER</span>
       </div>
@@ -190,4 +209,42 @@ function App() {
   )
 }
 
+type MobileViewProps = {
+  activeTeacup: TeacupImageType | undefined;
+  donations: number;
+  activeMilestone: Milestone | undefined;
+  currentProgress: number;
+}
+
+const MobileView = (props: MobileViewProps) => {
+  const defaultStyling = {
+    backgroundColor: 'rgb(90, 90, 90)',
+    color: 'white'
+  }
+
+  const styleExists = !(props.activeMilestone && props.activeMilestone.reward);
+
+  return (
+    <div className="mobile-container">
+      <div className="title">
+        <span>THE ROYAL TEA FUNDRAISER</span>
+      </div>
+      <CombinedAvatars/>
+      <div className="donation-container" style={props.activeTeacup ? props.activeTeacup.donationStyle : defaultStyling}>
+        <span>${props.donations}</span>
+        <span>raised</span>
+      </div>
+      {props.activeMilestone && <div className="mobile-milestone-container" style={!styleExists ? {border: '4px dashed ' + props.activeTeacup?.donationStyle.backgroundColor} : {}}>
+        <div className="milestone">
+          <strong>Next Milestone</strong>
+          <span>{props.activeMilestone.reward}</span>
+        </div>
+        {props.activeTeacup && <div className="progress" style={!styleExists ? props.activeTeacup.donationStyle : {}}>
+          <span>Goal: {props.activeMilestone.value}</span>
+        </div>}
+      </div>}
+    </div>
+  )
+}
+
 export default App