[ Refactor ] Format and Lint / Fix Typings

.eslintrc.cjs

@@ -1,18 +1,35 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:tailwindcss/recommended',
+        'plugin:import/typescript',
+        'prettier',
+        'plugin:import/warnings',
     ],
-  },
-}
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['react-refresh', 'tailwindcss', '@typescript-eslint'],
+    rules: {
+        'react/react-in-jsx-scope': 'off',
+        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        'react/self-closing-comp': [
+            'error',
+            {
+                component: true,
+                html: true,
+            },
+        ],
+        '@typescript-eslint/consistent-type-imports': [
+            'warn',
+            {
+                prefer: 'type-imports',
+                fixStyle: 'inline-type-imports',
+            },
+        ],
+    },
+};

.github/workflows/build-deploy.yml

@@ -1,61 +1,60 @@
 name: Docker Image CI
 
 on:
-  push:
-    tags:
-      - "v*.*.*"
-
+    push:
+        tags:
+            - 'v*.*.*'
 
 env:
-  IMAGE_NAME: ${{ github.repository }}
-  REGISTRY: ghcr.io
+    IMAGE_NAME: ${{ github.repository }}
+    REGISTRY: ghcr.io
 
 jobs:
-  buildImage:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      packages: write
-      id-token: write
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up Depot CLI
-        uses: depot/setup-action@v1
-
-      - name: Log in to the Container registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          # list of Docker images to use as base name for tags
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          # generate Docker tags based on the following events/attributes
-          tags: |
-            type=schedule
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=sha
-
-      - uses: depot/build-push-action@v1
-        with:
-          context: .
-          push: true
-          platforms: linux/amd64,linux/arm64/v8
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-
-      - name: Create GitHub Release
-        env:
-            GH_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
-        run: |
-          TAG=${{ github.ref }}
-          VERSION=${TAG#refs/tags/}
-          gh release create $VERSION -t $VERSION -n "Release notes for $VERSION"
+    buildImage:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            packages: write
+            id-token: write
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+
+            - name: Set up Depot CLI
+              uses: depot/setup-action@v1
+
+            - name: Log in to the Container registry
+              uses: docker/login-action@v3
+              with:
+                  registry: ghcr.io
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Extract metadata (tags, labels) for Docker
+              id: meta
+              uses: docker/metadata-action@v5
+              with:
+                  # list of Docker images to use as base name for tags
+                  images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+                  # generate Docker tags based on the following events/attributes
+                  tags: |
+                      type=schedule
+                      type=ref,event=pr
+                      type=semver,pattern={{version}}
+                      type=sha
+
+            - uses: depot/build-push-action@v1
+              with:
+                  context: .
+                  push: true
+                  platforms: linux/amd64,linux/arm64/v8
+                  tags: ${{ steps.meta.outputs.tags }}
+                  labels: ${{ steps.meta.outputs.labels }}
+
+            - name: Create GitHub Release
+              env:
+                  GH_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
+              run: |
+                  TAG=${{ github.ref }}
+                  VERSION=${TAG#refs/tags/}
+                  gh release create $VERSION -t $VERSION -n "Release notes for $VERSION"

.github/workflows/ci-front.yml

@@ -0,0 +1,43 @@
+name: ci-front
+
+on:
+    push:
+        branches: [main]
+    pull_request:
+        branches: [main]
+
+jobs:
+    lint-n-format:
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                node-version: [20.x]
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+            - uses: pnpm/action-setup@v4
+              name: Install pnpm
+              with:
+                  version: 8
+                  run_install: false
+            - name: Get pnpm store directory
+              shell: bash
+              run: |
+                  echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+            - uses: actions/cache@v3
+              name: Setup pnpm cache
+              with:
+                  path: ${{ env.STORE_PATH }}
+                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                      ${{ runner.os }}-pnpm-store-
+            - name: Install dependencies
+              run: pnpm install
+            - name: lint
+              run: pnpm lint
+            - name: format
+              run: pnpm format

.prettierrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+    trailingComma: 'all',
+    tabWidth: 4,
+    semi: true,
+    singleQuote: true,
+    jsxSingleQuote: true,
+    printWidth: 100,
+};

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "bradlc.vscode-tailwindcss",
+        "oderwat.indent-rainbow",
+        "YoavBls.pretty-ts-errors"
+    ]
+}

Dockerfile

@@ -6,12 +6,12 @@ WORKDIR /app
 COPY package.json yarn.lock ./
 RUN mkdir /app/node_modules
 RUN --mount=type=cache,id=node_modules,target=/app/node_modules yarn install --frozen-lockfile
- 
+
 
 FROM deps AS build
 COPY . .
 RUN --mount=type=cache,id=node_modules,target=/app/node_modules yarn build
- 
+
 FROM base
 WORKDIR /app
 COPY --from=deps /app/node_modules /app/node_modules

depot.json

@@ -1 +1 @@
-{"id":"r77bmfc7vx"}
+{ "id": "r77bmfc7vx" }

doc/createpng.ts

@@ -6,11 +6,11 @@ const png = new PNG({ width: size, height: size });
 
 for (let y = 0; y < png.height; y++) {
     for (let x = 0; x < png.width; x++) {
-        let idx = (png.width * y + x) << 2;
+        const idx = (png.width * y + x) << 2;
 
         // Create gradient from red to blue
-        let red = Math.round(255 * (1 - y / png.height));
-        let blue = Math.round(255 * y / png.height);
+        const red = Math.round(255 * (1 - y / png.height));
+        const blue = Math.round(255 * y / png.height);
 
         png.data[idx] = red;
         png.data[idx+1] = 0;

doc/encodePngToFelt.ts

@@ -9,7 +9,7 @@ type PixelRows = PixelRow[]
 
 async function generatePixelRows(imageFile: string, origin: { x: number, y: number }): Promise<PixelRows> {
 
-    let pixelRows = []
+    const pixelRows = []
     const png = PNG.sync.read(fs.readFileSync(imageFile));
 
     const pixels = [];
@@ -22,8 +22,8 @@ async function generatePixelRows(imageFile: string, origin: { x: number, y: numb
     const PIXELS_PER_FELT = 7
     let x_offset = 0
     for (let last_pixel = 0; last_pixel < pixels.length; last_pixel++) {
-        let x = last_pixel % (png.width);
-        let y = Math.floor(last_pixel / png.width);
+        const x = last_pixel % (png.width);
+        const y = Math.floor(last_pixel / png.width);
 
         buffer.push(pixels[last_pixel])
 
@@ -35,15 +35,15 @@ async function generatePixelRows(imageFile: string, origin: { x: number, y: numb
         ) {
 
             // Chop in rows of 7
-            let feltPixels: number[][] = [];
+            const feltPixels: number[][] = [];
             for (let i = 0; i < buffer.length; i += PIXELS_PER_FELT) {
-                let chunk = buffer.slice(i, i + PIXELS_PER_FELT).flat();
+                const chunk = buffer.slice(i, i + PIXELS_PER_FELT).flat();
                 feltPixels.push(chunk);
             }
 
-            let image_data: string[] = feltPixels.map(pixel => {
-                let buf = Buffer.from(pixel);
-                let hexString = buf.toString('hex');
+            const image_data: string[] = feltPixels.map(pixel => {
+                const buf = Buffer.from(pixel);
+                const hexString = buf.toString('hex');
                 return "0x0000000".concat(hexString).padEnd(65, '0');
             });
 
@@ -68,7 +68,7 @@ async function generatePixelRows(imageFile: string, origin: { x: number, y: numb
 
 function generateSozo(pixelRows: PixelRows): string {
     let result = ""
-    for (let {position, image_data} of pixelRows) {
+    for (const {position, image_data} of pixelRows) {
 
         result += `sozo \
 --profile dev-pop \
@@ -97,7 +97,7 @@ async function execute(pixelRows: PixelRows) {
     const myTestContract = new Contract(abi, contractAddress, provider);
     myTestContract.connect(account0);
 
-    for (let {position, image_data} of pixelRows) {
+    for (const {position, image_data} of pixelRows) {
         const defaultParams = {
             for_player: 0,
             for_system: 0,

docker-compose.yml

@@ -1,31 +1,31 @@
 services:
-  pixelaw-core:
-    image: ghcr.io/pixelaw/core:0.3.20
-    platform: linux/x86_64
-    container_name: pixelaw-core
-    environment:
-      - DISABLE_FEE=true
-      - DISABLE_VALIDATE=true
-      - RUST_LOG=info,hyper=off
-#      - WORLD_ADDRESS=0xfc685b398bc4692ab3a4acd380859e71f97d2c319f188854d3a01948ba276a
-      - WORLD_ADDRESS=0xfc685b398bc4692ab3a4acd380859e71f97d2c319f188854d3a01948ba276a
-      - INVOKE_MAX_STEPS=4000000
-    ports:
-      - "127.0.0.1:5050:5050"
-      - "127.0.0.1:3000:3000"
-      - "127.0.0.1:8080:8080"
-      - "127.0.0.1:9090:9090"
-    restart: unless-stopped
-    networks:
-      - pixelaw
-    volumes:
-      - storage:/keiko/storage
-      - log:/keiko/log
+    pixelaw-core:
+        image: ghcr.io/pixelaw/core:0.3.20
+        platform: linux/x86_64
+        container_name: pixelaw-core
+        environment:
+            - DISABLE_FEE=true
+            - DISABLE_VALIDATE=true
+            - RUST_LOG=info,hyper=off
+            #      - WORLD_ADDRESS=0xfc685b398bc4692ab3a4acd380859e71f97d2c319f188854d3a01948ba276a
+            - WORLD_ADDRESS=0xfc685b398bc4692ab3a4acd380859e71f97d2c319f188854d3a01948ba276a
+            - INVOKE_MAX_STEPS=4000000
+        ports:
+            - '127.0.0.1:5050:5050'
+            - '127.0.0.1:3000:3000'
+            - '127.0.0.1:8080:8080'
+            - '127.0.0.1:9090:9090'
+        restart: unless-stopped
+        networks:
+            - pixelaw
+        volumes:
+            - storage:/keiko/storage
+            - log:/keiko/log
 #      - ./.core/storage:/keiko/storage
 #      - ./.core/log:/keiko/log
 networks:
-  pixelaw:
-    driver: bridge
+    pixelaw:
+        driver: bridge
 volumes:
-  storage:
-  log:
+    storage:
+    log: