Increased domino hit radius

imkunet · Mar 5, 2024 · abcbc11 · abcbc11
1 parent 77fcc24
commit abcbc11
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx
@@ -445,29 +445,31 @@ function Game() {
               animate={{ scale: 1, opacity: 1 }}
               exit={{ scale: 0.9, opacity: 0 }}
             >
-              <Motion.div
-                animate={{
-                  opacity: twoMode() ? 0.5 : 1.0,
-                  scale: twoMode() ? 0.9 : 1.0,
-                }}
-                transition={{ duration: 0.08 }}
-                onClick={toggleTwoMode}
-                class={`mino mino-one`}
-              >
-                <div />
-              </Motion.div>
-              <Motion.div
-                animate={{
-                  opacity: !twoMode() ? 0.5 : 1.0,
-                  scale: !twoMode() ? 0.9 : 1.0,
-                }}
-                transition={{ duration: 0.08 }}
-                onClick={toggleTwoMode}
-                class={`mino mino-two`}
-              >
-                <div />
-                <div />
-              </Motion.div>
+              <div onClick={toggleTwoMode}>
+                <Motion.div
+                  animate={{
+                    opacity: twoMode() ? 0.5 : 1.0,
+                    scale: twoMode() ? 0.9 : 1.0,
+                  }}
+                  transition={{ duration: 0.08 }}
+                  class={`mino mino-one`}
+                >
+                  <div />
+                </Motion.div>
+              </div>
+              <div onClick={toggleTwoMode}>
+                <Motion.div
+                  animate={{
+                    opacity: !twoMode() ? 0.5 : 1.0,
+                    scale: !twoMode() ? 0.9 : 1.0,
+                  }}
+                  transition={{ duration: 0.08 }}
+                  class={`mino mino-two`}
+                >
+                  <div />
+                  <div />
+                </Motion.div>
+              </div>
             </Motion.div>
           </Show>
           <Show when={solved()}>

diff --git a/src/styles/game.css b/src/styles/game.css
@@ -149,6 +149,14 @@
   gap: 2rem;
 }
 
+.mino-picker > div:nth-child(1) {
+  padding: 0 calc(var(--game-tile-size) / 2);
+}
+
+.mino-picker > div:nth-child(2) {
+  padding: calc(var(--game-tile-size) / 2) 0;
+}
+
 .block {
   display: flex;
   background: var(--game-block-color);