System-End/scraps
1
0
Fork 0
mirror of https://github.com/System-End/scraps.git synced 2026-04-19 23:22:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add in seo + faq + fix shop wishlist

Browse source
This commit is contained in:
Nathan 2026-02-05 11:37:10 -05:00
parent 298466d0a2
commit 8857dfca2b
8 changed files with 253 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
backend/src/routes/shop.ts
View file

@ -84,6 +84,7 @@ shop.get('/items', async ({ headers }) => {
heartCount: Number(item.heartCount) || 0,
userBoostPercent: 0,
upgradeCount: 0,
adjustedBaseProbability: item.baseProbability,
effectiveProbability: Math.min(item.baseProbability, 100),
userHearted: false,
nextUpgradeCost: item.baseUpgradeCost

7
frontend/src/lib/components/ShopItemModal.svelte
View file

@ -253,9 +253,14 @@
<p class="text-3xl font-bold {getProbabilityColor(item.effectiveProbability)}">
{item.effectiveProbability.toFixed(1)}%
</p>
<div class="mt-2 flex gap-4 text-xs text-gray-600">
<div class="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-600">
<span>base: {item.baseProbability}%</span>
<span>your boost: +{item.userBoostPercent}%</span>
{#if item.adjustedBaseProbability < item.baseProbability}
<span class="text-red-500"
>previous buy: -{item.baseProbability - item.adjustedBaseProbability}%</span
>
{/if}
</div>
</div>

1
frontend/src/lib/stores.ts
View file

@ -27,6 +27,7 @@ export interface ShopItem {
heartCount: number;
userHearted: boolean;
baseProbability: number;
adjustedBaseProbability: number;
baseUpgradeCost: number;
costMultiplier: number;
boostAmount: number;

24
frontend/src/routes/+layout.svelte
View file

@ -45,20 +45,28 @@
</script>
<svelte:head>
<title>scraps - Hack Club</title>
<link rel="icon" href={favicon} />
<link rel="apple-touch-icon" href={favicon} />
<title>scraps</title>
<meta name="description" content="scraps - earn scraps by building projects and spend them in the shop to win prizes from hack club hq" />
<meta name="keywords" content="hack club, scraps, ysws, projects, coding, prizes" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="description" content="Build projects, earn scraps, test your luck, get prizes. A Hack Club program for teen coders." />
<meta name="author" content="Hack Club" />
<meta property="og:title" content="scraps" />
<meta property="og:description" content="earn scraps by building projects and spend them in the shop to win prizes from hack club hq" />
<meta name="keywords" content="hack club, scraps, ysws, projects, coding, prizes" />
<meta name="theme-color" content="#000000" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="scraps - Hack Club" />
<meta property="og:title" content="scraps - Hack Club" />
<meta property="og:description" content="Build projects, earn scraps, test your luck, get prizes. A Hack Club program for teen coders." />
<meta property="og:image" content={favicon} />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="scraps" />
<meta name="twitter:description" content="earn scraps by building projects and spend them in the shop to win prizes from hack club hq" />
<meta name="theme-color" content="#000000" />
<meta name="twitter:site" content="@hackclub" />
<meta name="twitter:creator" content="@hackclub" />
<meta name="twitter:title" content="scraps - Hack Club" />
<meta name="twitter:description" content="Build projects, earn scraps, test your luck, get prizes. A Hack Club program for teen coders." />
<meta name="twitter:image" content={favicon} />
</svelte:head>
<div class="flex min-h-dvh flex-col">

80
frontend/src/routes/+page.svelte
View file

@ -270,14 +270,14 @@
<p class="mb-4 text-xl font-bold">tl;dr</p>
<p class="mb-2">
<strong>ys:</strong> any project <Superscript
<strong>you ship:</strong> any project <Superscript
number={3}
tooltip="optionally silly, nonsensical, or fun"
/>
</p>
<p class="mb-6">
<strong>ws:</strong> random items from hq<Superscript
<strong>we ship:</strong> random items from hq<Superscript
number={4}
tooltip="(including stickers)"
/> (more hours, more stuff)
@ -336,34 +336,64 @@
/>! this includes some of the rarest and most sought-after stickers from hack club.
</p>
<p class="mb-4 text-xl font-bold">how does the shop work?</p>
<p class="mb-6 text-xl font-bold">frequently asked questions</p>
<p class="mb-6">
here's where it gets interesting. each item in the shop has a <strong>base probability</strong
<div class="grid gap-4 sm:grid-cols-2">
<div
class="rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed"
>
(like 50%). when you "try your luck," you spend scraps and roll the dice<Superscript
number={11}
tooltip="totally not gambling"
/>. if you roll under your probability, you win the item!
</p>
<p class="mb-2 text-lg font-bold">who is eligible?</p>
<p class="text-gray-600">
scraps is for high schoolers! you need to be 13-18 years old to participate.
</p>
</div>
<p class="mb-6">
but wait, there's more! you can visit <strong>the refinery</strong> to boost your odds. spend scraps
to increase your probability for any item. the catch? each upgrade costs more than the last.
</p>
<div
class="rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed"
>
<p class="mb-2 text-lg font-bold">how much does it cost?</p>
<p class="text-gray-600">
100% free - all the prizes are donated to us or paid for by hack club!
</p>
</div>
<p class="mb-6">
so you have a choice: <strong>gamble at low odds</strong> and maybe get lucky, or
<strong>invest in the refinery</strong> until your chances are high enough that winning is almost
guaranteed. the strategy is up to you!
</p>
<div
class="rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed"
>
<p class="mb-2 text-lg font-bold">what types of projects count?</p>
<p class="text-gray-600">
all kinds of technical projects as long as it's open-source on github!
</p>
</div>
<p class="mb-6">
one catch: <strong
>every time you win an item, your base probability for that item gets halved</strong
>. so winning becomes harder each time, but the refinery is always there to help you boost
your odds back up!
</p>
<div
class="rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed"
>
<p class="mb-2 text-lg font-bold">how many projects can i build?</p>
<p class="text-gray-600">there's no limit! build as much as you can!</p>
</div>
<div
class="rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed sm:col-span-2"
>
<p class="mb-2 text-lg font-bold">is this legit?</p>
<p class="text-gray-600">
yup! hack club has run programs like <a
href="https://highseas.hackclub.com/"
target="_blank"
rel="noopener noreferrer"
class="cursor-pointer underline hover:no-underline">high seas</a
>
and
<a
href="https://summer.hackclub.com/"
target="_blank"
rel="noopener noreferrer"
class="cursor-pointer underline hover:no-underline">summer of making</a
> — both gave out similar prizes for building personal projects.
</p>
</div>
</div>
</div>
</div>

66
frontend/src/routes/dashboard/+page.svelte
View file

@ -117,6 +117,72 @@
<!-- News Carousel -->
<NewsCarousel />
<!-- FAQ Section -->
<div class="mt-12">
<h2 class="mb-6 text-3xl font-bold">faq</h2>
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div
class="rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed"
>
<p class="mb-2 text-lg font-bold">how does the shop work?</p>
<p class="text-gray-600">
spend scraps to roll for prizes. each item has a probability of winning - boost your odds
in the refinery!
</p>
</div>
<div
class="rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed"
>
<p class="mb-2 text-lg font-bold">what is hackatime?</p>
<p class="text-gray-600">
<a
href="https://hackatime.hackclub.com"
target="_blank"
rel="noopener noreferrer"
class="underline hover:no-underline">hackatime</a
> is hack club's time tracking tool that automatically logs your coding hours.
</p>
</div>
<div
class="rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed"
>
<p class="mb-2 text-lg font-bold">what is the refinery?</p>
<p class="text-gray-600">
spend scraps to increase your probability of winning an item. each upgrade boosts your
chances!
</p>
</div>
<div
class="rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed"
>
<p class="mb-2 text-lg font-bold">what are project tiers?</p>
<p class="text-gray-600">
tiers 1-4 based on complexity. tier 1 = 0.8x, tier 2 = 1x, tier 3 = 1.25x, tier 4 = 1.5x
multiplier.
</p>
</div>
<div
class="rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed"
>
<p class="mb-2 text-lg font-bold">what happens if i lose a roll?</p>
<p class="text-gray-600">
you receive consolation scrap paper. your refinery upgrades are kept, so try again!
</p>
</div>
<a
href="/faq"
class="flex items-center justify-center rounded-2xl border-4 border-black bg-white p-6 transition-all hover:border-dashed"
>
<p class="text-lg font-bold">more questions? →</p>
</a>
</div>
</div>
</div>
<CreateProjectModal

107
frontend/src/routes/faq/+page.svelte Normal file
View file

@ -0,0 +1,107 @@
<script lang="ts">
import { ChevronDown } from '@lucide/svelte';
interface FAQItem {
question: string;
answer: string;
}
const faqs: FAQItem[] = [
{
question: 'what is scraps?',
answer: 'scraps is a hack club program where you earn scraps by building projects and spending time coding. you can then spend your scraps in the shop to test your luck and win prizes from hack club hq!'
},
{
question: 'how do i earn scraps?',
answer: 'you earn scraps by submitting projects you\'ve built. each project is reviewed by our team, and you receive scraps based on the hours you\'ve spent working on it. connect your <a href="https://hackatime.hackclub.com" target="_blank" rel="noopener noreferrer" class="underline hover:no-underline">hackatime</a> account to automatically track your coding hours.'
},
{
question: 'what is hackatime?',
answer: '<a href="https://hackatime.hackclub.com" target="_blank" rel="noopener noreferrer" class="underline hover:no-underline">hackatime</a> is hack club\'s time tracking tool that automatically logs your coding hours. connect it to your projects so we can see how much time you\'ve spent building. visit <a href="https://hackatime.hackclub.com" target="_blank" rel="noopener noreferrer" class="underline hover:no-underline">hackatime.hackclub.com</a> to get started.'
},
{
question: 'how does the shop work?',
answer: 'in the shop, you spend scraps to roll for prizes. each item has a base probability of winning. if you don\'t win, you get consolation scrap paper. the cost to roll depends on the item\'s rarity.'
},
{
question: 'what is the refinery?',
answer: 'the refinery lets you spend scraps to increase your probability of winning an item. each upgrade boosts your chances, but costs increase with each upgrade. it\'s a way to improve your odds before rolling.'
},
{
question: 'what are project tiers?',
answer: 'projects are assigned tiers (1-4) based on complexity and quality. higher tiers earn more scraps per hour: tier 1 = 0.8x, tier 2 = 1x, tier 3 = 1.25x, tier 4 = 1.5x multiplier.'
},
{
question: 'how long does review take?',
answer: 'project reviews typically take a few days. our team reviews each submission to verify the work and assign an appropriate tier. you\'ll be notified when your project is approved.'
},
{
question: 'what happens if i lose a roll?',
answer: 'if you lose a roll, you receive consolation scrap paper as a small prize. your refinery upgrades are kept, so you can try again with improved odds. keep building projects to earn more scraps!'
},
{
question: 'can i submit any project?',
answer: 'projects should be original work you\'ve built. they need a github repo, description, and tracked hours via <a href="https://hackatime.hackclub.com" target="_blank" rel="noopener noreferrer" class="underline hover:no-underline">hackatime</a>. both new projects and improvements to existing ones count!'
},
{
question: 'how do i get started?',
answer: 'sign in with your hack club account, connect <a href="https://hackatime.hackclub.com" target="_blank" rel="noopener noreferrer" class="underline hover:no-underline">hackatime</a>, and start building! when you\'re ready, submit your project for review. once approved, you\'ll receive scraps based on your hours.'
}
];
let openIndex = $state<number | null>(null);
function toggle(index: number) {
openIndex = openIndex === index ? null : index;
}
</script>
<svelte:head>
<title>faq - scraps</title>
</svelte:head>
<div class="mx-auto max-w-4xl px-6 pt-24 pb-24 md:px-12">
<div class="mb-12 text-center">
<h1 class="mb-4 text-4xl font-bold md:text-5xl">faq</h1>
<p class="text-lg text-gray-600">frequently asked questions about scraps</p>
</div>
<div class="space-y-4">
{#each faqs as faq, i}
<div class="rounded-2xl border-4 border-black transition-all hover:border-dashed">
<button
onclick={() => toggle(i)}
class="flex w-full cursor-pointer items-center justify-between p-6 text-left"
>
<span class="text-lg font-bold">{faq.question}</span>
<ChevronDown
size={24}
class="shrink-0 transition-transform duration-200 {openIndex === i
? 'rotate-180'
: ''}"
/>
</button>
{#if openIndex === i}
<div class="border-t-4 border-black px-6 py-4">
<p class="text-gray-600">{@html faq.answer}</p>
</div>
{/if}
</div>
{/each}
</div>
<div class="mt-12 rounded-2xl border-4 border-black bg-gray-50 p-8 text-center">
<h2 class="mb-4 text-2xl font-bold">still have questions?</h2>
<p class="mb-6 text-gray-600">
reach out to us on the hack club slack in the #scraps channel
</p>
<a
href="https://slack.hackclub.com/"
target="_blank"
rel="noopener noreferrer"
class="inline-block cursor-pointer rounded-full bg-black px-8 py-3 font-bold text-white transition-all duration-200 hover:bg-gray-800"
>
join hack club slack
</a>
</div>
</div>

2
frontend/src/routes/refinery/+page.svelte
View file

@ -100,7 +100,7 @@
{item.effectiveProbability}%
</span>
<span class="text-xs text-gray-600 sm:text-sm">
({item.baseProbability}% + {item.userBoostPercent}%)
({item.baseProbability}% + {item.userBoostPercent}%{#if item.adjustedBaseProbability < item.baseProbability}<span class="text-red-500"> - {item.baseProbability - item.adjustedBaseProbability}% from previous buy</span>{/if})
</span>
</div>
</div>