Feat: version 0.0.2 -Beta

package.json

@@ -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"

src/App.tsx

@@ -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,6 +83,9 @@ const App = () => {
               ))}
           </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 
@@ -92,11 +117,17 @@ const App = () => {
           }}
         />
       </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={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>

src/components/Tier.tsx

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