Skip to content

Commit

Permalink
fix(ceremony): ceremony changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Swepool
Swepool committed Sep 16, 2024
1 parent 5f69151 commit 7bad6a7
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 75 deletions.
62 changes: 33 additions & 29 deletions ceremony/src/lib/components/Counter/index.svelte
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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}
2 changes: 1 addition & 1 deletion ceremony/src/lib/components/typography/H1.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion ceremony/src/lib/components/typography/H2.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion ceremony/src/lib/components/typography/H3.svelte
View file
Original file line number Diff line number Diff line change
@@ -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>
86 changes: 43 additions & 43 deletions ceremony/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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 }
Expand All @@ -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}-->
<!--&gt;</canvas>-->

<main class="flex flex-col items-center justify-center min-h-screen w-full">
{@render children()}
</main>
</main>

<!--<style>-->
<!-- .canvas-fade {-->
<!-- opacity: 0;-->
<!-- transition: opacity 1s ease-in-out;-->
<!-- }-->

<!-- .canvas-fade.loaded {-->
<!-- opacity: 1;-->
<!-- }-->
<!--</style>-->

0 comments on commit 7bad6a7

Please sign in to comment.