From 40fdac8b0fbd2bda45c7fa37b021a75dc5cea5c8 Mon Sep 17 00:00:00 2001
From: nuo <49533950+nuoxoxo@users.noreply.github.com>
Date: Wed, 20 Sep 2023 23:34:22 +0200
Subject: [PATCH] edit css

---
 src/App.tsx              |  2 ++
 src/helpers/Helpers.tsx  | 13 ++++++++++
 src/includes/Aoc1813.tsx | 53 ++++++++++++++++++++++++++++++++++++++++
 src/includes/Aoc1818.tsx |  1 -
 src/styles/App.scss      |  7 +++++-
 5 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/includes/Aoc1813.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 0fa1110..23ee2d1 100644
--- a/src/App.tsx
+++ b/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,
diff --git a/src/helpers/Helpers.tsx b/src/helpers/Helpers.tsx
index d4f139b..c32b64b 100644
--- a/src/helpers/Helpers.tsx
+++ b/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)
 
diff --git a/src/includes/Aoc1813.tsx b/src/includes/Aoc1813.tsx
new file mode 100644
index 0000000..cf6639b
--- /dev/null
+++ b/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
diff --git a/src/includes/Aoc1818.tsx b/src/includes/Aoc1818.tsx
index fb53308..282cf21 100644
--- a/src/includes/Aoc1818.tsx
+++ b/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>
diff --git a/src/styles/App.scss b/src/styles/App.scss
index 58ee82e..85b703a 100644
--- a/src/styles/App.scss
+++ b/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;
 }