🚧 restructures, add more result views

package.json

@@ -12,6 +12,7 @@
     "@astrojs/tailwind": "^5.1.4",
     "@astrojs/vue": "^5.0.4",
     "@googleapis/sheets": "^9.3.1",
+    "@headlessui/vue": "^1.7.23",
     "@iconify-json/material-symbols": "^1.2.12",
     "@vueuse/core": "^12.3.0",
     "astro": "^5.1.4",

src/assets/style.css

@@ -73,3 +73,14 @@ body {
     transform: translateX(20%);
   }
 }
+
+:root {
+  --popper-theme-background-color: theme(colors.gray.800);
+  --popper-theme-background-color-hover: theme(colors.gray.800);
+  --popper-theme-text-color: theme(colors.white);
+  --popper-theme-border-width: 0px;
+  --popper-theme-border-style: solid;
+  --popper-theme-border-radius: theme(borderRadius.md);
+  --popper-theme-padding: theme(spacing.4);
+  --popper-theme-box-shadow: theme(boxShadow.sm);
+}

src/components/AnswerButton.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import Popper from 'vue3-popper'
 import type { Answer } from '../content.config'
+import { answerLabels } from '../store'
 
 defineProps<{
   answer: Answer
-  label: string
-  partyAnswerExists: boolean
+  disabled: boolean
 }>()
 
 const emit = defineEmits<{
@@ -16,34 +16,16 @@ const emit = defineEmits<{
 <template>
   <div class="answer-button">
     <Popper
-      class="light"
-      :disabled="partyAnswerExists"
+      :disabled="!disabled"
       arrow
       :hover="true"
       placement="top"
       content="Diese Option ist nicht verfügbar, da keine Partei so abgestimmt hat."
     >
-      <button
-        class="btn"
-        @click="emit('save', answer)"
-        :disabled="!partyAnswerExists"
-      >
+      <button class="btn" @click="emit('save', answer)" :disabled="disabled">
         <slot class="me-1" />
-        {{ label }}
+        {{ answerLabels[answer] }}
       </button>
     </Popper>
   </div>
 </template>
-
-<style scoped>
-.answer-button {
-  --popper-theme-background-color: theme(colors.gray.800);
-  --popper-theme-background-color-hover: theme(colors.gray.800);
-  --popper-theme-text-color: theme(colors.white);
-  --popper-theme-border-width: 0px;
-  --popper-theme-border-style: solid;
-  --popper-theme-border-radius: theme(borderRadius.md);
-  --popper-theme-padding: theme(spacing.4);
-  --popper-theme-box-shadow: theme(boxShadow.sm);
-}
-</style>

src/components/AnswerIndicator.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import Popper from 'vue3-popper'
+import type { Answer } from '../content.config'
+import IconLess from '~icons/material-symbols/stat-minus-2-rounded'
+import IconMore from '~icons/material-symbols/stat-2-rounded'
+import IconRight from '~icons/material-symbols/check-rounded'
+import IconUnknown from '~icons/material-symbols/shield-question-outline-rounded'
+import IconNeutral from '~icons/material-symbols/circle-outline'
+import { answerLabels } from '../store'
+
+defineProps<{
+  answer: Answer
+}>()
+
+const styles: Record<Answer, any> = {
+  'zu weit': { icon: IconLess, class: 'bg-red-500' },
+  richtig: { icon: IconRight, class: 'bg-green-500' },
+  'nicht weit genug': { icon: IconMore, class: 'bg-orange-500' },
+  '/': { icon: IconUnknown, class: 'bg-gray-600' },
+  '-': { icon: IconNeutral, class: 'bg-gray-700' },
+}
+</script>
+
+<template>
+  <Popper arrow :hover="true" placement="top" :content="answerLabels[answer]">
+    <div
+      class="w-8 h-8 text-white rounded-full flex items-center justify-center"
+      :class="[styles[answer].class]"
+    >
+      <component :is="styles[answer].icon" class="w-6 h-6" />
+    </div>
+  </Popper>
+</template>

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content'
 import Layout from '../layouts/Layout.astro'
-import App from '../components/App.vue'
+import App from './index.vue'
 
 const questions = (await getCollection('questions')).map((q) => q.data)
 ---

src/components/App.vue → src/pages/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import Questionnaire from './Questionnaire.vue'
-import Results from './Results.vue'
-import Weights from './Weights.vue'
+import Questionnaire from '../views/Questionnaire.vue'
+import Results from '../views/Results.vue'
+import Weights from '../views/Weights.vue'
 import type { Question } from '../content.config'
 import {
   answers,
@@ -14,7 +14,7 @@ import {
 import IconBack from '~icons/material-symbols/arrow-back'
 import IconRestart from '~icons/material-symbols/restart-alt-rounded'
 
-const props = defineProps<{
+defineProps<{
   questions: Question[]
 }>()
 
@@ -62,18 +62,21 @@ const previousStage = () => {
       </p>
       <button class="btn text-4xl mt-4" @click="nextStage">Los geht's!</button>
     </div>
+
     <Questionnaire
       v-else-if="currentStage === Stage.Questionnaire"
       :questions="questions"
       @done="nextStage"
       @previous="previousStage"
       @reset="confirmReset"
     />
+
     <Weights
       v-else-if="currentStage === Stage.Weights"
       :questions="questions"
       @done="nextStage"
     />
+
     <Results v-else :questions="questions" />
   </Transition>
 
@@ -85,6 +88,7 @@ const previousStage = () => {
       <IconBack class="me-1" />
       Zurück
     </button>
+
     <button @click="confirmReset" class="btn-text ms-auto">
       <IconRestart class="me-1" />
       Neustarten

src/store.ts

@@ -10,6 +10,14 @@ export const answers = useStorage(
   {} as Record<string, UserPosition>,
 )
 
+export const answerLabels: Record<Answer, string> = {
+  'zu weit': 'nein, geht mir zu weit',
+  richtig: 'ja, finde ich auch',
+  'nicht weit genug': 'nein, reicht mir nicht aus',
+  '/': 'keine Antwort vorhanden',
+  '-': 'neutral',
+}
+
 export const weightedTopics = useStorage('realomat-weights', [] as string[])
 
 export const currentQuestionIndex = useStorage('realomat-current-question', 0)
@@ -32,3 +40,5 @@ export const partyNames: Record<Party, string> = {
   linke: 'Die Linke',
   afd: 'AFD',
 }
+
+export const parties = Object.keys(partyNames) as Party[]