aaaa

aaaaa
2020-07-19 19:15:41 +02:00 · 2020-07-19 19:13:17 +02:00 · 2020-07-19 19:12:05 +02:00 · 2020-07-19 19:09:26 +02:00 · 2020-07-19 18:51:08 +02:00 · 2020-07-19 18:47:45 +02:00
156 changed files with 182077 additions and 37247 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,29 @@
+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 }}
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,118 +1,27 @@
 name: main

-on: [push]
+on: [push, pull_request]

 jobs:
  test:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
+      # - run: sudo apt-get install gifsicle graphicsmagick
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14

-      - run: bun install --frozen-lockfile
+      - uses: bahmutov/npm-install@v1

-      - run: npm run type
-      - run: npm run lint
-      - run: bun test
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      # - run: yarn type
+      # - run: yarn lint
+      # - run: yarn test --ci
+      # - run: yarn build:lib

-  test-action:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - 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: ./
+      - uses: actions/github-contribution-grid-snake@v1
        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

-      - 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@v4.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@v4
-      - uses: oven-sh/setup-bun@v1
-
-      - run: bun install --frozen-lockfile
-
-      - name: build svg-only action
-        run: |
-          npm run 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
-            dist/github-contribution-grid-snake-blue.svg?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
-
-      - 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-blue.svg
-
-      - uses: crazy-max/ghaction-github-pages@v4.1.0
-        with:
-          target_branch: output-svg-only
-          build_dir: dist
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  deploy-ghpages:
-    runs-on: ubuntu-latest
-    permissions:
-      pages: write
-      id-token: write
-    steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
-
-      - run: bun install --frozen-lockfile
-
-      - run: npm run build:demo
-        env:
-          GITHUB_USER_CONTRIBUTION_API_ENDPOINT: https://github-user-contribution.platane.workers.dev/github-user-contribution/
-
-      - uses: actions/upload-pages-artifact@v3
-        with:
-          path: packages/demo/dist
-
-      - uses: actions/deploy-pages@v4
-        if: success() && github.ref == 'refs/heads/main'
-
-      - run: bunx wrangler deploy
-        if: success() && github.ref == 'refs/heads/main'
-        working-directory: packages/github-user-contribution-service
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+      - run: ls
--- a/.github/workflows/manual-run.yml
+++ b/.github/workflows/manual-run.yml
@@ -1,47 +0,0 @@
-name: manual run
-
-on:
-  workflow_dispatch:
-
-jobs:
-  generate:
-    permissions:
-      contents: write
-    runs-on: ubuntu-latest
-    timeout-minutes: 5
-
-    steps:
-      - uses: Platane/snk/svg-only@v3
-        with:
-          github_user_name: ${{ github.repository_owner }}
-          outputs: |
-            dist/only-svg/github-contribution-grid-snake.svg
-            dist/only-svg/github-contribution-grid-snake-dark.svg?palette=github-dark
-            dist/only-svg/github-contribution-grid-snake-blue.svg?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
-
-      - uses: Platane/snk@v3
-        with:
-          github_user_name: ${{ github.repository_owner }}
-          outputs: |
-            dist/docker/github-contribution-grid-snake.svg
-            dist/docker/github-contribution-grid-snake-dark.svg?palette=github-dark
-            dist/docker/github-contribution-grid-snake.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
-
-      - name: ensure the generated file exists
-        run: |
-          ls dist
-          test -f dist/only-svg/github-contribution-grid-snake.svg
-          test -f dist/only-svg/github-contribution-grid-snake-dark.svg
-          test -f dist/only-svg/github-contribution-grid-snake-blue.svg
-
-          test -f dist/docker/github-contribution-grid-snake.svg
-          test -f dist/docker/github-contribution-grid-snake-dark.svg
-          test -f dist/docker/github-contribution-grid-snake.gif
-
-      - name: push github-contribution-grid-snake.svg to the output branch
-        uses: crazy-max/ghaction-github-pages@v4.1.0
-        with:
-          target_branch: manual-run-output
-          build_dir: dist
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,86 +0,0 @@
-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@v4
-
-      - uses: docker/setup-qemu-action@v2
-
-      - uses: docker/setup-buildx-action@v2
-
-      - uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: build and publish the docker image
-        uses: docker/build-push-action@v4
-        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: oven-sh/setup-bun@v1
-
-      - run: bun install --frozen-lockfile
-
-      - name: build svg-only action
-        run: |
-          npm run build:action
-          rm -r svg-only/dist
-          mv packages/action/dist svg-only/dist
-
-      - name: bump package version
-        run: npm 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.15.0
-        with:
-          tag: v${{ github.event.inputs.version }}
-          body: ${{ github.event.inputs.description }}
-          prerelease: ${{ steps.push-tags.outputs.prerelease }}
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,5 @@
 node_modules
 npm-debug.log*
+yarn-error.log*
 dist
-!svg-only/dist
-build
-.env
-.wrangler
-.dev.vars
+build
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +0,0 @@
-20
--- a/29
+++ b/29
@@ -1,27 +1,10 @@
-FROM oven/bun:1.2.2-slim as builder
+FROM node:14-slim

-WORKDIR /app
+RUN    apt-get update \
+    && apt-get install -y --no-install-recommends gifsicle graphicsmagick \
+    && rm -rf /var/lib/apt/lists/* 

-COPY package.json bun.lock ./
+COPY packages/action/dist/* ./github-contribution-grid-snake

-COPY tsconfig.json ./
+CMD ["node", "github-contribution-grid-snake/index.js"]

-COPY packages packages
-
-RUN bun install --no-cache
-
-RUN bun run build:action
-
-
-
-
-
-FROM oven/bun:1.2.2-slim
-
-WORKDIR /action-release
-
-RUN bun add canvas@3.1.0 gifsicle@5.3.0 --no-lockfile --no-cache
-
-COPY --from=builder /app/packages/action/dist/ /action-release/
-
-CMD ["bun", "/action-release/index.js"]
--- a/README.md
+++ b/README.md
@@ -1,93 +1,3 @@
 # snk

-[![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
-
-<picture>
-  <source
-    media="(prefers-color-scheme: dark)"
-    srcset="https://raw.githubusercontent.com/platane/snk/output/github-contribution-grid-snake-dark.svg"
-  />
-  <source
-    media="(prefers-color-scheme: light)"
-    srcset="https://raw.githubusercontent.com/platane/snk/output/github-contribution-grid-snake.svg"
-  />
-  <img
-    alt="github contribution grid snake animation"
-    src="https://raw.githubusercontent.com/platane/snk/output/github-contribution-grid-snake.svg"
-  />
-</picture>
-
-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@v3
-  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#L26-L33)
-
-If you are only interested in generating a svg, consider using this faster action: `uses: Platane/snk/svg-only@v3`
-
-**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.
-
-```html
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="github-snake-dark.svg" />
-  <source media="(prefers-color-scheme: light)" srcset="github-snake.svg" />
-  <img alt="github-snake" src="github-snake.svg" />
-</picture>
-```
-
-**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)
+Generates a snake game from a github user contributions grid and output a screen capture as gif
--- a/action.yml
+++ b/action.yml
@@ -1,34 +1,23 @@
 name: "generate-snake-game-from-github-contribution-grid"
-description: "Generates a snake game from a github user contributions grid. Output the animation as gif or svg"
+description: "Generates a snake game from a github user contributions grid and output a screen capture as gif"
 author: "platane"

+outputs:
+  gif_out_path:
+    description: "path of the generated gif"
+
 runs:
-  using: docker
-  image: docker://platane/snk@sha256:96390294299275740e5963058c9784c60c5393b3b8b16082dcf41b240db791f9
+  using: "docker"
+  image: "Dockerfile"
+  args:
+    - ${{ inputs.github_user_name }}
+    - ${{ inputs.gif_out_path }}

 inputs:
  github_user_name:
    description: "github user name"
    required: true
-  github_token:
-    description: "github token used to fetch the contribution calendar. Default to the action token if empty."
+  gif_out_path:
+    description: "path of the generated gif"
    required: false
-    default: ${{ github.token }}
-  outputs:
-    required: false
-    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
+    default: "./github-contribution-grid-snake.gif"
--- a/bun.lock
+++ b/bun.lock
--- a/jest.config.js
+++ b/jest.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  testMatch: ["**/__tests__/**/?(*.)+(spec|test).ts"],
+};
--- a/package.json
+++ b/package.json
@@ -1,22 +1,24 @@
 {
  "name": "snk",
-  "description": "Generates a snake game from a github user contributions grid",
-  "version": "3.3.0",
+  "description": "Generates a snake game from a github user contributions grid and output a screen capture as gif",
+  "version": "1.0.0",
  "private": true,
  "repository": "github:platane/snk",
  "devDependencies": {
-    "@types/bun": "1.2.2",
-    "prettier": "3.5.1",
-    "typescript": "5.7.3"
+    "@types/jest": "26.0.4",
+    "jest": "26.1.0",
+    "prettier": "2.0.5",
+    "ts-jest": "26.1.2",
+    "typescript": "3.9.6"
  },
  "workspaces": [
-    "packages/*"
+    "packages/**"
  ],
  "scripts": {
    "type": "tsc --noEmit",
-    "lint": "prettier -c '**/*.{ts,js,json,md,yml,yaml}' '!packages/*/dist/**' '!svg-only/dist/**'",
-    "dev:demo": "( cd packages/demo ; npm run dev )",
-    "build:demo": "( cd packages/demo ; npm run build )",
-    "build:action": "( cd packages/action ; npm run build )"
+    "lint": "yarn prettier -c '**/*.{ts,js,json,md,yml,yaml}' '!packages/action/dist/**' '!packages/demo/dist/**' '!packages/demo/webpack.config.js'",
+    "test": "jest --verbose --passWithNoTests --no-cache",
+    "build:demo": "( cd packages/demo ; yarn build )",
+    "build:action": "( cd packages/action ; yarn build )"
  }
 }
--- a/packages/action/.gitignore
+++ b/packages/action/.gitignore
@@ -0,0 +1,3 @@
+!dist
+!dist/build
+out.gif
--- a/packages/action/README.md
+++ b/packages/action/README.md
@@ -1,13 +0,0 @@
-# @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 )
--- a/packages/action/tests/snapshots/.gitignore
+++ b/packages/action/tests/snapshots/.gitignore
@@ -1,3 +0,0 @@
-*
-!.gitignore
-!*.snap
--- a/packages/action/tests/snapshots/outputsOptions.spec.ts.snap
+++ b/packages/action/tests/snapshots/outputsOptions.spec.ts.snap
@@ -1,120 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-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": {
-      "colorDotBorder": "#1b1f230a",
-      "colorDots": [
-        "#a00",
-        "#a11",
-        "#a22",
-        "#a33",
-        "#a44",
-      ],
-      "colorEmpty": "#a00",
-      "colorSnake": "orange",
-    },
-    "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": undefined,
-    "sizeCell": 16,
-    "sizeDot": 12,
-    "sizeDotBorderRadius": 2,
-  },
-  "filename": "path/to/out.gif",
-  "format": "gif",
-}
-`;
--- a/packages/action/tests/dev.ts
+++ b/packages/action/tests/dev.ts
@@ -0,0 +1,5 @@
+import { generateContributionSnake } from "../generateContributionSnake";
+
+generateContributionSnake("platane").then((buffer) => {
+  process.stdout.write(buffer);
+});
--- a/packages/action/tests/generateContributionSnake.spec.ts
+++ b/packages/action/tests/generateContributionSnake.spec.ts
@@ -1,45 +0,0 @@
-import * as fs from "fs";
-import * as path from "path";
-import { it, expect } from "bun:test";
-import { generateContributionSnake } from "../generateContributionSnake";
-import { parseOutputsOption } from "../outputsOptions";
-
-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, {
-      githubToken: process.env.GITHUB_TOKEN!,
-    });
-
-    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]!);
-  }),
-  { timeout: 2 * 60 * 1000 },
-);
--- a/packages/action/tests/outputsOptions.spec.ts
+++ b/packages/action/tests/outputsOptions.spec.ts
@@ -1,61 +0,0 @@
-import { parseEntry } from "../outputsOptions";
-import { it, expect } from "bun:test";
-
-it("should parse options as json", () => {
-  expect(
-    parseEntry(`/out.svg       {"color_snake":"yellow"}`)?.drawOptions,
-  ).toHaveProperty("colorSnake", "yellow");
-
-  expect(
-    parseEntry(`/out.svg?{"color_snake":"yellow"}`)?.drawOptions,
-  ).toHaveProperty("colorSnake", "yellow");
-
-  expect(
-    parseEntry(`/out.svg?{"color_dots":["#000","#111","#222","#333","#444"]}`)
-      ?.drawOptions.colorDots,
-  ).toEqual(["#000", "#111", "#222", "#333", "#444"]);
-});
-
-it("should parse options as searchparams", () => {
-  expect(parseEntry(`/out.svg?color_snake=yellow`)?.drawOptions).toHaveProperty(
-    "colorSnake",
-    "yellow",
-  );
-
-  expect(
-    parseEntry(`/out.svg?color_dots=#000,#111,#222,#333,#444`)?.drawOptions
-      .colorDots,
-  ).toEqual(["#000", "#111", "#222", "#333", "#444"]);
-});
-
-it("should parse filename", () => {
-  expect(parseEntry(`/a/b/c.svg?{"color_snake":"yellow"}`)).toHaveProperty(
-    "filename",
-    "/a/b/c.svg",
-  );
-  expect(
-    parseEntry(`/a/b/out.svg?.gif.svg?{"color_snake":"yellow"}`),
-  ).toHaveProperty("filename", "/a/b/out.svg?.gif.svg");
-
-  expect(
-    parseEntry(`/a/b/{[-1].svg?.gif.svg?{"color_snake":"yellow"}`),
-  ).toHaveProperty("filename", "/a/b/{[-1].svg?.gif.svg");
-});
-
-[
-  // default
-  "path/to/out.gif",
-
-  // overwrite colors (search params)
-  "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444",
-
-  // overwrite colors (json)
-  `/out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]}`,
-
-  // overwrite dark colors
-  "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444&dark_color_dots=#a00,#a11,#a22,#a33,#a44",
-].forEach((entry) =>
-  it(`should parse ${entry}`, () => {
-    expect(parseEntry(entry)).toMatchSnapshot();
-  }),
-);
--- a/packages/action/dist/build/Release/canvas.node
+++ b/packages/action/dist/build/Release/canvas.node
--- a/packages/action/dist/build/Release/libcairo.so.2
+++ b/packages/action/dist/build/Release/libcairo.so.2
--- a/packages/action/dist/build/Release/libcroco-0.6.so.3
+++ b/packages/action/dist/build/Release/libcroco-0.6.so.3
--- a/packages/action/dist/build/Release/libexpat.so.1
+++ b/packages/action/dist/build/Release/libexpat.so.1
--- a/packages/action/dist/build/Release/libffi.so.6
+++ b/packages/action/dist/build/Release/libffi.so.6
--- a/packages/action/dist/build/Release/libfontconfig.so.1
+++ b/packages/action/dist/build/Release/libfontconfig.so.1
--- a/packages/action/dist/build/Release/libfreetype.so.6
+++ b/packages/action/dist/build/Release/libfreetype.so.6
--- a/packages/action/dist/build/Release/libfribidi.so.0
+++ b/packages/action/dist/build/Release/libfribidi.so.0
--- a/packages/action/dist/build/Release/libgdk_pixbuf-2.0.so.0
+++ b/packages/action/dist/build/Release/libgdk_pixbuf-2.0.so.0
--- a/packages/action/dist/build/Release/libgif.so.7
+++ b/packages/action/dist/build/Release/libgif.so.7
--- a/packages/action/dist/build/Release/libgio-2.0.so.0
+++ b/packages/action/dist/build/Release/libgio-2.0.so.0
--- a/packages/action/dist/build/Release/libglib-2.0.so.0
+++ b/packages/action/dist/build/Release/libglib-2.0.so.0
--- a/packages/action/dist/build/Release/libgmodule-2.0.so.0
+++ b/packages/action/dist/build/Release/libgmodule-2.0.so.0
--- a/packages/action/dist/build/Release/libgobject-2.0.so.0
+++ b/packages/action/dist/build/Release/libgobject-2.0.so.0
--- a/packages/action/dist/build/Release/libgthread-2.0.so.0
+++ b/packages/action/dist/build/Release/libgthread-2.0.so.0
--- a/packages/action/dist/build/Release/libharfbuzz.so.0
+++ b/packages/action/dist/build/Release/libharfbuzz.so.0
--- a/packages/action/dist/build/Release/libjpeg.so.62
+++ b/packages/action/dist/build/Release/libjpeg.so.62
--- a/packages/action/dist/build/Release/libpango-1.0.so.0
+++ b/packages/action/dist/build/Release/libpango-1.0.so.0
--- a/packages/action/dist/build/Release/libpangocairo-1.0.so.0
+++ b/packages/action/dist/build/Release/libpangocairo-1.0.so.0
--- a/packages/action/dist/build/Release/libpangoft2-1.0.so.0
+++ b/packages/action/dist/build/Release/libpangoft2-1.0.so.0
--- a/packages/action/dist/build/Release/libpcre.so.1
+++ b/packages/action/dist/build/Release/libpcre.so.1
--- a/packages/action/dist/build/Release/libpixman-1.so.0
+++ b/packages/action/dist/build/Release/libpixman-1.so.0
--- a/packages/action/dist/build/Release/libpng16.so.16
+++ b/packages/action/dist/build/Release/libpng16.so.16
--- a/packages/action/dist/build/Release/librsvg-2.so.2
+++ b/packages/action/dist/build/Release/librsvg-2.so.2
--- a/packages/action/dist/build/Release/libstdc++.so.6
+++ b/packages/action/dist/build/Release/libstdc++.so.6
--- a/packages/action/dist/build/Release/libxml2.so.2
+++ b/packages/action/dist/build/Release/libxml2.so.2
--- a/packages/action/dist/build/Release/libz.so.1
+++ b/packages/action/dist/build/Release/libz.so.1
--- a/packages/action/dist/index.js
+++ b/packages/action/dist/index.js
--- a/packages/action/dist/index1.js
+++ b/packages/action/dist/index1.js
@@ -0,0 +1,84 @@
+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
+}
--- a/packages/action/dist/xhr-sync-worker.js
+++ b/packages/action/dist/xhr-sync-worker.js
@@ -0,0 +1,60 @@
+"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);
+    });
+  }
+});
--- a/packages/action/generateContributionSnake.ts
+++ b/packages/action/generateContributionSnake.ts
@@ -1,52 +1,56 @@
-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";
+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";

-export const generateContributionSnake = async (
-  userName: string,
-  outputs: ({
-    format: "svg" | "gif";
-    drawOptions: DrawOptions;
-    animationOptions: AnimationOptions;
-  } | null)[],
-  options: { githubToken: string },
-) => {
-  console.log("🎣 fetching github user contribution");
-  const cells = await getGithubUserContribution(userName, options);
+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 = userContributionToGrid(cells);
-  const snake = snake4;
+  const grid = generateEmptyGrid(width, height);
+  for (const c of cells) setColor(grid, c.x, c.y, c.k === 0 ? null : c.k);

-  console.log("📡 computing best route");
-  const chain = getBestRoute(grid, snake)!;
-  chain.push(...getPathToPose(chain.slice(-1)[0], snake)!);
-
-  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 grid;
+};
+
+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 buffer;
 };
--- a/packages/action/index.ts
+++ b/packages/action/index.ts
@@ -1,36 +1,25 @@
 import * as fs from "fs";
-import * as path from "path";
 import * as core from "@actions/core";
-import { parseOutputsOption } from "./outputsOptions";
+import { generateContributionSnake } from "./generateContributionSnake";

 (async () => {
  try {
-    const userName = core.getInput("github_user_name");
-    const outputs = parseOutputsOption(
-      core.getMultilineInput("outputs") ?? [
-        core.getInput("gif_out_path"),
-        core.getInput("svg_out_path"),
-      ],
-    );
-    const githubToken =
-      process.env.GITHUB_TOKEN ?? core.getInput("github_token");
+    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 { generateContributionSnake } = await import(
-      "./generateContributionSnake"
-    );
-    const results = await generateContributionSnake(userName, outputs, {
-      githubToken,
-    });
-
-    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) {
+    const buffer = await generateContributionSnake(core.getInput("user_name"));
+    fs.writeFileSync(core.getInput("gif_out_path"), buffer);
+  } catch (e) {
    core.setFailed(`Action failed with "${e.message}"`);
  }
 })();
--- a/packages/action/outputsOptions.ts
+++ b/packages/action/outputsOptions.ts
@@ -1,86 +0,0 @@
-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"],
-    dark: palettes["default"].dark && { ...palettes["default"].dark },
-  };
-  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 };
-    }
-  }
-
-  {
-    const dark_palette = palettes[sp.get("dark_palette")!];
-    if (dark_palette) {
-      const clone = { ...dark_palette, dark: undefined };
-      drawOptions.dark = clone;
-    }
-  }
-
-  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 = {
-      colorDotBorder: drawOptions.colorDotBorder,
-      colorSnake: drawOptions.colorSnake,
-      ...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,
-  };
-};
--- a/packages/action/package.json
+++ b/packages/action/package.json
@@ -2,17 +2,15 @@
  "name": "@snk/action",
  "version": "1.0.0",
  "dependencies": {
-    "@actions/core": "1.11.1",
+    "@actions/core": "1.2.4",
    "@snk/gif-creator": "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"
+    "@snk/github-user-contribution": "1.0.0"
  },
  "devDependencies": {
-    "@vercel/ncc": "0.38.3"
+    "@zeit/ncc": "0.22.3"
  },
  "scripts": {
-    "build": "ncc build --external canvas --external gifsicle --out dist ./index.ts"
+    "build": "ncc build ./index.ts --out dist",
+    "dev": "ncc run __tests__/dev.ts --quiet | tail -n +2 > out.gif "
  }
 }
--- a/packages/action/palettes.ts
+++ b/packages/action/palettes.ts
@@ -1,27 +0,0 @@
-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"];
-palettes["default"] = palettes["github"];
--- a/packages/action/userContributionToGrid.ts
+++ b/packages/action/userContributionToGrid.ts
@@ -1,16 +0,0 @@
-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;
-};
--- a/packages/compute/tests/grid.spec.ts
+++ b/packages/compute/tests/grid.spec.ts
@@ -0,0 +1,26 @@
+import { generateEmptyGrid } from "../generateGrid";
+import { setColor, getColor, isInside } from "../grid";
+
+it("should set / get cell", () => {
+  const grid = generateEmptyGrid(2, 3);
+
+  expect(getColor(grid, 0, 1)).toBe(null);
+
+  setColor(grid, 0, 1, 1);
+
+  expect(getColor(grid, 0, 1)).toBe(1);
+});
+
+test.each([
+  [0, 1, true],
+  [1, 2, true],
+
+  [-1, 1, false],
+  [0, -1, false],
+  [2, 1, false],
+  [0, 3, false],
+])("isInside", (x, y, output) => {
+  const grid = generateEmptyGrid(2, 3);
+
+  expect(isInside(grid, x, y)).toBe(output);
+});
--- a/packages/compute/tests/snake.spec.ts
+++ b/packages/compute/tests/snake.spec.ts
@@ -0,0 +1,24 @@
+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);
+});
--- a/packages/compute/tests/step.spec.ts
+++ b/packages/compute/tests/step.spec.ts
@@ -0,0 +1,94 @@
+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]);
+});
--- a/packages/compute/generateGrid.ts
+++ b/packages/compute/generateGrid.ts
@@ -0,0 +1,27 @@
+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;
+};
--- a/packages/compute/grid.ts
+++ b/packages/compute/grid.ts
@@ -0,0 +1,30 @@
+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;
+};
--- a/packages/compute/index.ts
+++ b/packages/compute/index.ts
@@ -0,0 +1,44 @@
+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;
+};
--- a/packages/compute/package.json
+++ b/packages/compute/package.json
@@ -0,0 +1,4 @@
+{
+  "name": "@snk/compute",
+  "version": "1.0.0"
+}
--- a/packages/compute/point.ts
+++ b/packages/compute/point.ts
@@ -5,6 +5,4 @@ export const around4 = [
  { x: 0, y: -1 },
  { x: -1, y: 0 },
  { x: 0, y: 1 },
-] as const;
-
-export const pointEquals = (a: Point, b: Point) => a.x === b.x && a.y === b.y;
+];
--- a/packages/compute/snake.ts
+++ b/packages/compute/snake.ts
@@ -0,0 +1,24 @@
+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 }));
--- a/packages/compute/step.ts
+++ b/packages/compute/step.ts
@@ -0,0 +1,48 @@
+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);
+};
--- a/packages/demo/.gitignore
+++ b/packages/demo/.gitignore
@@ -0,0 +1 @@
+webpack.config.js
--- a/packages/demo/README.md
+++ b/packages/demo/README.md
@@ -1,3 +0,0 @@
-# @snk/demo
-
-Contains various demo to test and validate some pieces of the algorithm.
--- a/packages/demo/canvas.ts
+++ b/packages/demo/canvas.ts
@@ -1,99 +0,0 @@
-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,
-  };
-};
--- a/packages/demo/demo.getBestRoute.ts
+++ b/packages/demo/demo.getBestRoute.ts
@@ -1,41 +0,0 @@
-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();
-});
--- a/packages/demo/demo.getBestTunnel.ts
+++ b/packages/demo/demo.getBestTunnel.ts
@@ -1,80 +0,0 @@
-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();
--- a/packages/demo/demo.getPathTo.ts
+++ b/packages/demo/demo.getPathTo.ts
@@ -1,59 +0,0 @@
-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);
--- a/packages/demo/demo.getPathToPose.ts
+++ b/packages/demo/demo.getPathToPose.ts
@@ -1,41 +0,0 @@
-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);
--- a/packages/demo/demo.interactive.ts
+++ b/packages/demo/demo.interactive.ts
@@ -1,316 +0,0 @@
-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";
--- a/packages/demo/demo.interactive.worker.ts
+++ b/packages/demo/demo.interactive.worker.ts
@@ -1,17 +0,0 @@
-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);
--- a/packages/demo/demo.json
+++ b/packages/demo/demo.json
@@ -1,9 +0,0 @@
-[
-  "interactive",
-  "getBestRoute",
-  "getBestTunnel",
-  "outside",
-  "getPathToPose",
-  "getPathTo",
-  "svg"
-]
--- a/packages/demo/demo.outside.ts
+++ b/packages/demo/demo.outside.ts
@@ -1,42 +0,0 @@
-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();
-});
--- a/packages/demo/demo.svg.ts
+++ b/packages/demo/demo.svg.ts
@@ -1,20 +0,0 @@
-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);
-})();
--- a/packages/demo/index.ts
+++ b/packages/demo/index.ts
@@ -0,0 +1,81 @@
+// 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();
--- a/packages/demo/menu.ts
+++ b/packages/demo/menu.ts
@@ -1,36 +0,0 @@
-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);
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -2,26 +2,18 @@
  "name": "@snk/demo",
  "version": "1.0.0",
  "dependencies": {
-    "@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"
+    "@snk/compute": "1.0.0"
  },
  "devDependencies": {
-    "@types/dat.gui": "0.7.13",
-    "dat.gui": "0.7.9",
-    "dotenv": "16.4.7",
-    "html-webpack-plugin": "5.6.3",
-    "ts-loader": "9.5.2",
-    "ts-node": "10.9.2",
-    "webpack": "5.98.0",
-    "webpack-cli": "6.0.1",
-    "webpack-dev-server": "5.2.0"
+    "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"
  },
  "scripts": {
-    "build": "webpack",
-    "dev": "webpack serve"
+    "prepare": "tsc webpack.config.ts",
+    "build": "yarn prepare ; webpack",
+    "dev": "yarn prepare ; webpack-dev-server --port ${PORT-3000}"
  }
 }
--- a/packages/demo/sample.ts
+++ b/packages/demo/sample.ts
@@ -1,14 +0,0 @@
-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;
--- a/packages/demo/springUtils.ts
+++ b/packages/demo/springUtils.ts
@@ -1,63 +0,0 @@
-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;
-  }
-};
--- a/packages/demo/webpack.config.ts
+++ b/packages/demo/webpack.config.ts
@@ -1,88 +1,47 @@
-import path from "path";
-import HtmlWebpackPlugin from "html-webpack-plugin";
-import webpack from "webpack";
-import { getGithubUserContribution } from "@snk/github-user-contribution";
-import type { Configuration as WebpackConfiguration } from "webpack";
-import {
-  ExpressRequestHandler,
-  type Configuration as WebpackDevServerConfiguration,
-} from "webpack-dev-server";
-import { config } from "dotenv";
-config({ path: __dirname + "/../../.env" });
+import * as path from "path";

-const demos: string[] = require("./demo.json");
+// @ts-ignore
+import * as HtmlWebpackPlugin from "html-webpack-plugin";
+import type { Configuration } from "webpack";

-const webpackDevServerConfiguration: WebpackDevServerConfiguration = {
-  open: { target: demos[1] + ".html" },
-  setupMiddlewares: (ms) => [
-    ...ms,
-    (async (req, res, next) => {
-      const userName = req.url.match(
-        /\/api\/github-user-contribution\/(\w+)/,
-      )?.[1];
-      if (userName)
-        res.send(
-          await getGithubUserContribution(userName, {
-            githubToken: process.env.GITHUB_TOKEN!,
-          }),
-        );
-      else next();
-    }) as ExpressRequestHandler,
-  ],
-};
+const basePathname = (process.env.BASE_PATHNAME || "")
+  .split("/")
+  .filter(Boolean);

-const webpackConfiguration: WebpackConfiguration = {
+const config: Configuration = {
  mode: "development",
-  entry: Object.fromEntries(
-    demos.map((demo: string) => [demo, `./demo.${demo}`]),
-  ),
-  target: ["web", "es2019"],
+  entry: "./index",
  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: /\.ts$/,
+        test: /\.(js|ts)$/,
        loader: "ts-loader",
-        options: {
-          transpileOnly: true,
-          compilerOptions: {
-            lib: ["dom", "es2020"],
-            target: "es2019",
-          },
-        },
      },
    ],
  },
  plugins: [
-    ...demos.map(
-      (demo) =>
-        new HtmlWebpackPlugin({
-          title: "snk - " + demo,
-          filename: `${demo}.html`,
-          chunks: [demo],
-        }),
-    ),
+    // game
    new HtmlWebpackPlugin({
-      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/",
+      title: "demo",
+      filename: "index.html",
+      meta: {
+        viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
+      },
    }),
  ],

  devtool: false,
+  stats: "errors-only",
+
+  // @ts-ignore
+  devServer: {},
 };

-export default {
-  ...webpackConfiguration,
-  devServer: webpackDevServerConfiguration,
-};
+export default config;
--- a/packages/demo/worker-utils.ts
+++ b/packages/demo/worker-utils.ts
@@ -1,59 +0,0 @@
-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 });
-          }),
-    },
-  );
-};
--- a/packages/draw/README.md
+++ b/packages/draw/README.md
@@ -1,3 +0,0 @@
-# @snk/draw
-
-Draw grids and snakes on a canvas.
--- a/packages/draw/drawCircleStack.ts
+++ b/packages/draw/drawCircleStack.ts
@@ -1,86 +0,0 @@
-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();
-  }
-};
--- a/packages/draw/drawGrid.ts
+++ b/packages/draw/drawGrid.ts
@@ -1,47 +1,42 @@
-import { getColor } from "@snk/types/grid";
+import { Grid, getColor, Color } from "@snk/compute/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;
-  colorDotBorder: string;
+  colorBorder: string;
  sizeCell: number;
  sizeDot: number;
-  sizeDotBorderRadius: number;
+  sizeBorderRadius: number;
 };

 export const drawGrid = (
  ctx: CanvasRenderingContext2D,
  grid: Grid,
-  cells: Point[] | null,
-  o: Options,
+  o: Options
 ) => {
  for (let x = grid.width; x--; )
    for (let y = grid.height; y--; ) {
-      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,
-        );
+      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
+      );

-        ctx.fillStyle = color;
-        ctx.strokeStyle = o.colorDotBorder;
-        ctx.lineWidth = 1;
-        ctx.beginPath();
+      ctx.fillStyle = color;
+      ctx.strokeStyle = o.colorBorder;
+      ctx.lineWidth = 1;
+      ctx.beginPath();

-        pathRoundedRect(ctx, o.sizeDot, o.sizeDot, o.sizeDotBorderRadius);
+      pathRoundedRect(ctx, o.sizeDot, o.sizeDot, o.sizeBorderRadius);

-        ctx.fill();
-        ctx.stroke();
-        ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.closePath();

-        ctx.restore();
-      }
+      ctx.restore();
    }
 };
--- a/packages/draw/drawSnake.ts
+++ b/packages/draw/drawSnake.ts
@@ -1,69 +0,0 @@
-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();
-  }
-};
--- a/packages/draw/drawWorld.ts
+++ b/packages/draw/drawWorld.ts
@@ -1,97 +1,63 @@
+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";

-export type Options = {
+type Options = {
  colorDots: Record<Color, string>;
  colorEmpty: string;
-  colorDotBorder: string;
+  colorBorder: string;
  colorSnake: string;
  sizeCell: number;
  sizeDot: number;
-  sizeDotBorderRadius: number;
+  sizeBorderRadius: number;
 };

-export const drawStack = (
+export const drawSnake = (
  ctx: CanvasRenderingContext2D,
-  stack: Color[],
-  max: number,
-  width: number,
-  o: { colorDots: Record<Color, string> },
+  snake: Point[],
+  o: Options
 ) => {
-  ctx.save();
+  for (let i = 0; i < snake.length; i++) {
+    const u = (i + 1) * 0.6;

-  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.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();
  }
-  ctx.restore();
 };

 export const drawWorld = (
  ctx: CanvasRenderingContext2D,
  grid: Grid,
-  cells: Point[] | null,
-  snake: Snake,
+  snake: Point[],
  stack: Color[],
-  o: Options,
+  o: Options
 ) => {
  ctx.save();

-  ctx.translate(1 * o.sizeCell, 2 * o.sizeCell);
-  drawGrid(ctx, grid, cells, o);
+  ctx.translate(2 * o.sizeCell, 2 * o.sizeCell);
+  drawGrid(ctx, grid, o);
  drawSnake(ctx, snake, o);

  ctx.restore();

-  ctx.save();
+  const m = 5;

+  ctx.save();
  ctx.translate(o.sizeCell, (grid.height + 4) * o.sizeCell);
-
-  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 | 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);
-
+  for (let i = 0; i < stack.length; i++) {
+    ctx.fillStyle = o.colorDots[stack[i]];
+    ctx.fillRect(i * m, 0, m, 10);
+  }
  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 };
-};
--- a/packages/draw/package.json
+++ b/packages/draw/package.json
@@ -2,6 +2,6 @@
  "name": "@snk/draw",
  "version": "1.0.0",
  "dependencies": {
-    "@snk/solver": "1.0.0"
+    "@snk/compute": "1.0.0"
  }
 }
--- a/packages/draw/pathRoundedRect.ts
+++ b/packages/draw/pathRoundedRect.ts
@@ -2,7 +2,7 @@ export const pathRoundedRect = (
  ctx: CanvasRenderingContext2D,
  width: number,
  height: number,
-  borderRadius: number,
+  borderRadius: number
 ) => {
  ctx.moveTo(borderRadius, 0);
  ctx.arcTo(width, 0, width, height, borderRadius);
--- a/packages/gif-creator/.gitignore
+++ b/packages/gif-creator/.gitignore
@@ -0,0 +1 @@
+out.gif
--- a/packages/gif-creator/README.md
+++ b/packages/gif-creator/README.md
@@ -1,5 +0,0 @@
-# @snk/gif-creator
-
-Generate a gif file from the grid and snake path.
-
-Relies on graphics magic and gifsicle binaries.
--- a/packages/gif-creator/tests/snapshots/.gitignore
+++ b/packages/gif-creator/tests/snapshots/.gitignore
@@ -1,2 +0,0 @@
-*
-!.gitignore
--- a/packages/gif-creator/tests/benchmark.ts
+++ b/packages/gif-creator/tests/benchmark.ts
@@ -1,84 +0,0 @@
-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: Uint8Array;
-    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!,
-    );
-  }
-})();
--- a/packages/gif-creator/tests/createGif.spec.ts
+++ b/packages/gif-creator/tests/createGif.spec.ts
@@ -1,91 +1,42 @@
-import * as fs from "fs";
-import * as path from "path";
-import { it, expect } from "bun:test";
-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";
+import { createGif } from "..";
+import { generateGrid } from "@snk/compute/generateGrid";
+import { computeBestRun } from "@snk/compute";

-const upscale = 1;
-const drawOptions: DrawOptions = {
-  sizeDotBorderRadius: 2 * upscale,
-  sizeCell: 16 * upscale,
-  sizeDot: 12 * upscale,
-  colorDotBorder: "#1b1f230a",
+const drawOptions = {
+  sizeBorderRadius: 2,
+  sizeCell: 16,
+  sizeDot: 12,
+  colorBorder: "#1b1f230a",
  colorDots: { 1: "#9be9a8", 2: "#40c463", 3: "#30a14e", 4: "#216e39" },
  colorEmpty: "#ebedf0",
  colorSnake: "purple",
 };

-const animationOptions: AnimationOptions = { frameDuration: 200, step: 1 };
+const gameOptions = { maxSnakeLength: 5 };

-const dir = path.resolve(__dirname, "__snapshots__");
+const gifOptions = { delay: 200 };

-try {
-  fs.mkdirSync(dir);
-} catch (err) {}
+it("should generate gif", async () => {
+  const grid = generateGrid(14, 7, { colors: [1, 2, 3, 4], emptyP: 3 });

-for (const key of [
-  "empty",
-  "simple",
-  "corner",
-  "small",
-  "smallPacked",
-] as const)
-  it(
-    `should generate ${key} gif`,
-    async () => {
-      const grid = grids[key];
+  const snake = [
+    { x: 4, y: -1 },
+    { x: 3, y: -1 },
+    { x: 2, y: -1 },
+    { x: 1, y: -1 },
+    { x: 0, y: -1 },
+  ];

-      const chain = [snake, ...getBestRoute(grid, snake)!];
+  const commands = computeBestRun(grid, snake, gameOptions).slice(0, 9);

-      const gif = await createGif(
-        grid,
-        null,
-        chain,
-        drawOptions,
-        animationOptions,
-      );
-
-      expect(gif).toBeDefined();
-
-      fs.writeFileSync(path.resolve(dir, key + ".gif"), gif);
-    },
-    { timeout: 20 * 1000 },
+  const gif = await createGif(
+    grid,
+    snake,
+    commands,
+    drawOptions,
+    gameOptions,
+    gifOptions
  );

-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);
-  },
-  { timeout: 20 * 1000 },
-);
+  expect(gif).toBeDefined();
+});
--- a/packages/gif-creator/tests/dev.ts
+++ b/packages/gif-creator/tests/dev.ts
@@ -0,0 +1,35 @@
+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);
+  }
+);
--- a/packages/gif-creator/index.ts
+++ b/packages/gif-creator/index.ts
@@ -1,99 +1,92 @@
-import fs from "fs";
-import path from "path";
-import { execFileSync } from "child_process";
+import * as fs from "fs";
+import * as path from "path";
 import { createCanvas } from "canvas";
-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";
+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";
 // @ts-ignore
-import GIFEncoder from "gif-encoder-2";
+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;

-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 {
-    return await handler(dir);
-  } finally {
-    cleanUp();
-  }
-};
+    writeImage(0);

-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") as any as CanvasRenderingContext2D;
-
-    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);
-      }
+    for (let i = 0; i < commands.length; i++) {
+      step(grid, snake, stack, commands[i], gameOptions);
+      writeImage(i + 1);
    }

    const outFileName = path.join(dir, "out.gif");
    const optimizedFileName = path.join(dir, "out.optimized.gif");

-    encoder.finish();
-    fs.writeFileSync(outFileName, encoder.out.getData());
+    await execa(
+      "gm",
+      [
+        "convert",
+        ["-loop", "0"],
+        ["-delay", gifOptions.delay.toString()],
+        ["-dispose", "2"],
+        // ["-layers", "OptimizeFrame"],
+        ["-compress", "LZW"],
+        ["-strip"],

-    execFileSync(
-      gifsicle,
+        path.join(dir, "*.png"),
+        outFileName,
+      ].flat()
+    );
+
+    await execa(
+      "gifsicle",
      [
        //
        "--optimize=3",
-        "--color-method=diversity",
-        "--colors=18",
        outFileName,
        ["--output", optimizedFileName],
-      ].flat(),
+      ].flat()
    );

-    return new Uint8Array(fs.readFileSync(optimizedFileName));
-  });
+    return fs.readFileSync(optimizedFileName);
+  } finally {
+    cleanUp();
+  }
+};
--- a/packages/gif-creator/package.json
+++ b/packages/gif-creator/package.json
@@ -2,18 +2,18 @@
  "name": "@snk/gif-creator",
  "version": "1.0.0",
  "dependencies": {
+    "@snk/compute": "1.0.0",
    "@snk/draw": "1.0.0",
-    "@snk/solver": "1.0.0",
-    "canvas": "3.1.0",
-    "gif-encoder-2": "1.0.5",
-    "gifsicle": "5.3.0",
-    "tmp": "0.2.3"
+    "canvas": "2.6.1",
+    "execa": "4.0.3",
+    "tmp": "0.2.1"
  },
  "devDependencies": {
-    "@types/gifsicle": "5.2.2",
-    "@types/tmp": "0.2.6"
+    "@types/execa": "2.0.0",
+    "@types/tmp": "0.2.0",
+    "@zeit/ncc": "0.22.3"
  },
  "scripts": {
-    "benchmark": "bun __tests__/benchmark.ts"
+    "dev": "ncc run __tests__/dev.ts --quiet | tail -n +2 > out.gif "
  }
 }
--- a/packages/github-user-contribution-service/README.md
+++ b/packages/github-user-contribution-service/README.md
@@ -1,14 +0,0 @@
-# @snk/github-user-contribution-service
-
-Expose github-user-contribution as an endpoint. hosted on cloudflare
-
-```sh
-
-
-# deploy
-bunx wrangler deploy --branch=production
-
-# change secret
-bunx wrangler secret put GITHUB_TOKEN
-
-```
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
platane	047c7191f3	aaaa	2020-07-19 19:15:41 +02:00
platane	10d162247f	aaaa	2020-07-19 19:13:17 +02:00
platane	13f9f66ae0	aaaaa	2020-07-19 19:12:05 +02:00
platane	7e80be60db	aaaa	2020-07-19 19:09:26 +02:00
platane	16eb314428	aaaa	2020-07-19 18:51:08 +02:00
platane	72507d3b16	aaaa	2020-07-19 18:47:45 +02:00
platane	a7ffc4959e	aaaa	2020-07-19 18:45:07 +02:00
platane	8271057335	:feat: improve demo and add test script for action	2020-07-19 18:42:56 +02:00
platane	6d9d6bd0f7	🔨 clean up ts config	2020-07-19 18:42:09 +02:00
platane	ae451ddb81	🔨 fix deploy script	2020-07-19 18:32:14 +02:00
platane	aa304de936	🔨 fix deployment script	2020-07-19 18:27:44 +02:00
platane	49260a4367	🔨 fix demo build	2020-07-19 18:24:48 +02:00
platane	d23468549b	build	2020-07-19 18:16:11 +02:00
platane	75496b6100	aaaaa	2020-07-19 18:15:45 +02:00