Allow adjusting settings directly. (#12)

This includes the majority of the common settings for use in generating seeds.

Use the gear button to adjust most of the settings. Some will stay in the runtime section immediately below the gear, and Switchsanity items will appear below that if necessary.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanky-tracker",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "An DK 64 Rando Tracker Electron application with React and TypeScript",
   "main": "./out/main/index.js",
   "author": "wolfman2000",
@@ -25,6 +25,7 @@
     "@electron-toolkit/utils": "^3.0.0",
     "electron-context-menu": "^3.6.1",
     "electron-updater": "^6.1.7",
+    "react-modal": "^3.16.1",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
@@ -34,6 +35,7 @@
     "@types/node": "^18.19.9",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "@types/react-modal": "^3.16.3",
     "@vitejs/plugin-react": "^4.2.1",
     "electron": "^28.2.0",
     "electron-builder": "^24.9.1",

src/renderer/src/App.tsx

@@ -13,6 +13,7 @@ import CastleChecks from './components/castle'
 import FoolishHints from './components/hints'
 import ResetTracker from './components/ResetComponent'
 import RuntimeSettings from './components/RuntimeSettings'
+import SwitchsanitySelector from './components/Switchsanity'
 
 function App(): JSX.Element {
   /*
@@ -41,6 +42,7 @@ function App(): JSX.Element {
           <LevelTable />
           <FoolishHints />
           <RuntimeSettings />
+          <SwitchsanitySelector />
           <ResetTracker />
         </article>
         <article>

src/renderer/src/assets/main.css

@@ -58,7 +58,7 @@ main > article:last-child {
   grid-column: 2;
   & > .react-tabs > ul {
     display: grid;
-    grid-template-columns: repeat(8, 1fr);
+    grid-template-columns: 1.5fr repeat(7, 1fr);
     padding-inline-start: 0;
     font-size: smaller;
     & > li {
@@ -111,6 +111,10 @@ main > article:last-child {
   color: green;
 }
 
+.generator-settings > span {
+  cursor: pointer;
+}
+
 .foolish-section h3 {
   margin: 0 auto;
   text-align: center;
@@ -136,6 +140,31 @@ main > article:last-child {
   text-align: right;
 }
 
+.modal-settings > .pool {
+  display: grid;
+  grid-template-columns: repeat(3, 3fr 1fr);
+}
+.modal-settings > .pool > h3 {
+  margin: 0 auto;
+  display: flex;
+  grid-column-start: 1;
+  grid-column-end: 7;
+}
+
+.switchsanity-settings > h4 {
+  text-align: center;
+}
+.switchsanity-settings > section {
+  display: grid;
+  grid-template-columns: 7fr 1fr;
+  height: 27vh;
+  overflow-y: auto;
+}
+.switchsanity-settings > section > img {
+  text-align: right;
+  margin-left: auto;
+}
+
 main .grid {
   display: grid;
   grid-template-columns: 4fr 2.5fr 0.5fr;

src/renderer/src/components/BananaportSelector.tsx

@@ -0,0 +1,58 @@
+import { MouseEvent, WheelEvent } from 'react'
+
+import useDonkStore from '@renderer/store'
+import { BananaportRange } from '@renderer/store/common'
+import { useShallow } from 'zustand/react/shallow'
+
+import portFullIcon from '../assets/images/settings/bananaport.png'
+import portHalfIcon from '../assets/images/settings/bananaport_isles.png'
+
+const portToIcon = (num: BananaportRange): string => {
+  return num == 1 ? portHalfIcon : portFullIcon
+}
+
+const clamp = (num: number): number => Math.min(Math.max(num, 0), 2)
+
+const nextPort = (num: number): number => clamp(num + 1)
+
+const prevPort = (num: number): number => clamp(num - 1)
+
+const BananaportSelector: React.FC = () => {
+  const [bananaportOpen, setSetting] = useDonkStore(
+    useShallow((state) => [state.bananaportOpen, state.setSetting])
+  )
+
+  const handleNextLevel = (): void => {
+    setSetting('bananaportOpen', nextPort(bananaportOpen))
+  }
+
+  const handlePrevLevel = (e: MouseEvent<HTMLImageElement>): void => {
+    e.preventDefault()
+    setSetting('bananaportOpen', prevPort(bananaportOpen))
+  }
+
+  const handleWheel = (e: WheelEvent<HTMLImageElement>): void => {
+    if (e.deltaY >= 0) {
+      setSetting('bananaportOpen', nextPort(bananaportOpen))
+    } else {
+      setSetting('bananaportOpen', prevPort(bananaportOpen))
+    }
+  }
+
+  return (
+    <div>
+      <img
+        className="simple-icon"
+        height={24}
+        title={bananaportOpen == 0 ? 'None' : bananaportOpen == 1 ? 'Isles' : 'All'}
+        src={portToIcon(bananaportOpen)}
+        onClick={handleNextLevel}
+        onContextMenu={handlePrevLevel}
+        onWheel={handleWheel}
+        style={{ filter: `grayscale(${bananaportOpen != 0 ? '0' : '1'})` }}
+      />
+    </div>
+  )
+}
+
+export default BananaportSelector