From 2d64c753ccbbc42054a6a6b8ea00149fe53d5851 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 14 Aug 2024 15:34:06 +0200
Subject: [PATCH] Working

---
 app/app.vue                                   | 15 ++-
 app/components/Demonstratifs.vue              | 46 +++++++++
 app/components/Verbs.vue                      | 17 +++-
 app/components/Words.vue                      | 25 ++---
 .../database/migrations/0003_lovely_leo.sql   |  2 +
 .../migrations/meta/0003_snapshot.json        | 97 +++++++++++++++++++
 server/database/migrations/meta/_journal.json |  7 ++
 server/database/schema.ts                     |  2 -
 8 files changed, 191 insertions(+), 20 deletions(-)
 create mode 100644 app/components/Demonstratifs.vue
 create mode 100644 server/database/migrations/0003_lovely_leo.sql
 create mode 100644 server/database/migrations/meta/0003_snapshot.json

diff --git a/app/app.vue b/app/app.vue
index c5dcfa1..7b0b58e 100644
--- a/app/app.vue
+++ b/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 />
diff --git a/app/components/Demonstratifs.vue b/app/components/Demonstratifs.vue
new file mode 100644
index 0000000..fda5a06
--- /dev/null
+++ b/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>
diff --git a/app/components/Verbs.vue b/app/components/Verbs.vue
index fa98fc0..bf34437 100644
--- a/app/components/Verbs.vue
+++ b/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>
diff --git a/app/components/Words.vue b/app/components/Words.vue
index 652f08e..3b12b3a 100644
--- a/app/components/Words.vue
+++ b/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">
-      <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">
+    <div class="flex gap-2 items-center 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>
diff --git a/server/database/migrations/0003_lovely_leo.sql b/server/database/migrations/0003_lovely_leo.sql
new file mode 100644
index 0000000..db162ee
--- /dev/null
+++ b/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`;
\ No newline at end of file
diff --git a/server/database/migrations/meta/0003_snapshot.json b/server/database/migrations/meta/0003_snapshot.json
new file mode 100644
index 0000000..62c3181
--- /dev/null
+++ b/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": {}
+  }
+}
\ No newline at end of file
diff --git a/server/database/migrations/meta/_journal.json b/server/database/migrations/meta/_journal.json
index a2e0004..c9da4f4 100644
--- a/server/database/migrations/meta/_journal.json
+++ b/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
     }
   ]
 }
\ No newline at end of file
diff --git a/server/database/schema.ts b/server/database/schema.ts
index 9b1db8d..9ffab91 100644
--- a/server/database/schema.ts
+++ b/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)`),
 })