what_is_bot/frontend/src/screens/QuizScreen.vue

<script setup lang="ts">
import { MainButton, useBackButton } from 'vue-tg';
import { onMounted, ref } from 'vue';
import { useAppStateStore } from '../store/core';
import { Debug } from '../utils/debug';

const selectedVariant = ref("");
const correctVariant = ref("Яблоко");
const buttonTitle = ref("Подтвердить")
const isAnswered = ref(false);

const store = useAppStateStore()
const backButton = useBackButton()

onMounted(() => {
    if (backButton.show !== undefined && backButton.onClick !== undefined) {
        backButton.onClick(() => {
            store.$patch({appState: "landing"})
        })
        backButton.show()
    }
})

function quizAnswerSubmit() {
    if (isAnswered.value) {
        selectedVariant.value = "";
        isAnswered.value = false;
        buttonTitle.value = "Подтвердить";
        return;
    }

    // тут будет отправка ответа в апи, но нужно сделать контракт. короче todo: add backend integration
    isAnswered.value = true;
    buttonTitle.value = "Следующий вопрос";
}
</script>

<template>
    <div class="quiz">
        <h1 class="quiz-title">Квиз</h1>
        <h2 class="quiz-question">Выберите правильный перевод</h2>

        <div class="chat-bubble">
            өчпочмак
        </div>

        <div class="quiz-variants">
            <div 
                class="quiz-variant" 
                :class="{ 
                    success: isAnswered && 'Яблоко' === correctVariant, 
                    fail: isAnswered && 'Яблоко' !== correctVariant, 
                    selected: selectedVariant === 'Яблоко',
                    disabled: isAnswered
                }"
                @click="!isAnswered && (selectedVariant = 'Яблоко')"
            >
                Яблоко
            </div>
            <div 
                class="quiz-variant" 
                :class="{ 
                    success: isAnswered && 'Пирог' === correctVariant, 
                    fail: isAnswered && selectedVariant == 'Пирог' && 'Пирог' !== correctVariant, 
                    selected: selectedVariant === 'Пирог',
                    disabled: isAnswered
                }"
                @click="!isAnswered && (selectedVariant = 'Пирог')"
            >
                Пирог
            </div>
            <div 
                class="quiz-variant" 
                :class="{ 
                    success: isAnswered && 'Булочка' === correctVariant, 
                    fail: isAnswered && selectedVariant == 'Булочка' && 'Булочка' !== correctVariant, 
                    selected: selectedVariant === 'Булочка',
                    disabled: isAnswered
                }"
                @click="!isAnswered && (selectedVariant = 'Булочка')"
            >
                Булочка
            </div>
        </div>

        <MainButton v-if="selectedVariant !== '' && !Debug.enabled" :text="buttonTitle" @click="quizAnswerSubmit" />
        <div class="bottom-app-button" v-if="Debug.enabled">
            <button class="start-btn" v-if="selectedVariant !== ''" @click="quizAnswerSubmit">{{ buttonTitle }}</button>
        </div>
    </div>
</template>

<style scoped>
.quiz {
    padding-top: 80px;
    height: 100vh;
    color: #FEFEFE;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}

h1 {
    font-size: 40px;
    text-align: center;
    font-family: 'OpenSans', sans-serif;
    font-weight: 400;
    font-style: 'SemiBold'
}

h2 {
    font-size: 32px;
    text-align: left;
    font-family: 'OpenSans', sans-serif;
    font-weight: 400;
    font-style: 'SemiBold';
    padding-bottom: 60px;
}

.chat-bubble {
    position: relative;
    background-color: #248BDA;
    color: white;
    padding: 12px 28px;
    border-radius: 40px;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.4;

    font-family: 'OpenSans', sans-serif;
    font-style: 'SemiBold';

    max-width: 261px;
    max-height: 95px;

    text-align: center;
}

.chat-bubble::after {
    content: '';
    position: absolute;
    
    left: 25px;
    bottom: -9px;

    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 0px solid transparent;
    border-top: 18px solid #248BDA;
}

.quiz-variants {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
}

.quiz-variant {
    background-color: #D9D9D91A;
    padding: 16px 20px;
    border-radius: 12px;
    font-family: 'OpenSans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 18px;
    padding-left: 24px;
}

.quiz-variant.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.success {
    background-color: #355a35;
}

.fail {
    background-color: #630209;
}

.selected {
    /* background-color: #2929291a; */
    border: 2px solid #FFFFFF;
}
</style>