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

Compare commits

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

3 Commits
v0.0.1 ... 1ee4043c0e

Author SHA1 Message Date
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
5 changed files with 68 additions and 37 deletions
Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

3
index.html
View File

@@ -2,9 +2,8 @@
<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>
</head>
<body>
<div id="root"></div>

3
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "nwtierlist",
"private": true,
"version": "0.0.1",
"version": "0.0.2",
"type": "module",
"scripts": {
"dev": "vite",
@@ -15,6 +15,7 @@
"@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",
"zustand": "^5.0.3"

97
src/App.tsx
View File

@@ -1,5 +1,6 @@
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';
@@ -15,6 +16,8 @@ const App = () => {
useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]),
);
const tierListRef = useRef<HTMLDivElement>(null);
const uploadBtn = useRef<HTMLInputElement>(null);
const clickUpload = () => {
@@ -35,13 +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 (
<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'>
<div className='flex flex-col w-full' ref={tierListRef}>
{tierLevels.map(tier_level => (
<Tier
color={tier_level.color}
@@ -61,42 +83,51 @@ const 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={clickUpload}
>
<span>Add photo</span>
<input
type='file'
name='imageUpload'
accept='.jpeg'
ref={uploadBtn}
multiple
style={{ display: 'none' }}
onChange={event => {
console.log(event.target.files);
if (event.target.files) {
const upload_images: tierImage[] = [];
for (let i = 0; i < event.target.files.length; i++) {
const url = URL.createObjectURL(event.target.files[i]);
upload_images.push({
url: url,
name: event.target.files[i].name.replace('.jpeg', ''),
category: '',
});
}
handleAdd(upload_images);
}
}}
/>
</div>
<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'
accept='.jpeg'
ref={uploadBtn}
multiple
style={{ display: 'none' }}
onChange={event => {
console.log(event.target.files);
if (event.target.files) {
const upload_images: tierImage[] = [];
for (let i = 0; i < event.target.files.length; i++) {
const url = URL.createObjectURL(event.target.files[i]);
upload_images.push({
url: url,
name: event.target.files[i].name.replace('.jpeg', ''),
category: '',
});
}
handleAdd(upload_images);
}
}}
/>
</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-end mt-5 gap-1 md:pe-5'>
<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.2</span>
<a href='https://git.nwaifu.su/sergey/NwTierList' target='_blank'>
Source Code <GitHub />
</a>

2
src/components/Tier.tsx
View File

@@ -58,7 +58,7 @@ export const Tier = ({ color, name, textColor, id }: TierProps) => {
</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) => (