From d78756f367e6da3046b6d4de4c847144a4c79495 Mon Sep 17 00:00:00 2001
From: Backwards <backwardsusertwitch@gmail.com>
Date: Thu, 16 Jan 2025 00:55:38 +0000
Subject: [PATCH] Moved Tracker to its own component and Fixed its coloring in
 light mode

---
 src/lib/components/Common/Tracker.svelte |  81 +++++++++++++
 src/lib/stores/currentSection.js         |   6 +
 src/routes/+page.svelte                  | 139 +++++++++++------------
 src/routes/about/+page.svelte            |  47 +++-----
 4 files changed, 166 insertions(+), 107 deletions(-)
 create mode 100644 src/lib/components/Common/Tracker.svelte
 create mode 100644 src/lib/stores/currentSection.js

diff --git a/src/lib/components/Common/Tracker.svelte b/src/lib/components/Common/Tracker.svelte
new file mode 100644
index 0000000..966fac3
--- /dev/null
+++ b/src/lib/components/Common/Tracker.svelte
@@ -0,0 +1,81 @@
+<script>
+    import { sectionStore } from "$lib/stores/currentSection";
+    import { onMount } from "svelte";
+    import { fly, slide } from "svelte/transition";
+
+    export let page,
+        slides,
+        includeFirst = true;
+
+    console.log(page, slides, includeFirst);
+
+    let newSlides = includeFirst ? slides : slides.slice(1);
+
+    let pageSection = sectionStore[page];
+
+    let currentSection = $pageSection;
+
+    onMount(() => {
+        pageSection.subscribe((cs) => {
+            console.log(cs);
+            currentSection = cs;
+        });
+    });
+
+    // let currentSection = 0
+</script>
+
+<h1 class="h1">{currentSection}</h1>
+{#if includeFirst ? currentSection >= 0 : currentSection > 0}
+    <div
+        in:fly={{ x: 50, duration: 300 }}
+        out:fly={{ x: 50, duration: 300 }}
+        class="tracker"
+    >
+        {#each slides as _, i}
+            <div
+                class="tracker-dot {(includeFirst ? i : i + 1) ===
+                currentSection
+                    ? 'active'
+                    : ''}"
+            ></div>
+        {/each}
+    </div>
+{/if}
+
+<style>
+    /* Tracker Styles */
+    .tracker {
+        position: fixed;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .tracker-dot {
+        width: 10px;
+        height: 10px;
+        @apply bg-surface-600;
+        border-radius: 50%;
+        transition: background-color 0.3s ease;
+    }
+
+    .tracker-dot.active {
+        @apply bg-primary-600;
+    }
+
+    @media (prefers-color-scheme: light) {
+        .tracker-dot {
+            @apply bg-surface-300;
+            border-radius: 50%;
+            transition: background-color 0.3s ease;
+        }
+
+        .tracker-dot.active {
+            @apply bg-primary-600;
+        }
+    }
+</style>
diff --git a/src/lib/stores/currentSection.js b/src/lib/stores/currentSection.js
new file mode 100644
index 0000000..90885fb
--- /dev/null
+++ b/src/lib/stores/currentSection.js
@@ -0,0 +1,6 @@
+import { writable } from "svelte/store";
+
+export let sectionStore = {
+    about: writable(),
+    main: writable()
+};
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fe71f60..379e771 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,92 +1,85 @@
 <script>
-  import { onMount } from "svelte";
-  import Header from "$lib/components/Main/Header.svelte";
-  import Downloads from "$lib/components/Main/Downloads.svelte";
-  import { fly } from "svelte/transition";
-  import Media from "$lib/components/Main/Media.svelte";
-  import Contact from "$lib/components/Main/Contact.svelte";
-  import TechStack from "$lib/components/Main/TechStack.svelte";
+    import { onMount } from "svelte";
+    import Header from "$lib/components/Main/Header.svelte";
+    import Downloads from "$lib/components/Main/Downloads.svelte";
+    import { fly, slide } from "svelte/transition";
+    import Media from "$lib/components/Main/Media.svelte";
+    import Contact from "$lib/components/Main/Contact.svelte";
+    import TechStack from "$lib/components/Main/TechStack.svelte";
+    import Tracker from "$lib/components/Common/Tracker.svelte";
+    import { sectionStore } from "$lib/stores/currentSection";
 
-  /* IMPORTANT */
-  // Anything added into the page directly will likely break the page's scrolling behaviour
-  // To properly add something to the main page, make it into a component and add it to the array.
-  // This array is in order of how they are to be displayed, modifying their positions will modify them in page.
+    /* IMPORTANT */
+    // Anything added into the page directly will likely break the page's scrolling behaviour
+    // To properly add something to the main page, make it into a component and add it to the array.
+    // This array is in order of how they are to be displayed, modifying their positions will modify them in page.
 
-  let slides = [
-    Header,
-    Downloads,
-    Media,
-    TechStack,
-    Contact
-  ];
+    let slides = [Header, Downloads, Media, TechStack, Contact];
 
+    let { main } = sectionStore;
 
-  let currentSection = 0;
+    if (!$main) main.set(0);
 
-  // Update the current section based on scroll position
-  const handleScroll = () => {
-    const sections = document.querySelectorAll(".section");
-    const scrollTop = document.querySelector(".scroll-container").scrollTop;
-    sections.forEach((section, index) => {
-      if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
-        currentSection = index;
-      }
-    });
-  };
+    let currentSection = $main;
+
+    // Update the current section based on scroll position
+    const handleScroll = () => {
+        const sections = document.querySelectorAll(".section");
+        const scrollTop = document.querySelector(".scroll-container").scrollTop;
+        sections.forEach((section, index) => {
+            if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
+                main.set(index);
+            }
+        });
+    };
 </script>
 
 <div id="main" class="scroll-container" on:scroll={handleScroll}>
-  {#each slides as content}
-    <section class="section">
-      <svelte:component this={content} />
-    </section>
-  {/each}
+    {#each slides as content}
+        <section class="section">
+            <svelte:component this={content} />
+        </section>
+    {/each}
 </div>
 
 <!-- Tracker -->
-{#if currentSection > 0}
-  <div in:fly={{ x: 50, duration: 300 }} out:fly={{ x: 50, duration: 300 }} class="tracker">
-    {#each slides.slice(1) as _, i}
-      <div class="tracker-dot {i + 1 === currentSection ? 'active' : ''}"></div>
-    {/each}
-  </div>
-{/if}
+<Tracker page="main" {slides} includeFirst={false} />
 
 <style>
-  .scroll-container {
-    scroll-snap-type: y mandatory;
-    overflow-y: auto;
-    height: 100vh;
-    width: 100vw;
-    scroll-behavior: smooth;
-  }
+    .scroll-container {
+        scroll-snap-type: y mandatory;
+        overflow-y: auto;
+        height: 100vh;
+        width: 100vw;
+        scroll-behavior: smooth;
+    }
 
-  .section {
-    scroll-snap-align: start;
-    min-height: 100vh; /* Full viewport height */
-    width: 100vw;
-  }
+    .section {
+        scroll-snap-align: start;
+        min-height: 100vh; /* Full viewport height */
+        width: 100vw;
+    }
 
-  /* Tracker Styles */
-  .tracker {
-    position: fixed;
-    top: 50%;
-    right: 20px;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
+    /* Tracker Styles */
+    .tracker {
+        position: fixed;
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
 
-  .tracker-dot {
-    width: 10px;
-    height: 10px;
-    @apply bg-surface-600;
-    border-radius: 50%;
-    transition: background-color 0.3s ease;
-  }
+    .tracker-dot {
+        width: 10px;
+        height: 10px;
+        @apply bg-surface-600;
+        border-radius: 50%;
+        transition: background-color 0.3s ease;
+    }
 
-  .tracker-dot.active {
-    @apply bg-primary-600;
-  }
+    .tracker-dot.active {
+        @apply bg-primary-600;
+    }
 </style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index a16cee7..929d142 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,17 +1,25 @@
 <script>
 	import Me from '$lib/components/About/Me.svelte';
 	import Media from '$lib/components/About/Media.svelte';
+	import Tracker from '$lib/components/Common/Tracker.svelte';
+    import { sectionStore } from '$lib/stores/currentSection';
 	import { onMount } from 'svelte';
-	import { fly } from 'svelte/transition';
 
 	/* IMPORTANT */
 	// Anything added into the page directly will likely break the page's scrolling behaviour
 	// To properly add something to the main page, make it into a component and add it to the array.
 	// This array is in order of how they are to be displayed, modifying their positions will modify them in page.
 
-	let slides = [Me, Media];
+	let slides = [
+		Me,
+		Media
+	];
 
-	let currentSection = 0;
+	let { about } = sectionStore
+
+	if (!$about) about.set(0);
+
+	let currentSection = $about;
 
 	// Update the current section based on scroll position
 	const handleScroll = () => {
@@ -19,7 +27,7 @@
 		const scrollTop = document.querySelector('.scroll-container').scrollTop;
 		sections.forEach((section, index) => {
 			if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
-				currentSection = index;
+				about.set(index);
 			}
 		});
 	};
@@ -34,13 +42,7 @@
 </div>
 
 <!-- Tracker -->
-{#if currentSection >= 0}
-	<div in:fly={{ x: 50, duration: 300 }} out:fly={{ x: 50, duration: 300 }} class="tracker">
-		{#each slides as _, i}
-			<div class="tracker-dot {i === currentSection ? 'active' : ''}"></div>
-		{/each}
-	</div>
-{/if}
+<Tracker page="about" slides={slides} />
 
 <style>
 	.scroll-container {
@@ -56,27 +58,4 @@
 		min-height: 100vh; /* Full viewport height */
 		width: 100vw;
 	}
-
-	/* Tracker Styles */
-	.tracker {
-		position: fixed;
-		top: 50%;
-		right: 20px;
-		transform: translateY(-50%);
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-	}
-
-	.tracker-dot {
-		width: 10px;
-		height: 10px;
-		@apply bg-surface-600;
-		border-radius: 50%;
-		transition: background-color 0.3s ease;
-	}
-
-	.tracker-dot.active {
-		@apply bg-primary-600;
-	}
 </style>