64 lines
No EOL
1.8 KiB
Vue
64 lines
No EOL
1.8 KiB
Vue
<template>
|
|
<section
|
|
class="MoodCurrent"
|
|
@click="openMoodChoice"
|
|
>
|
|
<FontAwesomeIcon class="icon" :icon="currentMood.icon" />
|
|
<div class="text">
|
|
<h1>{{ currentMood.label }}</h1>
|
|
<p v-if="currentNode">{{ currentNode }}</p>
|
|
</div>
|
|
</section>
|
|
<MoodChoice
|
|
ref="moodChoice"
|
|
@change-mood="changeMood"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Mood, moods } from '../../shared/moods'
|
|
import { onMounted, ref, useTemplateRef } from 'vue'
|
|
import MoodChoice from '../Sections/Mood/Choice.vue'
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
|
import { usePageStore } from '../../stores/page.ts'
|
|
import { useMoodStore} from '../../stores/mood.ts'
|
|
|
|
const moodStore = useMoodStore()
|
|
const currentMood = ref<Mood>(moods.happy)
|
|
const currentNode = ref<string>('')
|
|
const changeMood = (newMood : Mood, note ?: string) => {
|
|
currentMood.value = newMood
|
|
currentNode.value = note ?? ''
|
|
document.documentElement.style.setProperty('--clr-current-dark', `var(--clr-${newMood.color}-dark)`)
|
|
document.documentElement.style.setProperty('--clr-current-light', `var(--clr-${newMood.color}-light)`)
|
|
|
|
moodStore.changeMood(newMood)
|
|
moodStore.changeNote(note)
|
|
}
|
|
|
|
const moodChoice = useTemplateRef<InstanceType<typeof MoodChoice>>('moodChoice')
|
|
const openMoodChoice = () => { moodChoice.value?.$el.showModal() }
|
|
|
|
onMounted(() => {
|
|
const pageStore = usePageStore()
|
|
pageStore.changeName('Stimmung')
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.MoodCurrent {
|
|
background: var(--clr-current-light);
|
|
color: var(--clr-current-dark);
|
|
padding: var(--padding-default);
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
& .icon { font-size: 14rem; }
|
|
& h1 { font-size: 1.5rem; }
|
|
& .text { text-align: center; }
|
|
}
|
|
</style> |