hackathon/web_src/lib/components/QuestionListing.svelte

<script lang="ts">
	import type { Question } from '$lib/pb/all.pb';
	export let q: Question;

	type Status = 'available' | 'partial' | 'full';

	let status: Status = 'available';
	let solved = 0;
	$: {
		if (q.part1.completed && q.part2.completed) {
			status = 'full';
			solved = 2;
		} else if (q.part1.completed || q.part2.completed) {
			status = 'partial';
			solved = 1;
		} else {
			status = 'available';
			solved = 0;
		}
	}
</script>

<a class={`question h-24 border-2 ${status}`} href={`/dashboard/question/${q.id}`}>
	<span class="title">{q.title} - {solved}/2</span>
	<div class="flex justify-between">
		<span class="points">Points: {q.part1.pointsWorth + q.part2.pointsWorth}</span>
	</div>
</a>

<style lang="postcss">
	.question {
		@apply flex justify-between flex-col p-4 w-full rounded-md shadow-md border-2;
		@apply cursor-pointer transition;
	}

	.available {
		@apply border-gray-400 hover:bg-gray-100;
		@apply text-gray-600;
	}

	.partial {
		@apply border-yellow-400 bg-yellow-50 hover:bg-yellow-100;
		@apply text-yellow-700;
	}

	.full {
		@apply border-green-400 bg-green-50 hover:bg-green-100;
		@apply text-green-700;
	}

	.title {
		@apply font-bold uppercase;
	}
</style>