npm create svelte@latest init-giveaway-roulette

// ./src/lib/constants.js

export const APPWRITE_ENDPOINT = 'https://cloud.appwrite.io/v1';

export const APPWRITE_PROJECT = '<PROJECT_ID>';

export const DATABASE_NAME = '<DATABASE_ID>';

export const COLLECTION_NAME = '<COLLECTION_ID>';

// ./src/lib/appwrite.js

import { Account, Client, Databases } from 'appwrite';
import { APPWRITE_ENDPOINT, APPWRITE_PROJECT } from './constants';

export const client = new Client();

client.setEndpoint(APPWRITE_ENDPOINT).setProject(APPWRITE_PROJECT);

export const account = new Account(client);

export const database = new Databases(client);

// ./src/lib/user.js

import { account } from './appwrite';

export const user = {
	login: async () => {
		account.createOAuth2Session(
			'discord',
			`https://${window.location.hostname}/success`,
			`https://${window.location.hostname}/failure`
		);
	},

	get: async () => {
		return await account.get();
	}
};

// .src/routes/+page.svelte

<script>
	import { user } from '$lib/user';
	import InitHeading from '../components/InitHeading.svelte';
	import NavBar from '../components/NavBar.svelte';

	function login() {
		user.login();
	}
</script>

<NavBar />
<section class="u-flex-vertical">
	<div class="container u-flex-vertical">
		<InitHeading heading="Giveaway" />

		<img src="/giveaway.png" alt="Plain black T-shirt with the text Init and a keyboard branded with the Appwrite logo on the Escape key" />

		<p class="heading-level-6 u-margin-32">
			Login with Discord and get a chance to win some amazing gifts!
		</p>

		<button class="button is-big u-margin-32" on:click={login}>
			<span class="icon-discord"></span>
			Sign in with Discord
		</button>
	</div>
</section>

// ./src/lib/database.js

import { Query, ID } from 'appwrite';
import { database } from './appwrite';
import { COLLECTION_NAME, DATABASE_NAME } from './constants';

export const db = {
	list: async () => {
		var entries = await database.listDocuments(DATABASE_NAME, COLLECTION_NAME, [
			Query.limit(500),
			Query.select(['discordName'])
		]);

		var options = [];

		entries.documents.forEach((entry) => {
			options.push({ label: entry.discordName });
		});

		return { options: options, total: entries.total };
	},

	add: async (discordName, email) => {
		try {
			await database.createDocument(DATABASE_NAME, COLLECTION_NAME, ID.unique(), {
				discordName: discordName,
				email: email
			});
			console.log('Added to the raffle');
		} catch (error) {
			console.log(error.message);
		}
	}
};

// .src/routes/success/+page.svelte

<script>
	import { user } from '$lib/user';
	import { db } from '$lib/database';
	import { onMount } from 'svelte';
	import NavBar from '../../components/NavBar.svelte';

	let userId = '';

	async function getUserId() {
		var currentUser = await user.get();
		await db.add(currentUser.name, currentUser.email);
		userId = currentUser.name;
	}

	onMount(() => {
		getUserId();
	});
</script>

<NavBar />

<div class="container u-flex-vertical">
	<h1 class="heading-level-1 u-margin-32 u-normal">Success!</h1>
	<p class="body-text-1 u-margin-32 u-normal">Thanks for participating in the giveaway, {userId}</p>
</div>

// .src/routes/giveaway/+page.js

import { db } from '$lib/database';

export async function load() {
	var dbResponse = await db.list();

	return {
		entries: dbResponse.options,
		total: dbResponse.total
	};
}

// .src/routes/giveaway/+page.svelte

<script>
	// @ts-nocheck

	import { Wheel } from 'spin-wheel';
	import { onMount } from 'svelte';
	import InitHeading from '../../components/InitHeading.svelte';
	import * as easing from 'easing-utils';
	import { client } from '$lib/appwrite';
	import { DATABASE_NAME, COLLECTION_NAME } from '$lib/constants';

	export let data;

	let wheel = null;

	var wheelContainer = null;

	var props = {
		items: data.entries,
		itemLabelRadiusMax: 0.5
	};

	let heading = `${props.items.length} people are registered!`;

	var unsubscribe = null;

	// Spins the wheel
	async function spin() {
		unsubscribe();
		var winningIndex = Math.floor(Math.random() * props.items.length);
		var duration = 5000;
		var spinToCenter = false;
		var numberOfRevolutions = 5;
		var direction = 1;
		var easingFunction = easing.easeOutCubic;

		wheel.spinToItem(
			winningIndex,
			duration,
			spinToCenter,
			numberOfRevolutions,
			direction,
			easingFunction
		);

		wheel.onRest = (e) => {
			var winner = props.items[wheel.getCurrentIndex()].label;
			heading = `Congratulations to the winner: ${winner}!`;
		};
	}

	// Removes the wheel before recreating
	function removeWheel() {
		while (wheelContainer.hasChildNodes()) {
			wheelContainer.removeChild(wheelContainer.firstChild);
		}
	}

	// Creates the wheel
	function createWheel() {
		wheel = new Wheel(wheelContainer, props);
		wheel.radius = 0.95;
		wheel.isInteractive = false;
		wheel.overlayImage = '/picker.png';
		wheel.itemBackgroundColors = ['#27272A'];
		wheel.itemLabelColors = ['#FFFFFF'];
		wheel.itemLabelFont = 'sans-serif';
		wheel.itemLabelFontSize = 20;
		wheel.borderColor = '#3d3d3f';
		wheel.lineColor = '#3d3d3f';
	}

	// Uses Appwrite Realtime to get newly created documents and regenerate the wheel
	function subscribe() {
		return client.subscribe(
			`databases.${DATABASE_NAME}.collections.${COLLECTION_NAME}.documents`,
			(response) => {
				console.log(response);
				props.items.push({ label: response.payload.discordName });
				heading = `${props.items.length} people are registered!`;
				removeWheel();
				createWheel();
			}
		);
	}

	onMount(() => {
		if(unsubscribe === null) {
			unsubscribe = subscribe();
		}
		wheelContainer = document.querySelector('.wheel-container');
		createWheel();
	});
</script>

<section class="u-flex-vertical u-gap-16">
	<InitHeading {heading} />
	<div class="wheel u-flex-vertical">
		<div class="wheel-container u-flex-vertical"></div>
	</div>
	<button class="button is-big" on:click={spin}>Spin The Wheel</button>
</section>