Merge branch 'main' into refactor/add-formatter

pixelaw · Jul 4, 2024 · ea19143 · ea19143
2 parents 0e80594 + e10d935
commit ea19143
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 12 deletions.
diff --git a/src/App.module.css b/src/App.module.css
@@ -109,7 +109,7 @@ body {
     top: 64px;
     left: 10px;
     width: 450px;
-    max-height: calc(100vh - 64px);
+    max-height: calc(100vh - 160px);
     background: rgba(31, 41, 55, 0.95);
     border-radius: 8px;
     overflow-y: hidden;

diff --git a/src/components/MenuBar/MenuBar.module.css b/src/components/MenuBar/MenuBar.module.css
@@ -49,7 +49,7 @@
 
 .pxChange {
     position: absolute;
-    top: 20px; /* 調整可能 */
+    top: 20px;
     left: 70%;
     transform: translateX(-10%);
     background-color: rgba(0, 0, 0, 0.8);
@@ -76,3 +76,10 @@
         transform: translate(-50%, -10px);
     }
 }
+
+.zeroPx {
+    background-color: rgba(255, 0, 0, 0.1); 
+    color: #ff0000;
+    border: 1px solid #ff0000;
+    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
+}
diff --git a/src/components/MenuBar/PxCounter.tsx b/src/components/MenuBar/PxCounter.tsx
@@ -20,6 +20,7 @@ const PxCounter = () => {
     const [currentPx, setCurrentPx] = useState(playerPx);
     const [lastDate, setLastDate] = useState(playerLastDate);
     const [pxChange, setPxChange] = useState(0);
+
     useEffect(() => {
         if (lastDate === playerLastDate) return;
         const currentSeconds = Math.floor(Date.now() / 1_000);
@@ -28,7 +29,7 @@ const PxCounter = () => {
         setPxChange(newPx - currentPx);
         setCurrentPx(newPx);
         setLastDate(playerLastDate);
-    }, [playerLastDate, playerPx, lastDate, recoveryRate, maxPx]);
+    }, [playerLastDate, playerPx, lastDate, recoveryRate, maxPx, currentPx]);
 
     useEffect(() => {
         if (!recoveryRate || maxPx === currentPx) return;
@@ -51,7 +52,7 @@ const PxCounter = () => {
     }, [pxChange]);
 
     return (
-        <div className={styles.addressContainer}>
+        <div className={`${styles.addressContainer} ${currentPx === 0 ? styles.zeroPx : ''}`}>
             {currentPx}/{maxPx} PX
             {pxChange !== 0 && (
                 <div className={styles.pxChange}>{pxChange > 0 ? `+${pxChange}` : pxChange}</div>

diff --git a/src/components/NewProposalPopupForMain/NewProposalPopupForMain.tsx b/src/components/NewProposalPopupForMain/NewProposalPopupForMain.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
+// import { Link } from 'react-router-dom';
 import { SketchPicker } from 'react-color';
 import Select, {
     type GroupBase,
@@ -18,8 +19,8 @@ const NewProposalPopupForMain: React.FC = () => {
 
     const [isCreatingNewProposal, setIsCreatingNewProposal] = useState(false);
     const [showColorPicker, setShowColorPicker] = useState(false);
-    const colorPickerRef = useRef<HTMLDivElement | null>(null);
-    const popupRef = useRef<HTMLDivElement | null>(null);
+    const colorPickerRef = useRef<HTMLDivElement>(null);
+    const popupRef = useRef<HTMLDivElement>(null);
 
     const { gameData } = usePixelawProvider();
 
@@ -72,6 +73,7 @@ const NewProposalPopupForMain: React.FC = () => {
                 )
                 .then(() => {
                     setIsCreatingNewProposal(false);
+                    // toastProposalAdded('Proposal Added'); // should be broadcast for everyone.
                 })
                 .catch((e) => toastContractError(e));
         }
@@ -162,12 +164,14 @@ const NewProposalPopupForMain: React.FC = () => {
                     onClick={() => setIsCreatingNewProposal(true)}
                     className='w-full rounded-md bg-blue-600 px-10 py-3 text-sm font-semibold text-white shadow-lg transition duration-300 hover:bg-blue-500'
                 >
-                    Create A New Proposal
+                    Create A New Proposal(5PX)
                 </button>
             )}
 
             {isCreatingNewProposal && (
                 <div className='fixed inset-0 z-20 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur'>
+                    {/* <div className='min-h-screen bg-gray-900 text-white flex flex-col'> */}
+                    {/* <div className='flex justify-center items-center flex-grow p-4'> */}
                     <div ref={popupRef} className='w-1/3'>
                         <div className='w-full max-w-xl rounded-lg bg-gray-800 p-12 text-white shadow-lg'>
                             <h2 className='mb-6 text-3xl font-bold'>New Proposal</h2>

diff --git a/src/components/NewProposalPopupForMain/ProposalListForMain.tsx b/src/components/NewProposalPopupForMain/ProposalListForMain.tsx
@@ -3,7 +3,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import ProposalItem, { type StartVoteParam } from '../ProposalList/ProposalItem';
 import { usePixelawProvider } from '@/providers/PixelawProvider';
 import { GAME_ID } from '@/global/constants.ts';
-import { toastContractError } from '@/global/utils.ts';
+import { toastContractError, toastProposalAdded } from '@/global/utils.ts';
 import useProposals from '@/hooks/useProposals.ts';
 
 interface ProposalListForMainProps {
@@ -113,7 +113,7 @@ const ProposalListForMain: React.FC<ProposalListForMainProps> = ({
         <div className=''>
             <div
                 className={`overflow-y-auto px-2`}
-                style={{ height: `calc(100vh - ${headerHeight}px - 170px)` }}
+                style={{ height: `calc(100vh - ${headerHeight}px - 30vh)` }}
             >
                 <div className='space-y-4'>
                     {proposalArray.map((proposal) => {

diff --git a/src/webtools/components/Viewport/drawPixels.ts b/src/webtools/components/Viewport/drawPixels.ts
@@ -24,7 +24,12 @@ export function drawPixels(
     const offsets: Coordinate = [0 - pixelOffset[0], 0 - pixelOffset[1]];
 
     // console.log("p", cellSize)
-    const drawPixel = (cellX: number, cellY: number, sizeAdjustment: number = 0) => {
+    const drawPixel = (
+        cellX: number,
+        cellY: number,
+        sizeAdjustment: number = 0,
+        isHovered: boolean = false,
+    ) => {
         const worldCoords = applyWorldOffset(worldTranslation, [cellX, cellY]);
 
         const pixel = getPixel(worldCoords);
@@ -34,17 +39,43 @@ export function drawPixels(
 
         const [x, y, w, h] = getRect(offsets, cellX, cellY, cellSize, doBorder, sizeAdjustment);
 
+        if (isHovered) {
+            // Shadow
+            context.shadowColor = 'rgba(0, 0, 0, 0.5)';
+            context.shadowBlur = 10;
+            context.shadowOffsetX = 5;
+            context.shadowOffsetY = 5;
+
+            // Border
+            context.strokeStyle = 'yellow';
+            context.lineWidth = 4;
+        } else {
+            // Reset shadow
+            context.shadowColor = 'transparent';
+            context.shadowBlur = 0;
+            context.shadowOffsetX = 0;
+            context.shadowOffsetY = 0;
+
+            // Reset border
+            context.strokeStyle = 'transparent';
+            context.lineWidth = 0;
+        }
+
         context.fillRect(x, y, w, h);
+        if (isHovered) {
+            context.strokeRect(x, y, w, h);
+            context.fillRect(x, y, w, h);
+        }
     };
 
     for (let x = 0; x <= gridDimensions[0]; x++) {
         for (let y = 0; y <= gridDimensions[1]; y++) {
-            drawPixel(x, y);
+            drawPixel(x, y, 0, false);
         }
     }
 
     if (hoveredCell && zoom > ZOOM_TILEMODE) {
-        drawPixel(hoveredCell[0], hoveredCell[1], 8); // having a shadow/outline or transition animation.
+        drawPixel(hoveredCell[0], hoveredCell[1], 8, true); // having a shadow/outline or transition animation.
     }
 }