[+] Mobile

src/App.svelte

@@ -2,11 +2,12 @@
   import svelteLogo from './assets/svelte.svg'
   import viteLogo from '/vite.svg'
   import Number from './lib/Number.svelte'
-  import { cfg, eStates, Fmt, JsonTy, nStates, randInt, range, zero8, type Checkpoint, type i8s } from "./utils";
+  import { cfg, eStates, Fmt, JsonTy, Misc, nStates, randInt, range, zero8, type Checkpoint, type i8s } from "./utils";
   import Line from "./lib/Line.svelte";
   import { solve } from "./solver";
 
   const params = new URLSearchParams(location.search)
+  const hasTouch = Misc.hasTouch()
 
   // Can pass in puzzle data from props
   interface Props { puzzleId?: string, puzzleData?: Checkpoint }
@@ -155,15 +156,21 @@
     const idx = (sy + osy) * eCols + (sx + osx)
 
     // Flip the state of the edge
-    const state = event.type === 'contextmenu' ? 2 : 1
     if (color) {
       if (vertical) vColors[idx] = ci
       else hColors[idx] = ci
     }
-    else {
+    else if (!hasTouch) {
+      // Mouse is accurate, so right click to cross, left click to select
+      const state = event.type === 'contextmenu' ? 2 : 1
       if (vertical) vStates[idx] = vStates[idx] % 3 !== state ? state : 0
       else hStates[idx] = hStates[idx] % 3 !== state ? state : 0
     }
+    else {
+      // Touch is not accurate, click once to select, click again to cross, click again to clear
+      if (vertical) vStates[idx] = (vStates[idx] + 1) % 3
+      else hStates[idx] = (hStates[idx] + 1) % 3
+    }
 
     // Check the validity of the clicked cell and its neighbors (check 5x5 but clean only 3x3)
     updateArea.forEach(([dx, dy, outer]) => outer ? 0 : clearAutoMark(sx + dx, sy + dy))
@@ -269,7 +276,7 @@
   }
 </script>
 
-<main class:color-mode={mode === 'color'} class:colorful-cross={colorfulCross}>
+<main class:color-mode={mode === 'color'} class:colorful-cross={colorfulCross} class:mobile={hasTouch}>
   <div class="heading">Azalea's Colorful Slither Link</div>
   <div class="sub-heading">
     <img src={viteLogo} alt="Logo"/>

src/puzzle.sass

@@ -7,6 +7,7 @@
   margin: 1em auto
   position: relative
   user-select: none
+  touch-action: manipulation
 
 .grid-number
   position: absolute
@@ -52,9 +53,9 @@
     position: absolute
     top: -7px
 
-  &:hover
+main:not(.mobile) .grid-line:hover
-    background: var(--c)
+  background: var(--c)
-    opacity: 0.5
+  opacity: 0.5
 
 .color-mode .grid-line:not(.selected):not(.crossed):not(.auto-crossed)
   background: var(--c)

src/utils.ts

@@ -77,3 +77,8 @@ export const Backend = {
   }).then(JsonTy.parse),
   post: (data: Checkpoint) => fetch(`${cfg.backend}/`, { method: "post", body: JsonTy.stringify(data) }),
 }
+
+export const Misc = {
+  // @ts-ignore
+  hasTouch: () => 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
+}