From a1a35435c4c2edee8cab8aed1cf90a3508392b29 Mon Sep 17 00:00:00 2001
From: Shadowner <oulieu.lucas@gmail.com>
Date: Sat, 11 Mar 2023 23:27:18 +0100
Subject: [PATCH] Working news Section

---
 .../components/landing/NewsComponent.svelte   | 138 ++++++++++++++++++
 src/frontend/views/Landing.svelte             | 105 +++----------
 2 files changed, 161 insertions(+), 82 deletions(-)
 create mode 100644 src/frontend/components/landing/NewsComponent.svelte

diff --git a/src/frontend/components/landing/NewsComponent.svelte b/src/frontend/components/landing/NewsComponent.svelte
new file mode 100644
index 00000000..45442b4c
--- /dev/null
+++ b/src/frontend/components/landing/NewsComponent.svelte
@@ -0,0 +1,138 @@
+<style>
+  #newsContainer.hideNewsSection {
+    top: 100%;
+  }
+  #newsContainer {
+    top: 0px;
+  }
+</style>
+
+<script lang="ts">
+  type News = {
+    author: string;
+    date: Date;
+    title: string;
+    comments: string[];
+    content: string;
+    url: string;
+  };
+
+  export let showNews = false;
+  let hasError = false;
+  let news: News[] = [];
+  let loading = true;
+  let currentNewIndex = -1;
+  $: displayedValue = news[currentNewIndex];
+
+  setTimeout(() => {
+    hasError = true;
+    loading = false;
+  }, 2000);
+
+  function handleReloading() {
+    hasError = false;
+    loading = true;
+    setTimeout(() => {
+      const newToPush = {
+        author: "Shadowner",
+        comments: ["hello", "world"],
+        content:
+          "Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore sint laboriosam, autem, ad, hic doloremque eligendi dolorum facere totam reiciendis maxime quia porro? Quae nemo vel modi neque nisi? Illum!",
+        date: new Date(),
+        title: "Svelte is coming to the Party",
+        url: "http://localhost/",
+      };
+
+      news.push(newToPush, newToPush, newToPush, newToPush, newToPush, newToPush, newToPush, newToPush, newToPush);
+      currentNewIndex = 0;
+      loading = false;
+    }, 1000);
+  }
+
+  function handleNext() {
+    if (currentNewIndex < news.length - 1) currentNewIndex++;
+  }
+
+  function handlePrevious() {
+    if (currentNewIndex > 0) currentNewIndex--;
+  }
+</script>
+
+<div id="newsContainer" class:hideNewsSection="{!showNews}">
+  {#if !loading && news.length > 0 && displayedValue}
+    <div id="newsContent">
+      <div id="newsStatusContainer">
+        <div id="newsStatusContent">
+          <div id="newsTitleContainer">
+            <a id="newsArticleTitle" href="{displayedValue.url}">{displayedValue.title}</a>
+          </div>
+          <div id="newsMetaContainer">
+            <div id="newsArticleDateWrapper">
+              <span id="newsArticleDate">{displayedValue.date.toLocaleDateString()}</span>
+            </div>
+            <div id="newsArticleAuthorWrapper">
+              <span id="newsArticleAuthor">by {displayedValue.author}</span>
+            </div>
+            <a href="{displayedValue.url}/comments" id="newsArticleComments">{displayedValue.comments?.length}</a>
+          </div>
+        </div>
+        <div id="newsNavigationContainer">
+          <button id="newsNavigateLeft" on:click="{handlePrevious}">
+            <svg id="newsNavigationLeftSVG" viewBox="0 0 24.87 13.97">
+              <defs>
+                <style>
+                  .arrowLine {
+                    fill: none;
+                    stroke: #fff;
+                    stroke-width: 2px;
+                    transition: 0.25s ease;
+                  }
+                </style>
+              </defs>
+              <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"></polyline>
+            </svg>
+          </button>
+          <span id="newsNavigationStatus">{currentNewIndex + 1} of {news.length}</span>
+          <button id="newsNavigateRight" on:click="{handleNext}">
+            <svg id="newsNavigationRightSVG" viewBox="0 0 24.87 13.97">
+              <defs>
+                <style>
+                  .arrowLine {
+                    fill: none;
+                    stroke: #fff;
+                    stroke-width: 2px;
+                    transition: 0.25s ease;
+                  }
+                </style>
+              </defs>
+              <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"></polyline>
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div id="newsArticleContainer">
+        <div id="newsArticleContent">
+          <div id="newsArticleContentScrollable">
+            {displayedValue.content}
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+  <div id="newsErrorContainer">
+    {#if loading && !hasError}
+      <div id="newsErrorLoading">
+        <span id="nELoadSpan" class="newsErrorContent">Checking for News..</span>
+      </div>
+    {:else if !loading && hasError}
+      <div id="newsErrorFailed">
+        <span id="nEFailedSpan" class="newsErrorContent">Failed to Load News</span>
+        <button id="newsErrorRetry" on:click="{handleReloading}">Try Again</button>
+      </div>
+    {:else if news.length === 0}
+      <div id="newsErrorNone">
+        <span id="nENoneSpan" class="newsErrorContent">No News</span>
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/src/frontend/views/Landing.svelte b/src/frontend/views/Landing.svelte
index 7ac5c1b7..cfcb667f 100644
--- a/src/frontend/views/Landing.svelte
+++ b/src/frontend/views/Landing.svelte
@@ -1,14 +1,24 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
+  import NewsComponent from "../components/landing/NewsComponent.svelte";
   import { currentView } from "../store/AppStore";
   import { PossibleViewState } from "../types/PossibleAppState";
+
+  let showNews = false;
+  $: hideLanding = showNews ? "-200vh" : "";
+  $: upNewsButton = showNews ? "-70vh" : "10px";
 </script>
 
-<div id="landingContainer" in:fade="{{ delay: 500 }}" out:fade>
-  <div id="upper">
+<div
+  id="landingContainer"
+  in:fade="{{ delay: 500 }}"
+  style="background: {showNews ? 'rgba(0, 0, 0, 0.50)' : ''} "
+  out:fade
+>
+  <div id="upper" style="top: {hideLanding}">
     <div id="left">
       <div id="image_seal_container">
-        <img id="image_seal" src="assets/images/SealCircle.png" />
+        <img id="image_seal" src="assets/images/SealCircle.png" alt="SealCircle.png" />
         <div id="updateAvailableTooltip">Update Available</div>
       </div>
     </div>
@@ -56,7 +66,7 @@
               </a>
             </div>
             <div class="mediaContainer">
-              <a href="#" class="mediaURL" id="twitterURL" disabled>
+              <a href="#" class="mediaURL" id="twitterURL">
                 <svg id="twitterSVG" class="mediaSVG" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet">
                   <g>
                     <path
@@ -67,7 +77,7 @@
               </a>
             </div>
             <div class="mediaContainer">
-              <a href="#" class="mediaURL" id="instagramURL" disabled>
+              <a href="#" class="mediaURL" id="instagramURL">
                 <svg id="instagramSVG" class="mediaSVG" viewBox="0 0 5040 5040">
                   <defs>
                     <radialGradient id="instaFill" cx="30%" cy="107%" r="150%">
@@ -93,7 +103,7 @@
               </a>
             </div>
             <div class="mediaContainer">
-              <a href="#" class="mediaURL" id="youtubeURL" disabled>
+              <a href="#" class="mediaURL" id="youtubeURL">
                 <svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
                   <g>
                     <path
@@ -119,8 +129,9 @@
       </div>
     </div>
   </div>
+
   <div id="lower">
-    <div id="left">
+    <div id="left" style="top: {hideLanding}">
       <div class="bot_wrapper">
         <div id="content">
           <div id="server_status_wrapper">
@@ -151,8 +162,8 @@
     </div>
     <div id="center">
       <div class="bot_wrapper">
-        <div id="content">
-          <button id="newsButton">
+        <div id="content" style="top: {upNewsButton}">
+          <button id="newsButton" on:click="{(e) => (showNews = !showNews)}">
             <!--<img src="assets/images/icons/arrow.svg" id="newsButtonSVG"/>-->
             <div id="newsButtonAlert" style="display: none;"></div>
             <svg id="newsButtonSVG" viewBox="0 0 24.87 13.97">
@@ -172,7 +183,7 @@
         </div>
       </div>
     </div>
-    <div id="right">
+    <div id="right" style="top: {hideLanding}">
       <div class="bot_wrapper">
         <div id="launch_content">
           <button id="launch_button">PLAY</button>
@@ -192,76 +203,6 @@
       </div>
     </div>
   </div>
-  <div id="newsContainer">
-    <div id="newsContent" article="-1" style="display: none;">
-      <div id="newsStatusContainer">
-        <div id="newsStatusContent">
-          <div id="newsTitleContainer">
-            <a id="newsArticleTitle" href="#">Lorem Ipsum</a>
-          </div>
-          <div id="newsMetaContainer">
-            <div id="newsArticleDateWrapper">
-              <span id="newsArticleDate">Mar 15, 44 BC, 9:14 AM</span>
-            </div>
-            <div id="newsArticleAuthorWrapper">
-              <span id="newsArticleAuthor">by Cicero</span>
-            </div>
-            <a href="#" id="newsArticleComments">0 Comments</a>
-          </div>
-        </div>
-        <div id="newsNavigationContainer">
-          <button id="newsNavigateLeft">
-            <svg id="newsNavigationLeftSVG" viewBox="0 0 24.87 13.97">
-              <defs>
-                <style>
-                  .arrowLine {
-                    fill: none;
-                    stroke: #fff;
-                    stroke-width: 2px;
-                    transition: 0.25s ease;
-                  }
-                </style>
-              </defs>
-              <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"></polyline>
-            </svg>
-          </button>
-          <span id="newsNavigationStatus">1 of 1</span>
-          <button id="newsNavigateRight">
-            <svg id="newsNavigationRightSVG" viewBox="0 0 24.87 13.97">
-              <defs>
-                <style>
-                  .arrowLine {
-                    fill: none;
-                    stroke: #fff;
-                    stroke-width: 2px;
-                    transition: 0.25s ease;
-                  }
-                </style>
-              </defs>
-              <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"></polyline>
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div id="newsArticleContainer">
-        <div id="newsArticleContent">
-          <div id="newsArticleContentScrollable">
-            <!-- Article Content -->
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="newsErrorContainer">
-      <div id="newsErrorLoading">
-        <span id="nELoadSpan" class="newsErrorContent">Checking for News..</span>
-      </div>
-      <div id="newsErrorFailed" style="display: none;">
-        <span id="nEFailedSpan" class="newsErrorContent">Failed to Load News</span>
-        <button id="newsErrorRetry">Try Again</button>
-      </div>
-      <div id="newsErrorNone" style="display: none;">
-        <span id="nENoneSpan" class="newsErrorContent">No News</span>
-      </div>
-    </div>
-  </div>
+
+  <NewsComponent showNews="{showNews}" />
 </div>