feat: add mapbox+deck.gl basic map

.github/workflows/codeql.yml

@@ -39,7 +39,11 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
-
+      - uses: LuisEnMarroquin/[email protected]
+        with:
+          SSHKEY: ${{ secrets.CC_GA }} # ----- BEGIN RSA PRIVATE KEY----- ...
+      - run: ssh -T [email protected] || true
+      - run: git submodule update --init --recursive
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v2

.github/workflows/deploy_doc.yml

@@ -20,6 +20,11 @@ jobs:
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v3
+      - uses: LuisEnMarroquin/[email protected]
+        with:
+          SSHKEY: ${{ secrets.CC_GA }} # ----- BEGIN RSA PRIVATE KEY----- ...
+      - run: ssh -T [email protected] || true
+      - run: git submodule update --init --recursive
       - name: Install, build, and upload your site
         uses: withastro/action@v0
         with:

.github/workflows/main.yml

@@ -12,7 +12,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-
+      - uses: LuisEnMarroquin/[email protected]
+        with:
+          SSHKEY: ${{ secrets.CC_GA }} # ----- BEGIN RSA PRIVATE KEY----- ...
+      - run: ssh -T [email protected] || true
+      - run: git submodule update --init --recursive
       - name: Install pnpm
         uses: pnpm/[email protected]
 
@@ -32,7 +36,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-
+      - uses: LuisEnMarroquin/[email protected]
+        with:
+          SSHKEY: ${{ secrets.CC_GA }} # ----- BEGIN RSA PRIVATE KEY----- ...
+      - run: ssh -T [email protected] || true
+      - run: git submodule update --init --recursive
       - name: Install pnpm
         uses: pnpm/[email protected]
 

.github/workflows/playwright.yml

@@ -10,6 +10,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: LuisEnMarroquin/[email protected]
+        with:
+          SSHKEY: ${{ secrets.CC_GA }} # ----- BEGIN RSA PRIVATE KEY----- ...
+      - run: ssh -T [email protected] || true
+      - run: git submodule update --init --recursive
       - name: Install pnpm
         uses: pnpm/[email protected]
 
@@ -41,6 +46,14 @@ jobs:
   runs-on: ubuntu-latest
   steps:
     - uses: actions/checkout@v3
+    - uses: LuisEnMarroquin/[email protected]
+        with:
+          SSHKEY: ${{ secrets.CC_GA }} # ----- BEGIN RSA PRIVATE KEY----- ...
+      - run: ssh -T [email protected] || true
+      - run: git submodule update --init --recursive
+      with:
+        submodules: recursive
+        ssh-key: "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDkAa2Y049BCOYn0m2IINqBTjO18HtiOia4QRDkmClCy4/fQLcPsmQ7C7cE3TDGFNbIcm17jl3wQXCd8y1SBi6iWhcHXskI+HCtzN/NASBstljcuhx6gll3xjFhWj2XN2zwmpLzOVsCj7K34N8FRmEaPcrB3D0pKg89qO3SCPETFAwuzLFWsPzXWtDL6O90qbO1AGg2vQrucRvvIiQ2IOg8eMidXszgVi8kanfuh4zVRn+NINpNZMYFabkj6HfbGX9QyRyOS2cznKCG8MXIbIJiK9jTR0Yd0/WaUHRk69fBB0p5zhhVsrMvBAM/RjLKg1ePgJctYPTFPJMc59/MwCB3 cc_ga"
     - name: Install pnpm
       uses: pnpm/[email protected]
 

.gitmodules

@@ -1,3 +1,7 @@
 [submodule "packages/skboa"]
 	path = packages/skvm/skboa
 	url = [email protected]:chain-web/boa.git
+
+[submodule "configs"]
+	path = packages/private_configs
+	url = [email protected]:chain-web/private_configs.git

package.json

@@ -61,6 +61,58 @@
         "dependencies": {
           "it-drain": "*"
         }
+      },
+      "@deck.gl/mapbox": {
+        "dependencies": {
+          "@math.gl/web-mercator": "*"
+        }
+      },
+      "@loaders.gl/3d-tiles": {
+        "dependencies": {
+          "@math.gl/culling": "*",
+          "@babel/runtime": "*"
+        }
+      },
+      "@deck.gl/layers": {
+        "dependencies": {
+          "@luma.gl/core": "*"
+        }
+      },
+      "@deck.gl+geo/layers": {
+        "dependencies": {
+          "@deck.gl/mesh-layers": "*"
+        }
+      },
+      "@loaders.gl/gltf": {
+        "dependencies": {
+          "@babel/runtime": "*"
+        }
+      },
+      "@loaders.gl/schema": {
+        "dependencies": {
+          "@babel/runtime": "*"
+        }
+      },
+      "@loaders.gl/tiles": {
+        "dependencies": {
+          "@babel/runtime": "*"
+        }
+      },
+      "@loaders.gl/mvt": {
+        "dependencies": {
+          "@babel/runtime": "*"
+        }
+      },
+      "@deck.gl/mesh-layers": {
+        "dependencies": {
+          "@luma.gl/webgl": "*",
+          "@loaders.gl/schema": "*"
+        }
+      },
+      "@math.gl/polygon": {
+        "dependencies": {
+          "@babel/runtime": "*"
+        }
       }
     }
   },

packages/common/config.d.ts

@@ -0,0 +1,4 @@
+type PrivateConfigs = {
+  mapboxToken: string;
+  mapboxStyle: string;
+};

packages/common/package.json

@@ -12,6 +12,10 @@
   "engines": {
     "node": ">=16.0.0"
   },
+  "files": [
+    "dist",
+    "src"
+  ],
   "type": "module",
   "keywords": [],
   "author": "",

packages/common/src/index.mts

@@ -12,3 +12,8 @@ export type {
   SerdeJsValueTypes,
   SerdeJsObjectType,
 } from './serde/serdeJs/interface.mjs';
+
+export type PrivateConfigs = {
+  mapboxToken: string;
+  mapboxStyle: string;
+};

packages/docs/src/content/docs/zh-cn/dev_log/202307.md

@@ -0,0 +1,13 @@
+---
+title: 'Dev Log 2023-07'
+description: ''
+---
+
+### 7-10~7-14
+
+- [x] 创建了 land app 工程，用来做地图游戏开发
+- [x] 用私有的 repo: private_configs 来存储私有的配置文件，比如 mapbox token
+- [x] 加入 mapbox + deck.gl + h3-js 的格子地图
+  - [x] 调研、学习 deck.gl [怎么结合 mapbox 使用](https://deck.gl/docs/get-started/using-with-map)
+  - [x] 最开始想用 deck.gl 的 HexagonLayer 来实现大量格子渲染，但是发现这个 layer 不太灵活，最后选择了用 polygon Layer + h3-js 来实现(从 HexagonLayer 精简而来)，最终只用来测试，还没实际用起来
+  - [x] 用 mapboxOverlay + deck.gl 来实现了地图上添加 deck.gl 的图层，最终选用了这个方案

packages/land_app/package.json

@@ -14,29 +14,51 @@
     "node": ">=16.0.0"
   },
   "dependencies": {
+    "@deck.gl/core": "^8.9.21",
+    "@deck.gl/extensions": "^8.9.21",
+    "@deck.gl/geo-layers": "^8.9.21",
+    "@deck.gl/layers": "^8.9.21",
+    "@deck.gl/mapbox": "^8.9.21",
+    "@deck.gl/mesh-layers": "^8.9.21",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@loaders.gl/core": "^3.4.7",
+    "@loaders.gl/gltf": "^3.4.7",
+    "@loaders.gl/images": "^3.4.7",
+    "@luma.gl/constants": "^8.5.20",
+    "@luma.gl/core": "^8.5.20",
+    "@luma.gl/engine": "^8.5.20",
+    "@luma.gl/gltools": "^8.5.20",
+    "@luma.gl/shadertools": "^8.5.20",
+    "@luma.gl/webgl": "^8.5.20",
+    "@math.gl/core": "^3.6.3",
+    "@math.gl/web-mercator": "^3.6.3",
     "@trustack/common": "workspace:^1.0.0",
     "@trustack/node-modules-polyfill": "^0.2.5",
     "@trustack/rollup-plugin-node-polyfills": "^0.2.2",
     "@xstate/react": "^3.2.2",
     "antd": "^5.6.4",
     "buffer": "^6.0.3",
     "esbuild": "^0.17.19",
+    "gl-matrix": "^3.4.3",
+    "h3-js": "^4.1.0",
     "i18next": "^22.5.1",
     "i18next-browser-languagedetector": "^7.1.0",
+    "mapbox-gl": "^2.15.0",
     "mime-types": "^2.1.35",
     "multiformats": "^11.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.3.1",
     "react-router": "^6.14.1",
     "react-router-dom": "^6.14.1",
+    "search-insights": "^2.7.0",
     "skchain": "workspace:^1.0.0",
     "xstate": "^4.38.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.35.1",
     "@rollup/plugin-inject": "^5.0.3",
+    "@types/mapbox-gl": "^2.7.11",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react-swc": "^3.3.2",

packages/land_app/src/App.css

@@ -1,8 +1,10 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+
+.mapboxgl-ctrl-bottom-right {
+  display: none;
 }
 
 .logo {

packages/land_app/src/chain/skchain.ts

@@ -0,0 +1,10 @@
+import { SKChain } from 'skchain';
+
+const createChain = () => {
+  const chain = new SKChain();
+  return chain;
+};
+
+export const chain = createChain();
+
+export const chainState = chain.chainState;

packages/land_app/src/main.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
+import { ConfigProvider, theme } from 'antd';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import 'antd/dist/reset.css';
 import './polyfill';
 import App from './App';
 import './index.css';
@@ -14,7 +17,13 @@ import './index.css';
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <ConfigProvider
+        theme={{
+          algorithm: theme.darkAlgorithm,
+        }}
+      >
+        <App />
+      </ConfigProvider>
     </BrowserRouter>
   </React.StrictMode>,
 );

packages/land_app/src/pages/mainWindow/components/Tabbar/index.scss

@@ -0,0 +1,16 @@
+.tabbar-box {
+  .ant-tabs-nav {
+    margin-top: 0px;
+    padding: 10px 36px;
+  }
+  .tabbar-item-box {
+    height: calc(100vh - 80px);
+    position: relative;
+    overflow: hidden;
+  }
+}
+
+#map-container {
+  width: 100%;
+  height: 100%;
+}

packages/land_app/src/pages/mainWindow/components/Tabbar/index.tsx

@@ -0,0 +1,88 @@
+import { Button, Modal, Tabs } from 'antd';
+import { useActor } from '@xstate/react';
+import { useState } from 'react';
+// import GridDrawer from '../GridDrawer';
+import './index.scss';
+// import { Contract as CtrClass } from '../../contract/index';
+// import CtrCode from '../../contract/index.contract';
+// import { DeployContract } from '../../../test/components/contract/DeployContract';
+// import { TestContract } from '../../../test/components/contract/TestContract';
+// import { contractAddressKey } from '../../contract/mapContract';
+import { chainState } from '../../../../chain/skchain';
+
+const TabPane = Tabs.TabPane; // TODO use item config
+// const DeployContractComp = DeployContract(CtrClass, CtrCode);
+// const TestContractComp = TestContract(CtrClass, CtrCode);
+export default function Tabbar() {
+  const [showNodeModal, setshowNodeModal] = useState(true);
+  return (
+    <div className="tabbar-box">
+      <Tabs tabPosition={'bottom'} defaultActiveKey="home">
+        <TabPane forceRender tab="home" key="home" className="tabbar-item-box">
+          {/* <Button
+            onClick={async () => {
+              const data = mapDb.trans.toArray();
+              console.log(data);
+            }}
+          >
+            getMapDb
+          </Button> */}
+          {/* <Button
+            onClick={async () => {
+              const data = await mapDb.trans
+                .where('ts')
+                .below(Date.now())
+                .delete();
+              console.log('delete', data);
+            }}
+          >
+            clear mapDb.trans
+          </Button> */}
+          {/* <Button
+            onClick={() => {
+              setshowNodeModal(true);
+            }}
+            style={{ float: 'right' }}
+          >
+            node
+          </Button> */}
+          <div
+            style={{
+              visibility: chainState.started ? 'visible' : 'hidden',
+            }}
+            id="map-container"
+          />
+          {/* <GridDrawer /> */}
+          {/* <Modal
+            visible={showNodeModal}
+            onCancel={() => {
+              setshowNodeModal(false);
+            }}
+            style={{ top: 0 }}
+            maskClosable={false}
+            footer={null}
+          >
+            <DeployContractComp
+              onSuccess={(trans) => {
+                localStorage.setItem(contractAddressKey, trans.recipient.did);
+              }}
+            />
+            <TestContractComp />
+          </Modal> */}
+        </TabPane>
+        {/* <TabPane
+          forceRender
+          style={{ overflow: 'auto' }}
+          className="tabbar-item-box"
+          tab="node"
+          key="node"
+        >
+          
+        </TabPane> */}
+        <TabPane forceRender className="tabbar-item-box" tab="mine" key="mine">
+          mine
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+}