zoom links

Author: Christopher Strauss

src/main/client/src/feature/game/BoardSettings.jsx

@@ -0,0 +1,68 @@
+import {
+  IconContext,
+} from "react-icons"
+import {
+  FaVolumeMute,
+  FaVolumeUp,
+  FaSearchPlus,
+  FaSearchMinus,
+} from "react-icons/fa"
+import {
+  useMuteStore,
+} from "src/store.js"
+import {
+  useViewStateStore,
+} from "src/layout.js"
+
+export function BoardSettings() {
+  return (
+    <div className="absolute pl-2 pt-1 flex flex-col items-center">
+      <MuteIcon />
+      <Zoom />
+    </div>
+  )
+}
+
+function MuteIcon() {
+  let toggleMuted = useMuteStore((state) => state.toggleMuted)
+  let muted = useMuteStore(state => state.muted)
+  return (
+    <button onClick={toggleMuted}>
+      <IconContext.Provider value={{
+        size: "1.5em",
+      }}>
+        {muted ? <FaVolumeMute /> : <FaVolumeUp />}
+      </IconContext.Provider>
+    </button>
+  )
+}
+
+function Zoom() {
+  let zoom = useViewStateStore(state => state.zoom)
+  let setZoom = useViewStateStore(state => state.setZoom)
+  return (
+    <>
+      <button
+        className="mt-[0.25rem]"
+        onClick={() => setZoom(zoom + 1)}>
+        <IconContext.Provider value={{
+          size: "1.5em",
+        }}>
+          <FaSearchPlus />
+        </IconContext.Provider>
+      </button>
+      <button onClick={() => setZoom(0)}>
+        <span className="text-2xl">{Math.trunc(zoom)}</span>
+      </button>
+      <button
+        className="mt-[0.125rem]"
+        onClick={() => setZoom(zoom - 1)}>
+        <IconContext.Provider value={{
+          size: "1.5em",
+        }}>
+          <FaSearchMinus />
+        </IconContext.Provider>
+      </button>
+    </>
+  )
+}

src/main/client/src/feature/game/Game.jsx

@@ -22,6 +22,8 @@ import {
 import {
   FaVolumeMute,
   FaVolumeUp,
+  FaSearchPlus,
+  FaSearchMinus,
 } from "react-icons/fa"
 import {
   vw,
@@ -64,6 +66,9 @@ import {
   createGameState,
   isReviewing,
 } from "./state.js"
+import { 
+  BoardSettings,
+} from "./BoardSettings.jsx"
 
 export function Game() {
   let [gameState, setGameState] = useState(initialState())
@@ -72,7 +77,7 @@ export function Game() {
     <div
       style={{ width: vw() - sidebarWidth }}
       className="h-full">
-      <MuteIcon />
+      <BoardSettings />
       <Board gameState={gameState} setGameState={setGameState} />
       <GamePanel gameState={gameState} setGameState={setGameState} />
     </div>
@@ -389,20 +394,3 @@ function getRadius(radius) {
   }
   return diameter / 2
 }
-
-function MuteIcon() {
-  let toggleMuted = useMuteStore((state) => state.toggleMuted)
-  let muted = useMuteStore(state => state.muted)
-  return (
-    <div className="absolute left-2 top-2">
-      <button onClick={toggleMuted}>
-        <IconContext.Provider value={{
-          size: "1.5em",
-          className: "pl-[4px]",
-        }}>
-          {muted ? <FaVolumeMute /> : <FaVolumeUp /> }
-        </IconContext.Provider>
-      </button>
-    </div>
-  )
-}

src/main/client/src/feature/game/GamePanel.jsx

@@ -6,10 +6,6 @@ import {
   useParams,
   useNavigate,
 } from "react-router-dom"
-import {
-  FaAngleLeft,
-  FaAngleRight,
-} from "react-icons/fa"
 import {
   IoMdExit,
 } from "react-icons/io"
@@ -26,9 +22,6 @@ import {
 import {
   useAuthStore,
 } from "src/store.js"
-import {
-  useViewStateStore,
-} from "src/layout.js"
 import {
   Chat,
 } from "src/component/Chat.jsx"
@@ -58,8 +51,6 @@ export const GamePanel = ({gameState, setGameState}) => {
 
 function Panel({gameState, setGameState}) {
   let {gameId} = useParams()
-  let zoom = useViewStateStore(state => state.zoom)
-  let setZoom = useViewStateStore(state => state.setZoom)
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
   let {black, white, viewPos, counting, board} = gameState
@@ -101,28 +92,10 @@ function Panel({gameState, setGameState}) {
   }
   return (
     <>
-      <div className="flex-none flex w-full gap-x-2">
-        <button
-          onClick={() => setZoom(zoom - 1)}>
-          <IconContext.Provider value={{
-            size: "1.25em",
-            className: "pl-[4px]",
-          }}>
-            <FaAngleLeft />
-          </IconContext.Provider>
-        </button>
-        <button onClick={() => setZoom(0)}>
-          <span>Zoom: {Math.trunc(zoom)}</span>
-        </button>
-        <button
-          onClick={() => setZoom(zoom + 1)}>
-          <IconContext.Provider value={{
-            size: "1.25em",
-            className: "pr-[4px]",
-          }}>
-            <FaAngleRight />
-          </IconContext.Provider>
-        </button>
+      <div className="flex-none flex w-full gap-x-1">
+        <div>{white}</div>
+        <div>vs</div>
+        <div>{black}</div>
         <div className="grow" />
         <button title="Leave the game" onClick={onExit}>
           <IconContext.Provider value={{
@@ -133,11 +106,6 @@ function Panel({gameState, setGameState}) {
           </IconContext.Provider>
         </button>
       </div>
-      <div className="flex-none flex gap-x-1">
-        <div>{white}</div>
-        <div>vs</div>
-        <div>{black}</div>
-      </div>
       {(gameHasEnded(gameState) || isKibitz(gameState, auth)) ? (
         <div className="flex-none flex gap-x-1 items-center">
           <Button title="Back"