added streaks

uxdxdev · Dec 2, 2023 · bf90d2c · bf90d2c
1 parent a9d87ce
commit bf90d2c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -8,6 +8,8 @@ import { Boxes, SheetData, StoredData, Problem } from "../types";
 const defaultStoredData: StoredData = {
   prevSessionDate: new Date(),
   currentDay: 1,
+  currentStreak: 1,
+  streakHighScore: 1,
   boxes: {
     "1": [],
     "3": [],
@@ -18,6 +20,10 @@ const defaultStoredData: StoredData = {
   done: false,
 };
 
+function datediff(first: Date, second: Date) {
+  return Math.round((second.valueOf() - first.valueOf()) / (1000 * 60 * 60 * 24));
+}
+
 function App() {
   const [sheetData, setSheetData] = useState<SheetData>([]);
   const [isFetchingSheetData, setIsFetchingSheetData] = useState(true);
@@ -63,6 +69,11 @@ function App() {
           // new day of practice
           const dayNum = storedLSData.currentDay + 1 <= 28 ? storedLSData.currentDay + 1 : 1;
           storedLSData.currentDay = dayNum;
+          storedLSData.currentStreak = datediff(prevSession, today) < 2 ? storedLSData.currentStreak + 1 : 1;
+          storedLSData.streakHighScore =
+            storedLSData.currentStreak > storedLSData.streakHighScore
+              ? storedLSData.currentStreak
+              : storedLSData.streakHighScore;
           storedLSData.prevSessionDate = today;
           storedLSData.done = false;
           Object.entries(storedLSData.boxes).forEach(([key, value]) => {
@@ -91,7 +102,7 @@ function App() {
           const storedLSData = LocalStorage.getData();
           if (storedLSData) {
             const dayBefore = new Date(storedLSData.prevSessionDate);
-            dayBefore.setDate(dayBefore.getDate() + -1);
+            dayBefore.setDate(dayBefore.getDate() - 1);
 
             // local storage
             storedLSData.prevSessionDate = dayBefore;

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -19,14 +19,17 @@ function Home({ day }: { day: number }) {
   const [isLoading, setIsLoading] = useState(true);
   const [totalNumberOfProblems, setTotalNumberOfProblems] = useState(0);
   const [boxesWithProblems, setBoxesWithProblems] = useState<number[]>([]);
+  const [currentStreak, setCurrentStreak] = useState(1);
+  const [streakHighScore, setStreakHighScore] = useState(1);
 
   // init
   useEffect(() => {
     const storedData = LocalStorage.getData();
     if (storedData) {
       setBoxes(storedData.boxes);
-
       setDone(storedData.done);
+      setCurrentStreak(storedData.currentStreak);
+      setStreakHighScore(storedData.streakHighScore);
     }
   }, []);
 
@@ -105,13 +108,24 @@ function Home({ day }: { day: number }) {
   if (isLoading) return;
 
   return (
-    <div className="dark:bg-slate-800 dark:text-white h-full flex flex-col items-center justify-center mb-auto">
-      <div className="text-2xl mb-4">Day {day} of practice</div>
+    <div className="bg-slate-800 text-white h-full flex flex-col items-center justify-center mb-auto">
+      <div className="text-2xl mb-1">Day {day} of practice</div>
+      <div className="text- mb-6">
+        <span className="animate-pulse text-2xl">🔥</span> {currentStreak} day streak{" "}
+        <span className="animate-pulse text-2xl">🔥</span>
+      </div>
       {IntervalIndicatorMemo}
 
       <div className="my-16">
         {done ? (
-          <div className="text-2xl">All problems solved for today!</div>
+          <div className="flex items-center">
+            <div className="animate-pulse text-6xl">🔥</div>
+            <div className="flex flex-col">
+              <div className="text-2xl text-center">All done for today</div>
+              <div className="text-center">Come back tomorrow to continue your streak!</div>
+            </div>
+            <div className="animate-pulse text-6xl">🔥</div>
+          </div>
         ) : (
           <a
             className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600 text-2xl"
@@ -164,7 +178,7 @@ function Home({ day }: { day: number }) {
         {currentProblemSet?.length || 0}/{totalNumberOfProblems}
       </div>
 
-      <div className="text-xs">
+      <div className="text-xs mb-4">
         Found an issue? report it on{" "}
         <a
           className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
@@ -174,6 +188,7 @@ function Home({ day }: { day: number }) {
           GitHub
         </a>
       </div>
+      <div className="text-s">🏆 Highscore {streakHighScore} day streak 🏆</div>
     </div>
   );
 }

diff --git a/src/types.tsx b/src/types.tsx
@@ -22,6 +22,8 @@ export interface Boxes {
 export interface StoredData {
   prevSessionDate: Date;
   currentDay: number;
+  currentStreak: number;
+  streakHighScore: number;
   boxes: Boxes;
   done: boolean;
 }