Added standardized colors

assets/main.css

@@ -77,6 +77,65 @@
   }
 }
 
+/* Colors */
+.event-red {
+  @apply text-slate-900 bg-red-500 hover:bg-red-600
+}
+.event-orange {
+  @apply text-slate-900 bg-orange-500 hover:bg-orange-600
+}
+.event-amber {
+  @apply text-slate-900 bg-amber-500 hover:bg-amber-600
+}
+.event-yellow {
+  @apply text-slate-900 bg-yellow-600 hover:bg-yellow-700
+}
+.event-lime {
+  @apply text-slate-900 bg-lime-500 hover:bg-lime-600
+}
+.event-green {
+  @apply text-white bg-green-600 hover:bg-green-700
+}
+.event-emerald {
+  @apply text-white bg-emerald-600 hover:bg-emerald-700
+}
+.event-teal {
+  @apply text-white bg-teal-600 hover:bg-teal-700
+}
+.event-cyan {
+  @apply text-white bg-cyan-600 hover:bg-cyan-700
+}
+.event-sky {
+  @apply text-white bg-sky-600 hover:bg-sky-700
+}
+.event-blue {
+  @apply text-white bg-blue-600 hover:bg-blue-700
+}
+.event-indigo {
+  @apply text-white bg-indigo-600 hover:bg-indigo-700
+}
+.event-violet {
+  @apply text-white bg-violet-600 hover:bg-violet-700
+}
+.event-purple {
+  @apply text-white bg-purple-600 hover:bg-purple-700
+}
+.event-fuchsia {
+  @apply text-white bg-fuchsia-600 hover:bg-fuchsia-700
+}
+.event-pink {
+  @apply text-white bg-pink-700 hover:bg-pink-800
+}
+.event-rose {
+  @apply text-white bg-rose-700 hover:bg-rose-800
+}
+.event-black {
+  @apply text-white bg-stone-500 hover:bg-stone-700
+}
+.event-white {
+  @apply text-slate-900 bg-white hover:bg-yellow-200
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: all .5s ease;

components/calendar/CalendarEvent.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { cn } from '@/lib/utils'
 import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '~/models/CalendarEvent'
@@ -59,30 +58,14 @@ onMounted(() => {
       <button
         class="text-xs px-2 py-1 block w-full text-left rounded-sm focus-visible:bg-red-200"
         :class="
-          cn({
+          cn(
-            'italic': event.hidden,
+            event.category ? `event-${event.category.color}` : '',
-            'text-white bg-slate-600 hover:bg-slate-700': !event.category,
+            {
-            'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
+              'italic': event.hidden,
-            'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
+              'rounded-r-none': isStartEvent,
-            'text-white bg-orange-600 hover:bg-orange-700': event.category?.name === 'catastrophe',
+              'rounded-l-none': isEndEvent,
-            'text-white bg-pink-600 hover:bg-pink-700': event.category?.name === 'catastrophe naturelle',
+            }
-            'text-white bg-sky-600 hover:bg-sky-700': event.category?.name === 'législation',
+          )
-            'text-white bg-purple-600 hover:bg-purple-700': event.category?.name === 'religion',
-            'text-white bg-emerald-600 hover:bg-emerald-700': event.category?.name === 'joueurs',
-            'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category?.name === 'inauguration',
-            'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category?.name === 'invention',
-            'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category?.name === 'science',
-            'text-slate-900 bg-white hover:bg-yellow-200': event.category?.name === 'bénédiction',
-            'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category?.name === 'découverte',
-            'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category?.name === 'exploration',
-            'text-white bg-amber-600 hover:bg-amber-700': event.category?.name === 'construction',
-            'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category?.name === 'arcanologie',
-            'text-white bg-rose-600 hover:bg-rose-700': event.category?.name === 'criminalité',
-            'text-white bg-stone-600 hover:bg-stone-700': event.category?.name === 'scandale',
-            'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category?.name === 'commerce',
-            'rounded-r-none': isStartEvent,
-            'rounded-l-none': isEndEvent
-          })
         "
         @dblclick="handleDoubleClick"
         @keydown.delete="handleDelete"

components/calendar/input/EventCategories.vue

@@ -62,9 +62,7 @@ const computedTextValue = computed(() => {
               :value="category"
               @select="handleCatSelect"
             >
-              <span class="capitalize">
+              {{ category.name }}
-                {{ category.name }}
-              </span>
             </UiCommandItem>
           </UiCommandGroup>
         </UiCommandList>

components/calendar/search/lists/EventCallout.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { cn } from '@/lib/utils'
 import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
 import { useCalendar } from '@/stores/CalendarStore'
@@ -26,28 +27,11 @@ const dateDuration: string | null = props.event.endDate
 <template>
   <button
     class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
-    :class="{
+    :class="cn(
-      'pt-4': event.hidden,
+      event.category ? `event-${event.category.color}` : '',
-      'text-white bg-slate-600 hover:bg-slate-700': !event.category,
+      {
-      'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
+        'pt-4': event.hidden,
-      'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
+      })"
-      'text-white bg-orange-600 hover:bg-orange-700': event.category?.name === 'catastrophe',
-      'text-white bg-pink-600 hover:bg-pink-700': event.category?.name === 'catastrophe naturelle',
-      'text-white bg-sky-600 hover:bg-sky-700': event.category?.name === 'législation',
-      'text-white bg-purple-600 hover:bg-purple-700': event.category?.name === 'religion',
-      'text-white bg-emerald-600 hover:bg-emerald-700': event.category?.name === 'joueurs',
-      'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category?.name === 'inauguration',
-      'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category?.name === 'invention',
-      'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category?.name === 'science',
-      'text-slate-900 bg-white hover:bg-yellow-200': event.category?.name === 'bénédiction',
-      'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category?.name === 'découverte',
-      'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category?.name === 'exploration',
-      'text-white bg-amber-600 hover:bg-amber-700': event.category?.name === 'construction',
-      'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category?.name === 'arcanologie',
-      'text-white bg-rose-600 hover:bg-rose-700': event.category?.name === 'criminalité',
-      'text-white bg-stone-600 hover:bg-stone-700': event.category?.name === 'scandale',
-      'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category?.name === 'commerce'
-    }"
     @click="$emit('query:date-jump', event.startDate)"
   >
     <div class="flex gap-2 items-center mb-1">

models/Category.ts

@@ -1,11 +1,14 @@
 import { z } from 'zod'
+import type { RPGColor } from './Color'
 
 export interface Category {
   id: number
   name: string
+  color?: RPGColor
 }
 
 export const categorySchema = z.object({
   id: z.number().int(),
-  name: z.string()
+  name: z.string(),
+  color: z.string().default("black")
 })

models/Color.ts

@@ -0,0 +1 @@
+export type RPGColor = "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "black" | "white"

server/api/calendars/events/[id].patch.ts

@@ -64,6 +64,7 @@ export default defineEventHandler(async (event) => {
 
     return data
   } catch (err) {
+    console.log(err)
     throw createError({
       cause: 'Serveur',
       status: 500,

supabase/migrations/202401_init.sql

@@ -39,7 +39,7 @@ create table public.worlds (
   id            bigint generated by default as identity primary key,
   name          text not null,
   description   text,
-  color         app_colors,
+  color         app_colors default 'black',
   gm_id         uuid references public.users on delete cascade
 );
 comment on table public.worlds is 'Worlds belonging to a single user ; a game master.';
@@ -49,6 +49,7 @@ create table public.calendars (
   id                bigint generated by default as identity primary key,
   name              text not null,
   today             json not null,
+  color             app_colors default 'black',
   world_id          bigint references public.worlds on delete cascade not null
 );
 comment on table public.calendars is 'Calendar settings and configuration attached to a single world.';
@@ -67,6 +68,7 @@ comment on table public.calendar_months is 'A calendar month.';
 create table public.calendar_event_categories (
   id        bigint generated by default as identity primary key,
   name      text not null,
+  color     app_colors default 'black',
   unique (name)
 );
 comment on table public.calendar_event_categories is 'Categories describing events.';
@@ -98,6 +100,7 @@ comment on table public.calendar_event_categories_links is 'Link tables for mult
 create table public.character_categories (
   id        bigint generated by default as identity primary key,
   name      text not null,
+  color     app_colors default 'black',
   unique (name)
 );
 comment on table public.character_categories is 'Categories describing characters';

supabase/seed.sql

@@ -2,38 +2,38 @@ insert into public.role_permissions (role, permission) values ('sa', 'events.see
 insert into public.role_permissions (role, permission) values ('sa', 'users.ban');
 
 -- Event categories
-insert into public.calendar_event_categories (name) values ('naissance');
+insert into public.calendar_event_categories (name, color) values ('Naissance', 'white');
-insert into public.calendar_event_categories (name) values ('mort');
+insert into public.calendar_event_categories (name, color) values ('Mort', 'black');
-insert into public.calendar_event_categories (name) values ('catastrophe');
+insert into public.calendar_event_categories (name, color) values ('Catastrophe', 'orange');
-insert into public.calendar_event_categories (name) values ('catastrophe naturelle');
+insert into public.calendar_event_categories (name, color) values ('Catastrophe naturelle', 'red');
-insert into public.calendar_event_categories (name) values ('inauguration');
+insert into public.calendar_event_categories (name, color) values ('Inauguration', 'green');
-insert into public.calendar_event_categories (name) values ('religion');
+insert into public.calendar_event_categories (name, color) values ('Religion', 'violet');
-insert into public.calendar_event_categories (name) values ('invention');
+insert into public.calendar_event_categories (name, color) values ('Invention', 'teal');
-insert into public.calendar_event_categories (name) values ('science');
+insert into public.calendar_event_categories (name, color) values ('Science', 'indigo');
-insert into public.calendar_event_categories (name) values ('bénédiction');
+insert into public.calendar_event_categories (name, color) values ('Bénédiction', 'white');
-insert into public.calendar_event_categories (name) values ('joueurs');
+insert into public.calendar_event_categories (name, color) values ('Joueurs', 'white');
-insert into public.calendar_event_categories (name) values ('découverte');
+insert into public.calendar_event_categories (name, color) values ('Découverte', 'purple');
-insert into public.calendar_event_categories (name) values ('exploration');
+insert into public.calendar_event_categories (name, color) values ('Exploration', 'lime');
-insert into public.calendar_event_categories (name) values ('construction');
+insert into public.calendar_event_categories (name, color) values ('Construction', 'blue');
-insert into public.calendar_event_categories (name) values ('arcanologie');
+insert into public.calendar_event_categories (name, color) values ('Arcanologie', 'cyan');
-insert into public.calendar_event_categories (name) values ('criminalité');
+insert into public.calendar_event_categories (name, color) values ('Criminalité', 'rose');
-insert into public.calendar_event_categories (name) values ('scandale');
+insert into public.calendar_event_categories (name, color) values ('Scandale', 'pink');
-insert into public.calendar_event_categories (name) values ('commerce');
+insert into public.calendar_event_categories (name, color) values ('Commerce', 'amber');
-insert into public.calendar_event_categories (name) values ('législation');
+insert into public.calendar_event_categories (name, color) values ('Législation', 'blue');
 
 -- Character categories
-insert into public.character_categories (name) values ('joueur');
+insert into public.character_categories (name, color) values ('Joueur', 'white');
-insert into public.character_categories (name) values ('comte');
+insert into public.character_categories (name, color) values ('Comte', 'emerald');
-insert into public.character_categories (name) values ('scientifique');
+insert into public.character_categories (name, color) values ('Scientifique', 'indigo');
-insert into public.character_categories (name) values ('mage');
+insert into public.character_categories (name, color) values ('Mage', 'cyan');
-insert into public.character_categories (name) values ('professeur');
+insert into public.character_categories (name, color) values ('Professeur', 'teal');
-insert into public.character_categories (name) values ('criminel');
+insert into public.character_categories (name, color) values ('Criminel', 'rose');
-insert into public.character_categories (name) values ('étincelle');
+insert into public.character_categories (name, color) values ('Étincelle', 'lime');
-insert into public.character_categories (name) values ('buse blanche');
+insert into public.character_categories (name, color) values ('Buse blanche', 'yellow');
-insert into public.character_categories (name) values ('ecclésiastique');
+insert into public.character_categories (name, color) values ('Ecclésiastique', 'violet');
-insert into public.character_categories (name) values ('militaire');
+insert into public.character_categories (name, color) values ('Militaire', 'orange');
-insert into public.character_categories (name) values ('activiste');
+insert into public.character_categories (name, color) values ('Activiste', 'sky');
-insert into public.character_categories (name) values ('commerçant');
+insert into public.character_categories (name, color) values ('Commerçant', 'amber');
 
 -- Worlds
 insert into public.worlds (name, description, color) values ('Léïm', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet congue aliquet. Curabitur eu iaculis diam. Nunc iaculis nibh orci, eu semper nunc congue congue. Praesent euismod tortor eget metus tristique lobortis vel in risus. In volutpat ligula orci, id pharetra lectus egestas at.', 'black');
@@ -239,7 +239,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '1ère disparation',
+  '1ère disparition',
   'Taleb Vaht décède dans une grotte à la suite d''une attaque d''ischiels enragées.',
   'Cantane',
   '{ "day": 28, "month": 7, "year": 3209 }',
@@ -250,7 +250,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '2ème disparation',
+  '2ème disparition',
   'Donovane le mineur kéturien disparait sans laisser de traces.',
   'Cantane',
   '{ "day": 32, "month": 7, "year": 3209 }',
@@ -261,7 +261,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '3ème disparation',
+  '3ème disparition',
   'Disparition de Sébastien, gredin sauride.',
   'Cantane',
   '{ "day": 10, "month": 8, "year": 3209 }',
@@ -272,7 +272,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '4ème disparation',
+  '4ème disparition',
   'Disparition de Thérence, patrouilleur sauride de la Vieille Garde.',
   'Cantane',
   '{ "day": 19, "month": 8, "year": 3209 }',
@@ -283,7 +283,7 @@ insert into public.calendar_events (title, description, location, start_date, en
   1
 );
 insert into public.calendar_events (title, description, location, start_date, end_date, category, hidden, wiki, calendar_id) values (
-  '5ème disparation',
+  '5ème disparition',
   'Disparition de Mathilda Boulais, vendeuse de pierres.',
   'Cantane',
   '{ "day": 22, "month": 8, "year": 3209 }',