refactor: scale

packages/topdown/src/persea/controllers/room/component.jsx

@@ -118,7 +118,7 @@ const RoomComponent = ({
           ref={onRef}
           renderer={renderer}
           renderable={roomRenderable}
-          scalable={false}
+          scale={3}
           size={viewport}
           styles={stageStyles}
         />

packages/topdown/src/persea/controllers/room/component.module.scss

@@ -15,19 +15,19 @@
     height: 50%;
   }
   .stage {
-    margin: 1rem 0 0 1rem;
+    margin: 1rem;
     overflow: hidden;
   }
   @media (min-width: 60rem) {
     display: flex;
     .side, .stage {
-      height: 100%;
-      width: 50%;
+      height: calc(100% - 2rem);
+      width: calc(50% - 2rem);
     }
   }
 }
 
-.stage.moving > div {
+.stage.moving {
   overflow: auto;
 }
 

packages/topdown/src/persea/room-sides/tiles-side/index.jsx

@@ -53,6 +53,7 @@ function TilesPage({
   const layerCount = resource.tiles.length;
   const [currentLayer, setCurrentLayer] = useState(0);
   const [tilesetEvents, setTilesetEvents] = useState();
+  const [scale, setScale] = useState(3);
   const [solo, setSolo] = useState(Array(layerCount).fill(false));
   const [incident, setIncident] = useState([0, 0]);
   const [isHoldingPaint, setIsHoldingPaint] = useState(false);
@@ -127,17 +128,14 @@ function TilesPage({
     };
     const onValue = (
       {
-        clientX,
-        clientY,
-        target,
+        position,
         type,
       },
     ) => {
       switch (type) {
         case 'touchstart':
         case 'mousedown': {
-          const {left, top} = target.getBoundingClientRect();
-          const translated = Vector.floor(Vector.div([clientX - left, clientY - top], tileSize));
+          const translated = Vector.floor(Vector.div(position, tileSize));
           stamp(translated);
           setIsHoldingPaint(true);
           break;
@@ -145,8 +143,7 @@ function TilesPage({
         case 'touchmove':
         case 'mousemove': {
           if (isHoldingPaint) {
-            const {left, top} = target.getBoundingClientRect();
-            const translated = Vector.floor(Vector.div([clientX - left, clientY - top], tileSize));
+            const translated = Vector.floor(Vector.div(position, tileSize));
             stamp(translated);
           }
           break;
@@ -269,20 +266,43 @@ function TilesPage({
       </div>
       <div>
         <div className={styles.draw}>
-          <div className={styles.brushes}>
-            <label>
-              <span>Tileset mode</span>
-              <select
-                defaultValue={tilesetMode}
-                onChange={(event) => {
-                  setTilesetMode(parseInt(event.target.value, 10));
-                }}
-              >
-                <option value={0}>Pan</option>
-                <option value={1}>Draw</option>
-                <option value={2}>Fill</option>
-              </select>
-            </label>
+          <div className={styles.header}>
+            <div className={styles.brushes}>
+              <label>
+                <span>Tileset mode</span>
+                <select
+                  defaultValue={tilesetMode}
+                  onChange={(event) => {
+                    setTilesetMode(parseInt(event.target.value, 10));
+                  }}
+                >
+                  <option value={0}>Pan</option>
+                  <option value={1}>Draw</option>
+                  <option value={2}>Fill</option>
+                </select>
+              </label>
+            </div>
+            <div className={styles.scale}>
+              <label>
+                <span>Scale</span>
+                <select
+                  defaultValue={scale}
+                  onChange={(event) => {
+                    setScale(event.target.value);
+                  }}
+                >
+                  {
+                    [1, 2, 3, 4, 6, 8]
+                      .map((n) => (
+                        <option key={n} value={n}>
+                          {n}
+                          x
+                        </option>
+                      ))
+                  }
+                </select>
+              </label>
+            </div>
           </div>
           <div className={styles.tilesetWrapper}>
             <div
@@ -293,7 +313,7 @@ function TilesPage({
                 ref={onRef}
                 renderer={renderer}
                 renderable={container}
-                scale={1}
+                scale={scale}
                 size={viewport}
               />
             </div>

packages/topdown/src/persea/room-sides/tiles-side/index.module.scss

@@ -9,7 +9,18 @@
     margin: 0.5rem;
   }
   .label, label {
-    background-color: transparent;
+    background-color: transparent !important;
+  }
+  label span {
+    font-family: var(--system-font-family);
+    font-size: 0.6em;
+    font-weight: bold;
+    margin-bottom: 1em;
+    // text-align: center;
+    // text-orientation: mixed;
+    text-transform: uppercase;
+    // writing-mode: vertical-rl;
+    // width: 1rem;
   }
 }
 
@@ -29,7 +40,6 @@
     padding-right: 0.5rem;
   }
   label {
-    background-color: transparent !important;
     display: inline;
   }
   .visibility {
@@ -45,6 +55,14 @@
   }
 }
 
+.header {
+  display: flex;
+}
+
+.brushes {
+  flex-grow: 100;
+}
+
 .tilesetUri {
   margin: 1rem;
 }
@@ -72,15 +90,3 @@
   height: 3rem;
   width: 100%;
 }
-
-.brushes label span {
-  font-family: var(--system-font-family);
-  font-size: 0.6em;
-  font-weight: bold;
-  margin-bottom: 1em;
-  // text-align: center;
-  // text-orientation: mixed;
-  text-transform: uppercase;
-  // writing-mode: vertical-rl;
-  // width: 1rem;
-}