Add log file and workflow

.github/workflows/build.yaml

@@ -0,0 +1,31 @@
+name: Build/release
+
+on: push
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v1
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: 10
+
+      - name: Build/release Electron app
+        uses: samuelmeuli/action-electron-builder@v1
+        with:
+          # GitHub token, automatically provided to the action
+          # (No need to define this secret in the repo settings)
+          github_token: ${{ secrets.github_token }}
+
+          # If the commit is tagged with a version (e.g. "v1.0.0"),
+          # release the app after building
+          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

forge.config.ts

@@ -14,6 +14,7 @@ import { rendererConfig } from './webpack.renderer.config';
 const config: ForgeConfig = {
   packagerConfig: {
     asar: true,
+    icon: './images/icon',
   },
   rebuildConfig: {},
   makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],

package.json

@@ -27,6 +27,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "electron-is-dev": "^3.0.1",
+    "electron-log": "^5.2.0",
     "electron-squirrel-startup": "^1.0.1",
     "framer-motion": "^11.5.6",
     "react": "^18.3.1",

src/components/App.tsx

@@ -1,32 +1,66 @@
 import {
+  Box,
+  Container,
+  Flex,
   Heading,
   Icon,
   IconButton,
+  List,
+  ListIcon,
+  ListItem,
+  Link,
+  Spacer,
   Table,
   TableContainer,
   Tbody,
   Td,
   Th,
   Thead,
+  Tooltip,
   Tr,
+  useToken,
 } from '@chakra-ui/react'
-import { CheckIcon, DeleteIcon, StarIcon } from '@chakra-ui/icons'
+import {
+  CheckIcon,
+  CopyIcon,
+  DeleteIcon,
+  StarIcon,
+  QuestionIcon,
+  RepeatIcon,
+  SettingsIcon,
+} from '@chakra-ui/icons'
+import log from 'electron-log/renderer'
 import React, { useEffect, useState } from 'react'
 import {
   ScatterChart,
   CartesianGrid,
   Legend,
   Scatter,
-  Tooltip,
+  Tooltip as RechartsTooltip,
   XAxis,
   YAxis,
 } from 'recharts'
-import type { Corner } from '../types'
+import type { Corner, Solution } from '../types'
 
 const lerp = (a: number, b: number, t: number) => a + (b - a) * t
 
 function App() {
+  const [logfilePath, setLogfilePath] = useState('')
   const [corners, setCorners] = useState([] as Corner[])
+  const [solution, setSolution] = useState({} as Solution)
+  const [showHelp, setShowHelp] = useState(false)
+
+  const [green500, yellow300] = useToken(
+    // the key within the theme, in this case `theme.colors`
+    'colors',
+    // the subkey(s), resolving to `theme.colors.red.100`
+    ['green.500', 'yellow.300']
+    // a single fallback or fallback array matching the length of the previous arg
+  )
+
+  useEffect(() => {
+    window.api.getLogfilePath().then(setLogfilePath)
+  }, [setLogfilePath])
 
   useEffect(() => {
     window.api.onClipboardTextUpdated((text: string) => {
@@ -42,47 +76,136 @@ function App() {
         position: { x, y, z },
       }
 
+      log.info(`Added corner: ${x}, ${y}, ${z}`)
       setCorners((corners) => [...corners, corner])
     })
     return () => window.api.removeClipboardTextUpdatedListener()
-  }, [])
+  }, [setCorners])
 
-  let minX, maxX, minZ, maxZ
-  for (const corner of corners) {
-    if (minX === undefined || corner.chunk.x < minX) minX = corner.chunk.x
-    if (maxX === undefined || corner.chunk.x > maxX) maxX = corner.chunk.x
-    if (minZ === undefined || corner.chunk.z < minZ) minZ = corner.chunk.z
-    if (maxZ === undefined || corner.chunk.z > maxZ) maxZ = corner.chunk.z
-  }
+  useEffect(() => {
+    let minX, maxX, minZ, maxZ
+    for (const corner of corners) {
+      if (minX === undefined || corner.chunk.x < minX) minX = corner.chunk.x
+      if (maxX === undefined || corner.chunk.x > maxX) maxX = corner.chunk.x
+      if (minZ === undefined || corner.chunk.z < minZ) minZ = corner.chunk.z
+      if (maxZ === undefined || corner.chunk.z > maxZ) maxZ = corner.chunk.z
+    }
 
-  const xSort = corners.sort((a, b) => a.chunk.x - b.chunk.x)
-  const zSort = corners.sort((a, b) => a.chunk.z - b.chunk.z)
+    const xSort = [...corners].sort((a, b) => a.chunk.x - b.chunk.x)
+    const zSort = [...corners].sort((a, b) => a.chunk.z - b.chunk.z)
 
-  let foundX, foundZ
-  for (let i = 0; i < xSort.length - 1; i++) {
-    if (xSort[i].chunk.x === xSort[i + 1].chunk.x) {
-      foundZ = lerp(xSort[i].chunk.z, xSort[i + 1].chunk.z, 0.5)
-      break
+    let foundX, foundZ
+    for (let i = 0; i < xSort.length - 1; i++) {
+      if (xSort[i].chunk.x === xSort[i + 1].chunk.x) {
+        foundZ = lerp(xSort[i].chunk.z, xSort[i + 1].chunk.z, 0.5)
+        break
+      }
     }
-  }
-  for (let i = 0; i < zSort.length - 1; i++) {
-    if (zSort[i].chunk.z === zSort[i + 1].chunk.z) {
-      foundX = lerp(zSort[i].chunk.x, zSort[i + 1].chunk.x, 0.5)
-      break
+    for (let i = 0; i < zSort.length - 1; i++) {
+      if (zSort[i].chunk.z === zSort[i + 1].chunk.z) {
+        foundX = lerp(zSort[i].chunk.x, zSort[i + 1].chunk.x, 0.5)
+        break
+      }
     }
-  }
+
+    if (foundX && foundZ) log.info(`Found solution: ${foundX}, ${foundZ}`)
+    setSolution({ minX, maxX, minZ, maxZ, foundX, foundZ })
+  }, [corners, setSolution])
+
+  const { minX, maxX, minZ, maxZ, foundX, foundZ } = solution
 
   return (
-    <>
-      <Heading>🥧📡 Anti/PieRay Helper</Heading>
-      <p>
-        Setup bind for <a href="https://www.lunarclient.com/">Lunar Client</a>{' '}
-        mod{' '}
-        <a href="https://lunarclient.dev/apollo/developers/mods/coordinates">
-          Coordinates
-        </a>{' '}
-        to "Copy Coords to Clipboard".
-      </p>
+    <Container>
+      <Flex>
+        <Heading>🥧📡 Anti/PieRay Helper</Heading>
+        <Spacer />
+        <Box>
+          <Tooltip label="Show help">
+            <IconButton
+              aria-label="Help"
+              icon={<QuestionIcon />}
+              onClick={() => setShowHelp(!showHelp)}
+            />
+          </Tooltip>
+          <Tooltip label="Open logfile">
+            <IconButton
+              aria-label="Logfile"
+              icon={<CopyIcon />}
+              onClick={() =>
+                window.api.openBrowserWindow(
+                  `file://${logfilePath.replace(/(\s+)/g, '\\$1')}`
+                )
+              }
+            />
+          </Tooltip>
+          <Tooltip label="Clear">
+            <IconButton
+              aria-label="Clear"
+              icon={<RepeatIcon />}
+              onClick={() => {
+                log.info(`Cleared`)
+                setCorners([])
+                setSolution({})
+              }}
+            />
+          </Tooltip>
+        </Box>
+      </Flex>
+      {showHelp && (
+        <List marginTop="1rem" marginBottom=".5rem">
+          <ListItem>
+            <ListIcon color="blue.300">
+              <SettingsIcon />
+            </ListIcon>
+            Setup bind for{' '}
+            <Link
+              onClick={() =>
+                window.api.openBrowserWindow('https://www.lunarclient.com/')
+              }
+            >
+              Lunar Client
+            </Link>{' '}
+            mod{' '}
+            <Link
+              onClick={() =>
+                window.api.openBrowserWindow(
+                  'https://lunarclient.dev/apollo/developers/mods/coordinates'
+                )
+              }
+            >
+              Coordinates
+            </Link>{' '}
+            to "Copy Coords to Clipboard".
+          </ListItem>
+          <ListItem>
+            <ListIcon color="green.500">
+              <CheckIcon />
+            </ListIcon>
+            Move to a "corner" showing the entity in PieChart, but where the
+            entity is missing from PieChart in the adjacent chunks in the X and
+            Z directions.
+          </ListItem>
+          <ListItem>
+            <ListIcon color="green.500">
+              <CheckIcon />
+            </ListIcon>
+            Copy the coordinates to the clipboard and the corner will be added
+          </ListItem>
+          <ListItem>
+            <ListIcon color="green.500">
+              <CheckIcon />
+            </ListIcon>
+            Find two more corners: one with the same X chunk coordinate, one
+            with the same Z chunk coordinate.
+          </ListItem>
+          <ListItem>
+            <ListIcon color="yellow.300">
+              <StarIcon />
+            </ListIcon>
+            The solution is added.
+          </ListItem>
+        </List>
+      )}
       <ScatterChart
         width={730}
         height={250}
@@ -108,18 +231,18 @@ function App() {
           domain={[minZ - 1, maxZ + 1]}
           allowDecimals={false}
         />
-        <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+        <RechartsTooltip cursor={{ strokeDasharray: '3 3' }} />
         <Legend />
         <Scatter
           name="Corners"
           data={corners.map((x) => x.chunk)}
-          fill="#8884d8"
+          fill={green500}
         />
         {foundX && foundZ && (
           <Scatter
             name="Solution"
             data={[{ x: foundX, z: foundZ }]}
-            fill="#8884d8"
+            fill={yellow300}
           />
         )}
       </ScatterChart>
@@ -137,19 +260,19 @@ function App() {
           </Thead>
           <Tbody>
             {foundX && foundZ && (
-              <Tr _hover={{ backgroundColor: 'yellow.100' }}>
+              <Tr _hover={{ backgroundColor: 'yellow.50' }}>
                 <Td>
-                  <Icon as={StarIcon} color="yellow.500" marginX="5px" />
-                  <Td>{foundX * 16 + 8 * (foundX >= 0 ? 1 : -1)}</Td>
-                  <Td>{foundZ * 16 + 8 * (foundZ >= 0 ? 1 : -1)}</Td>
-                  <Td>{foundX}</Td>
-                  <Td>{foundZ}</Td>
-                  <Td></Td>
+                  <Icon as={StarIcon} color="yellow.300" marginX="5px" />
                 </Td>
+                <Td>{foundX * 16 + 8 * (foundX >= 0 ? 1 : -1)}</Td>
+                <Td>{foundZ * 16 + 8 * (foundZ >= 0 ? 1 : -1)}</Td>
+                <Td>{foundX}</Td>
+                <Td>{foundZ}</Td>
+                <Td></Td>
               </Tr>
             )}
             {corners.map((corner, i) => (
-              <Tr _hover={{ backgroundColor: 'blue.100' }}>
+              <Tr _hover={{ backgroundColor: 'blue.50' }}>
                 <Td>
                   <Icon as={CheckIcon} color="green.500" marginX="5px" />
                 </Td>
@@ -162,17 +285,20 @@ function App() {
                     aria-label="Remove"
                     color="red.500"
                     icon={<DeleteIcon />}
-                    onClick={() =>
+                    onClick={() => {
+                      log.info(
+                        `Removed corner: ${corner.position.x}, ${corner.position.y}, ${corner.position.z}`
+                      )
                       setCorners(corners.filter((_, j) => i !== j))
-                    }
+                    }}
                   />
                 </Td>
               </Tr>
             ))}
           </Tbody>
         </Table>
       </TableContainer>
-    </>
+    </Container>
   )
 }
 

src/constants.ts

@@ -1 +1,3 @@
 export const clipboardTextUpdatedChannel = 'clipboard-text-updated'
+export const openBrowserWindowChannel = 'open-browser-window'
+export const getLogfilePathChannel = 'get-logfile-path'