Added in version 1 of the menu

src/app.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'preact/hooks'
 import { TextInput, TextArrayInput, SelectInput, CheckboxInput } from './components/input.tsx'
+import { Modal, ModalProps } from './components/modal'
 
 import { Resource } from './lib/catan_hex.ts'
 import { Catan, CatanBoard, Extension } from './components/catan.tsx'
@@ -14,6 +15,45 @@ function App() {
   const [extensions, setExtensions] = useState<Extension[]>([])
   const catan = new Catan({pointA, deserts, players, resources, extensions})
 
+  interface HexModalProps extends ModalProps {
+    cords: number[]
+    hexNum: number
+  }
+
+  function HexModal({open, setOpen, cords, hexNum}: HexModalProps) {
+    return (
+      <Modal open={open} setOpen={setOpen}>
+        {catan.field.corners().includes(cords.join(' ')) &&
+        cords.some((e, i) => e !== catan.field.pointA[i]) && <>
+          <button type="button" onClick={() => setPointA(cords)}>Set as point A</button>
+          <br/>
+        </>}
+
+        {deserts.map((desert, i) => (
+          cords.some((e, i) => e !== desert[i]) && <>
+            <button type="button" onClick={() => (
+              setDeserts(deserts.length > 1 ? [desert, cords] : [cords])
+            )}>Set as desert {i + 1}</button>
+            <br/>
+          </>
+        ))}
+        <br/>
+
+        {deserts.every(desert => desert.some((e, i) => e !== cords[i])) &&
+        ['wood', 'clay', 'wheat', 'sheep', 'stone'].map(resource => (
+          resource !== catan.field.board[cords[0]][cords[1]].resource && <>
+            <button type="button" onClick={() => {
+              const temp = [...resources]
+              temp[hexNum] = resource as Resource
+              setResources(temp)
+            }}>Change to {resource}</button>
+            <br/>
+          </>
+        ))}
+      </Modal>
+    )
+  }
+
   return (
     <>
       <button type="button" onClick={() => {
@@ -43,7 +83,7 @@ function App() {
       ))}<br/>
       <br/>
 
-      <CatanBoard catan={catan} />
+      <CatanBoard catan={catan} HexModal={HexModal} />
     </>
   )
 }

src/components/catan.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'preact/hooks'
 import { Point, Layout } from '../lib/hex_layout'
 import { Resource } from '../lib/catan_hex'
 
@@ -6,9 +7,10 @@ import './catan.css'
 
 interface CatanBoardProps {
   catan: Catan
+  HexModal: any
 }
 
-function CatanBoard({catan}: CatanBoardProps) {
+function CatanBoard({catan, HexModal}: CatanBoardProps) {
   const resColor: {[k in Resource]: string} = {
     'wood': '#7B863D',
     'clay': '#F6A173',
@@ -20,18 +22,29 @@ function CatanBoard({catan}: CatanBoardProps) {
 
   const wtf = (catan.field.midRow - 1) * Math.sqrt(3) * -10
   const layout = new Layout(Layout.pointy, new Point(20, 20), new Point(wtf, 20))
-
   const w = Math.sqrt(3) * 20 * catan.field.board[catan.field.midRow].length
   const h = 30 * catan.field.board.length + 10
 
+  const [open, setOpen] = useState(false)
+  const [cords, setCords] = useState([0, 0])
+  const [hexNum, setHexNum] = useState(0)
+  let num = 0
+
   return (
     <>
+      <HexModal open={open} setOpen={setOpen} cords={cords} hexNum={hexNum} />
       <svg width={w} height={h} xmlns="http://www.w3.org/2000/svg">
         {catan.field.hexes.map(hex => {
           const p = layout.polygonCorners(hex)
           const t = layout.hexToPixel(hex)
+          const temp = hex.number ? num++ : 0
+
           return (
-            <g>
+            <g onClick={() => {
+              setHexNum(temp)
+              setCords(catan.field.cordsToIndex(hex.cords))
+              setOpen(true)
+            }}>
               <polygon fill={resColor[hex.resource]} points={p} />
               <text fill={[6, 8].includes(hex.number) ? 'red' : 'white'} x={t.x} y={t.y + 10}>{hex.number}</text>
             </g>

src/components/modal.css

@@ -0,0 +1,10 @@
+dialog {
+  background-color: #ffffff99
+}
+
+.modal-close-btn {
+  font-size: 0.75em;
+  position: absolute;
+  top: 0;
+  right: 0;
+}

src/components/modal.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'preact/hooks'
+import './modal.css'
+
+interface ModalProps {
+  open: boolean
+  setOpen: (b: boolean) => void
+}
+
+interface BaseModal extends ModalProps {
+  children: any
+}
+
+function Modal({open, setOpen, children}: BaseModal) {
+  const modalRef = useRef<HTMLDialogElement | null>(null)
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === "Escape")
+      setOpen(false)
+  }
+
+  useEffect(() => {
+    setOpen(open)
+  }, [open])
+
+  useEffect(() => {
+    const modalElement = modalRef.current;
+
+    if (modalElement) {
+      if (open) modalElement.showModal()
+      else modalElement.close()
+    }
+  }, [open])
+
+  return (
+    <dialog ref={modalRef} onKeyDown={handleKeyDown}>
+      <button class="modal-close-btn" onClick={() => setOpen(false)}>X</button>
+      {children}
+    </dialog>
+  )
+}
+
+export {Modal, type ModalProps}