From 7bad6a744141205a92913474d602a1b6d3883316 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Mon, 16 Sep 2024 13:04:28 +0200
Subject: [PATCH] fix(ceremony): ceremony changes
---
.../src/lib/components/Counter/index.svelte | 62 ++++++-------
.../src/lib/components/typography/H1.svelte | 2 +-
.../src/lib/components/typography/H2.svelte | 2 +-
.../src/lib/components/typography/H3.svelte | 2 +-
ceremony/src/routes/+layout.svelte | 86 +++++++++----------
5 files changed, 79 insertions(+), 75 deletions(-)
diff --git a/ceremony/src/lib/components/Counter/index.svelte b/ceremony/src/lib/components/Counter/index.svelte
index b231cd00ff5..c658a98e1c7 100644
--- a/ceremony/src/lib/components/Counter/index.svelte
+++ b/ceremony/src/lib/components/Counter/index.svelte
@@ -1,15 +1,20 @@
<script lang="ts">
-import Zero from "./numbers/zero.svelte"
-import One from "./numbers/one.svelte"
-import Two from "./numbers/two.svelte"
-import Three from "./numbers/three.svelte"
-import Four from "./numbers/four.svelte"
-import Five from "./numbers/five.svelte"
-import Six from "./numbers/six.svelte"
-import Seven from "./numbers/seven.svelte"
-import Eight from "./numbers/eight.svelte"
-import Nine from "./numbers/nine.svelte"
-import H4 from "$lib/components/typography/H4.svelte"
+// import Zero from "./numbers/zero.svelte"
+// import One from "./numbers/one.svelte"
+// import Two from "./numbers/two.svelte"
+// import Three from "./numbers/three.svelte"
+// import Four from "./numbers/four.svelte"
+// import Five from "./numbers/five.svelte"
+// import Six from "./numbers/six.svelte"
+// import Seven from "./numbers/seven.svelte"
+// import Eight from "./numbers/eight.svelte"
+// import Nine from "./numbers/nine.svelte"
+// import H4 from "$lib/components/typography/H4.svelte"
+// import H1 from "$lib/components/typography/H1.svelte"
+// import Text from "$lib/components/typography/Text.svelte"
+import H2 from "$lib/components/typography/H2.svelte"
+import H3 from "$lib/components/typography/H3.svelte"
+import H1 from "$lib/components/typography/H1.svelte"
type Props = {
targetTimestamp: number
@@ -21,7 +26,7 @@ let hours = $state("00")
let minutes = $state("00")
let seconds = $state("00")
-const components = [Zero, One, Two, Three, Four, Five, Six, Seven, Eight, Nine]
+// const components = [Zero, One, Two, Three, Four, Five, Six, Seven, Eight, Nine]
let interval: ReturnType<typeof setInterval>
@@ -56,26 +61,25 @@ $effect(() => {
})
</script>
-<div class="pointer-events-none p-8 bg-gradient-to-t from-transparent via-black/70 to-transparent backdrop-blur w-full flex items-center justify-center flex-col min-h-48">
- <div class="flex flex-col md:flex-row justify-center items-center gap-8">
- {@render pair(hours, 'hours')}
- {@render pair(minutes, 'minutes')}
- {@render pair(seconds, 'seconds')}
+<div class="flex flex-col h-svh items-center justify-center gap-3">
+ <H1></H1>
+ <H2>Ceremony set to begin</H2>
+ <H3>2024-09-20 | <span class="text-union-accent-500">10:00 AM</span> (CET)</H3>
+ <div class="flex gap-2 justify-center">
+ {@render pair(hours, 'h')}
+ {@render pair(minutes, 'm')}
+ {@render pair(seconds, 's')}
</div>
</div>
+s
{#snippet pair(time: string, timeType: string)}
-<div>
- <div class="flex">
- {#each time.split('') as digit, index (index + time)}
- <div class="w-20 flex items-center justify-center text-white rounded mb-2">
- {#if /^[0-9]$/.test(digit)}
- {@const Component = components[parseInt(digit)]}
- <Component/>
- {/if}
- </div>
- {/each}
- </div>
- <H4>{timeType}</H4>
+<div class="flex">
+ {#each time.split('') as digit, index (index + time)}
+ <div class="flex text-white font-supermolot text-2xl font-semibold">
+ <div>{digit}</div>
+ </div>
+ {/each}
+ <div class="!text-union-accent-500 self-end uppercase">{timeType}</div>
</div>
{/snippet}
\ No newline at end of file
diff --git a/ceremony/src/lib/components/typography/H1.svelte b/ceremony/src/lib/components/typography/H1.svelte
index 60328f3cd3a..67ef60ffcd6 100644
--- a/ceremony/src/lib/components/typography/H1.svelte
+++ b/ceremony/src/lib/components/typography/H1.svelte
@@ -2,6 +2,6 @@
let { children, class: className = "", ...props } = $props()
</script>
-<h1 class={`text-union-text-primary text-4xl font-bold font-supermolot uppercase ${className}`} {...props}>
+<h1 class={`text-union-text-primary text-3xl font-bold font-supermolot uppercase ${className}`} {...props}>
{@render children()}
</h1>
diff --git a/ceremony/src/lib/components/typography/H2.svelte b/ceremony/src/lib/components/typography/H2.svelte
index a398749b156..68edddf547e 100644
--- a/ceremony/src/lib/components/typography/H2.svelte
+++ b/ceremony/src/lib/components/typography/H2.svelte
@@ -2,6 +2,6 @@
let { children, class: className = "", ...props } = $props()
</script>
-<h2 class={`text-union-heading-primary text-3xl font-bold font-supermolot uppercase mb-3.5 ${className}`} {...props}>
+<h2 class={`text-union-heading-primary text-2xl font-bold font-supermolot uppercase ${className}`} {...props}>
{@render children()}
</h2>
diff --git a/ceremony/src/lib/components/typography/H3.svelte b/ceremony/src/lib/components/typography/H3.svelte
index 9591517bff5..174bf012a7c 100644
--- a/ceremony/src/lib/components/typography/H3.svelte
+++ b/ceremony/src/lib/components/typography/H3.svelte
@@ -1,6 +1,6 @@
<script lang="ts">
let { children, class: className = "", ...props } = $props()
</script>
-<h3 class={`text-union-heading-primary text-2xl font-bold font-supermolot uppercase ${className}`} {...props}>
+<h3 class={`text-union-heading-primary text-xl font-bold font-supermolot uppercase ${className}`} {...props}>
{@render children()}
</h3>
diff --git a/ceremony/src/routes/+layout.svelte b/ceremony/src/routes/+layout.svelte
index 623c67c70b5..7113be73b7e 100644
--- a/ceremony/src/routes/+layout.svelte
+++ b/ceremony/src/routes/+layout.svelte
@@ -1,11 +1,11 @@
<script lang="ts">
-import Navbar from "$lib/layout/Navbar/index.svelte"
import { beforeNavigate, goto } from "$app/navigation"
import { checkAuth, type SessionError } from "$lib/utils/auth.ts"
import { supabase } from "$lib/supabase/client.ts"
import { user } from "$lib/stores/user.svelte.ts"
import { Toaster } from "svelte-sonner"
-import { Application } from "@splinetool/runtime"
+//import Navbar from "$lib/layout/Navbar/index.svelte"
+// import { Application } from "@splinetool/runtime"
import "../styles/tailwind.css"
@@ -32,32 +32,32 @@ beforeNavigate(async ({ from, to, cancel }) => {
}
})
-let canvas: HTMLCanvasElement
-let app: Application
-let loading = $state(true)
+// let canvas: HTMLCanvasElement
+// let app: Application
+// let loading = $state(true)
$effect(() => {
- canvas = document.getElementById("canvas3d") as HTMLCanvasElement
- if (!canvas) {
- console.error("Canvas element not found")
- return
- }
-
- app = new Application(canvas)
- if (!app) {
- console.error("Failed to create Spline Application")
- return
- }
-
- app
- .load("https://prod.spline.design/6An57q5Kr37gF2k0/scene.splinecode")
- .then(splineScene => {
- loading = false
- })
- .catch(error => {
- console.error("Failed to load Spline scene:", error)
- loading = false
- })
+ // canvas = document.getElementById("canvas3d") as HTMLCanvasElement
+ // if (!canvas) {
+ // console.error("Canvas element not found")
+ // return
+ // }
+ //
+ // app = new Application(canvas)
+ // if (!app) {
+ // console.error("Failed to create Spline Application")
+ // return
+ // }
+ //
+ // app
+ // .load("https://prod.spline.design/6An57q5Kr37gF2k0/scene.splinecode")
+ // .then(splineScene => {
+ // loading = false
+ // })
+ // .catch(error => {
+ // console.error("Failed to load Spline scene:", error)
+ // loading = false
+ // })
const {
data: { subscription }
@@ -70,26 +70,26 @@ $effect(() => {
})
</script>
-<style>
- .canvas-fade {
- opacity: 0;
- transition: opacity 1s ease-in-out;
- }
-
- .canvas-fade.loaded {
- opacity: 1;
- }
-</style>
-
<Toaster position="bottom-right" toastOptions={{ class: 'rounded-none border border-black',}}/>
<!--<Navbar/>-->
-<canvas
- id="canvas3d"
- class=" w-full h-auto inset-0 absolute z-0 canvas-fade"
- class:loaded={!loading}
-></canvas>
+<!--<canvas-->
+<!-- id="canvas3d"-->
+<!-- class=" w-full h-auto inset-0 absolute z-0 canvas-fade"-->
+<!-- class:loaded={!loading}-->
+<!--></canvas>-->
<main class="flex flex-col items-center justify-center min-h-screen w-full">
{@render children()}
-</main>
\ No newline at end of file
+</main>
+
+<!--<style>-->
+<!-- .canvas-fade {-->
+<!-- opacity: 0;-->
+<!-- transition: opacity 1s ease-in-out;-->
+<!-- }-->
+
+<!-- .canvas-fade.loaded {-->
+<!-- opacity: 1;-->
+<!-- }-->
+<!--</style>-->
\ No newline at end of file