ui fixes

cartridge-gg · May 29, 2024 · e835d61 · e835d61
1 parent cab4cf2
commit e835d61
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 31 deletions.
diff --git a/web/src/components/layout/DrawerMenu.tsx b/web/src/components/layout/DrawerMenu.tsx
@@ -56,7 +56,7 @@ const DrawerMenu = () => {
         <DrawerContent minW="340px">
           <DrawerHeader borderBottom="solid 2px" borderColor="neon.900" pb={2}>
             <Heading color="neon.500" fontWeight="normal">
-              <PaperIcon width="28px" height="28px" /> Roll Your Own
+              <PaperIcon width="28px" height="28px" /> 
             </Heading>
           </DrawerHeader>
           <Close position="absolute" right="16px" top="16px" cursor="pointer" onClick={onClose} />

diff --git a/web/src/components/map/Map.tsx b/web/src/components/map/Map.tsx
@@ -2,7 +2,7 @@ import { useConfigStore, useGameStore } from "@/dojo/hooks";
 import { Locations } from "@/dojo/types";
 import { Flex, Image, useBreakpointValue } from "@chakra-ui/react";
 import { motion, useAnimate } from "framer-motion";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { HitBox } from "./HitBox";
 import { Outline } from "./Outline";
 import { WantedMarkers } from "./WantedMarkers";
@@ -44,10 +44,15 @@ export const Map = ({
 }) => {
   const [scope, animate] = useAnimate();
   const isMobile = useBreakpointValue([true, false]);
+  const [isFirstTurn, setIsFirstTurn] = useState(false);
 
   const { game } = useGameStore();
   const configStore = useConfigStore();
 
+  useEffect(() => {
+    setIsFirstTurn(game?.player.turn === 0);
+  }, []);
+
   useEffect(() => {
     if (targetId !== undefined) {
       const point = coordinate[targetId] ? coordinate[targetId] : { x: 0, y: 0 };
@@ -95,6 +100,7 @@ export const Map = ({
           wantedCurrent={
             current ? game.wanted.wantedByLocation.get(configStore.getLocationById(current)?.location) || 0 : 0
           }
+          isFirstTurn={isFirstTurn}
         />
       )}
       <HitBox onSelect={onSelect} />

diff --git a/web/src/components/map/Outline.tsx b/web/src/components/map/Outline.tsx
@@ -24,11 +24,13 @@ export const Outline = ({
   current,
   wantedTarget,
   wantedCurrent,
+  isFirstTurn,
 }: {
   targetId?: Locations;
   current?: Locations;
   wantedTarget: number;
   wantedCurrent: number;
+  isFirstTurn: boolean;
 }) => {
   if (targetId === undefined) {
     return <></>;
@@ -44,7 +46,7 @@ export const Outline = ({
 
   const fillColorTarget = wantedTarget > 68 ? colors.red : colors.neon[400];
   const fillColorPath = wantedTarget > 68 ? colors.red : colors.yellow[400];
-  
+
   return (
     <>
       <Global
@@ -75,16 +77,25 @@ export const Outline = ({
         <SvgHighlight location={current} fill={colors.yellow[400] as string} />
       </ChakraBox>
 
-      <Icon position="absolute" w="100%" h="100%" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d={getPath(current!, targetId!)}
-          stroke={fillColorPath as string}
-          strokeWidth={0.5}
-          strokeDasharray={"2, 1"}
-          fill="transparent"
-          className="dashAnim"
-        />
-      </Icon>
+      {!isFirstTurn && (
+        <Icon
+          position="absolute"
+          w="100%"
+          h="100%"
+          viewBox="0 0 100 100"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d={getPath(current!, targetId!)}
+            stroke={fillColorPath as string}
+            strokeWidth={0.5}
+            strokeDasharray={"2, 1"}
+            fill="transparent"
+            className="dashAnim"
+          />
+        </Icon>
+      )}
 
       <ChakraBox
         zIndex={9}

diff --git a/web/src/components/player/ReputationIndicator.tsx b/web/src/components/player/ReputationIndicator.tsx
@@ -14,20 +14,14 @@ const getColor = (rep: number, step: number): string => {
 
 export const ReputationIndicator = ({ reputation, ...props }: { reputation: number } & StyleProps) => {
   return (
-    <Tooltip
-      title={`Reputation: ${reputation}`}
-      text={`Your actions influence your reputation. Do the right things...`}
-      color="yellow.400"
-    >
-      <Card h="40px" px="6px" justify="center" alignItems="center">
-        <HStack>
-          <DynamicReputation value={getRep(reputation, 0)} max={20} color={getColor(reputation, 0)} />
-          <DynamicReputation value={getRep(reputation, 1)} max={20} color={getColor(reputation, 1)} />
-          <DynamicReputation value={getRep(reputation, 2)} max={20} color={getColor(reputation, 2)} />
-          <DynamicReputation value={getRep(reputation, 3)} max={20} color={getColor(reputation, 3)} />
-          <DynamicReputation value={getRep(reputation, 4)} max={20} color={getColor(reputation, 4)} />
-        </HStack>
-      </Card>
-    </Tooltip>
+    <Card h="40px" px="6px" justify="center" alignItems="center">
+      <HStack>
+        <DynamicReputation value={getRep(reputation, 0)} max={20} color={getColor(reputation, 0)} />
+        <DynamicReputation value={getRep(reputation, 1)} max={20} color={getColor(reputation, 1)} />
+        <DynamicReputation value={getRep(reputation, 2)} max={20} color={getColor(reputation, 2)} />
+        <DynamicReputation value={getRep(reputation, 3)} max={20} color={getColor(reputation, 3)} />
+        <DynamicReputation value={getRep(reputation, 4)} max={20} color={getColor(reputation, 4)} />
+      </HStack>
+    </Card>
   );
 };
diff --git a/web/src/pages/[gameId]/logs.tsx b/web/src/pages/[gameId]/logs.tsx
@@ -204,9 +204,9 @@ const CustomLeftPanel = () => {
       marginBottom={["30px", "50px"]}
       gap={0}
     >
-      <Text textStyle="subheading" textAlign="center" fontSize={["9px", "11px"]}>
+      {/* <Text textStyle="subheading" textAlign="center" fontSize={["9px", "11px"]}>
         {game ? reputationRanks[game.player.drugLevel as reputationRanksKeys] : ""}
-      </Text>
+      </Text> */}
       <Heading fontSize={["30px", "48px"]} fontWeight="400" mb={["0px", "20px"]}>
         {shortString.decodeShortString(gameInfos?.player_name || "")}
       </Heading>

diff --git a/web/src/pages/game/new.tsx b/web/src/pages/game/new.tsx
@@ -231,7 +231,7 @@ const New = observer(() => {
             />
           </HStack>
 
-          {/*!isRyoDotGame &&*/ !isMobile && season.paper_fee > 0 && (
+          {/*!isRyoDotGame && !isMobile && */ season.paper_fee > 0 && (
             <Card p={3}>
               <HStack gap={6} fontSize="14px">
                 <VStack gap={0} alignItems="flex-start" minW="240px">