qol: some shortcuts, canvas focus indicator

client/src/gl/viewport.ts

@@ -127,10 +127,10 @@ export class Viewport {
   }
 
   private onkeydown(e: KeyboardEvent) {
-    if (e.key === 'ArrowLeft') this.pos.x -= 1
-    else if (e.key === 'ArrowRight') this.pos.x += 1
-    else if (e.key === 'ArrowUp') this.pos.y -= 1
-    else if (e.key === 'ArrowDown') this.pos.y += 1
+    if (e.key === 'ArrowLeft' || e.key === 'a') this.pos.x -= 1
+    else if (e.key === 'ArrowRight' || e.key === 'd') this.pos.x += 1
+    else if (e.key === 'ArrowUp' || e.key === 'w') this.pos.y -= 1
+    else if (e.key === 'ArrowDown' || e.key === 's') this.pos.y += 1
   }
 
   // ------------ mobile events --------------------------------

client/src/ui/lib/editBrush.svelte

@@ -252,10 +252,10 @@
   function onKeyPress(e: KeyboardEvent) {
     if (e.ctrlKey || e.altKey) return
 
-    if (['r', 'v', 'h', 'n', 'm'].includes(e.key.toLowerCase())) e.preventDefault()
+    if (['r', 't', 'v', 'h', 'n', 'm'].includes(e.key.toLowerCase())) e.preventDefault()
 
     if (e.key === 'r') onRotateCW()
-    else if (e.key === 'R') onRotateCCW()
+    else if (e.key === 'R' || e.key === 't') onRotateCCW()
     else if (e.key === 'v' || e.key === 'm') onFlipV()
     else if (e.key === 'h' || e.key === 'n') onFlipH()
   }

client/src/ui/lib/editor.svelte

@@ -160,10 +160,6 @@
     }
   }
 
-  function onToggleAnim() {
-    $anim = !$anim
-  }
-
   function onUndo() {
     if (!$server.undo()) {
       console.warn('cannot undo')
@@ -182,13 +178,13 @@
 
     Editor.fire('keydown', e)
 
-    if (e.ctrlKey && ['s', ' ', 'z', 'y'].includes(e.key)) {
+    if (e.ctrlKey && ['s', ' ', 'z', 'y', 'm'].includes(e.key)) {
       e.preventDefault()
 
       if (e.key === 's') {
         Actions.saveMap()
-      } else if (e.key === ' ') {
-        onToggleAnim()
+      } else if (e.key === ' ' || e.key === 'm') {
+        $anim = !$anim
       } else if (e.key === 'z') {
         onUndo()
       } else if (e.key === 'y') {

client/src/ui/lib/mapView.svelte

@@ -85,7 +85,7 @@
   }
 </script>
 
-<div class="map-view" bind:this={cont}>
+<div class="map-view" tabindex="-1" bind:this={cont}>
   <canvas bind:this={canvas}></canvas>
   <slot></slot>
 </div>

client/src/ui/lib/quadsView.svelte

@@ -10,6 +10,7 @@
   import { coordToJson, resIndexToString, uvToJson } from '../../server/convert'
   import { rmap } from '../global'
   import type { Send } from '../../server/protocol'
+  import * as Editor from './editor'
 
   export let layer: QuadsLayer
 
@@ -25,6 +26,22 @@
   }
   $: [g, l] = layerIndex($rmap.map, layer)
 
+  onMount(() => {
+    Editor.on('keypress', onKeyPress)
+  })
+
+  onDestroy(() => {
+    Editor.off('keypress', onKeyPress)
+  })
+
+  function onKeyPress(e: KeyboardEvent) {
+    if (e.ctrlKey && ['q'].includes(e.key)) {
+      e.preventDefault()
+
+      if (e.key === 'q') createQuad()
+    }
+  }
+
   function quadPointsStr(points: Info.Coord[]) {
     const toStr = (p: Info.Coord) => p.x / 1024 + ',' + p.y / 1024
     const topLeft = points[0]

client/styles/style.scss

@@ -191,6 +191,14 @@ $header-h: 3rem;
   width: 100%;
   height: 100%;
 
+  // make the canvas darker when unfocused to show that other inputs have focus.
+  transition: background-color .2s, box-shadow .2s;
+
+  &:not(:focus) {
+    background-color: rgba(0, 0, 0, 0.10);
+    box-shadow: inset 0 0 20px -10px black;
+  }
+
   >canvas {
     height: 100%;
     width: 100%;