Added padding and keyboard shortcuts.

AbstractPlay · Aug 18, 2023 · 8ab1362 · 8ab1362
1 parent e235569
commit 8ab1362
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 50 deletions.
diff --git a/.github/workflows/node-prod.js.yml b/.github/workflows/node-prod.js.yml
@@ -4,15 +4,14 @@
 name: Designer CI
 
 on:
-  push:
-    branches: [ "main" ]
-  repository_dispatch:
-    types: [dep_update_prod]
-  workflow_dispatch:
+    push:
+        branches: ["main"]
+    repository_dispatch:
+        types: [dep_update_prod]
+    workflow_dispatch:
 
 jobs:
     build-prod:
-
         runs-on: ubuntu-latest
 
         # strategy:
@@ -21,35 +20,35 @@ jobs:
         #     # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
         steps:
-        - uses: actions/checkout@v3
-          with:
-            ref: "main"
-
-        - name: Use Node.js 18.x
-          uses: actions/setup-node@v3
-          with:
-            node-version: 18.x
-            cache: 'npm'
-
-        - name: Install Serverless Framework
-          run: npm install -g serverless
-
-        - name: Serverless AWS authentication
-          run: sls config credentials --provider aws --key ${{ secrets.AWS_KEY }} --secret ${{ secrets.AWS_SECRET }}
-
-        - name: Configure AWS credentials
-          uses: Fooji/create-aws-profile-action@v1
-          with:
-            profile: AbstractPlayDev
-            region: us-east-1
-            key: ${{ secrets.AWS_KEY}}
-            secret: ${{ secrets.AWS_SECRET}}
-
-        - name: Install deps
-          run: echo "@abstractplay:registry=https://npm.pkg.github.com/" >> .npmrc
-        - run: echo "//npm.pkg.github.com/:_authToken=${{secrets.PAT_READ_PACKAGES}}" >> .npmrc
-        - run: npm i
-        - run: npm i @abstractplay/renderer
-        - run: npm list @abstractplay/renderer
-        - run: npm test --if-present
-        - run: npm run full
+            - uses: actions/checkout@v3
+              with:
+                  ref: "main"
+
+            - name: Use Node.js 18.x
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18.x
+                  cache: "npm"
+
+            - name: Install Serverless Framework
+              run: npm install -g serverless
+
+            - name: Serverless AWS authentication
+              run: sls config credentials --provider aws --key ${{ secrets.AWS_KEY }} --secret ${{ secrets.AWS_SECRET }}
+
+            - name: Configure AWS credentials
+              uses: Fooji/create-aws-profile-action@v1
+              with:
+                  profile: AbstractPlayDev
+                  region: us-east-1
+                  key: ${{ secrets.AWS_KEY}}
+                  secret: ${{ secrets.AWS_SECRET}}
+
+            - name: Install deps
+              run: echo "@abstractplay:registry=https://npm.pkg.github.com/" >> .npmrc
+            - run: echo "//npm.pkg.github.com/:_authToken=${{secrets.PAT_READ_PACKAGES}}" >> .npmrc
+            - run: npm i
+            - run: npm i @abstractplay/renderer
+            - run: npm list @abstractplay/renderer
+            - run: npm test --if-present
+            - run: npm run full
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
         "vite": "^4.4.5"
     },
     "dependencies": {
-        "@abstractplay/renderer": "^1.0.0-ci-5902287137.0",
+        "@abstractplay/renderer": "latest",
         "nanoid": "^4.0.2"
     }
 }
diff --git a/src/App.svelte b/src/App.svelte
@@ -9,7 +9,7 @@
     let activeTab: "intro" | "board" | "pieces" | "play" | "json" = "intro";
 </script>
 
-<main class="container p-0">
+<main class="container p-6">
     <div class="level">
         <div class="level-left">
             <div class="level-item">

diff --git a/src/components/Pieces.svelte b/src/components/Pieces.svelte
@@ -226,7 +226,7 @@
             </div>
         {/if}
     </div>
-    <div class="column">
+    <div class="column piece">
         {#key pcRender}
             <PiecePreview renderrep="{pcRender}" />
         {/key}
@@ -249,7 +249,7 @@
     <div class="columns is-multiline">
         {#each Object.keys($state.legend) as key}
             <div
-                class="column is-one-fifth"
+                class="column is-one-fifth piece"
                 on:click="{() => removeFromLegend(key)}"
                 on:keydown="{() => removeFromLegend(key)}"
                 role="button"
@@ -260,3 +260,10 @@
         {/each}
     </div>
 {/key}
+
+<style>
+    .piece {
+        max-width: 25%;
+        max-height: 25%;
+    }
+</style>
diff --git a/src/components/Play.svelte b/src/components/Play.svelte
@@ -79,8 +79,46 @@
     };
 
     let stackingEnabled = false;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+        if (event.repeat) return;
+        if (
+            [
+                "1",
+                "2",
+                "3",
+                "4",
+                "5",
+                "6",
+                "7",
+                "8",
+                "9",
+                "0",
+                "Delete",
+                "s",
+                "S",
+            ].includes(event.key)
+        ) {
+            if (event.key === "Delete" || event.key === "0") {
+                handlePcSelect("_eraser");
+            } else if (event.key === "s" || event.key === "S") {
+                stackingEnabled = !stackingEnabled;
+            } else {
+                const keys = Object.keys($state.legend);
+                if (keys.length > 0) {
+                    let idx = parseInt(event.key, 10);
+                    if (idx > keys.length) {
+                        return;
+                    }
+                    handlePcSelect(keys[idx - 1]);
+                }
+            }
+        }
+    };
 </script>
 
+<svelte:window on:keydown="{onKeyDown}" />
+
 <div class="content">
     <p>
         Click to select a piece. Click the selected piece to deselect it. Click
@@ -89,6 +127,11 @@
         replaced (unless stacking is turned on). The trashcan icon will delete
         any piece you click on.
     </p>
+    <p>
+        On desktop, press the keys 1–9 to select one of the first nine pieces in
+        the legend. Pressing 0 or the Delete key will select the eraser. Use the
+        S key to toggle stacking.
+    </p>
 </div>
 
 <div class="level">
@@ -120,10 +163,10 @@
 <div class="columns">
     <div class="column is-one-third">
         <div class="box">
-            <div class="columns is-multiline">
+            <div class="columns is-multiline is-mobile">
                 {#each Object.keys($state.legend) as pc}
                     <div
-                        class="column piece{selectedPiece === pc
+                        class="column is-narrow piece{selectedPiece === pc
                             ? ' selected'
                             : ''}"
                         on:click="{() => handlePcSelect(pc)}"
@@ -135,7 +178,7 @@
                     </div>
                 {/each}
                 <div
-                    class="column piece{selectedPiece === '_eraser'
+                    class="column is-narrow piece{selectedPiece === '_eraser'
                         ? ' selected'
                         : ''}"
                     on:click="{() => handlePcSelect('_eraser')}"
@@ -160,7 +203,7 @@
         border: 2px dotted black;
     }
     .piece {
-        min-width: 25%;
+        /* min-width: 25%; */
         max-width: 25%;
     }
 </style>