Merge pull request #34 from nuoxoxo/aoc

edit css

src/App.tsx

@@ -9,6 +9,7 @@ import Aoc2003 from "./includes/Aoc2003"; // New New
 // import Aoc2011 from "./includes/Aoc2011"; // New New New
 import Aoc1908 from "./includes/Aoc1908";
 import Aoc1818 from "./includes/Aoc1818";
+import Aoc1813 from "./includes/Aoc1813";
 import Aoc1810 from "./includes/Aoc1810";
 // import Aoc1803 from "./includes/Aoc1803"; // New New
 import Aoc1802 from "./includes/Aoc1802";
@@ -35,6 +36,7 @@ const routes: { [key: string]: TargetRoute } = {
   // 2011: Aoc2011,
   1908: Aoc1908,
   1818: Aoc1818,
+  1813: Aoc1813,
   1810: Aoc1810,
   // 1803: Aoc1803,
   1802: Aoc1802,

src/helpers/Helpers.tsx

@@ -11,6 +11,19 @@ export const FetchData = async ( path: string ): Promise<string[]> => {
   }
 }
 
+export const FetchDataWithoutTrim = async ( path: string ): Promise<string[]> => {
+
+  try {
+    const resp = await fetch( path )
+    const text = await resp.text()
+    const raws: string[] = text.split('\n')
+    return raws
+  } catch (error: any) {
+    console.error("Error fetching data: ", error)
+    throw error
+  }
+}
+
 // export function Rotate2DArrayLeft90Deg<T>(originalArray: T[][]): T[][] {
 //   const arr = Deepcopy2DArray(originalArray)
 

src/includes/Aoc1813.tsx

@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react"
+import { FetchDataWithoutTrim, /*Deepcopy2DArray*/ } from "../helpers/Helpers"
+
+const suffixes = ['in', 'alt']
+const choice = suffixes[Math.floor(Math.random() * suffixes.length)]
+const URL:string = "https://raw.githubusercontent.com/nuoxoxo/in/main/aoc/1813." + choice
+
+var Aoc1813 = () => {
+
+  const [lines, setLines] = useState<string[]>([])
+  const [p1] = useState<number>(0)
+  const [p2] = useState<number>(0)
+
+  const handleData = async () => {
+
+    try {
+      const raws = await FetchDataWithoutTrim(URL)
+      setLines(raws)
+    } catch (error: any) {
+      console.error("Error fetching data: ", error)
+    }
+  }
+
+  useEffect(() => {
+    handleData()
+  }, [])
+
+  return (
+    <>
+      {lines ? (
+        <>
+
+          <div className="playground">
+            <div className="field res-field res-field-1813">
+              <span>--- 2018 Day 13: Mine Cart Madness ---</span>
+              <span>Part 1: {p1 ? p1 : "(empty)"} </span>
+              <span>Part 2: {p2 ? p2 : "(empty)"} </span>
+            </div>
+          </div>
+
+          <div className="field data-field data-field-1813">
+            { lines ? lines.join("\n") : "No data available." }
+          </div>
+
+        </>
+      ) : (
+        <p>Loading data...</p>
+      )}
+    </>
+  )
+}
+
+export default Aoc1813

src/includes/Aoc1818.tsx

@@ -133,7 +133,6 @@ var Aoc1818 = () => {
     <>
       {lines ? (
         <>
-
           <div className="playground">
             <div className="field res-field res-field-1818">
               <span>--- 1818 Day 18: Settlers of The North Pole ---</span>

src/styles/App.scss

@@ -295,8 +295,13 @@ body {
   align-items: center;
 }
 
+.data-field-1813 {
+  font-size: 10px;
+  white-space: pre;
+}
+
 .data-field-1818 {
-  font-size: 4px;
+  font-size: 16px;
   color:$WATER-GREEN;
   @include animation-rainbow-rotate;
 }