feat: New maps and add deploy support to Github pages

Author: Stan370

.github/workflows/deploy.yml

@@ -0,0 +1,43 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ['main']
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: 'dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

src/game.ts

@@ -45,7 +45,7 @@ export class HuarongGame {
   }
 
   async promptForUserId(): Promise<string | null> {
-    const id = prompt("Enter your user ID to save your score:");
+    const id = prompt("Congratulations, you won! Enter your user ID to save your score:");
     if (id) {
       this.userId = id;
       const existingBestScore = localStorage.getItem(`bestScore_${id}`);

src/gameLayout.tsx

@@ -1,7 +1,7 @@
 // <!-- 前六个关卡（横刀立马、指挥若定、将撞曹营、齐头并进、兵分三路、雨声淅沥） -->
 
 interface Block {
-  type: 'VERTICAL' | 'CAO_CAO' | 'HORIZONTAL' | 'SINGLE';
+  type: "VERTICAL" | "CAO_CAO" | "HORIZONTAL" | "SINGLE";
   x: number;
   y: number;
 }
@@ -24,8 +24,8 @@ const LEVELS: Level[] = [
       { type: "SINGLE", x: 1, y: 3 },
       { type: "SINGLE", x: 2, y: 3 },
       { type: "SINGLE", x: 0, y: 4 },
-      { type: "SINGLE", x: 3, y: 4 }
-    ]
+      { type: "SINGLE", x: 3, y: 4 },
+    ],
   },
   {
     name: "指挥若定",
@@ -39,40 +39,39 @@ const LEVELS: Level[] = [
       { type: "SINGLE", x: 0, y: 2 },
       { type: "SINGLE", x: 1, y: 3 },
       { type: "SINGLE", x: 2, y: 3 },
-      { type: "SINGLE", x: 3, y: 2 }
-    ]
+      { type: "SINGLE", x: 3, y: 2 },
+    ],
   },
   {
-    "name": "四面楚歌",
+    "name": "水泄不通",
     "layout": [
-      { "type": "CAO_CAO", "x": 1, "y": 0 },
+        { "type": "VERTICAL", "x": 0, "y": 0 },
+        { "type": "CAO_CAO", "x": 1, "y": 0 },
+        { "type": "SINGLE", "x": 3, "y": 0 },
+        { "type": "SINGLE", "x": 3, "y": 1 },
+        { "type": "HORIZONTAL", "x": 0, "y": 2 },
+        { "type": "HORIZONTAL", "x": 0, "y": 3 },
+        { "type": "HORIZONTAL", "x": 2, "y": 3 },
+        { "type": "HORIZONTAL", "x": 2, "y": 2 },
+        { "type": "SINGLE", "x": 0, "y": 4 },
+        { "type": "SINGLE", "x": 3, "y": 4 },
+    ]
+},
+{
+  "name": "四面楚歌",
+  "layout": [
       { "type": "VERTICAL", "x": 0, "y": 0 },
+      { "type": "CAO_CAO", "x": 1, "y": 1 },
       { "type": "VERTICAL", "x": 3, "y": 0 },
-      { "type": "HORIZONTAL", "x": 1, "y": 2 },
+      { "type": "VERTICAL", "x": 0, "y": 3 },
+      { "type": "VERTICAL", "x": 3, "y": 2 },
+      { "type": "HORIZONTAL", "x": 1, "y": 3 },
       { "type": "SINGLE", "x": 0, "y": 2 },
-      { "type": "SINGLE", "x": 3, "y": 2 },
-      { "type": "SINGLE", "x": 1, "y": 3 },
-      { "type": "SINGLE", "x": 2, "y": 3 },
-      { "type": "SINGLE", "x": 0, "y": 4 },
-      { "type": "SINGLE", "x": 3, "y": 4 }
-    ]
-  },
-  {
-    name: "齐头并进",
-    layout: [
-      { type: "VERTICAL", x: 0, y: 0 },
-      { type: "CAO_CAO", x: 1, y: 0 },
-      { type: "VERTICAL", x: 3, y: 0 },
-      { type: "HORIZONTAL", x: 0, y: 2 },
-      { type: "HORIZONTAL", x: 2, y: 2 },
-      { type: "SINGLE", x: 0, y: 3 },
-      { type: "SINGLE", x: 1, y: 3 },
-      { type: "SINGLE", x: 2, y: 3 },
-      { type: "SINGLE", x: 3, y: 3 },
-      { type: "SINGLE", x: 0, y: 4 },
-      { type: "SINGLE", x: 3, y: 4 }
-    ]
-  },
+      { "type": "SINGLE", "x": 3, "y": 4 },
+      { "type": "SINGLE", "x": 1, "y": 0 },
+      { "type": "SINGLE", "x": 2, "y": 0 }
+  ]
+},
   {
     name: "兵分三路",
     layout: [
@@ -86,8 +85,8 @@ const LEVELS: Level[] = [
       { type: "SINGLE", x: 2, y: 3 },
       { type: "SINGLE", x: 3, y: 3 },
       { type: "SINGLE", x: 0, y: 4 },
-      { type: "SINGLE", x: 3, y: 4 }
-    ]
+      { type: "SINGLE", x: 3, y: 4 },
+    ],
   },
   {
     name: "雨声淅沥",
@@ -102,9 +101,9 @@ const LEVELS: Level[] = [
       { type: "SINGLE", x: 2, y: 3 },
       { type: "SINGLE", x: 3, y: 3 },
       { type: "SINGLE", x: 0, y: 4 },
-      { type: "SINGLE", x: 3, y: 4 }
-    ]
-  }
+      { type: "SINGLE", x: 3, y: 4 },
+    ],
+  },
 ];
 
-export default LEVELS;
+export default LEVELS;

src/styles.css

@@ -113,8 +113,6 @@ button:hover {
 }
 
 .direction-arrow svg {
-  width: 20px;
-  height: 20px;
   fill: var(--text-color);
 }
 
@@ -136,100 +134,3 @@ button:hover {
 .level-selector select:hover {
   border-color: var(--cao-color);
 }
-
-/* :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-} */

vite.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  base: '/Klotski/', // Replace with your repository name
+})