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

Compare commits

base: sergey:a74b499d836a10476aba775a212e19992edc2dd8
Branches Tags
sergey:master sergey:dev
sergey:v0.0.3 sergey:v0.0.2 sergey:v0.0.1
...
compare: sergey:ae7c8215626ea15b6d42ad0e3bd04bc140320075
Branches Tags
sergey:dev sergey:master
sergey:v0.0.3 sergey:v0.0.2 sergey:v0.0.1

5 Commits
a74b499d83 ... ae7c821562

Author SHA1 Message Date
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
Sergey Elpashev
f35bb1d8dd Feat: updated images styles 2025-01-10 10:16:10 +03:00
19 changed files with 317 additions and 138 deletions
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" />

8
package.json
View File

@@ -11,10 +11,13 @@
}, },
"dependencies": { "dependencies": {
"@dnd-kit/core": "^6.3.1", "@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",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-redux": "^9.2.0" "zustand": "^5.0.3"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.17.0", "@eslint/js": "^9.17.0",
@@ -27,6 +30,7 @@
"eslint-plugin-react-refresh": "^0.4.16", "eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0", "globals": "^15.14.0",
"postcss": "^8.4.49", "postcss": "^8.4.49",
"sass-embedded": "^1.83.1",
"tailwindcss": "^3.4.17", "tailwindcss": "^3.4.17",
"typescript": "~5.6.2", "typescript": "~5.6.2",
"typescript-eslint": "^8.18.2", "typescript-eslint": "^8.18.2",

0
src/App.css → src/App.scss
View File

81
src/App.tsx
View File

@@ -1,40 +1,18 @@
import { useEffect, useRef } from 'react'; import { DndContext, DragEndEvent } from '@dnd-kit/core';
import './App.css'; import { useRef } from 'react';
import { useShallow } from 'zustand/shallow';
import './App.scss';
import { EditTierModal } from './components/EditTierModal';
import { TierImage } from './components/Image'; import { TierImage } from './components/Image';
import { Tier, TierProps } from './components/Tier'; import { Tier } from './components/Tier';
import { useAppDispatch, useAppSelector } from './hooks'; import { TierModal } from './components/TierModal';
import { addTierImage } from './store'; import { tierImage } from './dto/tier';
import useStore from './store';
const default_tier_levels: TierProps[] = [ const App = () => {
{ const [images, addTierImage, tierLevels, editTierImage] = useStore(
name: 'S', useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]),
color: 'green', );
textColor: 'black',
},
{
name: 'A',
color: 'yellow',
textColor: 'black',
},
{
name: 'B',
color: 'red',
textColor: 'black',
},
];
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 uploadBtn = useRef<HTMLInputElement>(null); const uploadBtn = useRef<HTMLInputElement>(null);
@@ -42,30 +20,34 @@ function App() {
if (uploadBtn.current) uploadBtn.current.click(); 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[]) => { const handleAdd = (images: tierImage[]) => {
images.forEach(image => { 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);
}
};
return ( return (
<> <DndContext onDragEnd={handleDragEnd}>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
{default_tier_levels.map(tier_level => ( {tierLevels.map(tier_level => (
<Tier <Tier
color={tier_level.color} color={tier_level.color}
textColor={tier_level.textColor} textColor={tier_level.textColor}
name={tier_level.name} name={tier_level.name}
key={tier_level.name} id={tier_level.id}
key={tier_level.id ?? tier_level.name}
/> />
))} ))}
</div> </div>
<div className='flex flex-row w-full'> <div className='flex flex-row w-full gap-1 p-5'>
{images {images
.filter(image => image.category === '') .filter(image => image.category === '')
.map((image, index) => ( .map((image, index) => (
@@ -79,6 +61,7 @@ function App() {
name='imageUpload' name='imageUpload'
accept='.jpeg' accept='.jpeg'
ref={uploadBtn} ref={uploadBtn}
multiple
style={{ display: 'none' }} style={{ display: 'none' }}
onChange={event => { onChange={event => {
console.log(event.target.files); console.log(event.target.files);
@@ -89,7 +72,7 @@ function 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);
@@ -97,8 +80,10 @@ function App() {
}} }}
/> />
</div> </div>
</> <TierModal />
<EditTierModal />
</DndContext>
); );
} };
export default App; export default App;

52
src/components/EditTierModal.tsx Normal file
View File

@@ -0,0 +1,52 @@
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);
}, [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 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`}
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>
);
};

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

@@ -0,0 +1,5 @@
.anime-container:hover {
.anime-name {
opacity: 100;
}
}

39
src/components/Image.tsx
View File

@@ -1,22 +1,39 @@
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 { interface ImageProps {
image: tierImage; 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 ( return (
<div <div
className='flex flex-wrap justify-center gap-4 mr-1' className='flex flex-wrap justify-center gap-4 mr-1 anime-container'
onDragStart={() => { {...listeners}
// e.preventDefault(); {...attributes}
if (onDragStart) onDragStart(); ref={setNodeRef}
}} style={style}
> >
<div className={`w-[calc(20rem*.5625)] h-80 relative`}> <div className={`w-[calc(10rem*.5625)] h-40 relative`}>
<img src={image.url} alt={image.name} className='h-full w-full object-cover' /> <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 text-center bottom-0 left-0 absolute'> <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'>
{image.name} {image.name.length > 30 ? image.name.slice(0, 30) + '...' : image.name}
</div> </div>
</div> </div>
</div> </div>

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

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

53
src/components/Tier.tsx
View File

@@ -1,18 +1,19 @@
import { useState } from 'react'; import EditIcon from '@mui/icons-material/Edit';
import { useAppDispatch, useAppSelector } from '../hooks'; import { useShallow } from 'zustand/shallow';
import { changeTierImage, tierImage } from '../store'; import useStore from '../store';
import { TierImage } from './Image'; import { TierImage } from './Image';
import './Tier.scss';
export interface TierProps { export interface TierProps {
color: 'red' | 'yellow' | 'green'; color: string;
name: 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 color_code = '';
let text_color_code = ''; let text_color_code = '';
const tierImages = useAppSelector(state => state.tierImages); const [tierImages, setEditingTierLevel] = useStore(useShallow(state => [state.images, state.setEditingTierLevel]));
const dispatch = useAppDispatch();
switch (color) { switch (color) {
case 'green': case 'green':
color_code = '#00b894'; color_code = '#00b894';
@@ -24,46 +25,44 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
color_code = '#ffeaa7'; color_code = '#ffeaa7';
break; break;
default: default:
color_code = '#6c5ce7'; color_code = color;
} }
switch (textColor) { switch (textColor) {
case 'white': case 'white':
text_color_code = '#dfe6e9'; text_color_code = '#dfe6e9';
break; break;
default: case 'black':
text_color_code = '#2d3436'; text_color_code = '#2d3436';
break;
default:
text_color_code = textColor;
} }
const [currentDragImage, setCurrentDragImage] = useState<tierImage | null>(null);
const onDragStart = (image: tierImage) => {
setCurrentDragImage(image);
};
return ( return (
<> <>
<div <div className='w-full min-h-40 bg-[#2d3436] h-auto flex flex-row'>
className='w-full min-h-64 bg-[#2d3436] h-auto flex flex-row'
onDragEnd={() => {
// e.preventDefault();
if (currentDragImage) dispatch(changeTierImage(currentDragImage));
setCurrentDragImage(null);
}}
>
<div <div
className='w-52 h-80 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'
onClick={() => {
setEditingTierLevel({ name, color, textColor, id });
}}
>
<EditIcon />
</button>
<p>{name}</p> <p>{name}</p>
</div> </div>
<div className='image-container flex flex-row gap-1'> <div className='image-container flex flex-row flex-wrap justify-between w-full h-auto'>
{tierImages {tierImages
.filter(image => image.category === name) .filter(image => image.category === name)
.map((image, index) => ( .map((image, index) => (
<TierImage image={image} key={index} onDragStart={() => onDragStart(image)} /> <TierImage image={image} key={index} />
))} ))}
</div> </div>
</div> </div>

19
src/components/TierModal.tsx Normal file
View File

@@ -0,0 +1,19 @@
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]));
return (
<div
className={`absolute 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`}
>
{tierLevels.map(tier_level => (
<TierModalCategory name={tier_level.name} color={tier_level.color} textColor={tier_level.textColor} />
))}
</div>
);
};

67
src/components/TierModalCategory.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { useDroppable } from '@dnd-kit/core';
import { useEffect } from 'react';
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 getColorCode = (color: string) => {
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) {
case 'white':
text_color_code = '#dfe6e9';
break;
case 'black':
text_color_code = '#2d3436';
break;
default:
text_color_code = textColor;
}
return text_color_code;
};
useEffect(() => {
console.log(isOver);
}, [isOver]);
const style = {
backgroundColor: getColorCode(color),
color: getTextColorCode(textColor),
};
return (
<div
className={`w-32 h-32 flex justify-center items-center font-bold text-2xl rounded-lg`}
style={style}
key={name}
ref={setNodeRef}
>
{name}
</div>
);
};

6
src/dto/tier.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface tierImage {
name: string;
url: string;
category: string;
id?: string;
}

5
src/hooks.ts
View File

@@ -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>();

0
src/index.css → src/index.scss
View File

8
src/main.tsx
View File

@@ -1,14 +1,10 @@
import { StrictMode } from 'react'; import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App.tsx'; import App from './App.tsx';
import './index.css'; import './index.scss';
import store from './store.ts';
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<Provider store={store}> <App />
<App />
</Provider>
</StrictMode>, </StrictMode>,
); );

86
src/store.ts
View File

@@ -1,39 +1,55 @@
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 { interface tierStore {
name: string; images: tierImage[];
url: string; addTierImage: (image: tierImage) => void;
category: string; 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({ const useStore = create(
name: 'images', devtools<tierStore>(
initialState: [] as tierImage[], set => ({
reducers: { images: [] as tierImage[],
addTierImage: (state, action: PayloadAction<tierImage>) => { addTierImage: (image: tierImage) => set(state => ({ images: [...state.images, image] })),
state.push(action.payload); editTierImage: (image: tierImage, tier: string) =>
}, set(state => ({
removeTierImage: (state, action: PayloadAction<string>) => { images:
return state.filter(image => image.name !== action.payload); image.category === tier
}, ? state.images
changeTierImage: (state, action: PayloadAction<tierImage>) => { : state.images.map(i => (i.name === image.name ? { ...i, category: tier } : i)),
return state.map(image => { })),
if (image.name == action.payload.name) return action.payload; removeTierImage: (image: tierImage) => {
return image; URL.revokeObjectURL(image.url);
}); set(state => ({ images: state.images.filter(i => i.name !== image.name) }));
}, },
}, tierLevelsModalOpen: false,
}); setTierLevelModalOpen: (open: boolean) => set({ tierLevelsModalOpen: open }),
tierLevels: [
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) =>
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; export default useStore;
const store = configureStore({
reducer: {
tierImages: tierImages.reducer,
},
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;

10
src/tools/genarators.ts Normal file
View File

@@ -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(),
};
};

9
vite.config.ts
View File

@@ -1,7 +1,10 @@
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc';
import react from '@vitejs/plugin-react-swc' import { defineConfig } from 'vite';
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
}) define: {
'process.env': {},
},
});