initial vibe code

2026-02-02 16:42:30 -05:00
commit ffb7e53a69
24 changed files with 5387 additions and 0 deletions
--- a/frontend/.editorconfig
+++ b/frontend/.editorconfig
@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100
--- a/frontend/.gitattributes
+++ b/frontend/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,39 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "unicorn", "oxc", "vue"],
+  "env": {
+    "browser": true
+  },
+  "categories": {
+    "correctness": "error"
+  }
+}
--- a/frontend/.prettierrc.json
+++ b/frontend/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "oxc.oxc-vscode",
+    "esbenp.prettier-vscode"
+  ]
+}
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,44 @@
+# frontend
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,30 @@
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+import pluginOxlint from 'eslint-plugin-oxlint'
+import skipFormatting from 'eslint-config-prettier/flat'
+
+export default defineConfig([
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{vue,js,mjs,jsx}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+
+  ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
+
+  skipFormatting,
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/frontend/jsconfig.json
+++ b/frontend/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "run-s lint:*",
+    "lint:oxlint": "oxlint . --fix",
+    "lint:eslint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli src/"
+  },
+  "dependencies": {
+    "js-yaml": "^4.1.1",
+    "mdi": "^2.2.43",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.27",
+    "vue-router": "^5.0.1",
+    "vuetify": "^3.11.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-oxlint": "~1.42.0",
+    "eslint-plugin-vue": "~10.7.0",
+    "globals": "^17.3.0",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "~1.42.0",
+    "prettier": "3.8.1",
+    "vite": "^7.3.1",
+    "vite-plugin-vue-devtools": "^8.0.5"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+  <router-view />
+</template>
+
+<style scoped></style>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,19 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+// Vuetify
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+import App from './App.vue'
+import router from './router'
+
+const vuetify = createVuetify({ components, directives })
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(vuetify)
+app.use(router)
+
+app.mount('#app')
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      name: 'PlayView',
+      component: import('@/views/PlayView.vue'),
+      path: '/play',
+    },
+    {
+      name: 'HostView',
+      component: import('@/views/HostView.vue'),
+      path: '/host',
+    },
+  ],
+})
+
+export default router
--- a/frontend/src/stores/counter.js
+++ b/frontend/src/stores/counter.js
@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
--- a/frontend/src/stores/game.js
+++ b/frontend/src/stores/game.js
@@ -0,0 +1,56 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useGameStore = defineStore('game', () => {
+  const ws = ref(null)
+  const isHost = ref(false)
+  const gameCode = ref('')
+  const gameState = ref('INIT') // INIT, LOBBY, QUESTION, ANSWER, END
+  const players = ref([])
+  const currentQuestion = ref(null)
+  const myAnswer = ref(null)
+  const endTime = ref(0)
+
+  // Connection Logic
+  function connect(url) {
+    ws.value = new WebSocket(url)
+
+    ws.value.onmessage = (event) => {
+      const data = JSON.parse(event.data)
+
+      if (data.type === 'SESSION_CREATED') {
+        gameCode.value = data.code
+        gameState.value = 'LOBBY'
+      }
+
+      if (data.type === 'STATE_UPDATE') {
+        gameState.value = data.state
+        players.value = data.players
+        currentQuestion.value = data.question
+        if (data.end_time) endTime.value = data.end_time
+
+        // Reset local answer state if we moved to a new question
+        if (data.state === 'QUESTION' && myAnswer.value && !data.question.correct_answer) {
+          // Logic to reset UI answer selection is handled in component
+        }
+      }
+    }
+  }
+
+  function send(msg) {
+    if (ws.value) ws.value.send(JSON.stringify(msg))
+  }
+
+  return {
+    ws,
+    isHost,
+    gameCode,
+    gameState,
+    players,
+    currentQuestion,
+    myAnswer,
+    endTime,
+    connect,
+    send,
+  }
+})
--- a/frontend/src/views/HostView.vue
+++ b/frontend/src/views/HostView.vue
@@ -0,0 +1,139 @@
+<template>
+  <v-container class="fill-height justify-center">
+    <v-card v-if="store.gameState === 'INIT'" width="600" class="pa-5">
+      <v-card-title>Host a Game</v-card-title>
+      <v-textarea v-model="yamlInput" label="Paste YAML Quiz Here" rows="10"></v-textarea>
+      <v-btn color="primary" block @click="createSession">Create Session</v-btn>
+    </v-card>
+
+    <v-card v-if="store.gameState === 'LOBBY'" width="800" class="pa-5 text-center">
+      <div class="text-h2 font-weight-bold mb-4">Join Code: {{ store.gameCode }}</div>
+      <v-divider class="mb-4"></v-divider>
+      <div class="text-h5 mb-2">Participants ({{ store.players.length }})</div>
+      <v-chip-group class="justify-center">
+        <v-chip v-for="p in store.players" :key="p.name" size="large">{{ p.name }}</v-chip>
+      </v-chip-group>
+      <v-btn color="success" size="x-large" class="mt-10" @click="startGame">Start Game</v-btn>
+    </v-card>
+
+    <v-card
+      v-if="store.gameState === 'QUESTION'"
+      width="100%"
+      height="100%"
+      class="pa-5 d-flex flex-column"
+    >
+      <div class="d-flex justify-space-between align-center mb-5">
+        <div class="text-h4">Question</div>
+        <v-progress-circular :model-value="timerVal" :max="100" size="60" width="8" color="primary">
+          {{ Math.ceil(timeLeft) }}
+        </v-progress-circular>
+      </div>
+
+      <div class="text-h3 text-center my-10">{{ store.currentQuestion.text }}</div>
+
+      <v-row>
+        <v-col cols="6" v-for="choice in store.currentQuestion.choices" :key="choice">
+          <v-card height="100" color="grey-lighten-3" class="d-flex align-center justify-center">
+            <span class="text-h5">{{ choice }}</span>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <v-footer border>
+        <div class="d-flex w-100 justify-space-between align-center">
+          <span>{{ answeredCount }} / {{ store.players.length }} Answered</span>
+          <v-btn disabled>Waiting for answers...</v-btn>
+        </div>
+      </v-footer>
+    </v-card>
+
+    <v-card v-if="store.gameState === 'ANSWER'" width="100%" class="pa-5 text-center">
+      <div class="text-h4 mb-5">Correct Answer:</div>
+      <div class="text-h3 text-success font-weight-bold mb-10">
+        {{ store.currentQuestion.correct_answer }}
+      </div>
+
+      <v-sheet
+        v-for="(count, choice) in store.currentQuestion.answer_stats"
+        :key="choice"
+        class="mb-2"
+      >
+        <div class="d-flex justify-space-between">
+          <span>{{ choice }}</span>
+          <span>{{ count }} votes</span>
+        </div>
+        <v-progress-linear
+          :model-value="(count / store.players.length) * 100"
+          height="20"
+          color="info"
+        ></v-progress-linear>
+      </v-sheet>
+
+      <v-btn color="primary" size="x-large" class="mt-10" @click="nextQuestion">Next</v-btn>
+    </v-card>
+
+    <v-card v-if="store.gameState === 'END'" width="600" class="pa-5 text-center">
+      <div class="text-h2 mb-5">Game Over</div>
+      <v-list>
+        <v-list-item v-for="(p, i) in store.players" :key="p.name">
+          <template v-slot:prepend>
+            <v-avatar color="primary" class="text-white">{{ i + 1 }}</v-avatar>
+          </template>
+          <v-list-item-title class="text-h5">{{ p.name }}</v-list-item-title>
+          <template v-slot:append>
+            <span class="text-h5 font-weight-bold">{{ p.score }} pts</span>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useGameStore } from '@/stores/game'
+import yaml from 'js-yaml'
+
+const store = useGameStore()
+const yamlInput = ref(`title: Demo Quiz
+questions:
+  - text: What is 2 + 2?
+    choices: ["3", "4", "5", "6"]
+    answer: "4"
+    seconds: 15
+  - text: Best Pizza?
+    choices: ["Pineapple", "Pepperoni", "Cheese", "Mushroom"]
+    answer: "Pepperoni"
+    seconds: 15`)
+
+const timeLeft = ref(0)
+const timerVal = computed(() => {
+  if (!store.currentQuestion) return 0
+  return (timeLeft.value / store.currentQuestion.seconds) * 100
+})
+
+const answeredCount = computed(() => store.players.filter((p) => p.answered).length)
+
+// Timer Logic
+setInterval(() => {
+  if (store.gameState === 'QUESTION' && store.endTime) {
+    const diff = store.endTime - Date.now() / 1000
+    timeLeft.value = diff > 0 ? diff : 0
+  }
+}, 100)
+
+function createSession() {
+  store.connect(`ws://${window.location.hostname}:8000/ws/host`)
+  store.ws.onopen = () => {
+    const quiz = yaml.load(yamlInput.value)
+    store.send({ action: 'CREATE_SESSION', quiz })
+  }
+}
+
+function startGame() {
+  store.send({ action: 'START_GAME' })
+}
+function nextQuestion() {
+  store.send({ action: 'NEXT_QUESTION' })
+}
+</script>
--- a/frontend/src/views/PlayView.vue
+++ b/frontend/src/views/PlayView.vue
@@ -0,0 +1,107 @@
+<template>
+  <v-container class="fill-height justify-center bg-grey-lighten-4">
+    <v-card v-if="!joined" width="400" class="pa-5">
+      <v-card-title>Join Game</v-card-title>
+      <v-text-field v-model="code" label="Game Code" variant="outlined"></v-text-field>
+      <v-text-field v-model="name" label="Nickname" variant="outlined"></v-text-field>
+      <v-btn block color="secondary" @click="joinGame" :disabled="!code || !name">Join</v-btn>
+    </v-card>
+
+    <div v-else-if="store.gameState === 'LOBBY'" class="text-center">
+      <div class="text-h4">You're in!</div>
+      <div class="text-subtitle-1">See your name on the host screen?</div>
+      <v-progress-circular indeterminate color="primary" class="mt-5"></v-progress-circular>
+    </div>
+
+    <div v-else-if="store.gameState === 'QUESTION'" class="w-100 h-100 d-flex flex-column pa-2">
+      <v-sheet class="pa-4 text-center text-h5 mb-4 rounded">{{
+        store.currentQuestion.text
+      }}</v-sheet>
+
+      <div class="flex-grow-1">
+        <v-row class="h-100">
+          <v-col
+            cols="6"
+            v-for="choice in store.currentQuestion.choices"
+            :key="choice"
+            class="h-50"
+          >
+            <v-btn
+              block
+              height="100%"
+              :color="getMyColor(choice)"
+              :disabled="hasAnswered"
+              @click="submitAnswer(choice)"
+              class="text-h6 text-wrap"
+            >
+              {{ choice }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+
+    <div v-else-if="store.gameState === 'ANSWER'" class="text-center">
+      <div v-if="lastAnswerCorrect" class="text-h2 text-success font-weight-bold">Correct!</div>
+      <div v-else class="text-h2 text-error font-weight-bold">Wrong</div>
+      <div class="text-h5 mt-5">Waiting for Host...</div>
+    </div>
+
+    <div v-else-if="store.gameState === 'END'" class="text-center">
+      <div class="text-h3">Game Over</div>
+      <div class="text-h5 mt-2">Check the host screen for the podium!</div>
+      <div class="text-h6 mt-5">Your Final Score: {{ myScore }}</div>
+    </div>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useGameStore } from '@/stores/game'
+
+const store = useGameStore()
+const code = ref('')
+const name = ref('')
+const joined = ref(false)
+
+// Use computed to check against the store's persisted answer
+const lastAnswerCorrect = computed(() => {
+  if (!store.currentQuestion?.correct_answer || !store.myAnswer) return false
+  // specific fix: ensure both are strings to avoid "4" !== 4 errors
+  return String(store.myAnswer) === String(store.currentQuestion.correct_answer)
+})
+
+const myScore = computed(() => {
+  const me = store.players.find((p) => p.name === name.value)
+  return me ? me.score : 0
+})
+
+function joinGame() {
+  store.connect(`ws://${window.location.hostname}:8000/ws/play/${code.value}/${name.value}`)
+  store.ws.onopen = () => {
+    joined.value = true
+    // If we join mid-game, this ensures we see the right state
+  }
+}
+
+function submitAnswer(choice) {
+  store.myAnswer = choice // Save to Store
+  store.send({ action: 'SUBMIT_ANSWER', choice })
+}
+
+function getMyColor(choice) {
+  if (!store.myAnswer) return 'white'
+  return store.myAnswer === choice ? 'secondary' : 'grey'
+}
+
+// Reset answer only when a NEW question starts
+watch(
+  () => store.currentQuestion,
+  (newQ, oldQ) => {
+    // If we are in QUESTION mode and the text changed, it's a new question. Clear answer.
+    if (store.gameState === 'QUESTION' && newQ?.text !== oldQ?.text) {
+      store.myAnswer = null
+    }
+  },
+)
+</script>
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})