chore: fix some UI/UX

pixelaw · Jul 7, 2024 · 84b0aba · 84b0aba
1 parent 6de6680
commit 84b0aba
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 92 deletions.
diff --git a/src/components/Loading/Loading.module.css b/src/components/Loading/Loading.module.css
@@ -1,23 +1,7 @@
 .loadingContainer {
-    @apply fixed inset-0 z-50 flex items-center justify-center bg-primary/90;
+    @apply fixed inset-0 z-50 flex items-center justify-center bg-bg-primary/90;
 }
 
 .loadingText {
     @apply text-3xl font-bold text-white;
-    animation: loadingAnimation 1s steps(4, end) infinite;
-}
-
-@keyframes loadingAnimation {
-    0% {
-        content: 'Loading.';
-    }
-    25% {
-        content: 'Loading..';
-    }
-    50% {
-        content: 'Loading...';
-    }
-    75% {
-        content: 'Loading...';
-    }
-}
+}
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
@@ -1,9 +1,27 @@
+import React, { useState, useEffect } from 'react';
 import styles from './Loading.module.css';
 
-const Loading = () => (
-    <div className={styles.loadingContainer}>
-        <span className={styles.loadingText}>Loading...</span>
-    </div>
-);
+const Loading: React.FC = () => {
+    const [loadingText, setLoadingText] = useState('Loading.');
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setLoadingText(prev => {
+                if (prev === 'Loading...') {
+                    return 'Loading.';
+                }
+                return prev + '.';
+            });
+        }, 500);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div className={styles.loadingContainer}>
+            <span className={styles.loadingText}>{loadingText}</span>
+        </div>
+    );
+};
 
 export default Loading;
diff --git a/src/components/MenuBar/PxCounter.tsx b/src/components/MenuBar/PxCounter.tsx
@@ -12,8 +12,8 @@ const PxCounter = () => {
     const player = usePlayer(address);
     const pixelRecoveryRate = usePixelRecoveryRate();
 
-    const playerPx = player?.data?.current_px ?? 10;
-    const maxPx = player?.data?.max_px ?? 10;
+    const playerPx = player?.data?.current_px ?? 10; // Default to 10 if player is not loaded
+    const maxPx = player?.data?.max_px ?? 10; // Default to 10 if player is not loaded
     const recoveryRate = pixelRecoveryRate?.data?.rate ?? 0;
     const playerLastDate = player?.data?.last_date ?? 0;
 

diff --git a/src/dojo/createSystemCalls.ts b/src/dojo/createSystemCalls.ts
@@ -110,12 +110,17 @@ export function createSystemCalls({ client }: { client: IWorld }) {
         await new Promise((resolve) => setTimeout(resolve, 1000));
     };
 
-    const activateProposal = async (account: AccountInterface, gameId: number, index: number, clearData?: {x: number, y: number}[]) => {
+    const activateProposal = async (
+        account: AccountInterface,
+        gameId: number,
+        index: number,
+        clearData?: { x: number; y: number }[],
+    ) => {
         const { transaction_hash } = await client.actions.activateProposal({
             account,
             gameId,
             index,
-            clearData
+            clearData,
         });
 
         await account.waitForTransaction(transaction_hash, {

diff --git a/src/dojo/generated.ts b/src/dojo/generated.ts
@@ -94,36 +94,30 @@ export async function setupWorld(provider: DojoProvider) {
             account,
             gameId,
             index,
-            clearData
+            clearData,
         }: {
             account: AccountInterface;
             gameId: number;
             index: number;
-            clearData?: {x: number, y: number}[]
+            clearData?: { x: number; y: number }[];
         }) => {
-
-            const clearDataArgs: number[] = []
+            const clearDataArgs: number[] = [];
             if (clearData) {
-                clearData.forEach(({x, y}) => {
-                    clearDataArgs.push(x)
-                    clearDataArgs.push(y)
-                })
+                clearData.forEach(({ x, y }) => {
+                    clearDataArgs.push(x);
+                    clearDataArgs.push(y);
+                });
             }
 
-            if (clearData) console.log(clearDataArgs)
+            if (clearData) console.log(clearDataArgs);
 
             try {
                 return await provider.execute(
                     account,
                     {
                         contractAddress: PROPOSAL_CONTRACT_ADDRESS,
                         entrypoint: 'activate_proposal',
-                        calldata: [
-                            gameId,
-                            index,
-                            clearData?.length ?? 0,
-                            ...clearDataArgs
-                        ],
+                        calldata: [gameId, index, clearData?.length ?? 0, ...clearDataArgs],
                     },
                     {
                         skipValidate: true,

diff --git a/src/hooks/useGetPixelsToReset.ts b/src/hooks/useGetPixelsToReset.ts
@@ -1,16 +1,16 @@
-import {useMutation} from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { GraphQLClient } from 'graphql-request';
 import GetResetPixels from '@/../graphql/GetPixelsToReset.graphql';
 import { useSettingsStore } from '@/stores/SettingsStore.ts';
-import useBoard from "@/hooks/useBoard.ts";
-import {GAME_ID} from "@/global/constants.ts";
+import useBoard from '@/hooks/useBoard.ts';
+import { GAME_ID } from '@/global/constants.ts';
 
 type Data = {
     pixelModels: {
         edges: {
             node: {
-                x: number,
-                y: number
+                x: number;
+                y: number;
             };
         }[];
     };
@@ -21,27 +21,23 @@ const useGetPixelsToReset = () => {
     const baseUrl = settings?.config?.toriiUrl ?? 'http://localhost:8080';
     const gqlClient = new GraphQLClient(`${baseUrl}/graphql`);
 
-    const board = useBoard(GAME_ID)
+    const board = useBoard(GAME_ID);
 
     return useMutation({
         mutationKey: ['usePixelRecoveryRate'],
-        mutationFn: async ({color}: {color: number}) => {
-            if (!board.data) throw new Error('board data not yet loaded')
-            const result: Data = await gqlClient
-                .request(
-                    GetResetPixels,
-                    {
-                        color,
-                        xGTE: board.data.origin.x,
-                        xLTE: board.data.origin.x + board.data.width - 1,
-                        yGTE: board.data.origin.y,
-                        yLTE: board.data.origin.y + board.data.height - 1,
-                        limit: board.data.height * board.data.width
-                    }
-                );
-            return result.pixelModels.edges.map(({ node: { x, y }}) => {
-                return { x, y }
-            })
+        mutationFn: async ({ color }: { color: number }) => {
+            if (!board.data) throw new Error('board data not yet loaded');
+            const result: Data = await gqlClient.request(GetResetPixels, {
+                color,
+                xGTE: board.data.origin.x,
+                xLTE: board.data.origin.x + board.data.width - 1,
+                yGTE: board.data.origin.y,
+                yLTE: board.data.origin.y + board.data.height - 1,
+                limit: board.data.height * board.data.width,
+            });
+            return result.pixelModels.edges.map(({ node: { x, y } }) => {
+                return { x, y };
+            });
         },
         retryDelay: (failureCount) => failureCount * 1_000,
     });

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -1,25 +1,25 @@
 /// <reference types="vite-envs/client" />
 
 type ImportMetaEnv = {
-  // Auto-generated by `npx vite-envs update-types` and hot-reloaded by the `vite-env` plugin
-  // You probably want to add `/src/vite-env.d.ts` to your .prettierignore
-  BASE_URL: string
-  MODE: string
-  DEV: boolean
-  PROD: boolean
-  PUBLIC_RPC_URL: string
-  PUBLIC_TORII_URL: string
-  PUBLIC_RELAY_URL: string
-  PUBLIC_SERVER_URL: string
-  MASTER_ADDRESS: string
-  MASTER_PRIVATE_KEY: string
-  WORLD_ADDRESS: string
-  ACCOUNT_CLASS_HASH: string
-  FEETOKEN_ADDRESS: string
-  SERVER_PORT: string
-  CORE_VERSION: string
-  PUBLIC_MANIFEST_URL: string
-  // @user-defined-start
+    // Auto-generated by `npx vite-envs update-types` and hot-reloaded by the `vite-env` plugin
+    // You probably want to add `/src/vite-env.d.ts` to your .prettierignore
+    BASE_URL: string;
+    MODE: string;
+    DEV: boolean;
+    PROD: boolean;
+    PUBLIC_RPC_URL: string;
+    PUBLIC_TORII_URL: string;
+    PUBLIC_RELAY_URL: string;
+    PUBLIC_SERVER_URL: string;
+    MASTER_ADDRESS: string;
+    MASTER_PRIVATE_KEY: string;
+    WORLD_ADDRESS: string;
+    ACCOUNT_CLASS_HASH: string;
+    FEETOKEN_ADDRESS: string;
+    SERVER_PORT: string;
+    CORE_VERSION: string;
+    PUBLIC_MANIFEST_URL: string;
+    // @user-defined-start
     /*
      * Here you can define your own special variables
      * that would be available on `import.meta.env` but
@@ -29,16 +29,16 @@ type ImportMetaEnv = {
      */
     SSR: boolean;
     // @user-defined-end
-}
+};
 
 interface ImportMeta {
-  // Auto-generated by `npx vite-envs update-types`
+    // Auto-generated by `npx vite-envs update-types`
 
-  url: string
+    url: string;
 
-  readonly hot?: import('vite-envs/types/hot').ViteHotContext
+    readonly hot?: import('vite-envs/types/hot').ViteHotContext;
 
-  readonly env: ImportMetaEnv
+    readonly env: ImportMetaEnv;
 
-  glob: import('vite-envs/types/importGlob').ImportGlobFunction
+    glob: import('vite-envs/types/importGlob').ImportGlobFunction;
 }
diff --git a/src/webtools/components/Viewport/constants.ts b/src/webtools/components/Viewport/constants.ts
@@ -1,6 +1,6 @@
-export const ZOOM_TILEMODE = 2699;
+export const ZOOM_TILEMODE = 1799;
 export const ZOOM_FACTOR = 100;
 export const ZOOM_MAX = 10000; // 100 pixels per cell side
-export const ZOOM_MIN = 2700; // 0.5 pixels per cell side
+export const ZOOM_MIN = 1800; // 0.5 pixels per cell side
 // export const ZOOM_MIN = 50    // 0.5 pixels per cell side
 export const ZOOM_SCALEFACTOR = 1.1;