From 7762f6632ead3be7ea2e7cbd6c97ef92f860e468 Mon Sep 17 00:00:00 2001 From: Mawoka Date: Mon, 26 Sep 2022 18:26:22 +0200 Subject: [PATCH] :sparkles: Added custom background-color --- classquiz/db/models.py | 3 + classquiz/routers/editor.py | 1 + classquiz/routers/quiz.py | 1 + classquiz/socket_server/__init__.py | 26 +-- frontend/src/app.css | 6 + frontend/src/lib/admin.svelte | 9 +- frontend/src/lib/editor.svelte | 2 +- frontend/src/lib/editor/settings-card.svelte | 48 +++++- frontend/src/lib/quiz_types.ts | 2 + frontend/src/routes/admin/+page.svelte | 150 +++++++++--------- frontend/src/routes/play/+page.svelte | 84 +++++----- .../400f8ed06c48_added_background_color.py | 29 ++++ 12 files changed, 239 insertions(+), 122 deletions(-) create mode 100644 migrations/versions/400f8ed06c48_added_background_color.py diff --git a/classquiz/db/models.py b/classquiz/db/models.py index 93f4338..dbc41ba 100644 --- a/classquiz/db/models.py +++ b/classquiz/db/models.py @@ -111,6 +111,7 @@ class QuizInput(BaseModel): title: str description: str cover_image: str | None + background_color: str | None questions: list[QuizQuestion] @@ -125,6 +126,7 @@ class Quiz(ormar.Model): questions: Json[list[QuizQuestion]] = ormar.JSON(nullable=False) imported_from_kahoot: Optional[bool] = ormar.Boolean(default=False, nullable=True) cover_image: Optional[str] = ormar.Text(nullable=True, unique=False) + background_color: str | None = ormar.Text(nullable=True, unique=False) class Meta: tablename = "quiz" @@ -171,6 +173,7 @@ class PlayGame(BaseModel): cover_image: str | None game_mode: str | None current_question: int = -1 + background_color: str | None class GamePlayer(BaseModel): diff --git a/classquiz/routers/editor.py b/classquiz/routers/editor.py index d90a2df..eb68d76 100644 --- a/classquiz/routers/editor.py +++ b/classquiz/routers/editor.py @@ -177,6 +177,7 @@ async def finish_edit(edit_id: str, quiz_input: QuizInput): quiz.updated_at = datetime.now() quiz.questions = quiz_input.dict()["questions"] quiz.cover_image = quiz_input.cover_image + quiz.background_color = quiz_input.background_color for image in images_to_delete: if image is not None: try: diff --git a/classquiz/routers/quiz.py b/classquiz/routers/quiz.py index eaa81aa..f57a271 100644 --- a/classquiz/routers/quiz.py +++ b/classquiz/routers/quiz.py @@ -113,6 +113,7 @@ async def start_quiz( cover_image=quiz.cover_image, game_mode=game_mode, user_id=user.id, + background_color=quiz.background_color, ) await redis.set(f"game:{str(game.game_pin)}", game.json(), ex=18000) return {**quiz.dict(exclude={"id"}), **game.dict(exclude={"questions"})} diff --git a/classquiz/socket_server/__init__.py b/classquiz/socket_server/__init__.py index f870bbf..802a44a 100644 --- a/classquiz/socket_server/__init__.py +++ b/classquiz/socket_server/__init__.py @@ -201,14 +201,16 @@ async def set_question_number(sid, data: str): if session["admin"]: game_pin = session["game_pin"] game_data = PlayGame.parse_raw(await redis.get(f"game:{session['game_pin']}")) - game_data.current_question = int(data) + game_data.current_question = int(float(data)) await redis.set(f"game:{session['game_pin']}", game_data.json()) await redis.set(f"game:{session['game_pin']}:current_time", datetime.now().isoformat()) await sio.emit( "set_question_number", { - "question_index": int(data), - "question": ReturnQuestion(**game_data.dict(include={"questions"})["questions"][int(data)]).dict(), + "question_index": int(float(data)), + "question": ReturnQuestion( + **game_data.dict(include={"questions"})["questions"][int(float(data))] + ).dict(), }, room=game_pin, ) @@ -244,21 +246,21 @@ async def submit_answer(sid: str, data: dict): session = await sio.get_session(sid) game_data = PlayGame.parse_raw(await redis.get(f"game:{session['game_pin']}")) answer_right = False - if game_data.questions[int(data.question_index)].type == QuizQuestionType.ABCD: - for answer in game_data.questions[int(data.question_index)].answers: + if game_data.questions[int(float(data.question_index))].type == QuizQuestionType.ABCD: + for answer in game_data.questions[int(float(data.question_index))].answers: if answer.answer == data.answer and answer.right: answer_right = True break - elif game_data.questions[int(data.question_index)].type == QuizQuestionType.RANGE: + elif game_data.questions[int(float(data.question_index))].type == QuizQuestionType.RANGE: if ( - game_data.questions[int(data.question_index)].answers.min_correct - <= int(data.answer) - <= game_data.questions[int(data.question_index)].answers.max_correct + game_data.questions[int(float(data.question_index))].answers.min_correct + <= int(float(data.answer)) + <= game_data.questions[int(float(data.question_index))].answers.max_correct ): answer_right = True else: raise NotImplementedError - latency = int((await sio.get_session(sid))["ping"]) + latency = int(float((await sio.get_session(sid))["ping"])) time_q_started = datetime.fromisoformat(await redis.get(f"game:{session['game_pin']}:current_time")) answers = await redis.get(f"game_session:{session['game_pin']}:{data.question_index}") diff = (time_q_started - now).total_seconds() * 1000 # - timedelta(milliseconds=latency) @@ -271,7 +273,9 @@ async def submit_answer(sid: str, data: dict): score = 0 if answer_right: - score = calculate_score(abs(diff) - latency, int(game_data.questions[int(data.question_index)].time)) + score = calculate_score( + abs(diff) - latency, int(float(game_data.questions[int(float(data.question_index))].time)) + ) await redis.hincrby(f"game_session:{session['game_pin']}:player_scores", session["username"], score) if answers is None: await redis.set( diff --git a/frontend/src/app.css b/frontend/src/app.css index b60da6a..dabe700 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -23,3 +23,9 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } + +@layer utilities { + .normal-background { + @apply bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] dark:bg-[#0f2702] dark:from-[#0f2702] dark:via-[#0f2702] dark:to[#0f2702]; + } +} diff --git a/frontend/src/lib/admin.svelte b/frontend/src/lib/admin.svelte index 8af24af..34504f3 100644 --- a/frontend/src/lib/admin.svelte +++ b/frontend/src/lib/admin.svelte @@ -17,6 +17,7 @@ export let game_token: string; export let quiz_data: QuizData; export let game_mode; + export let bg_color; const { t } = getLocalization(); @@ -95,7 +96,11 @@ {#if game_mode === 'kahoot'} -
+

{selected_question === -1 ? '0' : selected_question + 1} /{quiz_data.questions.length} @@ -143,7 +148,7 @@ /> {/if} {/if} -

+
{#if timer_res !== undefined && !final_results_clicked && !question_results}

diff --git a/frontend/src/lib/editor.svelte b/frontend/src/lib/editor.svelte index 18a8de2..003bb89 100644 --- a/frontend/src/lib/editor.svelte +++ b/frontend/src/lib/editor.svelte @@ -113,7 +113,7 @@ if (res.ok) { confirm_to_leave = false; console.log(confirm_to_leave); - window.location.href = '/dashboard'; + // window.location.href = '/dashboard'; } else { alert('Error'); } diff --git a/frontend/src/lib/editor/settings-card.svelte b/frontend/src/lib/editor/settings-card.svelte index 6e3f2be..1d80891 100644 --- a/frontend/src/lib/editor/settings-card.svelte +++ b/frontend/src/lib/editor/settings-card.svelte @@ -7,6 +7,7 @@ import type { EditorData } from '$lib/quiz_types'; import { getLocalization } from '$lib/i18n'; import Spinner from '$lib/Spinner.svelte'; + export let pow_data; export let pow_salt; @@ -15,8 +16,11 @@ let uppyOpen = false; export let edit_id: string; - export let data: EditorData; + + let custom_bg_color = Boolean(data.background_color); + + $: data.background_color = custom_bg_color ? data.background_color : undefined;
@@ -122,6 +126,48 @@ {/if}
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+

diff --git a/frontend/src/lib/quiz_types.ts b/frontend/src/lib/quiz_types.ts index e158fe7..93b3fde 100644 --- a/frontend/src/lib/quiz_types.ts +++ b/frontend/src/lib/quiz_types.ts @@ -13,6 +13,7 @@ export interface QuizData { game_pin: string; started: boolean; cover_image?: string; + background_color?: string; } export enum QuizQuestionType { @@ -47,4 +48,5 @@ export interface EditorData { description: string; questions: Question[]; cover_image?: string; + background_color?: string; } diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte index e7ac679..d5b39ab 100644 --- a/frontend/src/routes/admin/+page.svelte +++ b/frontend/src/routes/admin/+page.svelte @@ -116,85 +116,93 @@ } players = players; }; + let bg_color; + $: bg_color = quiz_data ? quiz_data.background_color : undefined; ClassQuiz - Host -{#if JSON.stringify(final_results) !== JSON.stringify([null])} -
- -
- {#await import('$lib/play/end.svelte') then c} - - {/await} -{/if} -{#if !success} - - - - {#if errorMessage !== ''} -

{errorMessage}

- {/if} -{:else if !game_started} -
- - QR code to join the game -

{$t('words.pin')}: {quiz_data.game_pin}

-
-
    - {#if players.length > 0} - {#each players as player} -
  • - { - kick_player(player.username); - }}>{player.username} - -
    • - {/each} - {/if} -
+
+ {#if JSON.stringify(final_results) !== JSON.stringify([null])} +
+
- {#if players.length > 0} -
- -
+ {#await import('$lib/play/end.svelte') then c} + + {/await} + {/if} + {#if !success} + + + + {#if errorMessage !== ''} +

{errorMessage}

{/if} -
-{:else} - -{/if} - + {:else if !game_started} +
+ + QR code to join the game +

{$t('words.pin')}: {quiz_data.game_pin}

+
+
    + {#if players.length > 0} + {#each players as player} +
  • + { + kick_player(player.username); + }}>{player.username} + +
    • + {/each} + {/if} +
+
+ {#if players.length > 0} +
+ +
+ {/if} +
+ {:else} + + {/if} +
{ solution = undefined; restart(); - console.log(data, data.question_index); question = data.question; question_index = data.question_index; answer_results = undefined; @@ -118,6 +117,9 @@ socket.on('solutions', (data) => { solution = data; }); + + let bg_color; + $: bg_color = gameData ? gameData.background_color : undefined; // The rest @@ -138,42 +140,52 @@ {/each} {/if}--> -
- {#if !gameMeta.started && gameData === undefined} - - {:else if JSON.stringify(final_results) !== JSON.stringify([null])} - - {:else if gameData !== undefined && question_index === ''} - - {:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined} - {#key unique} - - {/key} - {:else if gameMeta.started && answer_results !== undefined} - {#if answer_results === null} -
-

{$t('admin_page.no_answers')}

-
- {:else if game_mode === 'kahoot'} -
-

{$t('words.result', { count: 2 })}

-
+
+
+ {#if !gameMeta.started && gameData === undefined} + + {:else if JSON.stringify(final_results) !== JSON.stringify([null])} + + {:else if gameData !== undefined && question_index === ''} + + {:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined} {#key unique} - - {/key} - {:else} - {#key unique} - + {/key} + {:else if gameMeta.started && answer_results !== undefined} + {#if answer_results === null} +
+

{$t('admin_page.no_answers')}

+
+ {:else if game_mode === 'kahoot'} +
+

{$t('words.result', { count: 2 })}

+
+ {#key unique} + + {/key} + {:else} + {#key unique} + + {/key} + {/if} {/if} - {/if} +
diff --git a/migrations/versions/400f8ed06c48_added_background_color.py b/migrations/versions/400f8ed06c48_added_background_color.py new file mode 100644 index 0000000..d381185 --- /dev/null +++ b/migrations/versions/400f8ed06c48_added_background_color.py @@ -0,0 +1,29 @@ +"""added background-color + +Revision ID: 400f8ed06c48 +Revises: ec6cf07ff68a +Create Date: 2022-09-26 17:56:00.426804 + +""" +from alembic import op +import sqlalchemy as sa +import ormar + + +# revision identifiers, used by Alembic. +revision = "400f8ed06c48" +down_revision = "ec6cf07ff68a" +branch_labels = None +depends_on = None + + +def upgrade() -> None: + # ### commands auto generated by Alembic - please adjust! ### + op.add_column("quiz", sa.Column("background_color", sa.Text(), nullable=True)) + # ### end Alembic commands ### + + +def downgrade() -> None: + # ### commands auto generated by Alembic - please adjust! ### + op.drop_column("quiz", "background_color") + # ### end Alembic commands ###