<script setup lang="ts">
import { Notify } from 'quasar';
import { ref } from 'vue';
const choices = ['rock', 'paper', 'scissors'] as const;
type Choice = typeof choices[number];
const app_choice = ref<Choice>();

const click_number = ref(1);
const icon = ref('');
const color = ref('accent');

const getRandmonChoice = (): Choice => {
    const index = Math.floor(Math.random() * choices.length);
    return choices[index]!;
};
const icon_map: Record<Choice, string> = {
    rock: 'las la-hand-rock',
    paper: 'las la-hand-paper',
    scissors: 'las la-hand-scissors',
};

const fightingResult = () => {
    if (click_number.value === 7) {
        Notify.create({
            icon: 'las la-hand-middle-finger',
            color: 'negative',
            iconSize: '5em',
            iconColor: 'white',
        })
        return;
    }

    app_choice.value = getRandmonChoice();
    icon.value = icon_map[app_choice.value];
    color.value = 'accent';

    Notify.create({
        color: color.value,
        icon: icon.value,
        iconSize: '5em',
        iconColor: 'white',
    });

    click_number.value += 1;
}
</script>
<template>
    <div class="row flex-center q-mt-xl">
        <div class="q-px-sm">
            <q-btn
                push
                dense
                color="accent"
                icon="las la-hand-rock"
                @click="fightingResult()"
            />
        </div>
        <div class="q-px-sm">
            <q-btn
                push
                dense
                color="accent"
                icon="las la-hand-paper"
                @click="fightingResult()"
            />
        </div>
        <div class="q-px-sm">
            <q-btn
                push
                dense
                color="accent"
                icon="las la-hand-scissors"
                @click="fightingResult()"
            />
        </div>
    </div>
</template>