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

Compare commits

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

8 Commits
ae7c821562 ... master

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
14 changed files with 155 additions and 69 deletions
Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

9
index.html
View File

@@ -2,9 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

3
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "nwtierlist", "name": "nwtierlist",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.3",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
@@ -15,6 +15,7 @@
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.3.1", "@mui/icons-material": "^6.3.1",
"@mui/material": "^6.3.1", "@mui/material": "^6.3.1",
"html2canvas": "^1.4.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"

64
src/App.tsx
View File

@@ -1,4 +1,6 @@
import { DndContext, DragEndEvent } from '@dnd-kit/core'; import { DndContext, DragEndEvent } from '@dnd-kit/core';
import { GitHub } from '@mui/icons-material';
import html2canvas from 'html2canvas';
import { useRef } from 'react'; import { useRef } from 'react';
import { useShallow } from 'zustand/shallow'; import { useShallow } from 'zustand/shallow';
import './App.scss'; import './App.scss';
@@ -14,6 +16,8 @@ const App = () => {
useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]), useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]),
); );
const tierListRef = useRef<HTMLDivElement>(null);
const uploadBtn = useRef<HTMLInputElement>(null); const uploadBtn = useRef<HTMLInputElement>(null);
const clickUpload = () => { const clickUpload = () => {
@@ -34,9 +38,32 @@ const App = () => {
} }
}; };
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 ( return (
<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}> <DndContext onDragEnd={handleDragEnd}>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full' ref={tierListRef}>
{tierLevels.map(tier_level => ( {tierLevels.map(tier_level => (
<Tier <Tier
color={tier_level.color} color={tier_level.color}
@@ -47,15 +74,25 @@ const App = () => {
/> />
))} ))}
</div> </div>
<div className='flex flex-row w-full gap-1 p-5'> {images.some(image => image.category === '') && (
<div className='flex flex-row w-full gap-1 p-5 flex-wrap'>
{images {images
.filter(image => image.category === '') .filter(image => image.category === '')
.map((image, index) => ( .map((image, index) => (
<TierImage image={image} key={index} /> <TierImage image={image} key={index} />
))} ))}
</div> </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 <input
type='file' type='file'
name='imageUpload' name='imageUpload'
@@ -80,9 +117,22 @@ const App = () => {
}} }}
/> />
</div> </div>
<TierModal /> <div
<EditTierModal /> className='border border-[#dfe6e9] w-32 text-center cursor-pointer text-[#dfe6e9] hover:text-[#2d3436] hover:bg-[#dfe6e9]
</DndContext> 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>
); );
}; };

11
src/components/EditTierModal.tsx
View File

@@ -1,14 +1,19 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useShallow } from 'zustand/shallow'; import { useShallow } from 'zustand/shallow';
import useStore from '../store'; import useStore from '../store';
export const EditTierModal = () => { export const EditTierModal = () => {
const [tierLevel, setTierLevel, editTierLevel] = useStore( const [tierLevel, setTierLevel, editTierLevel] = useStore(
useShallow(state => [state.editingTierLevel, state.setEditingTierLevel, state.editTierLevelName]), useShallow(state => [state.editingTierLevel, state.setEditingTierLevel, state.editTierLevelName]),
); );
const [newName, setNewName] = useState(''); const [newName, setNewName] = useState('');
useEffect(() => { useEffect(() => {
if (tierLevel) setNewName(tierLevel.name); if (tierLevel) {
setNewName(tierLevel.name);
document.body.style.overflow = 'hidden';
} else document.body.style.overflow = 'auto';
return () => {
document.body.style.overflow = 'auto';
};
}, [tierLevel]); }, [tierLevel]);
return ( return (
<div <div
@@ -20,7 +25,7 @@ export const EditTierModal = () => {
}} }}
> >
<div <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`} 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 => { onClick={e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

7
src/components/Image.scss
View File

@@ -1,5 +1,10 @@
.anime-container:hover { .anime-container:hover, .anime-container:active {
.anime-name {
opacity: 0;
}
@media(min-width: 768px) {
.anime-name { .anime-name {
opacity: 100; opacity: 100;
} }
} }
}

4
src/components/Image.tsx
View File

@@ -24,7 +24,7 @@ export const TierImage = ({ image }: ImageProps) => {
}, [isDragging, setModalOpen]); }, [isDragging, setModalOpen]);
return ( return (
<div <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} {...listeners}
{...attributes} {...attributes}
ref={setNodeRef} ref={setNodeRef}
@@ -32,7 +32,7 @@ export const TierImage = ({ image }: ImageProps) => {
> >
<div className={`w-[calc(10rem*.5625)] h-40 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 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} {image.name.length > 30 ? image.name.slice(0, 30) + '...' : image.name}
</div> </div>
</div> </div>

2
src/components/Tier.scss
View File

@@ -1,5 +1,7 @@
.tier_name:hover { .tier_name:hover {
@media(min-width: 768px) {
button { button {
opacity: 1; opacity: 1;
} }
} }
}

6
src/components/Tier.tsx
View File

@@ -42,14 +42,14 @@ 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-full min-h-40 bg-[#2d3436] h-auto flex flex-row'>
<div <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={{ style={{
color: text_color_code, color: text_color_code,
backgroundColor: color_code, backgroundColor: color_code,
}} }}
> >
<button <button
className='absolute right-[5%] top-[5%] opacity-0 transition duration-250 ease-in-out' className='absolute right-[5%] top-[5%] md:opacity-0 transition duration-250 ease-in-out'
onClick={() => { onClick={() => {
setEditingTierLevel({ name, color, textColor, id }); setEditingTierLevel({ name, color, textColor, id });
}} }}
@@ -58,7 +58,7 @@ export const Tier = ({ color, name, textColor, id }: TierProps) => {
</button> </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-start w-full h-auto gap-1'>
{tierImages {tierImages
.filter(image => image.category === name) .filter(image => image.category === name)
.map((image, index) => ( .map((image, index) => (

13
src/components/TierModal.tsx
View File

@@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { useShallow } from 'zustand/shallow'; import { useShallow } from 'zustand/shallow';
import useStore from '../store'; import useStore from '../store';
import { TierModalCategory } from './TierModalCategory'; import { TierModalCategory } from './TierModalCategory';
@@ -5,11 +6,19 @@ import { TierModalCategory } from './TierModalCategory';
export const TierModal = () => { export const TierModal = () => {
const [modalOpen, tierLevels] = useStore(useShallow(state => [state.tierLevelsModalOpen, state.tierLevels])); 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 ( return (
<div <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' 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-[#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 => ( {tierLevels.map(tier_level => (
<TierModalCategory name={tier_level.name} color={tier_level.color} textColor={tier_level.textColor} /> <TierModalCategory name={tier_level.name} color={tier_level.color} textColor={tier_level.textColor} />

30
src/components/TierModalCategory.tsx
View File

@@ -1,5 +1,5 @@
import { useDroppable } from '@dnd-kit/core'; import { useDroppable } from '@dnd-kit/core';
import { useEffect } from 'react'; import { darkenRgbColor } from '../tools/colors';
interface TierModalCategoryProps { interface TierModalCategoryProps {
color: string; color: string;
@@ -12,24 +12,8 @@ export const TierModalCategory = ({ color, textColor, name }: TierModalCategoryP
id: 'droppable:' + name, id: 'droppable:' + name,
data: { 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) => { const getTextColorCode = (textColor: string) => {
let text_color_code = ''; let text_color_code = '';
switch (textColor) { switch (textColor) {
@@ -45,18 +29,14 @@ export const TierModalCategory = ({ color, textColor, name }: TierModalCategoryP
return text_color_code; return text_color_code;
}; };
useEffect(() => {
console.log(isOver);
}, [isOver]);
const style = { const style = {
backgroundColor: getColorCode(color), backgroundColor: isOver ? darkRGB : color,
color: getTextColorCode(textColor), color: getTextColorCode(textColor),
}; };
return ( return (
<div <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} style={style}
key={name} key={name}
ref={setNodeRef} ref={setNodeRef}

4
src/index.scss
View File

@@ -1,3 +1,7 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
background-color: #2d3436;
}

17
src/store.ts
View File

@@ -4,6 +4,17 @@ import { TierProps } from './components/Tier';
import { tierImage } from './dto/tier'; import { tierImage } from './dto/tier';
import { generateTierLevel } from './tools/genarators'; 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 { interface tierStore {
images: tierImage[]; images: tierImage[];
addTierImage: (image: tierImage) => void; addTierImage: (image: tierImage) => void;
@@ -36,11 +47,7 @@ const useStore = create(
}, },
tierLevelsModalOpen: false, tierLevelsModalOpen: false,
setTierLevelModalOpen: (open: boolean) => set({ tierLevelsModalOpen: open }), 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) => addTierLevel: (name: string, color: string, textColor: string) =>
set(state => ({ tierLevels: [...state.tierLevels, generateTierLevel(name, color, textColor)] })), set(state => ({ tierLevels: [...state.tierLevels, generateTierLevel(name, color, textColor)] })),
editTierLevelName: (id: string, name: string) => editTierLevelName: (id: string, name: string) =>

18
src/tools/colors.ts Normal file
View File

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