INIT

src/components/Views/Current.vue

@@ -0,0 +1,61 @@
+<template>
+  <section
+    class="MoodCurrent"
+    @click="openMoodChoice"
+  >
+    <FontAwesomeIcon class="icon" :icon="currentMood.icon" />
+    <h1>{{ currentMood.label }}</h1>
+    <p v-if="currentNode">{{ currentNode }}</p>
+  </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; }
+}
+</style>