made the ui, no funtionality yet! first time using tailwind css. this tooooolllllkkk WAY TOOO LONG
This commit is contained in:
parent
e579802394
commit
5eb9e9d4f6
5 changed files with 162 additions and 2 deletions
|
|
@ -3,4 +3,8 @@
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="h-full bg-black">{@render children()}</div>
|
<div class="h-full text-white">{@render children()}</div>
|
||||||
|
|
||||||
|
<style>:root {
|
||||||
|
background-color: black;
|
||||||
|
}</style>
|
||||||
|
|
@ -1 +1,19 @@
|
||||||
<h1 class="text-red-500 underline text-[100px] font-mono">testing tailwind</h1>
|
<script>
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="bg-grey-900 flex h-full items-center justify-center">
|
||||||
|
<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
|
||||||
|
<h1 class="m-[0] text-6xl">DaKahootClone</h1>
|
||||||
|
<p class="m-[0] mb-2 text-lg text-gray-400">The best eveer kahoot clone.</p>
|
||||||
|
<button
|
||||||
|
on:click={() => goto('/join')}
|
||||||
|
class="cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
||||||
|
>Join a game</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="cursor-pointer rounded-full bg-blue-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
||||||
|
on:click={() => goto('/create')}>Create and Host a game</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
119
src/routes/create/+page.svelte
Normal file
119
src/routes/create/+page.svelte
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
<script>
|
||||||
|
let questions = $state([
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
answers: ['', '', '', ''],
|
||||||
|
correctAnswer: undefined
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
function startGame() {
|
||||||
|
if (questions.some((question) => question.name === '')) {
|
||||||
|
alert('Please fill in the question for each question.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
questions.some((question) =>
|
||||||
|
question.answers.some((answer) => answer === '')
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
alert('Please fill in each of the options for each question.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (questions.some((question) => question.correctAnswer === undefined)) {
|
||||||
|
alert('Please select a correct answer for each question.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
alert('Game started!');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="bg-grey-900 flex justify-center p-5">
|
||||||
|
<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
|
||||||
|
{#each questions as question, i}
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div
|
||||||
|
class="mb-3 flex flex-col items-center justify-center gap-1 rounded-2xl bg-gray-600 p-2"
|
||||||
|
>
|
||||||
|
<div class="flex h-fit items-center gap-3">
|
||||||
|
<h1 class="mt-2 mb-3 text-2xl">Q{i + 1}.</h1>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
bind:value={question.name}
|
||||||
|
placeholder="Question {i + 1}"
|
||||||
|
class="h-fit w-[500px] rounded-xl bg-gray-800 p-1 text-center text-2xl text-white"
|
||||||
|
/><button
|
||||||
|
onclick={() => {
|
||||||
|
if (questions.length > 1) {
|
||||||
|
if (
|
||||||
|
confirm('Are you sure you want to delete this question? You cant undo this.')
|
||||||
|
) {
|
||||||
|
questions.splice(i, 1);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert('You need at least one question.');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
class="flex h-fit cursor-pointer items-center justify-center rounded-xl bg-red-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
||||||
|
><svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
height="24px"
|
||||||
|
viewBox="0 -960 960 960"
|
||||||
|
width="24px"
|
||||||
|
fill="#FFFFFF"
|
||||||
|
><path
|
||||||
|
d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
|
||||||
|
/></svg
|
||||||
|
>Delete question</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
{#each question.answers as answer, i2}
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<input type="radio" value={i2} name={i} bind:group={question.correctAnswer} /><input
|
||||||
|
placeholder="Option {i2 + 1}"
|
||||||
|
bind:value={question.answers[i2]}
|
||||||
|
class="rounded-lg bg-gray-800 p-1 text-center text-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<button
|
||||||
|
onclick={() => {
|
||||||
|
questions.push({
|
||||||
|
name: '',
|
||||||
|
answers: ['', '', '', ''],
|
||||||
|
correctAnswer: undefined
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
class="flex h-fit cursor-pointer items-center justify-center rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
||||||
|
><svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
height="24px"
|
||||||
|
viewBox="0 -960 960 960"
|
||||||
|
width="24px"
|
||||||
|
fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg
|
||||||
|
>New question</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onclick={startGame}
|
||||||
|
class="flex h-fit cursor-pointer items-center justify-center gap-1 rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
||||||
|
><svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
height="24px"
|
||||||
|
viewBox="0 -960 960 960"
|
||||||
|
width="24px"
|
||||||
|
fill="#FFFFFF"
|
||||||
|
><path
|
||||||
|
d="M560-360q17 0 29.5-12.5T602-402q0-17-12.5-29.5T560-444q-17 0-29.5 12.5T518-402q0 17 12.5 29.5T560-360Zm-30-128h60q0-29 6-42.5t28-35.5q30-30 40-48.5t10-43.5q0-45-31.5-73.5T560-760q-41 0-71.5 23T446-676l54 22q9-25 24.5-37.5T560-704q24 0 39 13.5t15 36.5q0 14-8 26.5T578-596q-33 29-40.5 45.5T530-488ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"
|
||||||
|
/></svg
|
||||||
|
>Start Quiz</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
19
src/routes/join/+page.svelte
Normal file
19
src/routes/join/+page.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<script>
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="bg-grey-900 flex h-full items-center justify-center">
|
||||||
|
<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
|
||||||
|
<h1 class="m-[0] mb-3 text-5xl">Join a game here</h1>
|
||||||
|
<input placeholder="Enter game pin" class="rounded-lg bg-gray-800 p-2 text-center text-white" />
|
||||||
|
<input
|
||||||
|
placeholder="Enter your name"
|
||||||
|
class="rounded-lg bg-gray-800 p-2 text-center text-white"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
|
||||||
|
>Join the game</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Loading…
Add table
Add a link
Reference in a new issue