From 2a9c2c598f57eb58c0869fe7625b1a4d61b5eb91 Mon Sep 17 00:00:00 2001
From: bloodwiing <bloodwiing+git@alchemix.dev>
Date: Thu, 16 May 2024 22:11:56 +0300
Subject: [PATCH] Add: Make Front use background and transitions

---
 src/lib/memory/entrypos.js                  |  4 ++
 src/routes/(entry)/+layout.svelte           | 70 ++++++++++++++++-----
 src/routes/(entry)/+page.svelte             | 13 +++-
 src/routes/(entry)/login/+page.server.js    |  4 +-
 src/routes/(entry)/login/+page.svelte       | 10 +++
 src/routes/(entry)/register/+page.server.js |  2 +-
 src/routes/(entry)/register/+page.svelte    |  9 +++
 7 files changed, 92 insertions(+), 20 deletions(-)

diff --git a/src/lib/memory/entrypos.js b/src/lib/memory/entrypos.js
index 5f7f413..f80f479 100644
--- a/src/lib/memory/entrypos.js
+++ b/src/lib/memory/entrypos.js
@@ -5,6 +5,8 @@ import { writable } from "svelte/store";
  *  x: number,
  *  y: number,
  *  scale: number,
+ *  follow: number,
+ *  glow: number,
  * }} data;
  */
 
@@ -13,4 +15,6 @@ export default writable({
   x: 0.5,
   y: 0.5,
   scale: 1.0,
+  follow: 1.0,
+  glow: 0.0,
 });
diff --git a/src/routes/(entry)/+layout.svelte b/src/routes/(entry)/+layout.svelte
index c973cfb..3d26495 100644
--- a/src/routes/(entry)/+layout.svelte
+++ b/src/routes/(entry)/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { page } from "$app/stores";
+  import entrypos from "$lib/memory/entrypos";
   import { onMount } from "svelte";
 
   /** @type {Element} */
@@ -8,17 +8,20 @@
   /** @type {Element} */
   let background;
 
-  /** @type {any} */
-  export let data;
-
-  console.log(data);
-
   /** @typedef {{x: number, y: number, size: number}} glowAnimState */
   /** @type {glowAnimState} */
   let current = {x: 0, y: 0, size: 100};
   /** @type {glowAnimState} */
   let target = {x: 0, y: 0, size: 100};
 
+  /** @type {Element} */
+  let offsetContainer;
+
+  /** @type {boolean | null} */
+  let loaded = null;
+
+  $: followIntensity = $entrypos.follow;
+
   const speed = 0.003;
 
   function mouseMoveGlow(/** @type {MouseEvent | TouchEvent} */ e) {
@@ -27,8 +30,8 @@
     const curX = 'clientX' in e ? e.clientX : e.touches[0].clientX;
     const curY = 'clientY' in e ? e.clientY : e.touches[0].clientY;
     
-    const x = 1 - (curX - rect.left) / (rect.width - rect.left);
-    const y = 1 - (curY - rect.top) / (rect.height - rect.top);
+    const x = (1 - (curX - rect.left) / (rect.width - rect.left)) * followIntensity + 0.5 * (1.0 - followIntensity);
+    const y = (1 - (curY - rect.top) / (rect.height - rect.top)) * followIntensity + 0.5 * (1.0 - followIntensity);
 
     const size = (Math.max(Math.abs(x - 0.5), Math.abs(y - 0.5)) * 2) * 10 + 100;
 
@@ -39,6 +42,11 @@
   let prevTimeStamp = -1;
 
   function follow(/** @type {number} */ timeStamp) {
+    if (!glow1) {
+      requestAnimationFrame(follow);
+      return;
+    };
+
     if (prevTimeStamp == -1) {
       prevTimeStamp = timeStamp;
       requestAnimationFrame(follow);
@@ -69,7 +77,22 @@
 
   onMount(() => {
     window.requestAnimationFrame(follow);
+
+    updateEntryOrbPosition($entrypos);
+
+    loaded = true;
   });
+  
+  function updateEntryOrbPosition(/** @type {import("$lib/memory/entrypos").data} */ data) {
+    if (!offsetContainer) return;
+
+    const {x, y, scale, glow} = data;
+    offsetContainer.setAttribute('style', `transform: translateX(${(x - 1.0) * 100}%) translateY(${(y - 1.0) * 100}%) scale(${scale * 100}%); --glow: ${glow * 100}%`);
+  }
+
+  $: {
+    updateEntryOrbPosition($entrypos)
+  };
 </script>
 
 <style lang="scss">
@@ -95,7 +118,6 @@
     --color-2: #caad77;
     --color-3: #f3404f;
 
-    background: radial-gradient(circle at center, #220415 0%, var(--color-bg) 100%);
     background: var(--color-bg);
 
     overflow: hidden;
@@ -104,6 +126,22 @@
     height: 100dvh;
   }
 
+  .orbContainer {
+    background: radial-gradient(closest-side, #220415 50%, var(--color-bg) 100%), var(--color-bg);
+    background-size: var(--glow) var(--glow);
+    background-position: center;
+    background-repeat: no-repeat;
+
+    overflow: hidden;
+
+    opacity: 0.0;
+    transition: 1.5s cubic-bezier(0.14, 0.94, 0.63, 1.00);
+
+    &[data-loaded] {
+      opacity: 1.0;
+    }
+  }
+
   .center {
     top: 50%;
     left: 50%;
@@ -183,12 +221,14 @@
 
 <div class="page">
   <div class="background" bind:this={background} on:mousemove={mouseMoveGlow} role="none">
-    <div class="glow fwh center" id="glow-c"></div>
-    <div class="glow fwh center" id="glow-3"></div>
-    <div class="glow fwh center" id="glow-2"></div>
-    <div class="glow fwh center" id="glow-1" bind:this={glow1}></div>
-    <div class="overlay fwh center"></div>
-    <div class="sphere fwh center"></div>
+    <div class="orbContainer fwh center" bind:this={offsetContainer} data-loaded={loaded}>
+      <div class="glow fwh center" id="glow-c"></div>
+      <div class="glow fwh center" id="glow-3"></div>
+      <div class="glow fwh center" id="glow-2"></div>
+      <div class="glow fwh center" id="glow-1" bind:this={glow1}></div>
+      <div class="overlay fwh center"></div>
+      <div class="sphere fwh center"></div>
+    </div>
 
     <!-- <div class="fwh" style="background: #999999;"></div> -->
   </div>
diff --git a/src/routes/(entry)/+page.svelte b/src/routes/(entry)/+page.svelte
index 72eab57..e697691 100644
--- a/src/routes/(entry)/+page.svelte
+++ b/src/routes/(entry)/+page.svelte
@@ -1,4 +1,13 @@
 <script>
+  import entrypos from "$lib/memory/entrypos";
+
+  $entrypos = {
+    x: 0.5,
+    y: 1.3,
+    scale: 2.0,
+    follow: 0.6,
+    glow: 1.0,
+  };
 </script>
 
 <style>
@@ -14,6 +23,6 @@
 </style>
 
 <div class="center">
-  <h1 class="typeDisplay"><span class="typeContent">Welcome to </span>Echo</h1>
-  <p>Currently suppored link: <a href="/posts">/posts</a></p>
+  <h1 class="typeDisplay"><span class="typeContent">Welcome to </span>echo</h1>
+  <p>Currently suppored links: <a href="/posts">/posts</a>, <a href="/login">/login</a>, <a href="/register">/register</a></p>
 </div>
diff --git a/src/routes/(entry)/login/+page.server.js b/src/routes/(entry)/login/+page.server.js
index 103c6a9..4c141c5 100644
--- a/src/routes/(entry)/login/+page.server.js
+++ b/src/routes/(entry)/login/+page.server.js
@@ -4,7 +4,7 @@ import { redirect } from "@sveltejs/kit";
 /** @type {import("@sveltejs/kit").ServerLoad} */
 export async function load({ cookies }) {
   if (cookies.get('token')) {
-    redirect(302, '/');
+    redirect(302, '/posts');
   }
 }
 
@@ -30,7 +30,7 @@ async function POST({ request, cookies }) {
       expires: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000),  // 1 week
     });
 
-    redirect(302, '/');
+    redirect(302, '/posts');
   }
 }
 
diff --git a/src/routes/(entry)/login/+page.svelte b/src/routes/(entry)/login/+page.svelte
index 1cca727..a37103b 100644
--- a/src/routes/(entry)/login/+page.svelte
+++ b/src/routes/(entry)/login/+page.svelte
@@ -1,8 +1,18 @@
 <script>
   import Entryfield from "$comp/entry/entryfield.svelte";
   import Entryform from "$comp/entry/entryform.svelte";
+  import entrypos from "$lib/memory/entrypos";
+
+  $entrypos = {
+    x: 0.5,
+    y: 0.5,
+    scale: 1.0,
+    follow: 1.0,
+    glow: 0.5,
+  };
 </script>
 
+<!-- <svelte:window on:mount={() => {console.log("hi");}} /> -->
 <Entryform action="/login" formName="Login" submitText="enter">
   <a href="/register" slot="belowName">New here?</a>
 
diff --git a/src/routes/(entry)/register/+page.server.js b/src/routes/(entry)/register/+page.server.js
index 4af8794..fb058ff 100644
--- a/src/routes/(entry)/register/+page.server.js
+++ b/src/routes/(entry)/register/+page.server.js
@@ -4,7 +4,7 @@ import { redirect } from '@sveltejs/kit';
 /** @type {import('@sveltejs/kit').ServerLoad} */
 export async function load({ cookies }) {
   if (cookies.get('token')) {
-    redirect(302, '/');
+    redirect(302, '/posts');
   }
 }
 
diff --git a/src/routes/(entry)/register/+page.svelte b/src/routes/(entry)/register/+page.svelte
index e01356f..6b430fd 100644
--- a/src/routes/(entry)/register/+page.svelte
+++ b/src/routes/(entry)/register/+page.svelte
@@ -1,6 +1,7 @@
 <script>
   import Entryfield from "$comp/entry/entryfield.svelte";
   import Entryform from "$comp/entry/entryform.svelte";
+  import entrypos from "$lib/memory/entrypos";
 
   /** @type {string} */
   let password;
@@ -13,6 +14,14 @@
       e.preventDefault();
     }
   }
+
+  $entrypos = {
+    x: 0.5,
+    y: 0.5,
+    scale: 1.0,
+    follow: 1.0,
+    glow: 0.5,
+  };
 </script>
 
 <Entryform action="/register" formName="Register" submitText="go!" on:submit={(e) => {submitForm(e.detail);}}>