Working

app/app.vue

@@ -3,15 +3,28 @@ useHead({
   link: [{ rel: 'icon', type: 'image/png', href: '/favicon.ico' }],
   title: 'Spanish Learning Process • By Arthur Danjou',
 })
+
+const mode = useCookie('mode')
+mode.value = mode.value || 'Spanish'
 </script>
 
 <template>
   <div>
     <NuxtLoadingIndicator />
     <UContainer>
-      <div class="bg-neutral-900 rounded-lg max-h-[96vh] h-[96vh] overflow-scroll p-4">
+      <div class="my-4 flex items-center justify-between">
+        <p>Mode: {{ mode }}</p>
+        <UButton
+          :color="mode === 'Spanish' ? 'cyan' : 'yellow'"
+          variant="solid"
+          :label="mode === 'Spanish' ? 'Switch to French' : 'Switch to Spanish'"
+          @click="mode === 'Spanish' ? mode = 'French' : mode = 'Spanish'"
+        />
+      </div>
+      <div class="bg-neutral-900 rounded-lg max-h-[90vh] h-[90vh] overflow-scroll p-4">
         <Verbs />
         <Words />
+        <Demonstratifs />
         <Modals />
         <Terminaisons />
         <Prononciation />

app/components/Demonstratifs.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const columns = [
+  {
+    key: 'french',
+    label: 'French',
+  },
+  {
+    key: 'proche',
+    label: 'Proche',
+  },
+  {
+    key: 'loin',
+    label: 'Loin',
+  },
+  {
+    key: 'lointain',
+    label: 'Très éloigné',
+  },
+]
+
+const rows = [
+  {
+    french: 'ce / cet',
+    proche: 'este',
+    loin: 'ese',
+    lointain: 'aquel',
+  },
+  {
+    french: 'cette',
+    proche: 'esta',
+    loin: 'esa',
+    lointain: 'aquella',
+  },
+  {
+    french: 'ces',
+    proche: 'estos / estas',
+    loin: 'esos / esas',
+    lointain: 'aquellos / aquellas',
+  },
+]
+</script>
+
+<template>
+  <UDivider class="mt-12 mb-8" size="lg" label="Démonstratifs" />
+  <UTable :rows="rows" :columns="columns" />
+</template>

app/components/Verbs.vue

@@ -6,15 +6,19 @@ async function refreshVerb() {
   revealedVerb.value = false
   await refreshVerbData()
 }
+const mode = useCookie('mode')
 </script>
 
 <template>
   <div v-if="verb" class="space-y-4 mx-auto flex flex-col justify-center">
-    <div class="flex gap-2 items-end">
+    <div class="flex gap-2 items-center">
       <h3 class="text-neutral-500">
         Verbos:
       </h3>
-      <h1 class="font-bold">
+      <h1 v-if="mode === 'Spanish'" class="font-bold">
+        {{ verb.verb }}
+      </h1>
+      <h1 v-else class="font-bold p-1 rounded-md" :class="revealedVerb ? 'duration-300' : 'bg-gray-700 text-gray-700'">
         {{ verb.verb }}
       </h1>
     </div>
@@ -23,14 +27,17 @@ async function refreshVerb() {
         Typo:
       </h3>
       <h1 class="font-bold">
-        {{ verb.type }}
+        -{{ verb.verb.slice(-2) }}
       </h1>
     </div>
-    <div class="flex gap-2 items-end cursor-pointer" @click.prevent="revealedVerb = true">
+    <div class="flex gap-2 items-center">
       <h3 class="text-neutral-500">
         Traduccion:
       </h3>
-      <h1 class="font-bold" :class="revealedVerb ? 'duration-300' : 'bg-black text-black'">
+      <h1 v-if="mode === 'Spanish'" class="font-bold p-1 rounded-md" :class="revealedVerb ? 'duration-300' : 'bg-gray-700 text-gray-700'">
+        {{ verb.translation }}
+      </h1>
+      <h1 v-else class="font-bold">
         {{ verb.translation }}
       </h1>
     </div>

app/components/Words.vue

@@ -1,36 +1,37 @@
 <script setup lang="ts">
 const { data: word, refresh: refreshWordData } = await useAsyncData('word', async () => $fetch('/api/word'))
+
 const revealedWord = ref(false)
 async function refreshWord() {
   revealedWord.value = false
   await refreshWordData()
 }
+
+const mode = useCookie('mode')
 </script>
 
 <template>
   <UDivider class="mt-12 mb-8" size="lg" label="Palabras" />
   <div v-if="word" class="space-y-4 mx-auto flex flex-col justify-center">
-    <div class="flex gap-2 items-end">
+    <div class="flex gap-2 items-center">
       <h3 class="text-neutral-500">
         Palabra:
       </h3>
-      <h1 class="font-bold">
+      <h1 v-if="mode === 'Spanish'" class="font-bold">
+        {{ word.word }}
+      </h1>
+      <h1 v-else class="font-bold p-1 rounded-md" :class="revealedWord ? 'duration-300' : 'bg-gray-700 text-gray-700'">
         {{ word.word }}
       </h1>
     </div>
-    <div class="flex gap-2 items-end">
+    <div class="flex gap-2 items-center cursor-pointer" @click.prevent="revealedWord = true">
-      <h3 class="text-neutral-500">
-        Typo:
-      </h3>
-      <h1 class="font-bold">
-        {{ word.type }}
-      </h1>
-    </div>
-    <div class="flex gap-2 items-end cursor-pointer" @click.prevent="revealedWord = true">
       <h3 class="text-neutral-500">
         Traducción:
       </h3>
-      <h1 class="font-bold" :class="revealedWord ? 'duration-300' : 'bg-black text-black'">
+      <h1 v-if="mode === 'Spanish'" class="font-bold p-1 rounded-md" :class="revealedWord ? 'duration-300' : 'bg-gray-700 text-gray-700'">
+        {{ word.translation }}
+      </h1>
+      <h1 v-else class="font-bold">
         {{ word.translation }}
       </h1>
     </div>

server/database/migrations/0003_lovely_leo.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `verbs` DROP COLUMN `type`;--> statement-breakpoint
+ALTER TABLE `words` DROP COLUMN `type`;

server/database/migrations/meta/0003_snapshot.json

@@ -0,0 +1,97 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "c9b4dfd7-934d-4278-89a0-754c3a104f66",
+  "prevId": "d7a2a05d-0984-4674-bbc3-35dbb9442202",
+  "tables": {
+    "verbs": {
+      "name": "verbs",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "verb": {
+          "name": "verb",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "translation": {
+          "name": "translation",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_DATE)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "words": {
+      "name": "words",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "word": {
+          "name": "word",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "translation": {
+          "name": "translation",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": "(CURRENT_DATE)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

server/database/migrations/meta/_journal.json

@@ -22,6 +22,13 @@
       "when": 1722366523692,
       "tag": "0002_amazing_khan",
       "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "6",
+      "when": 1723642422742,
+      "tag": "0003_lovely_leo",
+      "breakpoints": true
     }
   ]
 }

server/database/schema.ts

@@ -4,7 +4,6 @@ import { sql } from 'drizzle-orm'
 export const verbs = sqliteTable('verbs', {
   id: integer('id').primaryKey(),
   verb: text('verb').default(''),
-  type: text('type', { enum: ['-ar', '-er', '-ir'] }),
   translation: text('translation').default(''),
   createdAt: text('created_at').default(sql`(CURRENT_DATE)`),
 })
@@ -12,7 +11,6 @@ export const verbs = sqliteTable('verbs', {
 export const words = sqliteTable('words', {
   id: integer('id').primaryKey(),
   word: text('word').default(''),
-  type: text('type').default(''),
   translation: text('translation').default(''),
   createdAt: text('created_at').default(sql`(CURRENT_DATE)`),
 })