Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ceremony): countdown changes #2956

Closed
wants to merge 1 commit into from
Closed

fix(ceremony): countdown changes #2956

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions ceremony/src/lib/components/Blink.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script lang="ts">
import H1 from "$lib/components/typography/H1.svelte"

let eye = $state("0")
let blinkInterval: number | NodeJS.Timeout

function blinkEye() {
eye = "-"
setTimeout(() => {
eye = "0"
}, 100)
}

function startRandomBlinking() {
blinkInterval = setInterval(() => {
if (Math.random() < 0.05) {
blinkEye()
}
}, 200)
}

$effect(() => {
startRandomBlinking()

return () => {
clearInterval(blinkInterval)
}
})
</script>

<H1 class="!text-union-accent-500">{eye}_______{eye}</H1>
60 changes: 31 additions & 29 deletions ceremony/src/lib/components/Counter/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<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"

type Props = {
targetTimestamp: number
Expand All @@ -21,7 +25,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 +60,24 @@ $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">
<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
Open in desktop
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-2xl sm:text-4xl 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
Open in desktop
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
Open in desktop
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
Open in desktop
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>-->
Loading