Skip to content

Add shop countdown #12

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

Merged
ArcaEge merged 8 commits into from
Dec 1, 2025
Merged

Add shop countdown #12

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
750d231
Merge pull request #2 from hackclub/staging
bbarni2020 Nov 29, 2025
965835a
Merge pull request #4 from hackclub/staging
ArcaEge Nov 29, 2025
220513c
Merge pull request #6 from hackclub/staging
ArcaEge Nov 29, 2025
6f549ef
Merge pull request #7 from hackclub/staging
ArcaEge Nov 30, 2025
ad9df88
Merge pull request #8 from hackclub/staging
ArcaEge Nov 30, 2025
393c586
Merge pull request #9 from hackclub/staging
ArcaEge Dec 1, 2025
b0b570f
Merge pull request #10 from hackclub/staging
ArcaEge Dec 1, 2025
652a126
Add countdown timer for shop opening
bbarni2020 Dec 1, 2025
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
55 changes: 55 additions & 0 deletions src/routes/dashboard/market/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,66 @@
<script lang="ts">
import Head from '$lib/components/Head.svelte';
import { onMount, onDestroy } from 'svelte';

let { data } = $props();

let timeLeft = $state({ days: 0, hours: 0, minutes: 0, seconds: 0 });
let interval: ReturnType<typeof setInterval>;
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The interval variable is declared but not initialized, which may cause TypeScript strict mode errors. Consider either initializing it as undefined explicitly (let interval: ReturnType<typeof setInterval> | undefined;) or using TypeScript's definite assignment assertion (let interval!: ReturnType<typeof setInterval>;). The first approach is generally safer and more explicit.

Suggested change
let interval: ReturnType<typeof setInterval>;
let interval: ReturnType<typeof setInterval> | undefined = undefined;

Copilot uses AI. Check for mistakes.

const targetDate = new Date('2025-12-15T23:59:00-05:00').getTime();
Comment on lines 4 to +10
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The target date is hardcoded. Consider moving this to a configuration file, environment variable, or making it dynamically fetched from the backend. This will make it easier to update the shop opening date without code changes.

Suggested change
let { data } = $props();
let timeLeft = $state({ days: 0, hours: 0, minutes: 0, seconds: 0 });
let interval: ReturnType<typeof setInterval>;
const targetDate = new Date('2025-12-15T23:59:00-05:00').getTime();
import { PUBLIC_SHOP_OPEN_DATE } from '$env/static/public';
let { data } = $props();
let timeLeft = $state({ days: 0, hours: 0, minutes: 0, seconds: 0 });
let interval: ReturnType<typeof setInterval>;
const targetDate = new Date(PUBLIC_SHOP_OPEN_DATE).getTime();

Copilot uses AI. Check for mistakes.

function updateTimer() {
const now = new Date().getTime();
const distance = targetDate - now;

if (distance < 0) {
timeLeft = { days: 0, hours: 0, minutes: 0, seconds: 0 };
if (interval) clearInterval(interval);
return;
}

timeLeft = {
days: Math.floor(distance / (1000 * 60 * 60 * 24)),
hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
seconds: Math.floor((distance % (1000 * 60)) / 1000)
};
}

onMount(() => {
updateTimer();
interval = setInterval(updateTimer, 1000);
});

onDestroy(() => {
if (interval) clearInterval(interval);
});
</script>

<Head title="Market" />

<h1 class="mt-5 mb-3 font-hero text-3xl font-medium">Market</h1>

<div class="my-12 flex flex-col items-center justify-center">
<h2 class="mb-6 font-hero text-xl text-primary-300 md:text-2xl">Shop Opens In</h2>
Comment on lines +44 to +45
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the countdown reaches zero, the message "Shop Opens In" may be confusing since the shop should now be open. Consider conditionally rendering different content after the countdown completes, such as "Shop is Now Open!" or hiding the countdown entirely.

Copilot uses AI. Check for mistakes.
<div class="grid grid-cols-2 gap-4 text-center font-hero text-primary-50 md:grid-cols-4">
Comment on lines +44 to +46
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The countdown timer updates every second, which may cause screen readers to constantly announce changes. Consider adding aria-live="polite" to the countdown container and possibly throttling announcements (e.g., only announcing significant changes like minute updates) for better accessibility.

Copilot uses AI. Check for mistakes.
<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
<span class="mb-2 text-4xl md:text-5xl">{timeLeft.days}</span>
<span class="text-xs text-primary-400 md:text-sm">DAYS</span>
</div>
<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
<span class="mb-2 text-4xl md:text-5xl">{timeLeft.hours}</span>
<span class="text-xs text-primary-400 md:text-sm">HOURS</span>
</div>
<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
<span class="mb-2 text-4xl md:text-5xl">{timeLeft.minutes}</span>
<span class="text-xs text-primary-400 md:text-sm">MINS</span>
</div>
<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
<span class="mb-2 text-4xl md:text-5xl">{timeLeft.seconds}</span>
<span class="text-xs text-primary-400 md:text-sm">SECS</span>
</div>
Comment on lines +47 to +62
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The four time unit boxes have duplicated markup. Consider refactoring this into a reusable component or using an array with {#each} block to reduce code duplication and improve maintainability. For example:

{#each [
  { value: timeLeft.days, label: 'DAYS' },
  { value: timeLeft.hours, label: 'HOURS' },
  { value: timeLeft.minutes, label: 'MINS' },
  { value: timeLeft.seconds, label: 'SECS' }
] as unit}
  <div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
    <span class="mb-2 text-4xl md:text-5xl">{unit.value}</span>
    <span class="text-xs text-primary-400 md:text-sm">{unit.label}</span>
  </div>
{/each}
Suggested change
<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
<span class="mb-2 text-4xl md:text-5xl">{timeLeft.days}</span>
<span class="text-xs text-primary-400 md:text-sm">DAYS</span>
</div>
<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
<span class="mb-2 text-4xl md:text-5xl">{timeLeft.hours}</span>
<span class="text-xs text-primary-400 md:text-sm">HOURS</span>
</div>
<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
<span class="mb-2 text-4xl md:text-5xl">{timeLeft.minutes}</span>
<span class="text-xs text-primary-400 md:text-sm">MINS</span>
</div>
<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
<span class="mb-2 text-4xl md:text-5xl">{timeLeft.seconds}</span>
<span class="text-xs text-primary-400 md:text-sm">SECS</span>
</div>
{#each [
{ value: timeLeft.days, label: 'DAYS' },
{ value: timeLeft.hours, label: 'HOURS' },
{ value: timeLeft.minutes, label: 'MINS' },
{ value: timeLeft.seconds, label: 'SECS' }
] as unit}
<div class="themed-box flex min-w-[120px] flex-col items-center justify-center p-4">
<span class="mb-2 text-4xl md:text-5xl">{unit.value}</span>
<span class="text-xs text-primary-400 md:text-sm">{unit.label}</span>
</div>
{/each}

Copilot uses AI. Check for mistakes.
</div>
</div>

<p>Market score: {data.user.shopScore}</p>