remove backup and th main branch is now the backup and the actual work is in a diffrent branch
This commit is contained in:
GitHub
parent
d5d99c6f4f
commit
52aab530e3
16 changed files with 0 additions and 497 deletions
|
|
@ -1,26 +0,0 @@
|
|||
<script>
|
||||
import UseDemoQuestions from "./components/buttons/UseDemoQuestions.svelte";
|
||||
import NewQuestion from "./components/buttons/NewQuestion.svelte";
|
||||
import StartGame from "./components/buttons/StartGame.svelte";
|
||||
import Question from "./components/Questions/question.svelte";
|
||||
import { questions, Wait } from "./logic/GameCreateData.svelte.js";
|
||||
import WaitStartGame from "./components/buttons/WaitStartGame.svelte";
|
||||
import GenerateQuetionsUsingAi from "./components/buttons/GenerateQuetionsUsingAI.svelte";
|
||||
</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">
|
||||
<div class="flex gap-3"><UseDemoQuestions /> <GenerateQuetionsUsingAi /></div>
|
||||
{#each questions.v as question, index}
|
||||
<Question {index} />
|
||||
{/each}
|
||||
<div class="flex gap-3">
|
||||
<NewQuestion />
|
||||
{#if Wait.v == false}
|
||||
<StartGame />
|
||||
{:else}
|
||||
<WaitStartGame />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script>
|
||||
import { questions } from '../../logic/GameCreateData.svelte.js';
|
||||
|
||||
let props = $props();
|
||||
let questionsIndex = props.questionsIndex;
|
||||
let index = props.answersIndex;
|
||||
</script>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
value={index}
|
||||
name={index.toString()}
|
||||
bind:group={questions.v[questionsIndex].correctAnswer}
|
||||
class="input"
|
||||
/>
|
||||
|
||||
<input
|
||||
placeholder="Option {index + 1}"
|
||||
bind:value={questions.v[questionsIndex].answers[index]}
|
||||
class="w-[500px] rounded-lg bg-gray-800 p-1 text-center text-white"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<script>
|
||||
import DeleteQuestion from "../buttons/DeleteQuestion.svelte";
|
||||
import GenerateOptionsUsingAI from "../buttons/GenerateOptionsUsingAI.svelte";
|
||||
import Answers from "./answers.svelte";
|
||||
import { questions } from "../../logic/GameCreateData.svelte.js";
|
||||
import { UpLoadFiles } from "../../logic/UpLoadFiles.js";
|
||||
|
||||
let props = $props();
|
||||
let index = props.index;
|
||||
|
||||
let files = $state();
|
||||
</script>
|
||||
|
||||
<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{index + 1}.</h1>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={questions.v[index].name}
|
||||
placeholder="Question {index + 1}"
|
||||
class="h-fit w-[500px] rounded-xl bg-gray-800 p-1 text-center text-2xl text-white"
|
||||
/>
|
||||
<select
|
||||
bind:value={questions.v[index].answers.length}
|
||||
onchange={(e) => {
|
||||
const newLength = questions.v[index].answers.length;
|
||||
const currentAnswers = questions.v[index].answers;
|
||||
|
||||
if (newLength > currentAnswers.length) {
|
||||
// Add more answers
|
||||
while (questions.v[index].answers.length < newLength) {
|
||||
questions.v[index].answers.push("");
|
||||
}
|
||||
} else if (newLength < currentAnswers.length) {
|
||||
// Remove excess answers
|
||||
questions.v[index].answers = currentAnswers.slice(0, newLength);
|
||||
}
|
||||
}}
|
||||
class="h-fit rounded-xl bg-gray-800 p-1 text-center text-white"
|
||||
>
|
||||
<option disabled selected>Options</option>
|
||||
{#each Array(7) as _, i}
|
||||
<option value={i + 2}>{i + 2}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<select
|
||||
bind:value={questions.v[index].timeLimit}
|
||||
class="h-fit rounded-xl bg-gray-800 p-1 text-center text-white"
|
||||
>
|
||||
<option disabled selected>Time Limit</option>
|
||||
<option value={null}>infinite</option>
|
||||
<option value={5}>5 sec</option>
|
||||
<option value={10}>10 sec</option>
|
||||
<option value={15}>15 sec</option>
|
||||
<option value={30}>30 sec</option>
|
||||
<option value={60}>1 min</option>
|
||||
<option value={120}>2 min</option>
|
||||
<option value={300}>5 min</option>
|
||||
</select>
|
||||
<DeleteQuestion {index} />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each questions.v[index].answers as _, answersIndex}
|
||||
<Answers questionsIndex={index} {answersIndex} />
|
||||
{/each}
|
||||
</div>
|
||||
<GenerateOptionsUsingAI {index} />
|
||||
<input
|
||||
type="file"
|
||||
onchange={async () => {
|
||||
questions.v[index].media = await UpLoadFiles(files[0]);
|
||||
}}
|
||||
bind:files
|
||||
accept="image/*,video/*"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script>
|
||||
import { DeleteQuestion } from '../../logic/GameCreateData.svelte.js';
|
||||
|
||||
let props = $props();
|
||||
</script>
|
||||
|
||||
<button
|
||||
onclick={() => DeleteQuestion(props.index)}
|
||||
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
|
||||
>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script>
|
||||
import { GenerateOptionsUsingAI } from "../../logic/GenerateOptionsUsingAI.js";
|
||||
import { questions } from "../../logic/GameCreateData.svelte.js";
|
||||
|
||||
let props = $props();
|
||||
let index = props.index;
|
||||
</script>
|
||||
|
||||
{#if questions.v[index].answers.every((answer) => answer === "")}
|
||||
<button
|
||||
onclick={() => {
|
||||
GenerateOptionsUsingAI(index);
|
||||
}}
|
||||
class="mt-1 mb-1 flex h-fit cursor-pointer items-center justify-center gap-2 rounded-xl bg-blue-700 p-2 transition-all hover:scale-110 hover:-rotate-5"
|
||||
>
|
||||
<i class="nf nf-cod-sparkle"></i>
|
||||
Generate Options using AI
|
||||
</button>
|
||||
{/if}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<script>
|
||||
import { GenerateQuestionsUsingAI } from "../../logic/GenerateQuestionsUsingAI.js";
|
||||
import { questions } from "../../logic/GameCreateData.svelte.js";
|
||||
</script>
|
||||
|
||||
{#if questions.v.length === 0 || (questions.v.length === 1 && questions.v[0].name === "" && questions.v[0].answers.every((answer) => answer === "") && questions.v[0].correctAnswer === undefined)}
|
||||
<button
|
||||
onclick={GenerateQuestionsUsingAI}
|
||||
class="-mt-5 mb-3 flex h-fit cursor-pointer items-center justify-center gap-2 rounded-xl bg-blue-700 p-2 transition-all hover:scale-110 hover:-rotate-5"
|
||||
>
|
||||
<i class="nf nf-cod-sparkle"></i>
|
||||
Generate questions using AI
|
||||
</button>
|
||||
{/if}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script>
|
||||
import { AddQuestion } from '../../logic/GameCreateData.svelte.js';
|
||||
</script>
|
||||
|
||||
<button
|
||||
onclick={() => AddQuestion()}
|
||||
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
|
||||
>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<script>
|
||||
import { startGame } from '../../logic/StartGame.js';
|
||||
</script>
|
||||
|
||||
<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
|
||||
>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script>
|
||||
import { SetQuestionsToDemoQuestions } from '../../logic/GameCreateData.svelte.js';
|
||||
</script>
|
||||
|
||||
<button
|
||||
onclick={() => SetQuestionsToDemoQuestions()}
|
||||
class="-mt-5 mb-3 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
|
||||
>Use demo questions</button
|
||||
>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<script>
|
||||
import { startGame } from "../../logic/StartGame.js";
|
||||
</script>
|
||||
|
||||
<button
|
||||
onclick={startGame}
|
||||
class="flex h-fit cursor-pointer items-center justify-center gap-1 rounded-xl bg-gray-700 p-2 transition-all hover:scale-110"
|
||||
><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
|
||||
>Wait for game to be created</button
|
||||
>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
|
||||
import { DefaultQuestions } from "$lib/config.js";
|
||||
import toast from "svelte-5-french-toast";
|
||||
|
||||
export let Wait = $state({ v: false });
|
||||
export let questions = $state({
|
||||
v: [
|
||||
{
|
||||
name: "",
|
||||
answers: ["", "", "", ""],
|
||||
correctAnswer: undefined,
|
||||
timeLimit: 30,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export function SetQuestionsToDemoQuestions() {
|
||||
questions.v = DefaultQuestions;
|
||||
}
|
||||
|
||||
export function AddQuestion() {
|
||||
questions.v.push({
|
||||
name: "",
|
||||
answers: ["", "", "", ""],
|
||||
correctAnswer: undefined,
|
||||
timeLimit: 30,
|
||||
});
|
||||
}
|
||||
|
||||
export function DeleteQuestion(index) {
|
||||
if (questions.v.length > 1) {
|
||||
if (confirm("Are you sure you want to delete this question? You cant undo this.")) {
|
||||
questions.v.splice(index, 1);
|
||||
}
|
||||
} else {
|
||||
toast.error("You need at least one question.");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { questions } from "./GameCreateData.svelte.js";
|
||||
import { AiPrompts } from "$lib/config.js";
|
||||
import toast from "svelte-5-french-toast";
|
||||
|
||||
export function GenerateOptionsUsingAI(index) {
|
||||
if (!questions.v[index].name) {
|
||||
toast.error("Please enter a question to generate options.");
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchOptions = async () => {
|
||||
const response = await fetch("https://ai.hackclub.com/chat/completions", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: AiPrompts.GenerateOptionsUsingAI.replace(
|
||||
"[question]",
|
||||
questions.v[index].name,
|
||||
),
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
let question = questions.v[index].name;
|
||||
questions.v[index] = JSON.parse(data.choices[0].message.content);
|
||||
questions.v[index].name = question;
|
||||
};
|
||||
|
||||
toast.promise(
|
||||
fetchOptions(),
|
||||
{
|
||||
loading: "Generating options...",
|
||||
success: "Options generated!",
|
||||
error: (err) => "Error: " + (err?.message || err),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import { questions } from "./GameCreateData.svelte.js";
|
||||
import { AiPrompts } from "$lib/config.js";
|
||||
import toast from "svelte-5-french-toast";
|
||||
|
||||
export function GenerateQuestionsUsingAI() {
|
||||
let topic = window.prompt(
|
||||
"What is the topic of the questions?\nand the number of questions in the topic?",
|
||||
);
|
||||
|
||||
if (!topic) {
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchQuestions = async () => {
|
||||
const response = await fetch("https://ai.hackclub.com/chat/completions", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: AiPrompts.GenerateQuestionsUsingAI.replace("[topic]", topic),
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
questions.v = JSON.parse(data.choices[0].message.content);
|
||||
};
|
||||
|
||||
toast.promise(
|
||||
fetchQuestions(),
|
||||
{
|
||||
loading: "Generating questions...",
|
||||
success: "Questions added!",
|
||||
error: (err) => "Error: " + err.message || err,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
import { supabase } from "$lib/supabase";
|
||||
import toast from "svelte-5-french-toast";
|
||||
import { Wait } from "./GameCreateData.svelte.js";
|
||||
|
||||
export async function createGame(questions, gamePin) {
|
||||
// Insert game
|
||||
const insertGamePromise = supabase.from("games").insert({
|
||||
creator: "anonymous",
|
||||
creationdate: new Date().toISOString(),
|
||||
status: "lobby",
|
||||
gamepin: gamePin,
|
||||
});
|
||||
|
||||
const { data: gameData, error: gameError } = await toast.promise(insertGamePromise, {
|
||||
loading: "Creating game...",
|
||||
success: "Game created!",
|
||||
error: (err) =>
|
||||
"Failed to create game: " + (err?.message || "Unknown error") + "\n\nPlease try again.",
|
||||
});
|
||||
|
||||
if (gameError) {
|
||||
Wait.v = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare questions and answers for batch insertion
|
||||
const questionsData = questions.map((q) => ({
|
||||
gameid: gamePin,
|
||||
questionstext: q.name,
|
||||
correctanswer: q.correctAnswer,
|
||||
timelimit: q.timeLimit,
|
||||
media: q.media || null,
|
||||
}));
|
||||
|
||||
const insertQuestionsPromise = supabase.from("questions").insert(questionsData).select("id");
|
||||
|
||||
const { data: questionsResult, error: questionsError } = await toast.promise(
|
||||
insertQuestionsPromise,
|
||||
{
|
||||
loading: "Inserting questions...",
|
||||
success: "Questions inserted!",
|
||||
error: (err) =>
|
||||
"Failed to insert questions: " +
|
||||
(err?.message || "Unknown error") +
|
||||
"\n\nPlease try again.",
|
||||
},
|
||||
);
|
||||
|
||||
if (questionsError) {
|
||||
Wait.v = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const answersData = [];
|
||||
questionsResult.forEach((question, index) => {
|
||||
questions[index].answers.forEach((answer) => {
|
||||
answersData.push({
|
||||
questionid: question.id,
|
||||
content: answer,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const insertAnswersPromise = supabase.from("answers").insert(answersData);
|
||||
|
||||
const { error: answersError } = await toast.promise(insertAnswersPromise, {
|
||||
loading: "Inserting answers...",
|
||||
success: "Answers inserted!",
|
||||
error: (err) =>
|
||||
"Failed to insert answers: " + (err?.message || "Unknown error") + "\n\nPlease try again.",
|
||||
});
|
||||
|
||||
if (answersError) {
|
||||
Wait.v = false
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = `/kahootclone/host?gamepin=${gamePin}`;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { createGame } from "./InsertGameInDB.js";
|
||||
import { questions,Wait } from "./GameCreateData.svelte.js";
|
||||
import toast from "svelte-5-french-toast";
|
||||
|
||||
export async function startGame() {
|
||||
if (questions.v.some((q) => q.name === "")) return toast.error("Please fill all questions");
|
||||
if (questions.v.some((q) => q.answers.some((a) => a === ""))) return toast.error("Fill all options");
|
||||
if (questions.v.some((q) => q.correctAnswer === undefined))
|
||||
return toast.error("Select correct answers");
|
||||
|
||||
const gamePin = Math.floor(Math.random() * 1000000)
|
||||
.toString()
|
||||
.padStart(6, "0");
|
||||
|
||||
Wait.v = true;
|
||||
|
||||
await createGame(questions.v, gamePin);}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import toast from "svelte-5-french-toast";
|
||||
import { supabase } from "$lib/supabase.js";
|
||||
|
||||
export async function UpLoadFiles(file) {
|
||||
if (!file) {
|
||||
toast.error("Please select a file to upload first.");
|
||||
return;
|
||||
}
|
||||
|
||||
const fileExt = file.name.split(".").pop();
|
||||
const fileName = `${Date.now()}.${fileExt}`;
|
||||
const filePath = `${fileName}`;
|
||||
|
||||
const uploadPromise = supabase.storage.from("useruploadedcontent").upload(filePath, file);
|
||||
|
||||
const result = await toast.promise(uploadPromise, {
|
||||
loading: "Uploading...",
|
||||
success: "Upload successful!",
|
||||
error: (error) => `Upload failed. ${error.message} Please try again.`,
|
||||
});
|
||||
|
||||
if (result.error) {
|
||||
toast.error("Upload error:"+ result.error.message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Retrieve public URL
|
||||
const { data: publicData } = supabase.storage.from("useruploadedcontent").getPublicUrl(filePath);
|
||||
|
||||
return publicData.publicUrl;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue