.

do a custom css optimization instead

.github/workflows/deploy.yml

@@ -1,29 +0,0 @@
-name: deploy
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  deploy-demo:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14
-
-      - uses: bahmutov/npm-install@v1
-
-      - run: yarn build:demo
-        env:
-          BASE_PATHNAME: "snk"
-
-      - uses: crazy-max/ghaction-github-pages@068e494
-        with:
-          target_branch: gh-pages
-          build_dir: packages/demo/dist
-        env:
-          GITHUB_TOKEN: ${{ secrets.MY_GITHUB_TOKEN_GH_PAGES }}

.github/workflows/main.yml

@@ -1,27 +1,112 @@
 name: main
 
-on: [push, pull_request]
+on: [push]
 
 jobs:
   test:
     runs-on: ubuntu-latest
 
     steps:
-      # - run: sudo apt-get install gifsicle graphicsmagick
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          cache: yarn
+          node-version: 16
+      - run: yarn install --frozen-lockfile
 
-      - uses: bahmutov/npm-install@v1
+      - run: yarn type
+      - run: yarn lint
+      - run: yarn test --ci
 
-      # - run: yarn type
-      # - run: yarn lint
-      # - run: yarn test --ci
-      # - run: yarn build:lib
+  test-action:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
 
-      - uses: actions/github-contribution-grid-snake@v1
+      - name: update action.yml to use image from local Dockerfile
+        run: |
+          sed -i "s/image: .*/image: Dockerfile/" action.yml
+
+      - name: generate-snake-game-from-github-contribution-grid
+        id: generate-snake
+        uses: ./
         with:
           github_user_name: platane
+          outputs: |
+            dist/github-contribution-grid-snake.svg
+            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
+            dist/github-contribution-grid-snake.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
 
-      - run: ls
+      - name: ensure the generated file exists
+        run: |
+          ls dist
+          test -f dist/github-contribution-grid-snake.svg
+          test -f dist/github-contribution-grid-snake-dark.svg
+          test -f dist/github-contribution-grid-snake.gif
+
+      - uses: crazy-max/ghaction-github-pages@v3.1.0
+        with:
+          target_branch: output
+          build_dir: dist
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  test-action-svg-only:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: 16
+      - run: yarn install --frozen-lockfile
+
+      - name: build svg-only action
+        run: |
+          yarn build:action
+          rm -r svg-only/dist
+          mv packages/action/dist svg-only/dist
+
+      - name: generate-snake-game-from-github-contribution-grid
+        id: generate-snake
+        uses: ./svg-only
+        with:
+          github_user_name: platane
+          outputs: |
+            dist/github-contribution-grid-snake.svg
+            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
+
+      - name: ensure the generated file exists
+        run: |
+          ls dist
+          test -f dist/github-contribution-grid-snake.svg
+          test -f dist/github-contribution-grid-snake-dark.svg
+
+      - uses: crazy-max/ghaction-github-pages@v3.1.0
+        with:
+          target_branch: output-svg-only
+          build_dir: dist
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  deploy-ghpages:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          cache: yarn
+          node-version: 16
+      - run: yarn install --frozen-lockfile
+
+      - run: yarn build:demo
+        env:
+          GITHUB_USER_CONTRIBUTION_API_ENDPOINT: https://snk-one.vercel.app/api/github-user-contribution/
+
+      - uses: crazy-max/ghaction-github-pages@v2.6.0
+        if: success() && github.ref == 'refs/heads/main'
+        with:
+          target_branch: gh-pages
+          build_dir: packages/demo/dist
+        env:
+          GITHUB_TOKEN: ${{ secrets.MY_GITHUB_TOKEN_GH_PAGES }}

.github/workflows/release.yml

@@ -0,0 +1,90 @@
+name: release
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: |
+          New version for the release
+          If the version is in format <major>.<minor>.<patch> a new release is emitted.
+          Otherwise for other format ( for example <major>.<minor>.<patch>-beta.1 ), a prerelease is emitted.
+        default: "0.0.1"
+        required: true
+        type: string
+      description:
+        description: "Version description"
+        type: string
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: docker/setup-qemu-action@v1
+
+      - uses: docker/setup-buildx-action@v1
+
+      - uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: build and publish the docker image
+        uses: docker/build-push-action@v2
+        id: docker-build
+        with:
+          push: true
+          tags: |
+            platane/snk:${{ github.sha }}
+            platane/snk:${{ github.event.inputs.version }}
+
+      - name: update action.yml to point to the newly created docker image
+        run: |
+          sed -i "s/image: .*/image: docker:\/\/platane\/snk@${{ steps.docker-build.outputs.digest }}/" action.yml
+
+      - uses: actions/setup-node@v2
+        with:
+          cache: yarn
+          node-version: 16
+
+      - name: build svg-only action
+        run: |
+          yarn install --frozen-lockfile
+          yarn build:action
+          rm -r svg-only/dist
+          mv packages/action/dist svg-only/dist
+
+      - name: bump package version
+        run: yarn version --no-git-tag-version --new-version ${{ github.event.inputs.version }}
+
+      - name: push new build, tag version and push
+        id: push-tags
+        run: |
+          VERSION=${{ github.event.inputs.version }}
+
+          git config --global user.email "bot@platane.me"
+          git config --global user.name "release bot"
+          git add package.json svg-only/dist action.yml
+          git commit -m "📦 $VERSION"
+          git tag v$VERSION
+          git push origin main --tags
+
+          if [[ "$VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            git tag v$( echo $VERSION | cut -d. -f 1-1 )
+            git tag v$( echo $VERSION | cut -d. -f 1-2 )
+            git push origin --tags --force
+            echo "prerelease=false" >> $GITHUB_OUTPUT
+          else 
+            echo "prerelease=true" >> $GITHUB_OUTPUT
+          fi
+
+      - uses: ncipollo/release-action@v1.11.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag: v${{ github.event.inputs.version }}
+          body: ${{ github.event.inputs.description }}
+          prerelease: ${{ steps.push-tags.outputs.prerelease }}

.gitignore

@@ -2,4 +2,5 @@ node_modules
 npm-debug.log*
 yarn-error.log*
 dist
+!svg-only/dist
 build

.nvmrc

@@ -0,0 +1 @@
+16

Dockerfile

@@ -1,10 +1,32 @@
-FROM node:14-slim
+FROM node:16-slim as builder
 
-RUN    apt-get update \
-    && apt-get install -y --no-install-recommends gifsicle graphicsmagick \
-    && rm -rf /var/lib/apt/lists/* 
+WORKDIR /app
 
-COPY packages/action/dist/* ./github-contribution-grid-snake
+COPY package.json yarn.lock ./
 
-CMD ["node", "github-contribution-grid-snake/index.js"]
+COPY tsconfig.json ./
+
+COPY packages packages
+
+RUN export YARN_CACHE_FOLDER="$(mktemp -d)" \
+    && yarn install --frozen-lockfile \
+    && rm -r "$YARN_CACHE_FOLDER"
+
+RUN yarn build:action
+
+
+
+
+
+FROM node:16-slim
+
+WORKDIR /action-release
+
+RUN export YARN_CACHE_FOLDER="$(mktemp -d)" \
+    && yarn add canvas@2.10.2 gifsicle@5.3.0 --no-lockfile \
+    && rm -r "$YARN_CACHE_FOLDER"
+
+COPY --from=builder /app/packages/action/dist/ /action-release/
+
+CMD ["node", "/action-release/index.js"]
 

README.md

@@ -1,3 +1,77 @@
 # snk
 
-Generates a snake game from a github user contributions grid and output a screen capture as gif
+[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/platane/platane/main.yml?label=action&style=flat-square)](https://github.com/Platane/Platane/actions/workflows/main.yml)
+[![GitHub release](https://img.shields.io/github/release/platane/snk.svg?style=flat-square)](https://github.com/platane/snk/releases/latest)
+[![GitHub marketplace](https://img.shields.io/badge/marketplace-snake-blue?logo=github&style=flat-square)](https://github.com/marketplace/actions/generate-snake-game-from-github-contribution-grid)
+![type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)
+![code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)
+
+Generates a snake game from a github user contributions graph
+
+![](https://github.com/Platane/snk/raw/output/github-contribution-grid-snake.svg)
+
+Pull a github user's contribution graph.
+Make it a snake Game, generate a snake path where the cells get eaten in an orderly fashion.
+
+Generate a [gif](https://github.com/Platane/snk/raw/output/github-contribution-grid-snake.gif) or [svg](https://github.com/Platane/snk/raw/output/github-contribution-grid-snake.svg) image.
+
+Available as github action. It can automatically generate a new image each day. Which makes for great [github profile readme](https://docs.github.com/en/free-pro-team@latest/github/setting-up-and-managing-your-github-profile/managing-your-profile-readme)
+
+## Usage
+
+**github action**
+
+```yaml
+- uses: Platane/snk@v2
+  with:
+    # github user name to read the contribution graph from (**required**)
+    # using action context var `github.repository_owner` or specified user
+    github_user_name: ${{ github.repository_owner }}
+
+    # list of files to generate.
+    # one file per line. Each output can be customized with options as query string.
+    #
+    #  supported options:
+    #  - palette:     A preset of color, one of [github, github-dark, github-light]
+    #  - color_snake: Color of the snake
+    #  - color_dots:  Coma separated list of dots color.
+    #                 The first one is 0 contribution, then it goes from the low contribution to the highest.
+    #                 Exactly 5 colors are expected.
+    outputs: |
+      dist/github-snake.svg
+      dist/github-snake-dark.svg?palette=github-dark
+      dist/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
+```
+
+[example with cron job](https://github.com/Platane/Platane/blob/master/.github/workflows/main.yml#L24-L29)
+
+If you are only interested in generating a svg, consider using this faster action: `uses: Platane/snk/svg-only@v2`
+
+**dark mode**
+
+For **dark mode** support on github, use this [special syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to=) in your readme.
+
+```md
+![GitHub Snake Light](github-snake.svg#gh-light-mode-only)
+![GitHub Snake dark](github-snake-dark.svg#gh-dark-mode-only)
+```
+
+**interactive demo**
+
+<a href="https://platane.github.io/snk">
+  <img height="300px" src="https://user-images.githubusercontent.com/1659820/121798244-7c86d700-cc25-11eb-8c1c-b8e65556ac0d.gif" ></img>
+</a>
+
+[platane.github.io/snk](https://platane.github.io/snk)
+
+**local**
+
+```
+npm install
+
+npm run dev:demo
+```
+
+## Implementation
+
+[solver algorithm](./packages/solver/README.md)

action.yml

@@ -1,23 +1,31 @@
 name: "generate-snake-game-from-github-contribution-grid"
-description: "Generates a snake game from a github user contributions grid and output a screen capture as gif"
+description: "Generates a snake game from a github user contributions grid. Output the animation as gif or svg"
 author: "platane"
 
-outputs:
-  gif_out_path:
-    description: "path of the generated gif"
-
 runs:
-  using: "docker"
-  image: "Dockerfile"
-  args:
-    - ${{ inputs.github_user_name }}
-    - ${{ inputs.gif_out_path }}
+  using: docker
+  image: docker://platane/snk@sha256:dcb351bdad223f2a2161fa5d6e3c9102e6ebe9fbde99a10fa3bf443d69f61a0f
 
 inputs:
   github_user_name:
     description: "github user name"
     required: true
-  gif_out_path:
-    description: "path of the generated gif"
+  outputs:
     required: false
-    default: "./github-contribution-grid-snake.gif"
+    default: null
+    description: |
+      list of files to generate.
+      one file per line. Each output can be customized with options as query string.
+
+       supported query string options:
+
+      - palette:      A preset of color, one of [github, github-dark, github-light]
+      - color_snake:  Color of the snake
+      - color_dots:   Coma separated list of dots color. 
+                      The first one is 0 contribution, then it goes from the low contribution to the highest.
+                      Exactly 5 colors are expected.
+      example:
+        outputs: |
+          dark.svg?palette=github-dark&color_snake=blue
+          light.svg?color_snake=#7845ab
+          ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9

jest.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  preset: "ts-jest",
-  testEnvironment: "node",
-  testMatch: ["**/__tests__/**/?(*.)+(spec|test).ts"],
-};

package.json

@@ -1,23 +1,35 @@
 {
   "name": "snk",
-  "description": "Generates a snake game from a github user contributions grid and output a screen capture as gif",
-  "version": "1.0.0",
+  "description": "Generates a snake game from a github user contributions grid",
+  "version": "2.2.0",
   "private": true,
   "repository": "github:platane/snk",
   "devDependencies": {
-    "@types/jest": "26.0.4",
-    "jest": "26.1.0",
-    "prettier": "2.0.5",
-    "ts-jest": "26.1.2",
-    "typescript": "3.9.6"
+    "@sucrase/jest-plugin": "3.0.0",
+    "@types/jest": "29.2.1",
+    "@types/node": "16.11.7",
+    "jest": "29.2.2",
+    "prettier": "2.7.1",
+    "sucrase": "3.28.0",
+    "typescript": "4.8.4"
   },
   "workspaces": [
     "packages/**"
   ],
+  "jest": {
+    "testEnvironment": "node",
+    "testMatch": [
+      "**/__tests__/**/?(*.)+(spec|test).ts"
+    ],
+    "transform": {
+      "\\.(ts|tsx)$": "@sucrase/jest-plugin"
+    }
+  },
   "scripts": {
     "type": "tsc --noEmit",
-    "lint": "yarn prettier -c '**/*.{ts,js,json,md,yml,yaml}' '!packages/action/dist/**' '!packages/demo/dist/**' '!packages/demo/webpack.config.js'",
+    "lint": "yarn prettier -c '**/*.{ts,js,json,md,yml,yaml}' '!packages/*/dist/**' '!svg-only/dist/**'",
     "test": "jest --verbose --passWithNoTests --no-cache",
+    "dev:demo": "( cd packages/demo ; yarn dev )",
     "build:demo": "( cd packages/demo ; yarn build )",
     "build:action": "( cd packages/action ; yarn build )"
   }

packages/action/.gitignore

@@ -1,3 +0,0 @@
-!dist
-!dist/build
-out.gif

packages/action/README.md

@@ -0,0 +1,13 @@
+# @snk/action
+
+Contains the github action code.
+
+## Implementation
+
+### Docker
+
+Because the gif generation requires some native libs, we cannot use a node.js action.
+
+Use a docker action instead, the image is created from the [Dockerfile](../../Dockerfile).
+
+It's published to [dockerhub](https://hub.docker.com/r/platane/snk) which makes for faster build ( compare to building the image when the action runs )

packages/action/__tests__/__snapshots__/.gitignore

@@ -0,0 +1,3 @@
+*
+!.gitignore
+!*.snap

packages/action/__tests__/__snapshots__/outputsOptions.spec.ts.snap

@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should parse /out.svg       {"color_snake":"yellow"} 1`] = `
+{
+  "animationOptions": {
+    "frameDuration": 100,
+    "step": 1,
+  },
+  "drawOptions": {
+    "colorDotBorder": "#1b1f230a",
+    "colorDots": [
+      "#ebedf0",
+      "#9be9a8",
+      "#40c463",
+      "#30a14e",
+      "#216e39",
+    ],
+    "colorEmpty": "#ebedf0",
+    "colorSnake": "yellow",
+    "dark": {
+      "colorDotBorder": "#1b1f230a",
+      "colorDots": [
+        "#161b22",
+        "#01311f",
+        "#034525",
+        "#0f6d31",
+        "#00c647",
+      ],
+      "colorEmpty": "#161b22",
+      "colorSnake": "purple",
+    },
+    "sizeCell": 16,
+    "sizeDot": 12,
+    "sizeDotBorderRadius": 2,
+  },
+  "filename": "/out.svg",
+  "format": "svg",
+}
+`;
+
+exports[`should parse /out.svg?.gif.svg?color_snake=orange 1`] = `
+{
+  "animationOptions": {
+    "frameDuration": 100,
+    "step": 1,
+  },
+  "drawOptions": {
+    "colorDotBorder": "#1b1f230a",
+    "colorDots": [
+      "#ebedf0",
+      "#9be9a8",
+      "#40c463",
+      "#30a14e",
+      "#216e39",
+    ],
+    "colorEmpty": "#ebedf0",
+    "colorSnake": "orange",
+    "dark": {
+      "colorDotBorder": "#1b1f230a",
+      "colorDots": [
+        "#161b22",
+        "#01311f",
+        "#034525",
+        "#0f6d31",
+        "#00c647",
+      ],
+      "colorEmpty": "#161b22",
+      "colorSnake": "purple",
+    },
+    "sizeCell": 16,
+    "sizeDot": 12,
+    "sizeDotBorderRadius": 2,
+  },
+  "filename": "/out.svg?.gif.svg",
+  "format": "svg",
+}
+`;
+
+exports[`should parse /out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]} 1`] = `
+{
+  "animationOptions": {
+    "frameDuration": 100,
+    "step": 1,
+  },
+  "drawOptions": {
+    "colorDotBorder": "#1b1f230a",
+    "colorDots": [
+      "#000",
+      "#111",
+      "#222",
+      "#333",
+      "#444",
+    ],
+    "colorEmpty": "#000",
+    "colorSnake": "yellow",
+    "dark": undefined,
+    "sizeCell": 16,
+    "sizeDot": 12,
+    "sizeDotBorderRadius": 2,
+  },
+  "filename": "/out.svg",
+  "format": "svg",
+}
+`;
+
+exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444 1`] = `
+{
+  "animationOptions": {
+    "frameDuration": 100,
+    "step": 1,
+  },
+  "drawOptions": {
+    "colorDotBorder": "#1b1f230a",
+    "colorDots": [
+      "#000",
+      "#111",
+      "#222",
+      "#333",
+      "#444",
+    ],
+    "colorEmpty": "#000",
+    "colorSnake": "orange",
+    "dark": undefined,
+    "sizeCell": 16,
+    "sizeDot": 12,
+    "sizeDotBorderRadius": 2,
+  },
+  "filename": "/out.svg",
+  "format": "svg",
+}
+`;
+
+exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444&dark_color_dots=#a00,#a11,#a22,#a33,#a44 1`] = `
+{
+  "animationOptions": {
+    "frameDuration": 100,
+    "step": 1,
+  },
+  "drawOptions": {
+    "colorDotBorder": "#1b1f230a",
+    "colorDots": [
+      "#000",
+      "#111",
+      "#222",
+      "#333",
+      "#444",
+    ],
+    "colorEmpty": "#000",
+    "colorSnake": "orange",
+    "dark": {
+      "colorDots": [
+        "#a00",
+        "#a11",
+        "#a22",
+        "#a33",
+        "#a44",
+      ],
+      "colorEmpty": "#a00",
+    },
+    "sizeCell": 16,
+    "sizeDot": 12,
+    "sizeDotBorderRadius": 2,
+  },
+  "filename": "/out.svg",
+  "format": "svg",
+}
+`;
+
+exports[`should parse path/to/out.gif 1`] = `
+{
+  "animationOptions": {
+    "frameDuration": 100,
+    "step": 1,
+  },
+  "drawOptions": {
+    "colorDotBorder": "#1b1f230a",
+    "colorDots": [
+      "#ebedf0",
+      "#9be9a8",
+      "#40c463",
+      "#30a14e",
+      "#216e39",
+    ],
+    "colorEmpty": "#ebedf0",
+    "colorSnake": "purple",
+    "dark": {
+      "colorDotBorder": "#1b1f230a",
+      "colorDots": [
+        "#161b22",
+        "#01311f",
+        "#034525",
+        "#0f6d31",
+        "#00c647",
+      ],
+      "colorEmpty": "#161b22",
+      "colorSnake": "purple",
+    },
+    "sizeCell": 16,
+    "sizeDot": 12,
+    "sizeDotBorderRadius": 2,
+  },
+  "filename": "path/to/out.gif",
+  "format": "gif",
+}
+`;

packages/action/__tests__/dev.ts

@@ -1,5 +0,0 @@
-import { generateContributionSnake } from "../generateContributionSnake";
-
-generateContributionSnake("platane").then((buffer) => {
-  process.stdout.write(buffer);
-});

packages/action/__tests__/generateContributionSnake.spec.ts

@@ -0,0 +1,43 @@
+import * as fs from "fs";
+import * as path from "path";
+import { generateContributionSnake } from "../generateContributionSnake";
+import { parseOutputsOption } from "../outputsOptions";
+
+jest.setTimeout(2 * 60 * 1000);
+
+const silent = (handler: () => void | Promise<void>) => async () => {
+  const originalConsoleLog = console.log;
+  console.log = () => undefined;
+  try {
+    return await handler();
+  } finally {
+    console.log = originalConsoleLog;
+  }
+};
+
+it(
+  "should generate contribution snake",
+  silent(async () => {
+    const entries = [
+      path.join(__dirname, "__snapshots__/out.svg"),
+
+      path.join(__dirname, "__snapshots__/out-dark.svg") +
+        "?palette=github-dark&color_snake=orange",
+
+      path.join(__dirname, "__snapshots__/out.gif") +
+        "?color_snake=orange&color_dots=#d4e0f0,#8dbdff,#64a1f4,#4b91f1,#3c7dd9",
+    ];
+
+    const outputs = parseOutputsOption(entries);
+
+    const results = await generateContributionSnake("platane", outputs);
+
+    expect(results[0]).toBeDefined();
+    expect(results[1]).toBeDefined();
+    expect(results[2]).toBeDefined();
+
+    fs.writeFileSync(outputs[0]!.filename, results[0]!);
+    fs.writeFileSync(outputs[1]!.filename, results[1]!);
+    fs.writeFileSync(outputs[2]!.filename, results[2]!);
+  })
+);

packages/action/__tests__/outputsOptions.spec.ts

@@ -0,0 +1,19 @@
+import { parseEntry } from "../outputsOptions";
+
+[
+  "path/to/out.gif",
+
+  "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444",
+
+  `/out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]}`,
+
+  `/out.svg       {"color_snake":"yellow"}`,
+
+  "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444&dark_color_dots=#a00,#a11,#a22,#a33,#a44",
+
+  "/out.svg?.gif.svg?color_snake=orange",
+].forEach((entry) =>
+  it(`should parse ${entry}`, () => {
+    expect(parseEntry(entry)).toMatchSnapshot();
+  })
+);

packages/action/dist/index1.js

@@ -1,84 +0,0 @@
-const Canvas = require('./lib/canvas')
-const Image = require('./lib/image')
-const CanvasRenderingContext2D = require('./lib/context2d')
-const parseFont = require('./lib/parse-font')
-const packageJson = require('./package.json')
-const bindings = require('./lib/bindings')
-const fs = require('fs')
-const PNGStream = require('./lib/pngstream')
-const PDFStream = require('./lib/pdfstream')
-const JPEGStream = require('./lib/jpegstream')
-const DOMMatrix = require('./lib/DOMMatrix').DOMMatrix
-const DOMPoint = require('./lib/DOMMatrix').DOMPoint
-
-function createCanvas (width, height, type) {
-  return new Canvas(width, height, type)
-}
-
-function createImageData (array, width, height) {
-  return new bindings.ImageData(array, width, height)
-}
-
-function loadImage (src) {
-  return new Promise((resolve, reject) => {
-    const image = new Image()
-
-    function cleanup () {
-      image.onload = null
-      image.onerror = null
-    }
-
-    image.onload = () => { cleanup(); resolve(image) }
-    image.onerror = (err) => { cleanup(); reject(err) }
-
-    image.src = src
-  })
-}
-
-/**
- * Resolve paths for registerFont. Must be called *before* creating a Canvas
- * instance.
- * @param src {string} Path to font file.
- * @param fontFace {{family: string, weight?: string, style?: string}} Object
- * specifying font information. `weight` and `style` default to `"normal"`.
- */
-function registerFont (src, fontFace) {
-  // TODO this doesn't need to be on Canvas; it should just be a static method
-  // of `bindings`.
-  return Canvas._registerFont(fs.realpathSync(src), fontFace)
-}
-
-module.exports = {
-  Canvas,
-  Context2d: CanvasRenderingContext2D, // Legacy/compat export
-  CanvasRenderingContext2D,
-  CanvasGradient: bindings.CanvasGradient,
-  CanvasPattern: bindings.CanvasPattern,
-  Image,
-  ImageData: bindings.ImageData,
-  PNGStream,
-  PDFStream,
-  JPEGStream,
-  DOMMatrix,
-  DOMPoint,
-
-  registerFont,
-  parseFont,
-
-  createCanvas,
-  createImageData,
-  loadImage,
-
-  backends: bindings.Backends,
-
-  /** Library version. */
-  version: packageJson.version,
-  /** Cairo version. */
-  cairoVersion: bindings.cairoVersion,
-  /** jpeglib version. */
-  jpegVersion: bindings.jpegVersion,
-  /** gif_lib version. */
-  gifVersion: bindings.gifVersion ? bindings.gifVersion.replace(/[^.\d]/g, '') : undefined,
-  /** freetype version. */
-  freetypeVersion: bindings.freetypeVersion
-}

packages/action/dist/xhr-sync-worker.js

@@ -1,60 +0,0 @@
-"use strict";
-/* eslint-disable no-process-exit */
-const util = require("util");
-const { JSDOM } = require("../../../..");
-const { READY_STATES } = require("./xhr-utils");
-const idlUtils = require("../generated/utils");
-const tough = require("tough-cookie");
-
-const dom = new JSDOM();
-const xhr = new dom.window.XMLHttpRequest();
-const xhrImpl = idlUtils.implForWrapper(xhr);
-
-const chunks = [];
-
-process.stdin.on("data", chunk => {
-  chunks.push(chunk);
-});
-
-process.stdin.on("end", () => {
-  const buffer = Buffer.concat(chunks);
-
-  const flag = JSON.parse(buffer.toString());
-  if (flag.body && flag.body.type === "Buffer" && flag.body.data) {
-    flag.body = Buffer.from(flag.body.data);
-  }
-  if (flag.cookieJar) {
-    flag.cookieJar = tough.CookieJar.fromJSON(flag.cookieJar);
-  }
-
-  flag.synchronous = false;
-  Object.assign(xhrImpl.flag, flag);
-  const { properties } = xhrImpl;
-  xhrImpl.readyState = READY_STATES.OPENED;
-  try {
-    xhr.addEventListener("loadend", () => {
-      if (properties.error) {
-        properties.error = properties.error.stack || util.inspect(properties.error);
-      }
-      process.stdout.write(JSON.stringify({
-        responseURL: xhrImpl.responseURL,
-        status: xhrImpl.status,
-        statusText: xhrImpl.statusText,
-        properties
-      }), () => {
-        process.exit(0);
-      });
-    }, false);
-    xhr.send(flag.body);
-  } catch (error) {
-    properties.error += error.stack || util.inspect(error);
-    process.stdout.write(JSON.stringify({
-      responseURL: xhrImpl.responseURL,
-      status: xhrImpl.status,
-      statusText: xhrImpl.statusText,
-      properties
-    }), () => {
-      process.exit(0);
-    });
-  }
-});

packages/action/generateContributionSnake.ts

@@ -1,56 +1,51 @@
-import { getGithubUserContribution, Cell } from "@snk/github-user-contribution";
-import { generateEmptyGrid } from "@snk/compute/generateGrid";
-import { setColor } from "@snk/compute/grid";
-import { computeBestRun } from "@snk/compute";
-import { createGif } from "../gif-creator";
+import { getGithubUserContribution } from "@snk/github-user-contribution";
+import { userContributionToGrid } from "./userContributionToGrid";
+import { getBestRoute } from "@snk/solver/getBestRoute";
+import { snake4 } from "@snk/types/__fixtures__/snake";
+import { getPathToPose } from "@snk/solver/getPathToPose";
+import type { DrawOptions as DrawOptions } from "@snk/svg-creator";
+import type { AnimationOptions } from "@snk/gif-creator";
 
-export const userContributionToGrid = (cells: Cell[]) => {
-  const width = Math.max(0, ...cells.map((c) => c.x)) + 1;
-  const height = Math.max(0, ...cells.map((c) => c.y)) + 1;
+export const generateContributionSnake = async (
+  userName: string,
+  outputs: ({
+    format: "svg" | "gif";
+    drawOptions: DrawOptions;
+    animationOptions: AnimationOptions;
+  } | null)[]
+) => {
+  console.log("🎣 fetching github user contribution");
+  const cells = await getGithubUserContribution(userName);
 
-  const grid = generateEmptyGrid(width, height);
-  for (const c of cells) setColor(grid, c.x, c.y, c.k === 0 ? null : c.k);
+  const grid = userContributionToGrid(cells);
+  const snake = snake4;
 
-  return grid;
-};
+  console.log("📡 computing best route");
+  const chain = getBestRoute(grid, snake)!;
+  chain.push(...getPathToPose(chain.slice(-1)[0], snake)!);
 
-export const generateContributionSnake = async (userName: string) => {
-  const { cells, colorScheme } = await getGithubUserContribution(userName);
-
-  const grid0 = userContributionToGrid(cells);
-
-  const snake0 = [
-    { x: 4, y: -1 },
-    { x: 3, y: -1 },
-    { x: 2, y: -1 },
-    { x: 1, y: -1 },
-    { x: 0, y: -1 },
-  ];
-
-  const drawOptions = {
-    sizeBorderRadius: 2,
-    sizeCell: 16,
-    sizeDot: 12,
-    colorBorder: "#1b1f230a",
-    colorDots: colorScheme,
-    colorEmpty: colorScheme[0],
-    colorSnake: "purple",
-  };
-
-  const gameOptions = { maxSnakeLength: 5 };
-
-  const gifOptions = { delay: 10 };
-
-  const commands = computeBestRun(grid0, snake0, gameOptions);
-
-  const buffer = await createGif(
-    grid0,
-    snake0,
-    commands,
-    drawOptions,
-    gameOptions,
-    gifOptions
+  return Promise.all(
+    outputs.map(async (out, i) => {
+      if (!out) return;
+      const { format, drawOptions, animationOptions } = out;
+      switch (format) {
+        case "svg": {
+          console.log(`🖌 creating svg (outputs[${i}])`);
+          const { createSvg } = await import("@snk/svg-creator");
+          return createSvg(grid, cells, chain, drawOptions, animationOptions);
+        }
+        case "gif": {
+          console.log(`📹 creating gif (outputs[${i}])`);
+          const { createGif } = await import("@snk/gif-creator");
+          return await createGif(
+            grid,
+            cells,
+            chain,
+            drawOptions,
+            animationOptions
+          );
+        }
+      }
+    })
   );
-
-  return buffer;
 };

packages/action/index.ts

@@ -1,25 +1,32 @@
 import * as fs from "fs";
+import * as path from "path";
 import * as core from "@actions/core";
-import { generateContributionSnake } from "./generateContributionSnake";
+import { parseOutputsOption } from "./outputsOptions";
 
 (async () => {
   try {
-    console.log(core.getInput("user_name"));
-    console.log(core.getInput("gif_out_path"));
-    console.log("--");
-    console.log("--");
-    console.log(process.cwd());
-    console.log("--");
-    console.log(fs.readdirSync(process.cwd()));
-    console.log("--");
-    console.log("--");
-    console.log(process.env.GITHUB_WORKSPACE);
-    console.log("--");
-    console.log(fs.readdirSync(process.cwd()));
+    const userName = core.getInput("github_user_name");
+    const outputs = parseOutputsOption(
+      core.getMultilineInput("outputs") ?? [
+        core.getInput("gif_out_path"),
+        core.getInput("svg_out_path"),
+      ]
+    );
 
-    const buffer = await generateContributionSnake(core.getInput("user_name"));
-    fs.writeFileSync(core.getInput("gif_out_path"), buffer);
-  } catch (e) {
+    const { generateContributionSnake } = await import(
+      "./generateContributionSnake"
+    );
+    const results = await generateContributionSnake(userName, outputs);
+
+    outputs.forEach((out, i) => {
+      const result = results[i];
+      if (out?.filename && result) {
+        console.log(`💾 writing to ${out?.filename}`);
+        fs.mkdirSync(path.dirname(out?.filename), { recursive: true });
+        fs.writeFileSync(out?.filename, result);
+      }
+    });
+  } catch (e: any) {
     core.setFailed(`Action failed with "${e.message}"`);
   }
 })();

packages/action/outputsOptions.ts

@@ -0,0 +1,75 @@
+import type { AnimationOptions } from "@snk/gif-creator";
+import type { DrawOptions as DrawOptions } from "@snk/svg-creator";
+import { palettes } from "./palettes";
+
+export const parseOutputsOption = (lines: string[]) => lines.map(parseEntry);
+
+export const parseEntry = (entry: string) => {
+  const m = entry.trim().match(/^(.+\.(svg|gif))(\?(.*)|\s*({.*}))?$/);
+
+  if (!m) return null;
+
+  const [, filename, format, _, q1, q2] = m;
+
+  const query = q1 ?? q2;
+
+  let sp = new URLSearchParams(query || "");
+
+  try {
+    const o = JSON.parse(query);
+
+    if (Array.isArray(o.color_dots)) o.color_dots = o.color_dots.join(",");
+    if (Array.isArray(o.dark_color_dots))
+      o.dark_color_dots = o.dark_color_dots.join(",");
+
+    sp = new URLSearchParams(o);
+  } catch (err) {
+    if (!(err instanceof SyntaxError)) throw err;
+  }
+
+  const drawOptions: DrawOptions = {
+    sizeDotBorderRadius: 2,
+    sizeCell: 16,
+    sizeDot: 12,
+    ...palettes["default"],
+  };
+  const animationOptions: AnimationOptions = { step: 1, frameDuration: 100 };
+
+  {
+    const palette = palettes[sp.get("palette")!];
+    if (palette) {
+      Object.assign(drawOptions, palette);
+      drawOptions.dark = palette.dark && { ...palette.dark };
+    }
+  }
+
+  if (sp.has("color_snake")) drawOptions.colorSnake = sp.get("color_snake")!;
+  if (sp.has("color_dots")) {
+    const colors = sp.get("color_dots")!.split(/[,;]/);
+    drawOptions.colorDots = colors;
+    drawOptions.colorEmpty = colors[0];
+    drawOptions.dark = undefined;
+  }
+  if (sp.has("color_dot_border"))
+    drawOptions.colorDotBorder = sp.get("color_dot_border")!;
+
+  if (sp.has("dark_color_dots")) {
+    const colors = sp.get("dark_color_dots")!.split(/[,;]/);
+    drawOptions.dark = {
+      ...drawOptions.dark,
+      colorDots: colors,
+      colorEmpty: colors[0],
+    };
+  }
+  if (sp.has("dark_color_dot_border") && drawOptions.dark)
+    drawOptions.dark.colorDotBorder = sp.get("color_dot_border")!;
+  if (sp.has("dark_color_snake") && drawOptions.dark)
+    drawOptions.dark.colorSnake = sp.get("color_snake")!;
+
+  return {
+    filename,
+    format: format as "svg" | "gif",
+    drawOptions,
+    animationOptions,
+  };
+};

packages/action/package.json

@@ -2,15 +2,18 @@
   "name": "@snk/action",
   "version": "1.0.0",
   "dependencies": {
-    "@actions/core": "1.2.4",
+    "@actions/core": "1.10.0",
     "@snk/gif-creator": "1.0.0",
-    "@snk/github-user-contribution": "1.0.0"
+    "@snk/github-user-contribution": "1.0.0",
+    "@snk/solver": "1.0.0",
+    "@snk/svg-creator": "1.0.0",
+    "@snk/types": "1.0.0"
   },
   "devDependencies": {
-    "@zeit/ncc": "0.22.3"
+    "@vercel/ncc": "0.34.0"
   },
   "scripts": {
-    "build": "ncc build ./index.ts --out dist",
-    "dev": "ncc run __tests__/dev.ts --quiet | tail -n +2 > out.gif "
+    "build": "ncc build --external canvas --external gifsicle --out dist ./index.ts",
+    "run:build": "INPUT_GITHUB_USER_NAME=platane INPUT_OUTPUTS='dist/out.svg' node dist/index.js"
   }
 }

packages/action/palettes.ts

@@ -0,0 +1,30 @@
+import { DrawOptions as DrawOptions } from "@snk/svg-creator";
+
+export const basePalettes: Record<
+  string,
+  Pick<
+    DrawOptions,
+    "colorDotBorder" | "colorEmpty" | "colorSnake" | "colorDots" | "dark"
+  >
+> = {
+  "github-light": {
+    colorDotBorder: "#1b1f230a",
+    colorDots: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
+    colorEmpty: "#ebedf0",
+    colorSnake: "purple",
+  },
+  "github-dark": {
+    colorDotBorder: "#1b1f230a",
+    colorEmpty: "#161b22",
+    colorDots: ["#161b22", "#01311f", "#034525", "#0f6d31", "#00c647"],
+    colorSnake: "purple",
+  },
+};
+
+// aliases
+export const palettes = { ...basePalettes };
+palettes["github"] = {
+  ...palettes["github-light"],
+  dark: { ...palettes["github-dark"] },
+};
+palettes["default"] = palettes["github"];

packages/action/userContributionToGrid.ts

@@ -0,0 +1,16 @@
+import { setColor, createEmptyGrid, setColorEmpty } from "@snk/types/grid";
+import type { Cell } from "@snk/github-user-contribution";
+import type { Color } from "@snk/types/grid";
+
+export const userContributionToGrid = (cells: Cell[]) => {
+  const width = Math.max(0, ...cells.map((c) => c.x)) + 1;
+  const height = Math.max(0, ...cells.map((c) => c.y)) + 1;
+
+  const grid = createEmptyGrid(width, height);
+  for (const c of cells) {
+    if (c.level > 0) setColor(grid, c.x, c.y, c.level as Color);
+    else setColorEmpty(grid, c.x, c.y);
+  }
+
+  return grid;
+};

packages/compute/__tests__/snake.spec.ts

@@ -1,24 +0,0 @@
-import { snakeSelfCollide } from "../snake";
-
-test.each([
-  [[{ x: 0, y: 0 }], false],
-  [
-    [
-      { x: 0, y: 0 },
-      { x: 0, y: 0 },
-    ],
-    true,
-  ],
-  [
-    [
-      { x: 1, y: 7 },
-      { x: 0, y: 6 },
-      { x: 2, y: 8 },
-      { x: 1, y: 7 },
-      { x: 3, y: 9 },
-    ],
-    true,
-  ],
-])("should report snake collision", (snake, collide) => {
-  expect(snakeSelfCollide(snake)).toBe(collide);
-});

packages/compute/__tests__/step.spec.ts

@@ -1,94 +0,0 @@
-import { step } from "../step";
-import { generateEmptyGrid } from "../generateGrid";
-import { around4 } from "../point";
-import { setColor, getColor } from "../grid";
-
-it("should move snake", () => {
-  const grid = generateEmptyGrid(4, 3);
-  const snake = [{ x: 1, y: 1 }];
-  const direction = around4[0];
-  const stack: number[] = [];
-  const options = { maxSnakeLength: 5 };
-
-  step(grid, snake, stack, direction, options);
-
-  expect(snake).toEqual([
-    { x: 2, y: 1 },
-    { x: 1, y: 1 },
-  ]);
-
-  step(grid, snake, stack, direction, options);
-
-  expect(snake).toEqual([
-    { x: 3, y: 1 },
-    { x: 2, y: 1 },
-    { x: 1, y: 1 },
-  ]);
-
-  step(grid, snake, stack, direction, options);
-
-  expect(snake).toEqual([
-    { x: 4, y: 1 },
-    { x: 3, y: 1 },
-    { x: 2, y: 1 },
-    { x: 1, y: 1 },
-  ]);
-});
-
-it("should move short snake", () => {
-  const grid = generateEmptyGrid(8, 3);
-  const snake = [{ x: 1, y: 1 }];
-  const direction = around4[0];
-  const stack: number[] = [];
-  const options = { maxSnakeLength: 3 };
-
-  step(grid, snake, stack, direction, options);
-
-  expect(snake).toEqual([
-    { x: 2, y: 1 },
-    { x: 1, y: 1 },
-  ]);
-
-  step(grid, snake, stack, direction, options);
-
-  expect(snake).toEqual([
-    { x: 3, y: 1 },
-    { x: 2, y: 1 },
-    { x: 1, y: 1 },
-  ]);
-
-  step(grid, snake, stack, direction, options);
-
-  expect(snake).toEqual([
-    { x: 4, y: 1 },
-    { x: 3, y: 1 },
-    { x: 2, y: 1 },
-  ]);
-
-  step(grid, snake, stack, direction, options);
-
-  expect(snake).toEqual([
-    { x: 5, y: 1 },
-    { x: 4, y: 1 },
-    { x: 3, y: 1 },
-  ]);
-});
-
-it("should pick up fruit", () => {
-  const grid = generateEmptyGrid(4, 3);
-  const snake = [{ x: 1, y: 1 }];
-  const direction = around4[0];
-  const stack: number[] = [];
-  const options = { maxSnakeLength: 2 };
-  setColor(grid, 3, 1, 9);
-
-  step(grid, snake, stack, direction, options);
-
-  expect(getColor(grid, 3, 1)).toBe(9);
-  expect(stack).toEqual([]);
-
-  step(grid, snake, stack, direction, options);
-
-  expect(getColor(grid, 3, 1)).toBe(null);
-  expect(stack).toEqual([9]);
-});

packages/compute/generateGrid.ts

@@ -1,27 +0,0 @@
-import { Grid, Color } from "./grid";
-
-const rand = (a: number, b: number) => Math.floor(Math.random() * (b - a)) + a;
-
-export const generateEmptyGrid = (width: number, height: number) =>
-  generateGrid(width, height, { colors: [], emptyP: 1 });
-
-export const generateGrid = (
-  width: number,
-  height: number,
-  options: { colors: Color[]; emptyP: number } = {
-    colors: [1, 2, 3],
-    emptyP: 2,
-  }
-): Grid => {
-  const g = {
-    width,
-    height,
-    data: Array.from({ length: width * height }, () => {
-      const x = rand(-options.emptyP, options.colors.length);
-
-      return x < 0 ? null : options.colors[x];
-    }),
-  };
-
-  return g;
-};

packages/compute/grid.ts

@@ -1,30 +0,0 @@
-export type Color = number;
-
-export type Grid = {
-  width: number;
-  height: number;
-  data: (Color | null)[];
-};
-
-export const getIndex = (grid: Grid, x: number, y: number) =>
-  x * grid.height + y;
-
-export const isInside = (grid: Grid, x: number, y: number) =>
-  x >= 0 && y >= 0 && x < grid.width && y < grid.height;
-
-export const isInsideLarge = (grid: Grid, m: number, x: number, y: number) =>
-  x >= -m && y >= -m && x < grid.width + m && y < grid.height + m;
-
-export const getColor = (grid: Grid, x: number, y: number) =>
-  grid.data[getIndex(grid, x, y)];
-
-export const copyGrid = (grid: Grid) => ({ ...grid, data: grid.data.slice() });
-
-export const setColor = (
-  grid: Grid,
-  x: number,
-  y: number,
-  color: Color | null
-) => {
-  grid.data[getIndex(grid, x, y)] = color;
-};

packages/compute/index.ts

@@ -1,44 +0,0 @@
-import { Grid, Color, copyGrid, isInsideLarge } from "./grid";
-import { Point, around4 } from "./point";
-import { stepSnake, step } from "./step";
-import { copySnake, snakeSelfCollide } from "./snake";
-
-const isGridEmpty = (grid: Grid) => grid.data.every((x) => x === null);
-
-export const computeBestRun = (
-  grid: Grid,
-  snake: Point[],
-  options: { maxSnakeLength: number }
-) => {
-  const g = copyGrid(grid);
-  const s = copySnake(snake);
-  const q: Color[] = [];
-
-  const commands: Point[] = [];
-
-  let u = 500;
-
-  while (!isGridEmpty(g) && u-- > 0) {
-    let direction;
-
-    for (let k = 10; k--; ) {
-      direction = around4[Math.floor(Math.random() * around4.length)];
-
-      const sn = copySnake(s);
-      stepSnake(sn, direction, options);
-
-      if (isInsideLarge(g, 1, sn[0].x, sn[0].y) && !snakeSelfCollide(sn)) {
-        break;
-      } else {
-        direction = undefined;
-      }
-    }
-
-    if (direction !== undefined) {
-      step(g, s, q, direction, options);
-      commands.push(direction);
-    }
-  }
-
-  return commands;
-};

packages/compute/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@snk/compute",
-  "version": "1.0.0"
-}

packages/compute/snake.ts

@@ -1,24 +0,0 @@
-import { Point } from "./point";
-
-export const snakeSelfCollideNext = (
-  snake: Point[],
-  direction: Point,
-  options: { maxSnakeLength: number }
-) => {
-  const hx = snake[0].x + direction.x;
-  const hy = snake[0].y + direction.y;
-
-  for (let i = 0; i < Math.min(options.maxSnakeLength, snake.length); i++)
-    if (snake[i].x === hx && snake[i].y === hy) return true;
-
-  return false;
-};
-
-export const snakeSelfCollide = (snake: Point[]) => {
-  for (let i = 1; i < snake.length; i++)
-    if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
-
-  return false;
-};
-
-export const copySnake = (x: Point[]) => x.map((p) => ({ ...p }));

packages/compute/step.ts

@@ -1,48 +0,0 @@
-import { Grid, Color, getColor, isInside, setColor } from "./grid";
-import { Point } from "./point";
-
-const moveSnake = (snake: Point[], headx: number, heady: number) => {
-  for (let k = snake.length - 1; k > 0; k--) {
-    snake[k].x = snake[k - 1].x;
-    snake[k].y = snake[k - 1].y;
-  }
-  snake[0].x = headx;
-  snake[0].y = heady;
-};
-
-export const stepSnake = (
-  snake: Point[],
-  direction: Point,
-  options: { maxSnakeLength: number }
-) => {
-  const headx = snake[0].x + direction.x;
-  const heady = snake[0].y + direction.y;
-
-  if (snake.length === options.maxSnakeLength) {
-    moveSnake(snake, headx, heady);
-  } else {
-    snake.unshift({ x: headx, y: heady });
-  }
-};
-
-export const stepPicking = (grid: Grid, snake: Point[], stack: Color[]) => {
-  if (isInside(grid, snake[0].x, snake[0].y)) {
-    const c = getColor(grid, snake[0].x, snake[0].y);
-
-    if (c) {
-      setColor(grid, snake[0].x, snake[0].y, null);
-      stack.push(c);
-    }
-  }
-};
-
-export const step = (
-  grid: Grid,
-  snake: Point[],
-  stack: Color[],
-  direction: Point,
-  options: { maxSnakeLength: number }
-) => {
-  stepSnake(snake, direction, options);
-  stepPicking(grid, snake, stack);
-};

packages/demo/.gitignore

@@ -1 +0,0 @@
-webpack.config.js

packages/demo/README.md

@@ -0,0 +1,3 @@
+# @snk/demo
+
+Contains various demo to test and validate some pieces of the algorithm.

packages/demo/canvas.ts

@@ -0,0 +1,99 @@
+import { Color, Grid } from "@snk/types/grid";
+import { drawLerpWorld, drawWorld } from "@snk/draw/drawWorld";
+import { Snake } from "@snk/types/snake";
+import type { DrawOptions as DrawOptions } from "@snk/svg-creator";
+
+export const drawOptions: DrawOptions = {
+  sizeDotBorderRadius: 2,
+  sizeCell: 16,
+  sizeDot: 12,
+  colorDotBorder: "#1b1f230a",
+  colorDots: {
+    1: "#9be9a8",
+    2: "#40c463",
+    3: "#30a14e",
+    4: "#216e39",
+  },
+  colorEmpty: "#ebedf0",
+  colorSnake: "purple",
+  dark: {
+    colorEmpty: "#161b22",
+    colorDots: { 1: "#01311f", 2: "#034525", 3: "#0f6d31", 4: "#00c647" },
+  },
+};
+
+const getPointedCell =
+  (canvas: HTMLCanvasElement) =>
+  ({ pageX, pageY }: MouseEvent) => {
+    const { left, top } = canvas.getBoundingClientRect();
+
+    const x = Math.floor((pageX - left) / drawOptions.sizeCell) - 1;
+    const y = Math.floor((pageY - top) / drawOptions.sizeCell) - 2;
+
+    return { x, y };
+  };
+
+export const createCanvas = ({
+  width,
+  height,
+}: {
+  width: number;
+  height: number;
+}) => {
+  const canvas = document.createElement("canvas");
+  const upscale = 2;
+  const w = drawOptions.sizeCell * (width + 4);
+  const h = drawOptions.sizeCell * (height + 4) + 200;
+  canvas.width = w * upscale;
+  canvas.height = h * upscale;
+  canvas.style.width = w + "px";
+  canvas.style.height = h + "px";
+  canvas.style.display = "block";
+  // canvas.style.pointerEvents = "none";
+
+  const cellInfo = document.createElement("div");
+  cellInfo.style.height = "20px";
+
+  document.body.appendChild(cellInfo);
+  document.body.appendChild(canvas);
+  canvas.addEventListener("mousemove", (e) => {
+    const { x, y } = getPointedCell(canvas)(e);
+    cellInfo.innerText = [x, y]
+      .map((u) => u.toString().padStart(2, " "))
+      .join(" / ");
+  });
+
+  const ctx = canvas.getContext("2d")!;
+  ctx.scale(upscale, upscale);
+
+  const draw = (grid: Grid, snake: Snake, stack: Color[]) => {
+    ctx.clearRect(0, 0, 9999, 9999);
+    drawWorld(ctx, grid, null, snake, stack, drawOptions);
+  };
+
+  const drawLerp = (
+    grid: Grid,
+    snake0: Snake,
+    snake1: Snake,
+    stack: Color[],
+    k: number
+  ) => {
+    ctx.clearRect(0, 0, 9999, 9999);
+    drawLerpWorld(ctx, grid, null, snake0, snake1, stack, k, drawOptions);
+  };
+
+  const highlightCell = (x: number, y: number, color = "orange") => {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.fillRect((1 + x + 0.5) * 16 - 2, (2 + y + 0.5) * 16 - 2, 4, 4);
+  };
+
+  return {
+    draw,
+    drawLerp,
+    highlightCell,
+    canvas,
+    getPointedCell: getPointedCell(canvas),
+    ctx,
+  };
+};

packages/demo/demo.getBestRoute.ts

@@ -0,0 +1,41 @@
+import "./menu";
+import { createCanvas } from "./canvas";
+import { getBestRoute } from "@snk/solver/getBestRoute";
+import { Color, copyGrid } from "@snk/types/grid";
+import { grid, snake } from "./sample";
+import { step } from "@snk/solver/step";
+
+const chain = getBestRoute(grid, snake)!;
+
+//
+// draw
+let k = 0;
+
+const { canvas, draw } = createCanvas(grid);
+document.body.appendChild(canvas);
+
+const onChange = () => {
+  const gridN = copyGrid(grid);
+  const stack: Color[] = [];
+  for (let i = 0; i <= k; i++) step(gridN, stack, chain[i]);
+
+  draw(gridN, chain[k], stack);
+};
+onChange();
+
+const input = document.createElement("input") as any;
+input.type = "range";
+input.value = 0;
+input.step = 1;
+input.min = 0;
+input.max = chain.length - 1;
+input.style.width = "90%";
+input.addEventListener("input", () => {
+  k = +input.value;
+  onChange();
+});
+document.body.append(input);
+window.addEventListener("click", (e) => {
+  if (e.target === document.body || e.target === document.body.parentElement)
+    input.focus();
+});

packages/demo/demo.getBestTunnel.ts

@@ -0,0 +1,80 @@
+import "./menu";
+import { createCanvas } from "./canvas";
+import { getSnakeLength } from "@snk/types/snake";
+import { grid, snake } from "./sample";
+import { getColor } from "@snk/types/grid";
+import { getBestTunnel } from "@snk/solver/getBestTunnel";
+import { createOutside } from "@snk/solver/outside";
+import type { Color } from "@snk/types/grid";
+import type { Point } from "@snk/types/point";
+
+const { canvas, ctx, draw, highlightCell } = createCanvas(grid);
+document.body.appendChild(canvas);
+
+const ones: Point[] = [];
+
+for (let x = 0; x < grid.width; x++)
+  for (let y = 0; y < grid.height; y++)
+    if (getColor(grid, x, y) === 1) ones.push({ x, y });
+
+const tunnels = ones.map(({ x, y }) => ({
+  x,
+  y,
+  tunnel: getBestTunnel(
+    grid,
+    createOutside(grid),
+    x,
+    y,
+    3 as Color,
+    getSnakeLength(snake)
+  ),
+}));
+
+const onChange = () => {
+  const k = +inputK.value;
+  const i = +inputI.value;
+
+  ctx.clearRect(0, 0, 9999, 9999);
+
+  if (!tunnels[k]) return;
+
+  const { x, y, tunnel } = tunnels[k]!;
+
+  draw(grid, snake, []);
+
+  highlightCell(x, y, "red");
+
+  if (tunnel) {
+    tunnel.forEach(({ x, y }) => highlightCell(x, y));
+    highlightCell(x, y, "red");
+    highlightCell(tunnel[i].x, tunnel[i].y, "blue");
+  }
+};
+
+const inputK = document.createElement("input") as any;
+inputK.type = "range";
+inputK.value = 0;
+inputK.step = 1;
+inputK.min = 0;
+inputK.max = tunnels ? tunnels.length - 1 : 0;
+inputK.style.width = "90%";
+inputK.style.padding = "20px 0";
+inputK.addEventListener("input", () => {
+  inputI.value = 0;
+  inputI.max = (tunnels[+inputK.value]?.tunnel?.length || 1) - 1;
+  onChange();
+});
+document.body.append(inputK);
+
+const inputI = document.createElement("input") as any;
+inputI.type = "range";
+inputI.value = 0;
+inputI.step = 1;
+inputI.min = 0;
+inputI.max = (tunnels[+inputK.value]?.tunnel?.length || 1) - 1;
+inputI.style.width = "90%";
+inputI.style.padding = "20px 0";
+inputI.addEventListener("input", onChange);
+document.body.append(inputI);
+
+onChange();

packages/demo/demo.getPathTo.ts

@@ -0,0 +1,59 @@
+import "./menu";
+import { createCanvas } from "./canvas";
+import { copySnake, snakeToCells } from "@snk/types/snake";
+import { grid, snake as snake0 } from "./sample";
+import { getPathTo } from "@snk/solver/getPathTo";
+
+const { canvas, ctx, draw, getPointedCell, highlightCell } = createCanvas(grid);
+canvas.style.pointerEvents = "auto";
+
+let snake = copySnake(snake0);
+let chain = [snake];
+
+canvas.addEventListener("mousemove", (e) => {
+  const { x, y } = getPointedCell(e);
+
+  chain = [...(getPathTo(grid, snake, x, y) || []), snake].reverse();
+
+  inputI.max = chain.length - 1;
+  i = inputI.value = chain.length - 1;
+
+  onChange();
+});
+
+canvas.addEventListener("click", () => {
+  snake = chain.slice(-1)[0];
+
+  chain = [snake];
+  inputI.max = chain.length - 1;
+  i = inputI.value = chain.length - 1;
+
+  onChange();
+});
+
+let i = 0;
+const onChange = () => {
+  ctx.clearRect(0, 0, 9999, 9999);
+
+  draw(grid, chain[i], []);
+  chain
+    .map(snakeToCells)
+    .flat()
+    .forEach(({ x, y }) => highlightCell(x, y));
+};
+
+onChange();
+
+const inputI = document.createElement("input") as any;
+inputI.type = "range";
+inputI.value = 0;
+inputI.max = chain ? chain.length - 1 : 0;
+inputI.step = 1;
+inputI.min = 0;
+inputI.style.width = "90%";
+inputI.style.padding = "20px 0";
+inputI.addEventListener("input", () => {
+  i = +inputI.value;
+  onChange();
+});
+document.body.append(inputI);

packages/demo/demo.getPathToPose.ts

@@ -0,0 +1,41 @@
+import "./menu";
+import { createCanvas } from "./canvas";
+import { createSnakeFromCells, snakeToCells } from "@snk/types/snake";
+import { grid, snake } from "./sample";
+import { getPathToPose } from "@snk/solver/getPathToPose";
+
+const { canvas, ctx, draw, highlightCell } = createCanvas(grid);
+canvas.style.pointerEvents = "auto";
+
+const target = createSnakeFromCells(
+  snakeToCells(snake).map((p) => ({ ...p, x: p.x - 1 }))
+);
+
+let chain = [snake, ...getPathToPose(snake, target)!];
+
+let i = 0;
+const onChange = () => {
+  ctx.clearRect(0, 0, 9999, 9999);
+
+  draw(grid, chain[i], []);
+  chain
+    .map(snakeToCells)
+    .flat()
+    .forEach(({ x, y }) => highlightCell(x, y));
+};
+
+onChange();
+
+const inputI = document.createElement("input") as any;
+inputI.type = "range";
+inputI.value = 0;
+inputI.max = chain ? chain.length - 1 : 0;
+inputI.step = 1;
+inputI.min = 0;
+inputI.style.width = "90%";
+inputI.style.padding = "20px 0";
+inputI.addEventListener("input", () => {
+  i = +inputI.value;
+  onChange();
+});
+document.body.append(inputI);

packages/demo/demo.interactive.ts

@@ -0,0 +1,316 @@
+import { Color, copyGrid, Grid } from "@snk/types/grid";
+import { step } from "@snk/solver/step";
+import { isStableAndBound, stepSpring } from "./springUtils";
+import type { Res } from "@snk/github-user-contribution";
+import type { Snake } from "@snk/types/snake";
+import type { Point } from "@snk/types/point";
+import {
+  drawLerpWorld,
+  getCanvasWorldSize,
+  Options as DrawOptions,
+} from "@snk/draw/drawWorld";
+import { userContributionToGrid } from "@snk/action/userContributionToGrid";
+import { createSvg } from "@snk/svg-creator";
+import { createRpcClient } from "./worker-utils";
+import type { API as WorkerAPI } from "./demo.interactive.worker";
+import { AnimationOptions } from "@snk/gif-creator";
+import { basePalettes } from "@snk/action/palettes";
+
+const createForm = ({
+  onSubmit,
+  onChangeUserName,
+}: {
+  onSubmit: (s: string) => Promise<void>;
+  onChangeUserName: (s: string) => void;
+}) => {
+  const form = document.createElement("form");
+  form.style.position = "relative";
+  form.style.display = "flex";
+  form.style.flexDirection = "row";
+  const input = document.createElement("input");
+  input.addEventListener("input", () => onChangeUserName(input.value));
+  input.style.padding = "16px";
+  input.placeholder = "github user";
+  const submit = document.createElement("button");
+  submit.style.padding = "16px";
+  submit.type = "submit";
+  submit.innerText = "ok";
+
+  const label = document.createElement("label");
+  label.style.position = "absolute";
+  label.style.textAlign = "center";
+  label.style.top = "60px";
+  label.style.left = "0";
+  label.style.right = "0";
+
+  form.appendChild(input);
+  form.appendChild(submit);
+  document.body.appendChild(form);
+
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+
+    onSubmit(input.value)
+      .finally(() => {
+        clearTimeout(timeout);
+      })
+      .catch((err) => {
+        label.innerText = "error :(";
+        throw err;
+      });
+
+    input.disabled = true;
+    submit.disabled = true;
+    form.appendChild(label);
+    label.innerText = "loading ...";
+
+    const timeout = setTimeout(() => {
+      label.innerText = "loading ( it might take a while ) ... ";
+    }, 5000);
+  });
+
+  //
+  // dispose
+  const dispose = () => {
+    document.body.removeChild(form);
+  };
+
+  return { dispose };
+};
+
+const clamp = (x: number, a: number, b: number) => Math.max(a, Math.min(b, x));
+
+const createGithubProfile = () => {
+  const container = document.createElement("div");
+  container.style.padding = "20px";
+  container.style.opacity = "0";
+  container.style.display = "flex";
+  container.style.flexDirection = "column";
+  container.style.height = "120px";
+  container.style.alignItems = "flex-start";
+  const image = document.createElement("img");
+  image.style.width = "100px";
+  image.style.height = "100px";
+  image.style.borderRadius = "50px";
+  const name = document.createElement("a");
+  name.style.padding = "4px 0 0 0";
+
+  document.body.appendChild(container);
+  container.appendChild(image);
+  container.appendChild(name);
+
+  image.addEventListener("load", () => {
+    container.style.opacity = "1";
+  });
+  const onChangeUser = (userName: string) => {
+    container.style.opacity = "0";
+    name.innerText = userName;
+    name.href = `https://github.com/${userName}`;
+    image.src = `https://github.com/${userName}.png`;
+  };
+
+  const dispose = () => {
+    document.body.removeChild(container);
+  };
+
+  return { dispose, onChangeUser };
+};
+
+const createViewer = ({
+  grid0,
+  chain,
+  cells,
+}: {
+  grid0: Grid;
+  chain: Snake[];
+  cells: Point[];
+}) => {
+  const drawOptions: DrawOptions = {
+    sizeDotBorderRadius: 2,
+    sizeCell: 16,
+    sizeDot: 12,
+    ...basePalettes["github-light"],
+  };
+
+  //
+  // canvas
+  const canvas = document.createElement("canvas");
+  const { width, height } = getCanvasWorldSize(grid0, drawOptions);
+  canvas.width = width;
+  canvas.height = height;
+
+  const w = Math.min(width, window.innerWidth);
+  const h = (height / width) * w;
+  canvas.style.width = w + "px";
+  canvas.style.height = h + "px";
+  canvas.style.pointerEvents = "none";
+
+  document.body.appendChild(canvas);
+
+  //
+  // draw
+  let animationFrame: number;
+  const spring = { x: 0, v: 0, target: 0 };
+  const springParams = { tension: 120, friction: 20, maxVelocity: 50 };
+  const ctx = canvas.getContext("2d")!;
+  const loop = () => {
+    cancelAnimationFrame(animationFrame);
+
+    stepSpring(spring, springParams, spring.target);
+    const stable = isStableAndBound(spring, spring.target);
+
+    const grid = copyGrid(grid0);
+    const stack: Color[] = [];
+    for (let i = 0; i < Math.min(chain.length, spring.x); i++)
+      step(grid, stack, chain[i]);
+
+    const snake0 = chain[clamp(Math.floor(spring.x), 0, chain.length - 1)];
+    const snake1 = chain[clamp(Math.ceil(spring.x), 0, chain.length - 1)];
+    const k = spring.x % 1;
+
+    ctx.clearRect(0, 0, 9999, 9999);
+    drawLerpWorld(ctx, grid, cells, snake0, snake1, stack, k, drawOptions);
+
+    if (!stable) animationFrame = requestAnimationFrame(loop);
+  };
+  loop();
+
+  //
+  // controls
+  const input = document.createElement("input");
+  input.type = "range";
+  input.value = "0";
+  input.step = "1";
+  input.min = "0";
+  input.max = "" + chain.length;
+  input.style.width = "calc( 100% - 20px )";
+  input.addEventListener("input", () => {
+    spring.target = +input.value;
+    cancelAnimationFrame(animationFrame);
+    animationFrame = requestAnimationFrame(loop);
+  });
+  const onClickBackground = (e: MouseEvent) => {
+    if (e.target === document.body || e.target === document.body.parentElement)
+      input.focus();
+  };
+  window.addEventListener("click", onClickBackground);
+  document.body.append(input);
+
+  //
+  const schemaSelect = document.createElement("select");
+  schemaSelect.style.margin = "10px";
+  schemaSelect.style.alignSelf = "flex-start";
+  schemaSelect.value = "github-light";
+  schemaSelect.addEventListener("change", () => {
+    Object.assign(drawOptions, basePalettes[schemaSelect.value]);
+
+    svgString = createSvg(grid0, cells, chain, drawOptions, {
+      frameDuration: 100,
+    } as AnimationOptions);
+    const svgImageUri = `data:image/*;charset=utf-8;base64,${btoa(svgString)}`;
+    svgLink.href = svgImageUri;
+
+    if (schemaSelect.value.includes("dark"))
+      document.body.parentElement?.classList.add("dark-mode");
+    else document.body.parentElement?.classList.remove("dark-mode");
+
+    loop();
+  });
+  for (const name of Object.keys(basePalettes)) {
+    const option = document.createElement("option");
+    option.value = name;
+    option.innerText = name;
+    schemaSelect.appendChild(option);
+  }
+  document.body.append(schemaSelect);
+
+  //
+  // dark mode
+  const style = document.createElement("style");
+  style.innerText = `
+  html { transition:background-color 180ms }
+  a { transition:color 180ms }
+  html.dark-mode{ background-color:#0d1117 }
+  html.dark-mode a{ color:rgb(201, 209, 217) }
+  `;
+  document.head.append(style);
+
+  //
+  // svg
+  const svgLink = document.createElement("a");
+  let svgString = createSvg(grid0, cells, chain, drawOptions, {
+    frameDuration: 100,
+  } as AnimationOptions);
+  const svgImageUri = `data:image/*;charset=utf-8;base64,${btoa(svgString)}`;
+  svgLink.href = svgImageUri;
+  svgLink.innerText = "github-user-contribution.svg";
+  svgLink.download = "github-user-contribution.svg";
+  svgLink.addEventListener("click", (e) => {
+    const w = window.open("")!;
+    w.document.write(
+      (document.body.parentElement?.classList.contains("dark-mode")
+        ? "<style>html{ background-color:#0d1117 }</style>"
+        : "") +
+        `<a href="${svgLink.href}" download="github-user-contribution.svg">` +
+        svgString +
+        "<a/>"
+    );
+    e.preventDefault();
+  });
+  svgLink.style.padding = "20px";
+  svgLink.style.paddingTop = "60px";
+  svgLink.style.alignSelf = "flex-start";
+  document.body.append(svgLink);
+
+  //
+  // dispose
+  const dispose = () => {
+    window.removeEventListener("click", onClickBackground);
+    cancelAnimationFrame(animationFrame);
+    document.body.removeChild(canvas);
+    document.body.removeChild(input);
+    document.body.removeChild(svgLink);
+  };
+
+  return { dispose };
+};
+
+const onSubmit = async (userName: string) => {
+  const res = await fetch(
+    process.env.GITHUB_USER_CONTRIBUTION_API_ENDPOINT + userName
+  );
+  const cells = (await res.json()) as Res;
+
+  const grid = userContributionToGrid(cells);
+
+  const chain = await getChain(grid);
+
+  dispose();
+
+  createViewer({ grid0: grid, chain, cells });
+};
+
+const worker = new Worker(
+  new URL(
+    "./demo.interactive.worker.ts",
+    // @ts-ignore
+    import.meta.url
+  )
+);
+
+const { getChain } = createRpcClient<WorkerAPI>(worker);
+
+const profile = createGithubProfile();
+const { dispose } = createForm({
+  onSubmit,
+  onChangeUserName: profile.onChangeUser,
+});
+
+document.body.style.margin = "0";
+document.body.style.display = "flex";
+document.body.style.flexDirection = "column";
+document.body.style.alignItems = "center";
+document.body.style.justifyContent = "center";
+document.body.style.height = "100%";
+document.body.style.width = "100%";
+document.body.style.position = "absolute";

packages/demo/demo.interactive.worker.ts

@@ -0,0 +1,17 @@
+import { getBestRoute } from "@snk/solver/getBestRoute";
+import { getPathToPose } from "@snk/solver/getPathToPose";
+import { snake4 as snake } from "@snk/types/__fixtures__/snake";
+import type { Grid } from "@snk/types/grid";
+import { createRpcServer } from "./worker-utils";
+
+const getChain = (grid: Grid) => {
+  const chain = getBestRoute(grid, snake)!;
+  chain.push(...getPathToPose(chain.slice(-1)[0], snake)!);
+
+  return chain;
+};
+
+const api = { getChain };
+export type API = typeof api;
+
+createRpcServer(api);

packages/demo/demo.json

@@ -0,0 +1,9 @@
+[
+  "interactive",
+  "getBestRoute",
+  "getBestTunnel",
+  "outside",
+  "getPathToPose",
+  "getPathTo",
+  "svg"
+]

packages/demo/demo.outside.ts

@@ -0,0 +1,42 @@
+import "./menu";
+import { createCanvas } from "./canvas";
+import { grid } from "./sample";
+import type { Color } from "@snk/types/grid";
+import { createOutside, isOutside } from "@snk/solver/outside";
+
+const { canvas, ctx, draw, highlightCell } = createCanvas(grid);
+document.body.appendChild(canvas);
+
+let k = 0;
+
+const onChange = () => {
+  ctx.clearRect(0, 0, 9999, 9999);
+
+  draw(grid, [] as any, []);
+
+  const outside = createOutside(grid, k as Color);
+
+  for (let x = outside.width; x--; )
+    for (let y = outside.height; y--; )
+      if (isOutside(outside, x, y)) highlightCell(x, y);
+};
+
+onChange();
+
+const inputK = document.createElement("input") as any;
+inputK.type = "range";
+inputK.value = 0;
+inputK.step = 1;
+inputK.min = 0;
+inputK.max = 4;
+inputK.style.width = "90%";
+inputK.style.padding = "20px 0";
+inputK.addEventListener("input", () => {
+  k = +inputK.value;
+  onChange();
+});
+document.body.append(inputK);
+window.addEventListener("click", (e) => {
+  if (e.target === document.body || e.target === document.body.parentElement)
+    inputK.focus();
+});

packages/demo/demo.svg.ts

@@ -0,0 +1,20 @@
+import "./menu";
+import { getBestRoute } from "@snk/solver/getBestRoute";
+import { createSvg } from "@snk/svg-creator";
+import { grid, snake } from "./sample";
+import { drawOptions } from "./canvas";
+import { getPathToPose } from "@snk/solver/getPathToPose";
+import type { AnimationOptions } from "@snk/gif-creator";
+
+const chain = getBestRoute(grid, snake);
+chain.push(...getPathToPose(chain.slice(-1)[0], snake)!);
+
+(async () => {
+  const svg = await createSvg(grid, null, chain, drawOptions, {
+    frameDuration: 200,
+  } as AnimationOptions);
+
+  const container = document.createElement("div");
+  container.innerHTML = svg;
+  document.body.appendChild(container);
+})();

packages/demo/index.ts

@@ -1,81 +0,0 @@
-// import { generateGrid } from "@snk/compute/generateGrid";
-
-import { generateGrid } from "@snk/compute/generateGrid";
-import { Color, copyGrid } from "@snk/compute/grid";
-import { computeBestRun } from "@snk/compute";
-import { step } from "@snk/compute/step";
-import { drawWorld } from "@snk/draw/drawWorld";
-import { Point } from "@snk/compute/point";
-
-const copySnake = (x: Point[]) => x.map((p) => ({ ...p }));
-
-export const run = async () => {
-  const drawOptions = {
-    sizeBorderRadius: 2,
-    sizeCell: 16,
-    sizeDot: 12,
-    colorBorder: "#1b1f230a",
-    colorDots: { 1: "#9be9a8", 2: "#40c463", 3: "#30a14e", 4: "#216e39" },
-    colorEmpty: "#ebedf0",
-    colorSnake: "purple",
-  };
-
-  const gameOptions = { maxSnakeLength: 5 };
-
-  const grid0 = generateGrid(42, 7, { colors: [1, 2, 3, 4], emptyP: 3 });
-
-  const snake0 = [
-    { x: 4, y: -1 },
-    { x: 3, y: -1 },
-    { x: 2, y: -1 },
-    { x: 1, y: -1 },
-    { x: 0, y: -1 },
-  ];
-  const stack0: Color[] = [];
-
-  const chain = computeBestRun(grid0, snake0, gameOptions);
-
-  const canvas = document.createElement("canvas");
-  canvas.width = drawOptions.sizeCell * (grid0.width + 4);
-  canvas.height = drawOptions.sizeCell * (grid0.height + 4) + 100;
-  document.body.appendChild(canvas);
-  const ctx = canvas.getContext("2d")!;
-
-  const update = (n: number) => {
-    const snake = copySnake(snake0);
-    const stack = stack0.slice();
-    const grid = copyGrid(grid0);
-
-    for (let i = 0; i < n; i++) step(grid, snake, stack, chain[i], gameOptions);
-
-    ctx.clearRect(0, 0, 9999, 9999);
-    drawWorld(ctx, grid, snake, stack, drawOptions);
-  };
-
-  const input: any = document.createElement("input");
-  input.type = "range";
-  input.style.width = "100%";
-  input.min = 0;
-  input.max = chain.length;
-  input.step = 1;
-  input.value = 0;
-  input.addEventListener("input", () => update(+input.value));
-  document.addEventListener("click", () => input.focus());
-
-  document.body.appendChild(input);
-
-  update(+input.value);
-
-  // while (chain.length) {
-  //   await wait(100);
-
-  //   step(grid, snake, stack, chain.shift()!, gameOptions);
-
-  //   ctx.clearRect(0, 0, 9999, 9999);
-  //   drawWorld(ctx, grid, snake, stack, options);
-  // }
-
-  // const wait = (delay = 0) => new Promise((r) => setTimeout(r, delay));
-};
-
-run();

packages/demo/menu.ts

@@ -0,0 +1,36 @@
+import { GUI } from "dat.gui";
+import * as grids from "@snk/types/__fixtures__/grid";
+import * as snakes from "@snk/types/__fixtures__/snake";
+import { grid, snake } from "./sample";
+
+const demos: string[] = require("./demo.json");
+
+export const gui = new GUI();
+
+const config = {
+  snake: Object.entries(snakes).find(([_, s]) => s === snake)![0],
+  grid: Object.entries(grids).find(([_, s]) => s === grid)![0],
+  demo: demos[0],
+};
+{
+  const d = window.location.pathname.match(/(\w+)\.html/);
+  if (d && demos.includes(d[1])) config.demo = d[1];
+}
+
+const onChange = () => {
+  const search = new URLSearchParams({
+    snake: config.snake,
+    grid: config.grid,
+  }).toString();
+
+  const url = new URL(
+    config.demo + ".html?" + search,
+    window.location.href
+  ).toString();
+
+  window.location.href = url;
+};
+
+gui.add(config, "demo", demos).onChange(onChange);
+gui.add(config, "grid", Object.keys(grids)).onChange(onChange);
+gui.add(config, "snake", Object.keys(snakes)).onChange(onChange);

packages/demo/package.json

@@ -2,18 +2,25 @@
   "name": "@snk/demo",
   "version": "1.0.0",
   "dependencies": {
-    "@snk/compute": "1.0.0"
+    "@snk/action": "1.0.0",
+    "@snk/draw": "1.0.0",
+    "@snk/github-user-contribution": "1.0.0",
+    "@snk/solver": "1.0.0",
+    "@snk/svg-creator": "1.0.0",
+    "@snk/types": "1.0.0"
   },
   "devDependencies": {
-    "webpack": "4.43.0",
-    "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.0",
-    "ts-loader": "8.0.1",
-    "html-webpack-plugin": "4.3.0"
+    "@types/dat.gui": "0.7.7",
+    "dat.gui": "0.7.9",
+    "html-webpack-plugin": "5.5.0",
+    "ts-loader": "9.4.1",
+    "ts-node": "10.9.1",
+    "webpack": "5.74.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.11.1"
   },
   "scripts": {
-    "prepare": "tsc webpack.config.ts",
-    "build": "yarn prepare ; webpack",
-    "dev": "yarn prepare ; webpack-dev-server --port ${PORT-3000}"
+    "build": "webpack",
+    "dev": "webpack serve"
   }
 }

packages/demo/sample.ts

@@ -0,0 +1,14 @@
+import * as grids from "@snk/types/__fixtures__/grid";
+import * as snakes from "@snk/types/__fixtures__/snake";
+import type { Snake } from "@snk/types/snake";
+import type { Grid } from "@snk/types/grid";
+
+const sp = new URLSearchParams(window.location.search);
+
+const gLabel = sp.get("grid") || "simple";
+const sLabel = sp.get("snake") || "snake3";
+
+//@ts-ignore
+export const grid: Grid = grids[gLabel] || grids.simple;
+//@ts-ignore
+export const snake: Snake = snakes[sLabel] || snakes.snake3;

packages/demo/springUtils.ts

@@ -0,0 +1,63 @@
+const epsilon = 0.01;
+
+export const clamp = (a: number, b: number) => (x: number) =>
+  Math.max(a, Math.min(b, x));
+
+/**
+ * step the spring, mutate the state to reflect the state at t+dt
+ *
+ */
+const stepSpringOne = (
+  s: { x: number; v: number },
+  {
+    tension,
+    friction,
+    maxVelocity = Infinity,
+  }: { tension: number; friction: number; maxVelocity?: number },
+  target: number,
+  dt = 1 / 60
+) => {
+  const a = -tension * (s.x - target) - friction * s.v;
+
+  s.v += a * dt;
+  s.v = clamp(-maxVelocity / dt, maxVelocity / dt)(s.v);
+  s.x += s.v * dt;
+};
+
+/**
+ * return true if the spring is to be considered in a stable state
+ * ( close enough to the target and with a small enough velocity )
+ */
+export const isStable = (
+  s: { x: number; v: number },
+  target: number,
+  dt = 1 / 60
+) => Math.abs(s.x - target) < epsilon && Math.abs(s.v * dt) < epsilon;
+
+export const isStableAndBound = (
+  s: { x: number; v: number },
+  target: number,
+  dt?: number
+) => {
+  const stable = isStable(s, target, dt);
+  if (stable) {
+    s.x = target;
+    s.v = 0;
+  }
+  return stable;
+};
+
+export const stepSpring = (
+  s: { x: number; v: number },
+  params: { tension: number; friction: number; maxVelocity?: number },
+  target: number,
+  dt = 1 / 60
+) => {
+  const interval = 1 / 60;
+
+  while (dt > 0) {
+    stepSpringOne(s, params, target, Math.min(interval, dt));
+    // eslint-disable-next-line no-param-reassign
+    dt -= interval;
+  }
+};

packages/demo/webpack.config.ts

@@ -1,47 +1,75 @@
-import * as path from "path";
+import path from "path";
+import HtmlWebpackPlugin from "html-webpack-plugin";
 
-// @ts-ignore
-import * as HtmlWebpackPlugin from "html-webpack-plugin";
-import type { Configuration } from "webpack";
+import type { Configuration as WebpackConfiguration } from "webpack";
+import type { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
+import webpack from "webpack";
+import { getGithubUserContribution } from "@snk/github-user-contribution";
 
-const basePathname = (process.env.BASE_PATHNAME || "")
-  .split("/")
-  .filter(Boolean);
+const demos: string[] = require("./demo.json");
 
-const config: Configuration = {
+const webpackDevServerConfiguration: WebpackDevServerConfiguration = {
+  open: { target: demos[1] + ".html" },
+  onAfterSetupMiddleware: ({ app }) => {
+    app!.get("/api/github-user-contribution/:userName", async (req, res) => {
+      const userName: string = req.params.userName;
+      res.send(await getGithubUserContribution(userName));
+    });
+  },
+};
+
+const webpackConfiguration: WebpackConfiguration = {
   mode: "development",
-  entry: "./index",
+  entry: Object.fromEntries(
+    demos.map((demo: string) => [demo, `./demo.${demo}`])
+  ),
+  target: ["web", "es2019"],
   resolve: { extensions: [".ts", ".js"] },
   output: {
     path: path.join(__dirname, "dist"),
     filename: "[contenthash].js",
-    publicPath: "/" + basePathname.map((x) => x + "/").join(""),
   },
   module: {
     rules: [
       {
         exclude: /node_modules/,
-        test: /\.(js|ts)$/,
+        test: /\.ts$/,
         loader: "ts-loader",
+        options: {
+          transpileOnly: true,
+          compilerOptions: {
+            lib: ["dom", "es2020"],
+            target: "es2019",
+          },
+        },
       },
     ],
   },
   plugins: [
-    // game
+    ...demos.map(
+      (demo) =>
+        new HtmlWebpackPlugin({
+          title: "snk - " + demo,
+          filename: `${demo}.html`,
+          chunks: [demo],
+        })
+    ),
     new HtmlWebpackPlugin({
-      title: "demo",
-      filename: "index.html",
-      meta: {
-        viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
-      },
+      title: "snk - " + demos[0],
+      filename: `index.html`,
+      chunks: [demos[0]],
+    }),
+    new webpack.EnvironmentPlugin({
+      GITHUB_USER_CONTRIBUTION_API_ENDPOINT:
+        process.env.GITHUB_USER_CONTRIBUTION_API_ENDPOINT ??
+        "/api/github-user-contribution/",
     }),
   ],
 
   devtool: false,
-  stats: "errors-only",
-
-  // @ts-ignore
-  devServer: {},
 };
 
-export default config;
+export default {
+  ...webpackConfiguration,
+  devServer: webpackDevServerConfiguration,
+};

packages/demo/worker-utils.ts

@@ -0,0 +1,59 @@
+type API = Record<string, (...args: any[]) => any>;
+
+const symbol = "worker-rpc__";
+
+export const createRpcServer = (api: API) =>
+  self.addEventListener("message", async (event) => {
+    if (event.data?.symbol === symbol) {
+      try {
+        const res = await api[event.data.methodName](...event.data.args);
+        self.postMessage({ symbol, key: event.data.key, res });
+      } catch (error: any) {
+        postMessage({ symbol, key: event.data.key, error: error.message });
+      }
+    }
+  });
+
+export const createRpcClient = <API_ extends API>(worker: Worker) => {
+  const originalTerminate = worker.terminate;
+  worker.terminate = () => {
+    worker.dispatchEvent(new Event("terminate"));
+    originalTerminate.call(worker);
+  };
+
+  return new Proxy(
+    {} as {
+      [K in keyof API_]: (
+        ...args: Parameters<API_[K]>
+      ) => Promise<Awaited<ReturnType<API_[K]>>>;
+    },
+    {
+      get:
+        (_, methodName) =>
+        (...args: any[]) =>
+          new Promise((resolve, reject) => {
+            const key = Math.random().toString();
+
+            const onTerminate = () => {
+              worker.removeEventListener("terminate", onTerminate);
+              worker.removeEventListener("message", onMessageHandler);
+              reject(new Error("worker terminated"));
+            };
+
+            const onMessageHandler = (event: MessageEvent) => {
+              if (event.data?.symbol === symbol && event.data.key === key) {
+                if (event.data.error) reject(event.data.error);
+                else if (event.data.res) resolve(event.data.res);
+
+                worker.removeEventListener("terminate", onTerminate);
+                worker.removeEventListener("message", onMessageHandler);
+              }
+            };
+
+            worker.addEventListener("message", onMessageHandler);
+            worker.addEventListener("terminate", onTerminate);
+            worker.postMessage({ symbol, key, methodName, args });
+          }),
+    }
+  );
+};

packages/draw/README.md

@@ -0,0 +1,3 @@
+# @snk/draw
+
+Draw grids and snakes on a canvas.

packages/draw/drawCircleStack.ts

@@ -0,0 +1,86 @@
+import { pathRoundedRect } from "./pathRoundedRect";
+import type { Color } from "@snk/types/grid";
+import type { Point } from "@snk/types/point";
+
+type Options = {
+  colorDots: Record<Color, string>;
+  colorBorder: string;
+  sizeCell: number;
+  sizeDot: number;
+  sizeBorderRadius: number;
+};
+
+const isInsideCircle = (x: number, y: number, r: number) => {
+  const l = 6;
+  let k = 0;
+  for (let dx = 0; dx < l; dx++)
+    for (let dy = 0; dy < l; dy++) {
+      const ux = x + (dx + 0.5) / l;
+      const uy = y + (dy + 0.5) / l;
+
+      if (ux * ux + uy * uy < r * r) k++;
+    }
+
+  return k > l * l * 0.6;
+};
+
+export const getCellPath = (n: number): Point[] => {
+  const l = Math.ceil(Math.sqrt(n));
+
+  const cells = [];
+
+  for (let x = -l; x <= l; x++)
+    for (let y = -l; y <= l; y++) {
+      const a = (Math.atan2(y, x) + (5 * Math.PI) / 2) % (Math.PI * 2);
+
+      let r = 0;
+
+      while (!isInsideCircle(x, y, r + 0.5)) r++;
+
+      cells.push({ x, y, f: r * 100 + a });
+    }
+
+  return cells.sort((a, b) => a.f - b.f).slice(0, n);
+};
+
+export const cellPath = getCellPath(52 * 7 + 5);
+
+export const getCircleSize = (n: number) => {
+  const c = cellPath.slice(0, n);
+  const xs = c.map((p) => p.x);
+  const ys = c.map((p) => p.y);
+
+  return {
+    max: { x: Math.max(0, ...xs), y: Math.max(0, ...ys) },
+    min: { x: Math.min(0, ...xs), y: Math.min(0, ...ys) },
+  };
+};
+
+export const drawCircleStack = (
+  ctx: CanvasRenderingContext2D,
+  stack: Color[],
+  o: Options
+) => {
+  for (let i = stack.length; i--; ) {
+    const { x, y } = cellPath[i];
+
+    ctx.save();
+    ctx.translate(
+      x * o.sizeCell + (o.sizeCell - o.sizeDot) / 2,
+      y * o.sizeCell + (o.sizeCell - o.sizeDot) / 2
+    );
+
+    //@ts-ignore
+    ctx.fillStyle = o.colorDots[stack[i]];
+    ctx.strokeStyle = o.colorBorder;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+
+    pathRoundedRect(ctx, o.sizeDot, o.sizeDot, o.sizeBorderRadius);
+
+    ctx.fill();
+    ctx.stroke();
+    ctx.closePath();
+    ctx.restore();
+  }
+};

packages/draw/drawGrid.ts

@@ -1,42 +1,47 @@
-import { Grid, getColor, Color } from "@snk/compute/grid";
+import { getColor } from "@snk/types/grid";
 import { pathRoundedRect } from "./pathRoundedRect";
+import type { Grid, Color } from "@snk/types/grid";
+import type { Point } from "@snk/types/point";
 
 type Options = {
   colorDots: Record<Color, string>;
   colorEmpty: string;
-  colorBorder: string;
+  colorDotBorder: string;
   sizeCell: number;
   sizeDot: number;
-  sizeBorderRadius: number;
+  sizeDotBorderRadius: number;
 };
 
 export const drawGrid = (
   ctx: CanvasRenderingContext2D,
   grid: Grid,
+  cells: Point[] | null,
   o: Options
 ) => {
   for (let x = grid.width; x--; )
     for (let y = grid.height; y--; ) {
-      const c = getColor(grid, x, y);
-      // @ts-ignore
-      const color = c === null ? o.colorEmpty : o.colorDots[c];
-      ctx.save();
-      ctx.translate(
-        x * o.sizeCell + (o.sizeCell - o.sizeDot) / 2,
-        y * o.sizeCell + (o.sizeCell - o.sizeDot) / 2
-      );
+      if (!cells || cells.some((c) => c.x === x && c.y === y)) {
+        const c = getColor(grid, x, y);
+        // @ts-ignore
+        const color = !c ? o.colorEmpty : o.colorDots[c];
+        ctx.save();
+        ctx.translate(
+          x * o.sizeCell + (o.sizeCell - o.sizeDot) / 2,
+          y * o.sizeCell + (o.sizeCell - o.sizeDot) / 2
+        );
 
-      ctx.fillStyle = color;
-      ctx.strokeStyle = o.colorBorder;
-      ctx.lineWidth = 1;
-      ctx.beginPath();
+        ctx.fillStyle = color;
+        ctx.strokeStyle = o.colorDotBorder;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
 
-      pathRoundedRect(ctx, o.sizeDot, o.sizeDot, o.sizeBorderRadius);
+        pathRoundedRect(ctx, o.sizeDot, o.sizeDot, o.sizeDotBorderRadius);
 
-      ctx.fill();
-      ctx.stroke();
-      ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
 
-      ctx.restore();
+        ctx.restore();
+      }
     }
 };

packages/draw/drawSnake.ts

@@ -0,0 +1,69 @@
+import { pathRoundedRect } from "./pathRoundedRect";
+import { snakeToCells } from "@snk/types/snake";
+import type { Snake } from "@snk/types/snake";
+
+type Options = {
+  colorSnake: string;
+  sizeCell: number;
+};
+
+export const drawSnake = (
+  ctx: CanvasRenderingContext2D,
+  snake: Snake,
+  o: Options
+) => {
+  const cells = snakeToCells(snake);
+
+  for (let i = 0; i < cells.length; i++) {
+    const u = (i + 1) * 0.6;
+
+    ctx.save();
+    ctx.fillStyle = o.colorSnake;
+    ctx.translate(cells[i].x * o.sizeCell + u, cells[i].y * o.sizeCell + u);
+    ctx.beginPath();
+    pathRoundedRect(
+      ctx,
+      o.sizeCell - u * 2,
+      o.sizeCell - u * 2,
+      (o.sizeCell - u * 2) * 0.25
+    );
+    ctx.fill();
+    ctx.restore();
+  }
+};
+
+const lerp = (k: number, a: number, b: number) => (1 - k) * a + k * b;
+const clamp = (x: number, a: number, b: number) => Math.max(a, Math.min(b, x));
+
+export const drawSnakeLerp = (
+  ctx: CanvasRenderingContext2D,
+  snake0: Snake,
+  snake1: Snake,
+  k: number,
+  o: Options
+) => {
+  const m = 0.8;
+  const n = snake0.length / 2;
+  for (let i = 0; i < n; i++) {
+    const u = (i + 1) * 0.6 * (o.sizeCell / 16);
+
+    const a = (1 - m) * (i / Math.max(n - 1, 1));
+    const ki = clamp((k - a) / m, 0, 1);
+
+    const x = lerp(ki, snake0[i * 2 + 0], snake1[i * 2 + 0]) - 2;
+    const y = lerp(ki, snake0[i * 2 + 1], snake1[i * 2 + 1]) - 2;
+
+    ctx.save();
+    ctx.fillStyle = o.colorSnake;
+    ctx.translate(x * o.sizeCell + u, y * o.sizeCell + u);
+    ctx.beginPath();
+    pathRoundedRect(
+      ctx,
+      o.sizeCell - u * 2,
+      o.sizeCell - u * 2,
+      (o.sizeCell - u * 2) * 0.25
+    );
+    ctx.fill();
+    ctx.restore();
+  }
+};

packages/draw/drawWorld.ts

@@ -1,63 +1,97 @@
-import { Grid, Color } from "@snk/compute/grid";
-import { pathRoundedRect } from "./pathRoundedRect";
-import { Point } from "@snk/compute/point";
 import { drawGrid } from "./drawGrid";
+import { drawSnake, drawSnakeLerp } from "./drawSnake";
+import type { Grid, Color } from "@snk/types/grid";
+import type { Snake } from "@snk/types/snake";
+import type { Point } from "@snk/types/point";
 
-type Options = {
+export type Options = {
   colorDots: Record<Color, string>;
   colorEmpty: string;
-  colorBorder: string;
+  colorDotBorder: string;
   colorSnake: string;
   sizeCell: number;
   sizeDot: number;
-  sizeBorderRadius: number;
+  sizeDotBorderRadius: number;
 };
 
-export const drawSnake = (
+export const drawStack = (
   ctx: CanvasRenderingContext2D,
-  snake: Point[],
-  o: Options
+  stack: Color[],
+  max: number,
+  width: number,
+  o: { colorDots: Record<Color, string> }
 ) => {
-  for (let i = 0; i < snake.length; i++) {
-    const u = (i + 1) * 0.6;
+  ctx.save();
 
-    ctx.save();
-    ctx.fillStyle = o.colorSnake;
-    ctx.translate(snake[i].x * o.sizeCell + u, snake[i].y * o.sizeCell + u);
-    ctx.beginPath();
-    pathRoundedRect(
-      ctx,
-      o.sizeCell - u * 2,
-      o.sizeCell - u * 2,
-      (o.sizeCell - u * 2) * 0.25
-    );
-    ctx.fill();
-    ctx.restore();
+  const m = width / max;
+
+  for (let i = 0; i < stack.length; i++) {
+    // @ts-ignore
+    ctx.fillStyle = o.colorDots[stack[i]];
+    ctx.fillRect(i * m, 0, m + width * 0.005, 10);
   }
+  ctx.restore();
 };
 
 export const drawWorld = (
   ctx: CanvasRenderingContext2D,
   grid: Grid,
-  snake: Point[],
+  cells: Point[] | null,
+  snake: Snake,
   stack: Color[],
   o: Options
 ) => {
   ctx.save();
 
-  ctx.translate(2 * o.sizeCell, 2 * o.sizeCell);
-  drawGrid(ctx, grid, o);
+  ctx.translate(1 * o.sizeCell, 2 * o.sizeCell);
+  drawGrid(ctx, grid, cells, o);
   drawSnake(ctx, snake, o);
 
   ctx.restore();
 
-  const m = 5;
-
   ctx.save();
+
   ctx.translate(o.sizeCell, (grid.height + 4) * o.sizeCell);
-  for (let i = 0; i < stack.length; i++) {
-    ctx.fillStyle = o.colorDots[stack[i]];
-    ctx.fillRect(i * m, 0, m, 10);
-  }
+
+  const max = grid.data.reduce((sum, x) => sum + +!!x, stack.length);
+  drawStack(ctx, stack, max, grid.width * o.sizeCell, o);
+
+  ctx.restore();
+
+  // ctx.save();
+  // ctx.translate(o.sizeCell + 100, (grid.height + 4) * o.sizeCell + 100);
+  // ctx.scale(0.6, 0.6);
+  // drawCircleStack(ctx, stack, o);
+  // ctx.restore();
+};
+
+export const drawLerpWorld = (
+  ctx: CanvasRenderingContext2D,
+  grid: Grid,
+  cells: Point[] | null,
+  snake0: Snake,
+  snake1: Snake,
+  stack: Color[],
+  k: number,
+  o: Options
+) => {
+  ctx.save();
+
+  ctx.translate(1 * o.sizeCell, 2 * o.sizeCell);
+  drawGrid(ctx, grid, cells, o);
+  drawSnakeLerp(ctx, snake0, snake1, k, o);
+
+  ctx.translate(0, (grid.height + 2) * o.sizeCell);
+
+  const max = grid.data.reduce((sum, x) => sum + +!!x, stack.length);
+  drawStack(ctx, stack, max, grid.width * o.sizeCell, o);
+
   ctx.restore();
 };
+
+export const getCanvasWorldSize = (grid: Grid, o: { sizeCell: number }) => {
+  const width = o.sizeCell * (grid.width + 2);
+  const height = o.sizeCell * (grid.height + 4) + 30;
+
+  return { width, height };
+};

packages/draw/package.json

@@ -2,6 +2,6 @@
   "name": "@snk/draw",
   "version": "1.0.0",
   "dependencies": {
-    "@snk/compute": "1.0.0"
+    "@snk/solver": "1.0.0"
   }
 }

packages/gif-creator/.gitignore

@@ -1 +0,0 @@
-out.gif

packages/gif-creator/README.md

@@ -0,0 +1,5 @@
+# @snk/gif-creator
+
+Generate a gif file from the grid and snake path.
+
+Relies on graphics magic and gifsicle binaries.

packages/gif-creator/__tests__/__snapshots__/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

packages/gif-creator/__tests__/benchmark.ts

@@ -0,0 +1,84 @@
+import * as fs from "fs";
+import { performance } from "perf_hooks";
+import { createSnakeFromCells } from "@snk/types/snake";
+import { realistic as grid } from "@snk/types/__fixtures__/grid";
+import { AnimationOptions, createGif } from "..";
+import { getBestRoute } from "@snk/solver/getBestRoute";
+import { getPathToPose } from "@snk/solver/getPathToPose";
+import type { Options as DrawOptions } from "@snk/draw/drawWorld";
+
+let snake = createSnakeFromCells(
+  Array.from({ length: 4 }, (_, i) => ({ x: i, y: -1 }))
+);
+
+// const chain = [snake];
+// for (let y = -1; y < grid.height; y++) {
+//   snake = nextSnake(snake, 0, 1);
+//   chain.push(snake);
+
+//   for (let x = grid.width - 1; x--; ) {
+//     snake = nextSnake(snake, (y + 100) % 2 ? 1 : -1, 0);
+//     chain.push(snake);
+//   }
+// }
+
+const chain = getBestRoute(grid, snake)!;
+chain.push(...getPathToPose(chain.slice(-1)[0], snake)!);
+
+const drawOptions: DrawOptions = {
+  sizeDotBorderRadius: 2,
+  sizeCell: 16,
+  sizeDot: 12,
+  colorDotBorder: "#1b1f230a",
+  colorDots: { 1: "#9be9a8", 2: "#40c463", 3: "#30a14e", 4: "#216e39" },
+  colorEmpty: "#ebedf0",
+  colorSnake: "purple",
+};
+
+const animationOptions: AnimationOptions = { frameDuration: 100, step: 1 };
+
+(async () => {
+  for (
+    let length = 10;
+    length < chain.length;
+    length += Math.floor((chain.length - 10) / 3 / 10) * 10
+  ) {
+    const stats: number[] = [];
+
+    let buffer: Buffer;
+    const start = Date.now();
+    const chainL = chain.slice(0, length);
+    for (let k = 0; k < 10 && (Date.now() - start < 10 * 1000 || k < 2); k++) {
+      const s = performance.now();
+      buffer = await createGif(
+        grid,
+        null,
+        chainL,
+        drawOptions,
+        animationOptions
+      );
+      stats.push(performance.now() - s);
+    }
+
+    console.log(
+      [
+        "---",
+        `grid dimension:  ${grid.width}x${grid.height}`,
+        `chain length:  ${length}`,
+        `resulting size:  ${(buffer!.length / 1024).toFixed(1)}ko`,
+        `generation duration (mean):  ${(
+          stats.reduce((s, x) => x + s) / stats.length
+        ).toLocaleString(undefined, {
+          maximumFractionDigits: 0,
+        })}ms`,
+        "",
+      ].join("\n"),
+      stats
+    );
+
+    fs.writeFileSync(
+      `__tests__/__snapshots__/benchmark-output-${length}.gif`,
+      buffer!
+    );
+  }
+})();

packages/gif-creator/__tests__/createGif.spec.ts

@@ -1,42 +1,78 @@
-import { createGif } from "..";
-import { generateGrid } from "@snk/compute/generateGrid";
-import { computeBestRun } from "@snk/compute";
+import * as fs from "fs";
+import * as path from "path";
+import { AnimationOptions, createGif } from "..";
+import * as grids from "@snk/types/__fixtures__/grid";
+import { snake3 as snake } from "@snk/types/__fixtures__/snake";
+import { createSnakeFromCells, nextSnake } from "@snk/types/snake";
+import { getBestRoute } from "@snk/solver/getBestRoute";
+import type { Options as DrawOptions } from "@snk/draw/drawWorld";
 
-const drawOptions = {
-  sizeBorderRadius: 2,
-  sizeCell: 16,
-  sizeDot: 12,
-  colorBorder: "#1b1f230a",
+jest.setTimeout(20 * 1000);
+
+const upscale = 1;
+const drawOptions: DrawOptions = {
+  sizeDotBorderRadius: 2 * upscale,
+  sizeCell: 16 * upscale,
+  sizeDot: 12 * upscale,
+  colorDotBorder: "#1b1f230a",
   colorDots: { 1: "#9be9a8", 2: "#40c463", 3: "#30a14e", 4: "#216e39" },
   colorEmpty: "#ebedf0",
   colorSnake: "purple",
 };
 
-const gameOptions = { maxSnakeLength: 5 };
+const animationOptions: AnimationOptions = { frameDuration: 200, step: 1 };
 
-const gifOptions = { delay: 200 };
+const dir = path.resolve(__dirname, "__snapshots__");
 
-it("should generate gif", async () => {
-  const grid = generateGrid(14, 7, { colors: [1, 2, 3, 4], emptyP: 3 });
+try {
+  fs.mkdirSync(dir);
+} catch (err) {}
 
-  const snake = [
-    { x: 4, y: -1 },
-    { x: 3, y: -1 },
-    { x: 2, y: -1 },
-    { x: 1, y: -1 },
-    { x: 0, y: -1 },
-  ];
+for (const key of [
+  "empty",
+  "simple",
+  "corner",
+  "small",
+  "smallPacked",
+] as const)
+  it(`should generate ${key} gif`, async () => {
+    const grid = grids[key];
 
-  const commands = computeBestRun(grid, snake, gameOptions).slice(0, 9);
+    const chain = [snake, ...getBestRoute(grid, snake)!];
 
-  const gif = await createGif(
-    grid,
-    snake,
-    commands,
-    drawOptions,
-    gameOptions,
-    gifOptions
+    const gif = await createGif(
+      grid,
+      null,
+      chain,
+      drawOptions,
+      animationOptions
+    );
+
+    expect(gif).toBeDefined();
+
+    fs.writeFileSync(path.resolve(dir, key + ".gif"), gif);
+  });
+
+it(`should generate swipper`, async () => {
+  const grid = grids.smallFull;
+  let snk = createSnakeFromCells(
+    Array.from({ length: 6 }, (_, i) => ({ x: i, y: -1 }))
   );
 
+  const chain = [snk];
+  for (let y = -1; y < grid.height; y++) {
+    snk = nextSnake(snk, 0, 1);
+    chain.push(snk);
+
+    for (let x = grid.width - 1; x--; ) {
+      snk = nextSnake(snk, (y + 100) % 2 ? 1 : -1, 0);
+      chain.push(snk);
+    }
+  }
+
+  const gif = await createGif(grid, null, chain, drawOptions, animationOptions);
+
   expect(gif).toBeDefined();
+
+  fs.writeFileSync(path.resolve(dir, "swipper.gif"), gif);
 });

packages/gif-creator/__tests__/dev.ts

@@ -1,35 +0,0 @@
-import { createGif } from "..";
-import { generateGrid } from "@snk/compute/generateGrid";
-import { computeBestRun } from "@snk/compute";
-
-const drawOptions = {
-  sizeBorderRadius: 2,
-  sizeCell: 16,
-  sizeDot: 12,
-  colorBorder: "#1b1f230a",
-  colorDots: { 1: "#9be9a8", 2: "#40c463", 3: "#30a14e", 4: "#216e39" },
-  colorEmpty: "#ebedf0",
-  colorSnake: "purple",
-};
-
-const gameOptions = { maxSnakeLength: 5 };
-
-const gifOptions = { delay: 20 };
-
-const grid = generateGrid(42, 7, { colors: [1, 2, 3, 4], emptyP: 3 });
-
-const snake = [
-  { x: 4, y: -1 },
-  { x: 3, y: -1 },
-  { x: 2, y: -1 },
-  { x: 1, y: -1 },
-  { x: 0, y: -1 },
-];
-
-const commands = computeBestRun(grid, snake, gameOptions);
-
-createGif(grid, snake, commands, drawOptions, gameOptions, gifOptions).then(
-  (buffer) => {
-    process.stdout.write(buffer);
-  }
-);

packages/gif-creator/index.ts

@@ -1,92 +1,99 @@
-import * as fs from "fs";
-import * as path from "path";
+import fs from "fs";
+import path from "path";
+import { execFileSync } from "child_process";
 import { createCanvas } from "canvas";
-import { Grid, copyGrid, Color } from "@snk/compute/grid";
-import { Point } from "@snk/compute/point";
-import { copySnake } from "@snk/compute/snake";
-import { drawWorld } from "@snk/draw/drawWorld";
-import { step } from "@snk/compute/step";
-import * as tmp from "tmp";
+import { Grid, copyGrid, Color } from "@snk/types/grid";
+import { Snake } from "@snk/types/snake";
+import {
+  Options as DrawOptions,
+  drawLerpWorld,
+  getCanvasWorldSize,
+} from "@snk/draw/drawWorld";
+import type { Point } from "@snk/types/point";
+import { step } from "@snk/solver/step";
+import tmp from "tmp";
+import gifsicle from "gifsicle";
 // @ts-ignore
-import * as execa from "execa";
-
-export const createGif = async (
-  grid0: Grid,
-  snake0: Point[],
-  commands: Point[],
-  drawOptions: Parameters<typeof drawWorld>[4],
-  gameOptions: Parameters<typeof step>[4],
-  gifOptions: { delay: number }
-) => {
-  const grid = copyGrid(grid0);
-  const snake = copySnake(snake0);
-  const stack: Color[] = [];
-
-  const width = drawOptions.sizeCell * (grid.width + 4);
-  const height = drawOptions.sizeCell * (grid.height + 4) + 100;
+import GIFEncoder from "gif-encoder-2";
 
+const withTmpDir = async <T>(
+  handler: (dir: string) => Promise<T>
+): Promise<T> => {
   const { name: dir, removeCallback: cleanUp } = tmp.dirSync({
     unsafeCleanup: true,
   });
 
-  const canvas = createCanvas(width, height);
-  const ctx = canvas.getContext("2d")!;
-
-  const writeImage = (i: number) => {
-    ctx.clearRect(0, 0, 99999, 99999);
-    ctx.fillStyle = "#fff";
-    ctx.fillRect(0, 0, 99999, 99999);
-    drawWorld(ctx, grid, snake, stack, drawOptions);
-
-    const buffer = canvas.toBuffer("image/png", {
-      compressionLevel: 0,
-      filters: canvas.PNG_FILTER_NONE,
-    });
-
-    const fileName = path.join(dir, `${i.toString().padStart(4, "0")}.png`);
-
-    fs.writeFileSync(fileName, buffer);
-  };
-
   try {
-    writeImage(0);
+    return await handler(dir);
+  } finally {
+    cleanUp();
+  }
+};
 
-    for (let i = 0; i < commands.length; i++) {
-      step(grid, snake, stack, commands[i], gameOptions);
-      writeImage(i + 1);
+export type AnimationOptions = { frameDuration: number; step: number };
+
+export const createGif = async (
+  grid0: Grid,
+  cells: Point[] | null,
+  chain: Snake[],
+  drawOptions: DrawOptions,
+  animationOptions: AnimationOptions
+) =>
+  withTmpDir(async (dir) => {
+    const { width, height } = getCanvasWorldSize(grid0, drawOptions);
+
+    const canvas = createCanvas(width, height);
+    const ctx = canvas.getContext("2d")!;
+
+    const grid = copyGrid(grid0);
+    const stack: Color[] = [];
+
+    const encoder = new GIFEncoder(width, height, "neuquant", true);
+    encoder.setRepeat(0);
+    encoder.setDelay(animationOptions.frameDuration);
+    encoder.start();
+
+    for (let i = 0; i < chain.length; i += 1) {
+      const snake0 = chain[i];
+      const snake1 = chain[Math.min(chain.length - 1, i + 1)];
+      step(grid, stack, snake0);
+
+      for (let k = 0; k < animationOptions.step; k++) {
+        ctx.clearRect(0, 0, width, height);
+        ctx.fillStyle = "#fff";
+        ctx.fillRect(0, 0, width, height);
+        drawLerpWorld(
+          ctx,
+          grid,
+          cells,
+          snake0,
+          snake1,
+          stack,
+          k / animationOptions.step,
+          drawOptions
+        );
+
+        encoder.addFrame(ctx);
+      }
     }
 
     const outFileName = path.join(dir, "out.gif");
     const optimizedFileName = path.join(dir, "out.optimized.gif");
 
-    await execa(
-      "gm",
-      [
-        "convert",
-        ["-loop", "0"],
-        ["-delay", gifOptions.delay.toString()],
-        ["-dispose", "2"],
-        // ["-layers", "OptimizeFrame"],
-        ["-compress", "LZW"],
-        ["-strip"],
+    encoder.finish();
+    fs.writeFileSync(outFileName, encoder.out.getData());
 
-        path.join(dir, "*.png"),
-        outFileName,
-      ].flat()
-    );
-
-    await execa(
-      "gifsicle",
+    execFileSync(
+      gifsicle,
       [
         //
         "--optimize=3",
+        "--color-method=diversity",
+        "--colors=18",
         outFileName,
         ["--output", optimizedFileName],
       ].flat()
     );
 
     return fs.readFileSync(optimizedFileName);
-  } finally {
-    cleanUp();
-  }
-};
+  });

packages/gif-creator/package.json

@@ -2,18 +2,19 @@
   "name": "@snk/gif-creator",
   "version": "1.0.0",
   "dependencies": {
-    "@snk/compute": "1.0.0",
     "@snk/draw": "1.0.0",
-    "canvas": "2.6.1",
-    "execa": "4.0.3",
+    "@snk/solver": "1.0.0",
+    "canvas": "2.10.2",
+    "gif-encoder-2": "1.0.5",
+    "gifsicle": "5.3.0",
     "tmp": "0.2.1"
   },
   "devDependencies": {
-    "@types/execa": "2.0.0",
-    "@types/tmp": "0.2.0",
-    "@zeit/ncc": "0.22.3"
+    "@types/gifsicle": "5.2.0",
+    "@types/tmp": "0.2.3",
+    "@vercel/ncc": "0.34.0"
   },
   "scripts": {
-    "dev": "ncc run __tests__/dev.ts --quiet | tail -n +2 > out.gif "
+    "benchmark": "ncc run __tests__/benchmark.ts --quiet"
   }
 }

packages/github-user-contribution-service/README.md

@@ -0,0 +1,3 @@
+# @snk/github-user-contribution-service
+
+Expose github-user-contribution as an endpoint, using vercel.sh

packages/github-user-contribution-service/api/github-user-contribution/[userName].ts

@@ -0,0 +1,16 @@
+import { getGithubUserContribution } from "@snk/github-user-contribution";
+import { VercelRequest, VercelResponse } from "@vercel/node";
+
+export default async (req: VercelRequest, res: VercelResponse) => {
+  const { userName } = req.query;
+
+  try {
+    res.setHeader("Access-Control-Allow-Origin", "https://platane.github.io");
+    res.statusCode = 200;
+    res.json(await getGithubUserContribution(userName as string));
+  } catch (err) {
+    console.error(err);
+    res.statusCode = 500;
+    res.end();
+  }
+};

packages/github-user-contribution-service/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@snk/github-user-contribution-service",
+  "version": "1.0.0",
+  "dependencies": {
+    "@snk/github-user-contribution": "1.0.0",
+    "@vercel/node": "2.6.1"
+  }
+}

packages/github-user-contribution-service/vercel.json

@@ -0,0 +1,5 @@
+{
+  "github": {
+    "silent": true
+  }
+}

packages/github-user-contribution/README.md

@@ -0,0 +1,29 @@
+# @snk/github-user-contribution
+
+Get the github user contribution graph
+
+## Usage
+
+```js
+const { cells, colorScheme } = await getGithubUserContribution("platane");
+
+// colorScheme = [
+//    "#ebedf0",
+//    "#9be9a8",
+//    ...
+// ]
+// cells = [
+//    {
+//      x: 3,
+//      y: 0,
+//      count: 3,
+//      color: '#ebedf0',
+//      date:'2019-01-18'
+//    },
+//    ...
+// ]
+```
+
+## Implementation
+
+Based on the html page. Which is very unstable. We might switch to using github api but afaik it's a bit complex.