From 7bc0862a6a438c4e64def62f94a5b66f61cf9729 Mon Sep 17 00:00:00 2001
From: Scott Pierce-Wrobel <scottpiercew@gmail.com>
Date: Wed, 12 Jun 2024 14:53:14 -0400
Subject: [PATCH] formats timer to prevent changes glitching on screen, adds
 location to change date for timer (#92)

---
 src/components/elements/Timer.svelte  | 99 ++++++++++++++-------------
 src/content/externalLinks.js          |  4 ++
 src/pages/index.astro                 |  4 +-
 src/pages/products/[...product].astro |  2 +-
 4 files changed, 58 insertions(+), 51 deletions(-)

diff --git a/src/components/elements/Timer.svelte b/src/components/elements/Timer.svelte
index f39ac1e..b2a17ad 100644
--- a/src/components/elements/Timer.svelte
+++ b/src/components/elements/Timer.svelte
@@ -1,53 +1,56 @@
 <script>
-    import { onMount, onDestroy } from 'svelte';
-  
-    let days = 41;
-    let hours = 14;
-    let minutes = 54;
-    let seconds = 19;
-  
-    onMount(() => {
-      const countDownDate = new Date('August 1, 2024 23:59:59').getTime();
-  
-      const interval = setInterval(() => {
-        const now = new Date().getTime();
-        const distance = countDownDate - now;
-  
-        days = Math.floor(distance / (1000 * 60 * 60 * 24));
-        hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-        minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-        seconds = Math.floor((distance % (1000 * 60)) / 1000);
-  
-        if (distance < 0) {
-          clearInterval(interval);
-          days = 0;
-          hours = 0;
-          minutes = 0;
-          seconds = 0;
-        }
-      }, 1000);
-  
-      onDestroy(() => {
+  import { onMount, onDestroy } from 'svelte';
+  import { timerCountdown } from '@content/externalLinks.js';
+
+  let days = 41;
+  let hours = 14;
+  let minutes = 54;
+  let seconds = 19;
+
+  onMount(() => {
+    const countDownDate = new Date(timerCountdown.formatedDate).getTime();
+
+    const interval = setInterval(() => {
+      const now = new Date().getTime();
+      const distance = countDownDate - now;
+
+      days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+      if (distance < 0) {
         clearInterval(interval);
-      });
+        days = 0;
+        hours = 0;
+        minutes = 0;
+        seconds = 0;
+      }
+    }, 1000);
+
+    onDestroy(() => {
+      clearInterval(interval);
     });
-  </script>
-  
-  <div class="grid w-full grid-cols-1 gap-3 mt-8 lg:grid-cols-4 lg:inline-flex sm:justify-between">
-    <div class="hidden my-auto bg-red-600 w-42 lg:w-60 md:block">
-      <hr class="h-[1px] bg-white border-none" />
-    </div>
-    {#each [days, hours, minutes, seconds] as time, index}
-      <div class="items-center text-center" key={index}>
-        <div class="mt-8 sm:mt-4">
-          <h3 class="text-8xl md:text-6xl font-extrabold font-menobanner">{time}</h3>
-          <p class="font-bold text-xl md:text-base text-mcswf-gold">
-            {index === 0 ? 'DAYS' : index === 1 ? 'HOURS' : index === 2 ? 'MINUTES' : 'SECONDS'}
-          </p>
-        </div>
+  });
+</script>
+
+<div class="grid w-full grid-cols-1 gap-3 mt-8 lg:grid-cols-4 lg:inline-flex sm:justify-between">
+  <div class="invisible my-auto w-42 lg:w-60 lg:visible">
+    <hr class="h-1 bg-[#62040A] border-none" />
+  </div>
+  {#each [days, hours, minutes, seconds] as time, index}
+    <div
+      class="items-center text-center"
+      key={index}>
+      <div class="mt-8 sm:mt-4 m-auto md:w-36">
+        <h3 class="text-[100px] font-extrabold font-menobanner">{time}</h3>
+        <p class="font-semibold text-2xl md:text-[18px] text-mcswf-gold">
+          {index === 0 ? 'DAYS' : index === 1 ? 'HOURS' : index === 2 ? 'MINUTES' : 'SECONDS'}
+        </p>
       </div>
-    {/each}
-    <div class="hidden my-auto w-42 lg:w-60 md:block">
-      <hr />
     </div>
-  </div>
\ No newline at end of file
+  {/each}
+  <div class="invisible lg:visible my-auto w-42 lg:w-60">
+    <hr class="h-1 bg-[#62040A] border-none" />
+  </div>
+</div>
diff --git a/src/content/externalLinks.js b/src/content/externalLinks.js
index b4734b9..065cdcd 100644
--- a/src/content/externalLinks.js
+++ b/src/content/externalLinks.js
@@ -8,3 +8,7 @@ export const externalLinks = {
   deputyCommandantForInformation: 'https://www.information.marines.mil/',
   marinesDotCom: 'https://www.marines.com/',
 };
+
+export const timerCountdown = {
+  formatedDate: 'August 1, 2024 23:59:59',
+};
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cb3aae3..df1f2c4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -64,7 +64,7 @@ products.sort((a, b) => a.data.order - b.data.order);
           title="WHAT WE DO"
           titleClasses="text-mcswf-white text-2xl font-bold md:text-3xl lg:text-4xl"
           content="Marines are taught to develop mission-specific software for operational units to use in weeks or months, not years. Marines at the Marine Corps Software Factory (MCSWF) are trained by working with industry experts to build the software Marines need."
-          imageClasses="lg:w-550"
+          imageClasses="w-full lg:w-550"
         />
       </div>
       <div class="h-fit py-10 lg:py-20">
@@ -76,7 +76,7 @@ products.sort((a, b) => a.data.order - b.data.order);
           title="THE IMPACT"
           titleClasses="text-mcswf-white text-2xl font-bold md:text-3xl lg:text-4xl"
           content="By combining traditional military training and modern technology skills, it enables tactical advantage for Marines across the service. The MCSWF pilot will evaluate the demand signal from Fleet Marine Forces, develop a way forward on career paths for technical experts, and evaluate the proper blend of civilian-Marine teaming."
-          imageClasses="lg:w-550"
+          imageClasses="w-full lg:w-550"
         />
       </div>
       <!-- <div class="h-fit pt-20">
diff --git a/src/pages/products/[...product].astro b/src/pages/products/[...product].astro
index eb0fdf5..8d462b9 100644
--- a/src/pages/products/[...product].astro
+++ b/src/pages/products/[...product].astro
@@ -32,7 +32,7 @@ const bgString = 'background-image:url(' + entry.data.background.src + ')';
     title={entry.data.product}
     description={entry.data.description}
     descriptionClasses="font-light lg:w-[1000px]"
-    link={externalLinks.recruitingApplication}
+    link={`mailto:${externalLinks.mcswfEmail}?subject=${externalLinks.mcswfEmailSubject}`}
     linkText="REQUEST APP DEMO"
     externalLink={true}
     backgroundImg={entry.data.background.src}