Alternate control mode

src/components/Footer.tsx

@@ -1,11 +1,13 @@
 import { Accessor, Show } from 'solid-js';
 import { Motion, Presence } from 'solid-motionone';
+import { Settings } from '@/utils/settings';
 import { TbDice } from 'solid-icons/tb';
 
 interface FooterProps {
   solved: Accessor<boolean>;
   inGame: Accessor<boolean>;
   twoMode: Accessor<boolean>;
+  settings: Accessor<Settings>;
 
   reset: () => void;
   setOrToggleTwoMode: (two: boolean) => void;
@@ -14,7 +16,7 @@ interface FooterProps {
 export default function Footer(props: FooterProps) {
   return (
     <Presence exitBeforeEnter>
-      <Show when={!props.solved() && props.inGame()}>
+      <Show when={!props.solved() && props.inGame() && !props.settings().alternateControlStyle}>
         <Motion.div
           class="info-container mino-picker"
           initial={{ scale: 0.9, opacity: 0 }}

src/pages/Game.tsx

@@ -67,7 +67,9 @@ export default function Game() {
     return !isOccupied(x, y + 1);
   };
   const setOrToggleTwoMode = (two: boolean) =>
-    settings().strictControls ? setTwoMode(two) : toggleTwoMode();
+    settings().strictControls || settings().alternateControlStyle
+      ? setTwoMode(two)
+      : toggleTwoMode();
   const toggleTwoMode = () => setTwoMode(!twoMode());
   const rawCoordinates = (): [number, number, number, number] | null => {
     const mouse = relativeMouseXY();
@@ -182,12 +184,23 @@ export default function Game() {
       }
       if (event.repeat) return;
       if (event.key == 'c') return trash();
-      if (event.key == '1') return setOrToggleTwoMode(false);
-      if (event.key == '2') return setOrToggleTwoMode(true);
+      if (event.key == '1') setOrToggleTwoMode(false);
+      if (event.key == '2') setOrToggleTwoMode(true);
+      if (settings().alternateControlStyle && (event.key == '1' || event.key == '2')) {
+        handleMouseDown();
+        return;
+      }
       if (event.key == ' ') toggleTwoMode();
     };
     document.addEventListener('keydown', keyHandler);
 
+    const keyUpHandler = (event: KeyboardEvent) => {
+      if (!settings().alternateControlStyle) return;
+      if (event.key != '1' && event.key != '2') return;
+      handleMouseUp();
+    };
+    document.addEventListener('keyup', keyUpHandler);
+
     const handleMove = (x: number, y: number) => {
       // this is a concession I gotta make for all you touchscreen players out there
       // which I will now dub "touchies"... >:(
@@ -232,12 +245,14 @@ export default function Game() {
 
     const mouseDownHandler = (event: MouseEvent) => {
       if (event.button != 0) return;
+      if (settings().alternateControlStyle) return;
       handleMouseDown();
     };
     boardElement.addEventListener('mousedown', mouseDownHandler);
 
     const touchDownHandler = (event: TouchEvent) => {
       if (!inGame()) return;
+      if (settings().alternateControlStyle) return;
       event.preventDefault();
       // to be honest i have no idea how this is implemented on browsers :)
       if (event.touches[0] == undefined) {
@@ -266,6 +281,7 @@ export default function Game() {
 
     onCleanup(() => {
       document.removeEventListener('keydown', keyHandler);
+      document.removeEventListener('keyup', keyUpHandler);
       boardElement.removeEventListener('mousemove', moveHandler);
       boardElement.removeEventListener('touchmove', touchMoveHandler);
       boardElement.removeEventListener('mouseout', offHandler);
@@ -425,6 +441,7 @@ export default function Game() {
           solved={solved}
           inGame={inGame}
           twoMode={twoMode}
+          settings={settings}
           setOrToggleTwoMode={setOrToggleTwoMode}
           reset={reset}
         />

src/utils/settings.ts

@@ -6,6 +6,7 @@ export type Settings = {
   darkMode: boolean;
   showSolveButton: boolean;
   strictControls: boolean;
+  alternateControlStyle: boolean;
   blockPushing: boolean;
   hideTime: boolean;
   hideEndorsement: boolean;
@@ -19,6 +20,7 @@ export const defaultSettings: Settings = {
   colorBlindMode: false,
   showSolveButton: false,
   strictControls: false,
+  alternateControlStyle: false,
   blockPushing: false,
   hideTime: false,
   hideEndorsement: false,
@@ -42,6 +44,10 @@ export const settingsDescription: Record<keyof Settings, [string, string]> = {
     'Strict Controls',
     'Makes it so that clicking/typing a domino will choose that domino type instead of cycling between domino types',
   ],
+  alternateControlStyle: [
+    'Alternate Control Style',
+    'This only works on desktop and it makes it so that clicking does nothing and holding the respective number key down picks that domino and "paints" that domino',
+  ],
   blockPushing: [
     'Disable Block Pushing',
     'Prevent the default behavior of pushing dominos away from blocks (dragging over a block will now do nothing)',