Fixed layout and interaction for mobile

src/components/Map.js

@@ -34,17 +34,31 @@ function Map({
   const [mapScale, setMapScale] = useState(1);
 
   useEffect(() => {
-    interact(".map").draggable({
-      inertia: true,
-      listeners: {
-        move: event => {
-          setMapTranslate(previousMapTranslate => ({
-            x: previousMapTranslate.x + event.dx,
-            y: previousMapTranslate.y + event.dy
-          }));
+    interact(".map")
+      .gesturable({
+        listeners: {
+          move: event => {
+            setMapScale(previousMapScale =>
+              Math.max(Math.min(previousMapScale + event.ds, maxZoom), minZoom)
+            );
+            setMapTranslate(previousMapTranslate => ({
+              x: previousMapTranslate.x + event.dx,
+              y: previousMapTranslate.y + event.dy
+            }));
+          }
         }
-      }
-    });
+      })
+      .draggable({
+        inertia: true,
+        listeners: {
+          move: event => {
+            setMapTranslate(previousMapTranslate => ({
+              x: previousMapTranslate.x + event.dx,
+              y: previousMapTranslate.y + event.dy
+            }));
+          }
+        }
+      });
     interact(".map").on("doubletap", event => {
       event.preventDefault();
       setMapTranslate({ x: 0, y: 0 });
@@ -54,8 +68,8 @@ function Map({
 
   function handleZoom(event) {
     const deltaY = event.deltaY * zoomSpeed;
-    setMapScale(mapScale =>
-      Math.max(Math.min(mapScale + deltaY, maxZoom), minZoom)
+    setMapScale(previousMapScale =>
+      Math.max(Math.min(previousMapScale + deltaY, maxZoom), minZoom)
     );
   }
 
@@ -72,7 +86,9 @@ function Map({
           flexGrow: 1,
           position: "relative",
           overflow: "hidden",
-          backgroundColor: "rgba(0, 0, 0, 0.1)"
+          backgroundColor: "rgba(0, 0, 0, 0.1)",
+          userSelect: "none",
+          touchAction: "none"
         }}
         bg="background"
         onWheel={handleZoom}
@@ -109,7 +125,11 @@ function Map({
               <Image
                 ref={mapRef}
                 id="map"
-                sx={{ width: "100%" }}
+                sx={{
+                  width: "100%",
+                  userSelect: "none",
+                  touchAction: "none"
+                }}
                 src={mapSource}
               />
             </Box>
@@ -139,6 +159,7 @@ function Map({
                     tokenId={token.id}
                     image={token.image}
                     className={mapTokenClassName}
+                    sx={{ position: "absolute" }}
                   />
                 </Box>
               ))}

src/components/ProxyToken.js

@@ -112,12 +112,12 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, size }) {
   return ReactDOM.createPortal(
     <Box
       sx={{
-        width: "100vw",
-        height: "100vh",
         position: "absolute",
         overflow: "hidden",
         top: 0,
-        left: 0
+        left: 0,
+        bottom: 0,
+        right: 0
       }}
     >
       <Image

src/components/Token.js

@@ -1,17 +1,21 @@
 import React from "react";
 import { Image } from "theme-ui";
 
-function Token({ image, className, tokenId }) {
+function Token({ image, className, tokenId, sx }) {
   // Store the token id in the html element for the drag code to pick it up
   const idProp = tokenId ? { "data-token-id": tokenId } : {};
   return (
     <Image
       className={className}
-      sx={{ userSelect: "none" }}
+      sx={{ userSelect: "none", touchAction: "none", ...sx }}
       src={image}
       {...idProp}
     />
   );
 }
 
+Token.defaultProps = {
+  sx: {}
+};
+
 export default Token;

src/index.css

@@ -1 +1,7 @@
 @import url("https://fonts.googleapis.com/css?family=Bree+Serif|Pacifico&display=swap");
+
+#root,
+body,
+html {
+  height: 100%;
+}

src/routes/Game.js

@@ -136,7 +136,7 @@ function Game() {
   }
 
   return (
-    <Flex sx={{ flexDirection: "column", height: "100vh" }}>
+    <Flex sx={{ flexDirection: "column", height: "100%" }}>
       <Flex
         sx={{ justifyContent: "space-between", flexGrow: 1, height: "100%" }}
       >

src/routes/Home.js

@@ -19,11 +19,11 @@ function Home() {
   }
 
   return (
-    <Container sx={{ maxWidth: "300px" }}>
+    <Container sx={{ maxWidth: "300px", height: "100%" }}>
       <Flex
         sx={{
           flexDirection: "column",
-          height: "100vh",
+          height: "100%",
           justifyContent: "center"
         }}
       >

src/routes/Join.js

@@ -17,11 +17,11 @@ function Join() {
   }
 
   return (
-    <Container sx={{ maxWidth: "300px" }}>
+    <Container sx={{ maxWidth: "300px", height: "100%" }}>
       <Flex
         sx={{
           flexDirection: "column",
-          height: "100vh",
+          height: "100%",
           justifyContent: "center"
         }}
       >