Feat: new categories and mobile

src/App.tsx

@@ -47,7 +47,7 @@ const App = () => {
           />
         ))}
       </div>
-      <div className='flex flex-row w-full gap-1 p-5'>
+      <div className='flex flex-row w-full gap-1 p-5 flex-wrap'>
         {images
           .filter(image => image.category === '')
           .map((image, index) => (

src/components/Image.tsx

@@ -24,7 +24,7 @@ export const TierImage = ({ image }: ImageProps) => {
   }, [isDragging, setModalOpen]);
   return (
     <div
-      className='flex flex-wrap justify-center gap-4 mr-1 anime-container'
+      className='flex flex-wrap justify-center gap-4 mr-1 anime-container touch-manipulation'
       {...listeners}
       {...attributes}
       ref={setNodeRef}

src/components/Tier.tsx

@@ -42,7 +42,7 @@ export const Tier = ({ color, name, textColor, id }: TierProps) => {
     <>
       <div className='w-full min-h-40 bg-[#2d3436] h-auto flex flex-row'>
         <div
-          className='w-24 min-h-40 flex items-center justify-center relative tier_name'
+          className='w-24 min-h-40 flex items-center justify-center relative tier_name text-center text-xs'
           style={{
             color: text_color_code,
             backgroundColor: color_code,

src/components/TierModal.tsx

@@ -7,9 +7,9 @@ export const TierModal = () => {
 
   return (
     <div
-      className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] ${
+      className={`fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] ${
         modalOpen ? 'flex' : 'hidden'
-      } w-2/5 h-1/4 bg-[#2d3436] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-row gap-4 justify-center items-center text-white border-white border-2`}
+      } min-w-[300px] md:w-[70vw] md:h-1/4 h-[90vh] bg-[#2d3436] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-col md:flex-row gap-4 justify-center items-center text-white border-white border-2`}
     >
       {tierLevels.map(tier_level => (
         <TierModalCategory name={tier_level.name} color={tier_level.color} textColor={tier_level.textColor} />

src/components/TierModalCategory.tsx

@@ -1,5 +1,5 @@
 import { useDroppable } from '@dnd-kit/core';
-import { useEffect } from 'react';
+import { darkenRgbColor } from '../tools/colors';
 
 interface TierModalCategoryProps {
   color: string;
@@ -12,24 +12,8 @@ export const TierModalCategory = ({ color, textColor, name }: TierModalCategoryP
     id: 'droppable:' + name,
     data: { name },
   });
-  const getColorCode = (color: string) => {
+  const darkRGB = darkenRgbColor(color, 40);
-    let color_code = '';
+
-    // TODO: color on hover
-    switch (color) {
-      case 'green':
-        color_code = isOver ? '#55efc4' : '#00b894';
-        break;
-      case 'red':
-        color_code = isOver ? '#d63031' : '#ff7675';
-        break;
-      case 'yellow':
-        color_code = isOver ? '#fdcb6e' : '#ffeaa7';
-        break;
-      default:
-        color_code = color;
-    }
-    return color_code;
-  };
   const getTextColorCode = (textColor: string) => {
     let text_color_code = '';
     switch (textColor) {
@@ -45,18 +29,14 @@ export const TierModalCategory = ({ color, textColor, name }: TierModalCategoryP
     return text_color_code;
   };
 
-  useEffect(() => {
-    console.log(isOver);
-  }, [isOver]);
-
   const style = {
-    backgroundColor: getColorCode(color),
+    backgroundColor: isOver ? darkRGB : color,
     color: getTextColorCode(textColor),
   };
 
   return (
     <div
-      className={`w-32 h-32 flex justify-center items-center font-bold text-2xl rounded-lg`}
+      className={`md:w-32 md:min-h-32 w-16 min-h-16 flex justify-center items-center font-bold text-sm md:text-xl rounded-lg text-center`}
       style={style}
       key={name}
       ref={setNodeRef}

src/store.ts

@@ -4,6 +4,17 @@ import { TierProps } from './components/Tier';
 import { tierImage } from './dto/tier';
 import { generateTierLevel } from './tools/genarators';
 
+const defaultTierLevels: TierProps[] = [
+  generateTierLevel('S', 'rgb(255, 127, 127)', 'black'),
+  generateTierLevel('A', 'rgb(255, 191, 127)', 'black'),
+  generateTierLevel('B', 'rgb(255, 223, 127)', 'black'),
+  generateTierLevel('C', 'rgb(255, 255, 127)', 'black'),
+  generateTierLevel('D', 'rgb(191, 255, 127)', 'black'),
+  generateTierLevel('E', 'rgb(127, 255, 127)', 'black'),
+  generateTierLevel('F', 'rgb(127, 255, 255)', 'black'),
+  generateTierLevel("Haven't watched yet", 'rgb(127, 191, 255)', 'black'),
+];
+
 interface tierStore {
   images: tierImage[];
   addTierImage: (image: tierImage) => void;
@@ -36,11 +47,7 @@ const useStore = create(
       },
       tierLevelsModalOpen: false,
       setTierLevelModalOpen: (open: boolean) => set({ tierLevelsModalOpen: open }),
-      tierLevels: [
+      tierLevels: defaultTierLevels,
-        generateTierLevel('S', 'green', 'black'),
-        generateTierLevel('A', 'yellow', 'black'),
-        generateTierLevel('B', 'red', 'black'),
-      ] as TierProps[],
       addTierLevel: (name: string, color: string, textColor: string) =>
         set(state => ({ tierLevels: [...state.tierLevels, generateTierLevel(name, color, textColor)] })),
       editTierLevelName: (id: string, name: string) =>

src/tools/colors.ts

@@ -0,0 +1,18 @@
+export const darkenRgbColor = (rgbColor: string, percentage: number): string => {
+  const rgbRegex = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
+  const match = rgbColor.match(rgbRegex);
+  if (!match || percentage < 0 || percentage > 100) {
+    return rgbColor;
+  }
+
+  const r = parseInt(match[1]);
+  const g = parseInt(match[2]);
+  const b = parseInt(match[3]);
+
+  const factor = percentage / 100;
+  const newR = Math.max(0, Math.round(r * (1 - factor)));
+  const newG = Math.max(0, Math.round(g * (1 - factor)));
+  const newB = Math.max(0, Math.round(b * (1 - factor)));
+
+  return `rgb(${newR}, ${newG}, ${newB})`;
+};