add season colors and custom bg and more ui tweaks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hacks-of-mistria",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A tool to edit your save files in Fields of Mistria",
   "main": "./out/main/index.js",
   "author": "arkatsy, dwlim12",
@@ -22,7 +22,8 @@
     "next-themes": "^0.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.3.0"
+    "react-icons": "^5.3.0",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",

src/renderer/src/app.jsx

@@ -1,9 +1,9 @@
-import { useState } from "react"
 import { Image, Box } from "@chakra-ui/react"
 import SaveSelection from "@components/save-selection"
 import SaveEditing from "@components/save-editing"
-import fomClouds from "@assets/fom-clouds.png"
 import fomLogo from "@assets/fom-logo.webp"
+import background from "@assets/fom-bg1.png"
+import { useStore } from "./store"
 
 function Layout({ children }) {
   return (
@@ -16,36 +16,28 @@ function Layout({ children }) {
         alignItems="center"
         pos="relative"
       >
+        <Image src={fomLogo} zIndex={1} draggable={false} />
+        {children}
         <Image
-          src={fomClouds}
+          src={background}
           objectFit="cover"
-          h="250px"
+          h="100vh"
           w="100vw"
           alt="background"
           userSelect="none"
           draggable={false}
-          pos="absolute"
+          pos="fixed"
+          zIndex={-1}
+          filter="contrast(1.2) brightness(0.08) blur(2px) saturate(1.5)"
+          backgroundColor="rgba(0, 0, 139, 0.7)"
         />
-        <Image src={fomLogo} zIndex={1} draggable={false} />
-        {children}
       </Box>
     </Box>
   )
 }
 
 export function App() {
-  const [editingSaveId, setEditingSaveId] = useState(null)
+  const { editingSaveId } = useStore()
 
-  const goToEditing = (saveId) => setEditingSaveId(saveId)
-  const goToSelection = () => setEditingSaveId(null)
-
-  return (
-    <Layout>
-      {editingSaveId ? (
-        <SaveEditing saveId={editingSaveId} onBack={goToSelection} />
-      ) : (
-        <SaveSelection onSaveSelected={goToEditing} />
-      )}
-    </Layout>
-  )
+  return <Layout>{editingSaveId ? <SaveEditing /> : <SaveSelection />}</Layout>
 }

src/renderer/src/components/loading.jsx

@@ -1,10 +1,13 @@
-import { Center, Flex, Text, Spinner } from "@chakra-ui/react"
+import { Center, Flex, Text, Spinner, VStack } from "@chakra-ui/react"
 
-export default function Loading({ text }) {
+export default function Loading({ text = "", extra = "" }) {
   return (
     <Center>
       <Flex flexDir="column" gap="4" alignItems="center">
-        <Text>{text}</Text>
+        <VStack>
+          <Text>{text}</Text>
+          <Text>{extra}</Text>
+        </VStack>
         <Spinner />
       </Flex>
     </Center>

src/renderer/src/components/number-input.jsx

@@ -11,8 +11,9 @@ export default function NumberInput({ value, onValueChange, step, min, label, he
         value={+value || 0}
         onValueChange={(e) => onValueChange(+e.value)}
         w="full"
+        bg="orange.900/10"
       >
-        <InputGroup flex="" w="full" startElement={icon || null}>
+        <InputGroup flex="1" w="full" startElement={icon || null}>
           <NumberInputField />
         </InputGroup>
       </NumberInputRoot>

src/renderer/src/components/save-card.jsx

@@ -49,7 +49,7 @@ const weatherIcons = [
   }
 ]
 
-function SaveCard({ save, onClick }) {
+export default function SaveCard({ save, onClick }) {
   const { header, autosave, id } = save
 
   const data = {
@@ -62,15 +62,46 @@ function SaveCard({ save, onClick }) {
     onClick && onClick(id)
   }
 
+  const season = displayCalendarTime(header.calendar_time).split(" ")[2].toLowerCase()
+
+  const styles = {
+    background: {
+      spring: "rose.950",
+      summer: "green.950",
+      fall: "yellow.950",
+      winter: "teal.900"
+    },
+    foreground: {
+      spring: "rose.50",
+      summer: "green.100/90",
+      fall: "yellow.100/75",
+      winter: "teal.50"
+    },
+    border: {
+      spring: "rose.600",
+      summer: "green.600",
+      fall: "yellow.600",
+      winter: "teal.600"
+    }
+  }
+
+  const isSpring = season === "spring"
+  const isSummer = season === "summer"
+  const isFall = season === "fall"
+  const isWinter = season === "winter"
+
   return (
     <Card.Root
       as="button"
       display="inline"
-      bg="gray.900"
+      bg={styles.background[season]}
+      color={styles.foreground[season]}
+      filter={isWinter || isSpring ? "brightness(0.8)" : "brightness(1)"}
       w="full"
       mx="auto"
       cursor="pointer"
       onClick={handleClick}
+      borderColor={styles.border[season]}
     >
       <Card.Header display="flex" flexDir="row" justifyContent="space-between" pos="relative">
         <Flex flexDir="column">
@@ -123,5 +154,3 @@ function SaveCard({ save, onClick }) {
     </Card.Root>
   )
 }
-
-export default memo(SaveCard)

src/renderer/src/components/save-editing.jsx

@@ -28,8 +28,12 @@ import { seasonsList, getCalendarTime, PronounsList, formatPronouns } from "@uti
 import Loading from "./loading"
 import { useSaveData } from "../queries"
 import { useSaveDataMutation } from "../mutations"
+import { useStore } from "../store"
+import { LuArrowLeft } from "react-icons/lu"
+
+export default function SaveEditing() {
+  const { goToSelection: onBack, editingSaveId: saveId } = useStore()
 
-export default function SaveEditing({ saveId, onBack }) {
   const { data: saveData, isError: isErrorData } = useSaveData(saveId)
   const {
     mutate: updateSave,
@@ -100,15 +104,15 @@ export default function SaveEditing({ saveId, onBack }) {
   return (
     <Box px={6} py={4} w="full">
       <Flex justifyContent="space-between" pos="relative">
-        <Button variant="outline" onClick={onBack}>
-          Back
+        <Button variant="subtle" onClick={onBack}>
+          <LuArrowLeft /> Back
         </Button>
         <Flex flexDir="column" gap={2}>
           <Flex gap={3}>
             <Button variant="subtle" onClick={handleDiscardEdits}>
-              Discard Edits
+              Discard
             </Button>
-            <Button onClick={handleApplyEdits}>Apply Edits</Button>
+            <Button onClick={handleApplyEdits}>Apply</Button>
           </Flex>
           <Text textStyle="sm" opacity={0.7} textAlign="end">
             {saveData.id}
@@ -136,6 +140,7 @@ export default function SaveEditing({ saveId, onBack }) {
               </GridItem>
               <GridItem>
                 <SelectInput
+                  colorPalette="teal"
                   currentValue={formatPronouns(edits.pronouns)}
                   onValueChange={setPronouns}
                   textLabel="Pronouns"
@@ -234,12 +239,14 @@ export default function SaveEditing({ saveId, onBack }) {
                 min={1}
               />
               <SelectInput
+                colorPalette="teal"
                 currentValue={seasonsList[edits.season]}
                 onValueChange={setSeason}
                 textLabel="Season"
                 collection={seasons}
               />
               <SelectInput
+                colorPalette="teal"
                 currentValue={edits.day}
                 onValueChange={setDay}
                 textLabel="Day"

src/renderer/src/components/save-selection.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react"
 import { translateCalendarTime } from "@utils"
-import { Box, Flex, Input, Separator, Image, Stack, HStack } from "@chakra-ui/react"
+import { Box, Flex, Input, Image, Stack } from "@chakra-ui/react"
 import {
   PaginationItems,
   PaginationPrevTrigger,
@@ -9,18 +9,19 @@ import {
 } from "@components/ui/pagination"
 import SaveCard from "@components/save-card"
 import dozy from "@assets/dozy.webp"
-import UnpackingMeasurement from "./unpacking-measurement"
 import Loading from "./loading"
 import { useSaveMetadata } from "../queries"
 import { useRefreshSavesMutation } from "../mutations"
 import { Button } from "@components/ui/button"
 import { InputGroup } from "@components/ui/input-group"
 import { FarmIcon } from "@components/icons"
 import { LuRefreshCw } from "react-icons/lu"
+import { useStore } from "../store"
 
-const pageSize = 5
+const pageSize = 10
 
-export default function SaveSelection({ onSaveSelected }) {
+export default function SaveSelection() {
+  const { setEditingSaveId } = useStore()
   const { data } = useSaveMetadata()
   const {
     mutate: refreshSaves,
@@ -32,7 +33,7 @@ export default function SaveSelection({ onSaveSelected }) {
   const [search, setSearch] = useState("")
 
   if (!data || isRefreshPending) {
-    return <Loading text="Loading saves..." />
+    return <Loading text="Loading saves..." extra="It might take a moment, depending on how many saves you have" />
   }
 
   const filteredSaves = data.filter((save) => {
@@ -65,7 +66,7 @@ export default function SaveSelection({ onSaveSelected }) {
   }
 
   function handleSaveClick(saveId) {
-    onSaveSelected(saveId)
+    setEditingSaveId(saveId)
   }
 
   const handleRefreshClick = () => refreshSaves()
@@ -76,20 +77,21 @@ export default function SaveSelection({ onSaveSelected }) {
         <Flex gap="2">
           <InputGroup flex="1" startElement={<FarmIcon />}>
             <Input
-              variant="subtle"
+              bg="orange.900/10"
+              variant="outline"
               w="full"
               value={search}
               onChange={handleSearchChange}
               placeholder="Search your saves"
             />
           </InputGroup>
           <Button
+            variant="subtle"
             onClick={handleRefreshClick}
             isLoading={isRefreshPending}
             isDisabled={isRefreshPending}
           >
             <LuRefreshCw />
-            Reload
           </Button>
         </Flex>
         {visibleSaves.length === 0 ? (
@@ -99,7 +101,7 @@ export default function SaveSelection({ onSaveSelected }) {
             {visibleSaves.map((save) => (
               <SaveCard key={save.id} save={save} onClick={handleSaveClick} />
             ))}
-            <Box pos="relative" w="full">
+            <Box pos="relative" w="full" pb="8">
               <PaginationRoot
                 variant="solid"
                 count={filteredSaves.length}
@@ -119,21 +121,17 @@ export default function SaveSelection({ onSaveSelected }) {
           </>
         )}
       </Flex>
-      <Box w="full" pos="relative">
+      <Box w="full" pos="relative" mb="2">
         <Image
           src={dozy}
           zIndex={2}
           draggable={false}
           pos="absolute"
           right="10"
-          bottom="0"
+          bottom="8"
           transform="scaleX(-1)"
         />
-        <Image src={dozy} zIndex={2} draggable={false} pos="absolute" bottom="0" left="10" />
-      </Box>
-      <Box w="full" py="4">
-        <Separator />
-        <UnpackingMeasurement />
+        <Image src={dozy} zIndex={2} draggable={false} pos="absolute" bottom="8" left="10" />
       </Box>
     </Stack>
   )