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

Compare commits

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

2 Commits
1ee4043c0e ... 6cda6fee45

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

6
index.html
View File

@@ -4,6 +4,12 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NWaifu Tier Maker</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>

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

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;
} }
} }
}

2
src/components/Tier.tsx
View File

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

11
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={`fixed 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'
} min-w-[300px] md:w-[70vw] md:h-1/4 h-[90vh] bg-[#2d3436] 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`} } 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} />