sergey/NwTierList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: started working on tier level edit

Browse Source
This commit is contained in:
Sergey Elpashev
2025-01-10 15:18:59 +03:00
parent 1cfdb5ee08
commit c30855beda
8 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

2
index.html
View File

@@ -1,4 +1,4 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

4
package.json
View File

@@ -11,6 +11,10 @@
}, },
"dependencies": { "dependencies": {
"@dnd-kit/core": "^6.3.1", "@dnd-kit/core": "^6.3.1",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.3.1",
"@mui/material": "^6.3.1",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"zustand": "^5.0.3" "zustand": "^5.0.3"

16
src/App.tsx
View File

@@ -5,14 +5,9 @@ import './App.scss';
import { TierImage } from './components/Image'; import { TierImage } from './components/Image';
import { Tier } from './components/Tier'; import { Tier } from './components/Tier';
import { TierModal } from './components/TierModal'; import { TierModal } from './components/TierModal';
import { tierImage } from './dto/tier';
import useStore from './store'; import useStore from './store';
interface tierImage {
name: string;
url: string;
category: string;
}
const App = () => { const App = () => {
const [images, addTierImage, tierLevels, editTierImage] = useStore( const [images, addTierImage, tierLevels, editTierImage] = useStore(
useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]), useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]),
@@ -24,11 +19,6 @@ const App = () => {
if (uploadBtn.current) uploadBtn.current.click(); if (uploadBtn.current) uploadBtn.current.click();
}; };
const getRandomCategoryName = () => {
const categoryNames = tierLevels.flatMap(category => category.name);
return categoryNames[Math.floor(Math.random() * categoryNames.length)];
};
const handleAdd = (images: tierImage[]) => { const handleAdd = (images: tierImage[]) => {
images.forEach(image => { images.forEach(image => {
addTierImage(image); addTierImage(image);
@@ -55,7 +45,7 @@ const App = () => {
/> />
))} ))}
</div> </div>
<div className='flex flex-row w-full'> <div className='flex flex-row w-full '>
{images {images
.filter(image => image.category === '') .filter(image => image.category === '')
.map((image, index) => ( .map((image, index) => (
@@ -80,7 +70,7 @@ const App = () => {
upload_images.push({ upload_images.push({
url: url, url: url,
name: event.target.files[i].name.replace('.jpeg', ''), name: event.target.files[i].name.replace('.jpeg', ''),
category: getRandomCategoryName(), category: '',
}); });
} }
handleAdd(upload_images); handleAdd(upload_images);

5
src/components/Tier.scss Normal file
View File

@@ -0,0 +1,5 @@
.tier_name:hover {
button {
opacity: 1;
}
}

7
src/components/Tier.tsx
View File

@@ -1,5 +1,7 @@
import EditIcon from '@mui/icons-material/Edit';
import useStore from '../store'; import useStore from '../store';
import { TierImage } from './Image'; import { TierImage } from './Image';
import './Tier.scss';
export interface TierProps { export interface TierProps {
color: string; color: string;
@@ -39,12 +41,15 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
<> <>
<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'>
<div <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'
style={{ style={{
color: text_color_code, color: text_color_code,
backgroundColor: color_code, backgroundColor: color_code,
}} }}
> >
<button className='absolute right-[5%] top-[5%] opacity-0 transition duration-250 ease-in-out'>
<EditIcon />
</button>
<p>{name}</p> <p>{name}</p>
</div> </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-between w-full h-auto'>

1
src/dto/tier.ts
View File

@@ -2,4 +2,5 @@ export interface tierImage {
name: string; name: string;
url: string; url: string;
category: string; category: string;
id?: string;
} }

5
src/main.tsx
View File

@@ -1,4 +1,3 @@
import { DndContext } from '@dnd-kit/core';
import { StrictMode } from 'react'; import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import App from './App.tsx'; import App from './App.tsx';
@@ -6,8 +5,6 @@ import './index.scss';
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<DndContext> <App />
<App />
</DndContext>
</StrictMode>, </StrictMode>,
); );