Feat: version 0.0.3 - Beta

Feat: added metrics
Feat: fixed mobile dnd and styles
2025-01-15 15:10:17 +03:00 · 2025-01-15 14:56:02 +03:00 · 2025-01-15 14:55:54 +03:00 · 2025-01-14 23:25:38 +03:00 · 2025-01-14 23:24:04 +03:00 · 2025-01-14 23:23:31 +03:00
18 changed files with 403 additions and 158 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/index.html
+++ b/index.html
@@ -1,10 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>NWaifu Tier Maker</title>
+    <script
+      defer
+      src="https://stats.nwaifu.su/script.js"
+      data-website-id="2167decc-21d6-4f30-bdf3-f00da4b74ee9"
+      data-domains="tiermaker.nwaifu.su"
+    ></script>
  </head>
  <body>
    <div id="root"></div>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "nwtierlist",
  "private": true,
-  "version": "0.0.0",
+  "version": "0.0.3",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -11,10 +11,14 @@
  },
  "dependencies": {
    "@dnd-kit/core": "^6.3.1",
-    "@reduxjs/toolkit": "^2.5.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.3.1",
+    "@mui/material": "^6.3.1",
+    "html2canvas": "^1.4.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
-    "react-redux": "^9.2.0"
+    "zustand": "^5.0.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,40 +1,22 @@
-import { useEffect, useRef } from 'react';
+import { DndContext, DragEndEvent } from '@dnd-kit/core';
+import { GitHub } from '@mui/icons-material';
+import html2canvas from 'html2canvas';
+import { useRef } from 'react';
+import { useShallow } from 'zustand/shallow';
 import './App.scss';
+import { EditTierModal } from './components/EditTierModal';
 import { TierImage } from './components/Image';
-import { Tier, TierProps } from './components/Tier';
-import { useAppDispatch, useAppSelector } from './hooks';
-import { addTierImage } from './store';
+import { Tier } from './components/Tier';
+import { TierModal } from './components/TierModal';
+import { tierImage } from './dto/tier';
+import useStore from './store';

-const default_tier_levels: TierProps[] = [
-  {
-    name: 'S',
-    color: 'green',
-    textColor: 'black',
-  },
-  {
-    name: 'A',
-    color: 'yellow',
-    textColor: 'black',
-  },
-  {
-    name: 'B',
-    color: 'red',
-    textColor: 'black',
-  },
-];
+const App = () => {
+  const [images, addTierImage, tierLevels, editTierImage] = useStore(
+    useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]),
+  );

-interface tierImage {
-  name: string;
-  url: string;
-  category: string;
-}
-
-function App() {
-  const images = useAppSelector(state => state.tierImages);
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    console.log(images);
-  }, [images]);
+  const tierListRef = useRef<HTMLDivElement>(null);

  const uploadBtn = useRef<HTMLInputElement>(null);

@@ -42,38 +24,75 @@ function App() {
    if (uploadBtn.current) uploadBtn.current.click();
  };

-  const getRandomCategoryName = () => {
-    const categoryNames = default_tier_levels.flatMap(category => category.name);
-    return categoryNames[Math.floor(Math.random() * categoryNames.length)];
-  };
-
  const handleAdd = (images: tierImage[]) => {
    images.forEach(image => {
-      dispatch(addTierImage(image));
+      addTierImage(image);
    });
  };

+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (active.data.current && over && over.data.current) {
+      const image: tierImage = active.data.current.image;
+      editTierImage(image, over.data.current.name);
+    }
+  };
+
+  const handleDownloadImage = async () => {
+    if (!tierListRef.current) return;
+    const el = tierListRef.current;
+    const canvas = await html2canvas(el);
+
+    const data = canvas.toDataURL('image/png', 1.0);
+    const link = document.createElement('a');
+
+    if (typeof link.download === 'string') {
+      link.href = data;
+      link.download = 'tierlist.png';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } else {
+      window.open(data);
+    }
+  };
+
  return (
-    <>
-      <div className='flex flex-col w-full'>
-        {default_tier_levels.map(tier_level => (
+    <div className='bg-[#2d3436] w-full h-full pb-5'>
+      <div className='bg-[#2d3436] w-full h-12 flex flex-row justify-center items-center text-[#dfe6e9] text-2xl border-b-2'>
+        NwTierList
+      </div>
+      <DndContext onDragEnd={handleDragEnd}>
+        <div className='flex flex-col w-full' ref={tierListRef}>
+          {tierLevels.map(tier_level => (
            <Tier
              color={tier_level.color}
              textColor={tier_level.textColor}
              name={tier_level.name}
-            key={tier_level.name}
+              id={tier_level.id}
+              key={tier_level.id ?? tier_level.name}
            />
          ))}
        </div>
-      <div className='flex flex-row w-full'>
+        {images.some(image => image.category === '') && (
+          <div className='flex flex-row w-full gap-1 p-5 flex-wrap'>
            {images
              .filter(image => image.category === '')
              .map((image, index) => (
                <TierImage image={image} key={index} />
              ))}
          </div>
-      <div className='border border-black w-20 text-center cursor-pointer' onClick={clickUpload}>
-        <span>Upload</span>
+        )}
+        <TierModal />
+        <EditTierModal />
+      </DndContext>
+      <div
+        className='border border-[#dfe6e9] w-32 text-center cursor-pointer  text-[#dfe6e9] hover:text-[#2d3436] hover:bg-[#dfe6e9] 
+          hover:rounded-xl hover:scale-110 active:text-[#2d3436] active:bg-[#dfe6e9] active:rounded-xl active:scale-110 rounded-lg mt-5 ms-auto me-auto 
+          transition-all duration-300 ease-in-out'
+        onClick={clickUpload}
+      >
+        <span>Add photo</span>
        <input
          type='file'
          name='imageUpload'
@@ -90,7 +109,7 @@ function App() {
                upload_images.push({
                  url: url,
                  name: event.target.files[i].name.replace('.jpeg', ''),
-                  category: getRandomCategoryName(),
+                  category: '',
                });
              }
              handleAdd(upload_images);
@@ -98,8 +117,23 @@ function App() {
          }}
        />
      </div>
-    </>
+      <div
+        className='border border-[#dfe6e9] w-32 text-center cursor-pointer  text-[#dfe6e9] hover:text-[#2d3436] hover:bg-[#dfe6e9] 
+          hover:rounded-xl hover:scale-110 active:text-[#2d3436] active:bg-[#dfe6e9] active:rounded-xl active:scale-110 rounded-lg mt-5 ms-auto me-auto 
+          transition-all duration-300 ease-in-out'
+        onClick={handleDownloadImage}
+      >
+        <span>Export as PNG</span>
+      </div>
+
+      <div className='w-full text-[#dfe6e9] flex flex-row items-center justify-center md:justify-between mt-5 gap-1 md:pe-5 md:ps-5'>
+        <span className='text-[#dfe6e9]'>Version 0.0.3</span>
+        <a href='https://git.nwaifu.su/sergey/NwTierList' target='_blank'>
+          Source Code <GitHub />
+        </a>
+      </div>
+    </div>
  );
-}
+};

 export default App;
--- a/src/components/EditTierModal.tsx
+++ b/src/components/EditTierModal.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { useShallow } from 'zustand/shallow';
+import useStore from '../store';
+export const EditTierModal = () => {
+  const [tierLevel, setTierLevel, editTierLevel] = useStore(
+    useShallow(state => [state.editingTierLevel, state.setEditingTierLevel, state.editTierLevelName]),
+  );
+  const [newName, setNewName] = useState('');
+  useEffect(() => {
+    if (tierLevel) {
+      setNewName(tierLevel.name);
+      document.body.style.overflow = 'hidden';
+    } else document.body.style.overflow = 'auto';
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [tierLevel]);
+  return (
+    <div
+      className={`top-0 left-0 w-screen h-screen z-50 bg-black bg-opacity-50 ${tierLevel ? 'fixed' : 'hidden'}`}
+      onClick={e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setTierLevel(null);
+      }}
+    >
+      <div
+        className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] flex md:w-2/5 w-5/6 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`}
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        {tierLevel && (
+          <div className='flex flex-col gap-4 justify-start items-center'>
+            <input
+              type='text'
+              defaultValue={tierLevel.name}
+              placeholder='Tier Name'
+              className='text-black'
+              onChange={e => setNewName(e.target.value)}
+            ></input>
+            <button
+              onClick={() => {
+                editTierLevel(tierLevel.id as string, newName);
+                setTierLevel(null);
+              }}
+            >
+              Save
+            </button>
+            <button onClick={() => setTierLevel(null)}>Cancel</button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
--- a/src/components/Image.scss
+++ b/src/components/Image.scss
@@ -1,5 +1,10 @@
-.anime-container:hover {
+.anime-container:hover, .anime-container:active {
+  .anime-name {
+    opacity: 0;
+  }
+  @media(min-width: 768px) {
    .anime-name {
      opacity: 100;
    }
  }
+}
--- a/src/components/Image.tsx
+++ b/src/components/Image.tsx
@@ -1,22 +1,38 @@
-import { tierImage } from '../store';
+import { useDraggable } from '@dnd-kit/core';
+import { useEffect } from 'react';
+import { tierImage } from '../dto/tier';
+import useStore from '../store';
 import './Image.scss';
 interface ImageProps {
  image: tierImage;
-  onDragStart?: () => void;
 }

-export const TierImage = ({ image, onDragStart }: ImageProps) => {
+export const TierImage = ({ image }: ImageProps) => {
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+    id: `draggable:${image.name}`,
+    data: { image },
+  });
+  const setModalOpen = useStore(state => state.setTierLevelModalOpen);
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        zIndex: 99999,
+      }
+    : undefined;
+  useEffect(() => {
+    setModalOpen(isDragging);
+  }, [isDragging, setModalOpen]);
  return (
    <div
-      className='flex flex-wrap justify-center gap-4 mr-1 anime-container'
-      onDragStart={() => {
-        // e.preventDefault();
-        if (onDragStart) onDragStart();
-      }}
+      className='flex flex-wrap justify-center gap-4 mr-1 anime-container touch-manipulation'
+      {...listeners}
+      {...attributes}
+      ref={setNodeRef}
+      style={style}
    >
      <div className={`w-[calc(10rem*.5625)] h-40 relative`}>
        <img src={image.url} alt={image.name} className='h-full w-full object-cover' />
-        <div className='w-full bg-slate-500 text-white bg-opacity-70 left-0 top-0 absolute h-full flex justify-center items-center opacity-0 anime-name overflow-hidden p-1 text-center transition duration-500 ease-in-out'>
+        <div className='w-full bg-slate-500 text-white bg-opacity-70 left-0 top-0 absolute h-full flex justify-center items-center md:opacity-0 anime-name overflow-hidden p-1 text-center transition duration-500 ease-in-out text-sm break-all'>
          {image.name.length > 30 ? image.name.slice(0, 30) + '...' : image.name}
        </div>
      </div>
--- a/src/components/Tier.scss
+++ b/src/components/Tier.scss
@@ -0,0 +1,7 @@
+.tier_name:hover {
+  @media(min-width: 768px) {
+    button {
+      opacity: 1;
+    }
+  }
+}
--- a/src/components/Tier.tsx
+++ b/src/components/Tier.tsx
@@ -1,18 +1,19 @@
-import { useState } from 'react';
-import { useAppDispatch, useAppSelector } from '../hooks';
-import { changeTierImage, tierImage } from '../store';
+import EditIcon from '@mui/icons-material/Edit';
+import { useShallow } from 'zustand/shallow';
+import useStore from '../store';
 import { TierImage } from './Image';
+import './Tier.scss';

 export interface TierProps {
-  color: 'red' | 'yellow' | 'green';
+  color: string;
  name: string;
-  textColor: 'white' | 'black';
+  textColor: string;
+  id?: string;
 }
-export const Tier = ({ color, name, textColor }: TierProps) => {
+export const Tier = ({ color, name, textColor, id }: TierProps) => {
  let color_code = '';
  let text_color_code = '';
-  const tierImages = useAppSelector(state => state.tierImages);
-  const dispatch = useAppDispatch();
+  const [tierImages, setEditingTierLevel] = useStore(useShallow(state => [state.images, state.setEditingTierLevel]));
  switch (color) {
    case 'green':
      color_code = '#00b894';
@@ -24,55 +25,44 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
      color_code = '#ffeaa7';
      break;
    default:
-      color_code = '#6c5ce7';
+      color_code = color;
  }
  switch (textColor) {
    case 'white':
      text_color_code = '#dfe6e9';
      break;
-    default:
+    case 'black':
      text_color_code = '#2d3436';
+      break;
+    default:
+      text_color_code = textColor;
  }

-  const [currentDragImage, setCurrentDragImage] = useState<tierImage | null>(null);
-  const [currentDragTier, setCurrentDragTier] = useState<string>('');
-
-  const onDragStart = (image: tierImage) => {
-    setCurrentDragImage(image);
-  };
-
  return (
    <>
+      <div className='w-full min-h-40 bg-[#2d3436] h-auto flex flex-row'>
        <div
-        className='w-full min-h-40 bg-[#2d3436] h-auto flex flex-row'
-        onDragEnd={() => {
-          // e.preventDefault();
-          if (currentDragImage) {
-            if (currentDragImage.category === name) return;
-            console.log(currentDragImage);
-            console.log(name);
-            dispatch(changeTierImage({ ...currentDragImage, category: name }));
-          }
-          setCurrentDragImage(null);
-        }}
-        onDragOver={() => {
-          if (currentDragTier !== name) setCurrentDragTier(name);
-        }}
-      >
-        <div
-          className='w-24 min-h-40 flex items-center justify-center'
+          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,
          }}
        >
+          <button
+            className='absolute right-[5%] top-[5%] md:opacity-0 transition duration-250 ease-in-out'
+            onClick={() => {
+              setEditingTierLevel({ name, color, textColor, id });
+            }}
+          >
+            <EditIcon />
+          </button>
          <p>{name}</p>
        </div>
-        <div className='image-container flex flex-row flex-wrap justify-between w-full h-auto'>
+        <div className='image-container flex flex-row flex-wrap justify-start w-full h-auto gap-1'>
          {tierImages
            .filter(image => image.category === name)
            .map((image, index) => (
-              <TierImage image={image} key={index} onDragStart={() => onDragStart(image)} />
+              <TierImage image={image} key={index} />
            ))}
        </div>
      </div>
--- a/src/components/TierModal.tsx
+++ b/src/components/TierModal.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useShallow } from 'zustand/shallow';
+import useStore from '../store';
+import { TierModalCategory } from './TierModalCategory';
+
+export const TierModal = () => {
+  const [modalOpen, tierLevels] = useStore(useShallow(state => [state.tierLevelsModalOpen, state.tierLevels]));
+
+  useEffect(() => {
+    if (modalOpen) document.body.style.overflow = 'hidden';
+    else document.body.style.overflow = 'auto';
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [modalOpen]);
+
+  return (
+    <div
+      className={`fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] ${
+        modalOpen ? 'flex' : 'hidden'
+      } min-w-[300px] md:w-[70vw] md:h-1/4 h-[90vh] bg-[#1e2324] 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} />
+      ))}
+    </div>
+  );
+};
--- a/src/components/TierModalCategory.tsx
+++ b/src/components/TierModalCategory.tsx
@@ -0,0 +1,47 @@
+import { useDroppable } from '@dnd-kit/core';
+import { darkenRgbColor } from '../tools/colors';
+
+interface TierModalCategoryProps {
+  color: string;
+  textColor: string;
+  name: string;
+}
+
+export const TierModalCategory = ({ color, textColor, name }: TierModalCategoryProps) => {
+  const { setNodeRef, isOver } = useDroppable({
+    id: 'droppable:' + name,
+    data: { name },
+  });
+  const darkRGB = darkenRgbColor(color, 40);
+
+  const getTextColorCode = (textColor: string) => {
+    let text_color_code = '';
+    switch (textColor) {
+      case 'white':
+        text_color_code = '#dfe6e9';
+        break;
+      case 'black':
+        text_color_code = '#2d3436';
+        break;
+      default:
+        text_color_code = textColor;
+    }
+    return text_color_code;
+  };
+
+  const style = {
+    backgroundColor: isOver ? darkRGB : color,
+    color: getTextColorCode(textColor),
+  };
+
+  return (
+    <div
+      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}
+    >
+      {name}
+    </div>
+  );
+};
--- a/src/dto/tier.ts
+++ b/src/dto/tier.ts
@@ -0,0 +1,6 @@
+export interface tierImage {
+  name: string;
+  url: string;
+  category: string;
+  id?: string;
+}
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -1,5 +0,0 @@
-import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, RootState } from './store';
-
-export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
-export const useAppSelector = useSelector.withTypes<RootState>();
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+:root {
+  background-color: #2d3436;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,14 +1,10 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Provider } from 'react-redux';
 import App from './App.tsx';
 import './index.scss';
-import store from './store.ts';

 createRoot(document.getElementById('root')!).render(
  <StrictMode>
-    <Provider store={store}>
    <App />
-    </Provider>
  </StrictMode>,
 );
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,39 +1,62 @@
-import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { TierProps } from './components/Tier';
+import { tierImage } from './dto/tier';
+import { generateTierLevel } from './tools/genarators';

-export interface tierImage {
-  name: string;
-  url: string;
-  category: string;
+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;
+  editTierImage: (image: tierImage, tier: string) => void;
+  removeTierImage: (image: tierImage) => void;
+  tierLevelsModalOpen: boolean;
+  setTierLevelModalOpen: (open: boolean) => void;
+  tierLevels: TierProps[];
+  addTierLevel: (name: string, color: string, textColor: string) => void;
+  editTierLevelName: (id: string, name: string) => void;
+  editingTierLevel: TierProps | null;
+  setEditingTierLevel: (level: TierProps | null) => void;
 }

-const tierImages = createSlice({
-  name: 'images',
-  initialState: [] as tierImage[],
-  reducers: {
-    addTierImage: (state, action: PayloadAction<tierImage>) => {
-      state.push(action.payload);
+const useStore = create(
+  devtools<tierStore>(
+    set => ({
+      images: [] as tierImage[],
+      addTierImage: (image: tierImage) => set(state => ({ images: [...state.images, image] })),
+      editTierImage: (image: tierImage, tier: string) =>
+        set(state => ({
+          images:
+            image.category === tier
+              ? state.images
+              : state.images.map(i => (i.name === image.name ? { ...i, category: tier } : i)),
+        })),
+      removeTierImage: (image: tierImage) => {
+        URL.revokeObjectURL(image.url);
+        set(state => ({ images: state.images.filter(i => i.name !== image.name) }));
      },
-    removeTierImage: (state, action: PayloadAction<string>) => {
-      return state.filter(image => image.name !== action.payload);
-    },
-    changeTierImage: (state, action: PayloadAction<tierImage>) => {
-      return state.map(image => {
-        if (image.name == action.payload.name) return action.payload;
-        return image;
-      });
-    },
-  },
-});
+      tierLevelsModalOpen: false,
+      setTierLevelModalOpen: (open: boolean) => set({ tierLevelsModalOpen: open }),
+      tierLevels: defaultTierLevels,
+      addTierLevel: (name: string, color: string, textColor: string) =>
+        set(state => ({ tierLevels: [...state.tierLevels, generateTierLevel(name, color, textColor)] })),
+      editTierLevelName: (id: string, name: string) =>
+        set(state => ({ tierLevels: state.tierLevels.map(t => (t.id === id ? { ...t, name } : t)) })),
+      editingTierLevel: null,
+      setEditingTierLevel: (level: TierProps | null) => set({ editingTierLevel: level }),
+    }),
+    { name: 'tierStore' },
+  ),
+);

-export const { addTierImage, removeTierImage, changeTierImage } = tierImages.actions;
-
-const store = configureStore({
-  reducer: {
-    tierImages: tierImages.reducer,
-  },
-});
-
-export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
-
-export default store;
+export default useStore;
--- a/src/tools/colors.ts
+++ b/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})`;
+};
--- a/src/tools/genarators.ts
+++ b/src/tools/genarators.ts
@@ -0,0 +1,10 @@
+import { TierProps } from '../components/Tier';
+
+export const generateTierLevel = (name: string, color: string, textColor: string): TierProps => {
+  return {
+    name,
+    color,
+    textColor,
+    id: crypto.randomUUID(),
+  };
+};
Author	SHA1	Message	Date
Sergey Elpashev	4e829b6ff5	Feat: version 0.0.3 - Beta	2025-01-15 15:10:17 +03:00
Sergey Elpashev	6cda6fee45	Feat: added metrics	2025-01-15 14:56:02 +03:00
Sergey Elpashev	0157a63201	Feat: fixed mobile dnd and styles	2025-01-15 14:55:54 +03:00
Sergey Elpashev	1ee4043c0e	Feat: some change in index.html	2025-01-14 23:25:38 +03:00
Sergey Elpashev	2fd088019e	Feat: version 0.0.2 -Beta	2025-01-14 23:24:04 +03:00
Sergey Elpashev	2c44abc320	Feat: added export as image btn	2025-01-14 23:23:31 +03:00
Sergey Elpashev	ff5dc072a0	Feat: first-beta	2025-01-14 15:27:46 +03:00
Sergey Elpashev	bfc9b9a367	Feat: new categories and mobile	2025-01-13 16:50:13 +03:00
Sergey Elpashev	ae7c821562	Feat: edit tier level name	2025-01-10 16:02:21 +03:00
Sergey Elpashev	c30855beda	Feat: started working on tier level edit	2025-01-10 15:18:59 +03:00
Sergey Elpashev	1cfdb5ee08	Feat: fully working dnd	2025-01-10 14:19:32 +03:00
Sergey Elpashev	3260e0403e	Feat: moved to zustand from redux	2025-01-10 11:07:22 +03:00