152 files changed, 1213 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..931f0e4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,10 @@
+# Logs
+logs
+*.log
+pnpm-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+src/imgs/old
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..de4aedd
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ded8283
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite App</title>
+</head>
+
+<body bgcolor="black">
+  <canvas width="320" height="200" style="background-color: grey;"></canvas>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..aac25a1
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "1942",
+  "private": false,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^4.5.4",
+    "vite": "^2.9.2"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..11f11cf
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,324 @@
+lockfileVersion: 5.3
+
+specifiers:
+  typescript: ^4.5.4
+  vite: ^2.9.2
+
+devDependencies:
+  typescript: 4.6.3
+  vite: 2.9.5
+
+packages:
+
+  /esbuild-android-64/0.14.36:
+    resolution: {integrity: sha512-jwpBhF1jmo0tVCYC/ORzVN+hyVcNZUWuozGcLHfod0RJCedTDTvR4nwlTXdx1gtncDqjk33itjO+27OZHbiavw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-android-arm64/0.14.36:
+    resolution: {integrity: sha512-/hYkyFe7x7Yapmfv4X/tBmyKnggUmdQmlvZ8ZlBnV4+PjisrEhAvC3yWpURuD9XoB8Wa1d5dGkTsF53pIvpjsg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-darwin-64/0.14.36:
+    resolution: {integrity: sha512-kkl6qmV0dTpyIMKagluzYqlc1vO0ecgpviK/7jwPbRDEv5fejRTaBBEE2KxEQbTHcLhiiDbhG7d5UybZWo/1zQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-darwin-arm64/0.14.36:
+    resolution: {integrity: sha512-q8fY4r2Sx6P0Pr3VUm//eFYKVk07C5MHcEinU1BjyFnuYz4IxR/03uBbDwluR6ILIHnZTE7AkTUWIdidRi1Jjw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-freebsd-64/0.14.36:
+    resolution: {integrity: sha512-Hn8AYuxXXRptybPqoMkga4HRFE7/XmhtlQjXFHoAIhKUPPMeJH35GYEUWGbjteai9FLFvBAjEAlwEtSGxnqWww==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-freebsd-arm64/0.14.36:
+    resolution: {integrity: sha512-S3C0attylLLRiCcHiJd036eDEMOY32+h8P+jJ3kTcfhJANNjP0TNBNL30TZmEdOSx/820HJFgRrqpNAvTbjnDA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-linux-32/0.14.36:
+    resolution: {integrity: sha512-Eh9OkyTrEZn9WGO4xkI3OPPpUX7p/3QYvdG0lL4rfr73Ap2HAr6D9lP59VMF64Ex01LhHSXwIsFG/8AQjh6eNw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-linux-64/0.14.36:
+    resolution: {integrity: sha512-vFVFS5ve7PuwlfgoWNyRccGDi2QTNkQo/2k5U5ttVD0jRFaMlc8UQee708fOZA6zTCDy5RWsT5MJw3sl2X6KDg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-linux-arm/0.14.36:
+    resolution: {integrity: sha512-NhgU4n+NCsYgt7Hy61PCquEz5aevI6VjQvxwBxtxrooXsxt5b2xtOUXYZe04JxqQo+XZk3d1gcr7pbV9MAQ/Lg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-linux-arm64/0.14.36:
+    resolution: {integrity: sha512-24Vq1M7FdpSmaTYuu1w0Hdhiqkbto1I5Pjyi+4Cdw5fJKGlwQuw+hWynTcRI/cOZxBcBpP21gND7W27gHAiftw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-linux-mips64le/0.14.36:
+    resolution: {integrity: sha512-hZUeTXvppJN+5rEz2EjsOFM9F1bZt7/d2FUM1lmQo//rXh1RTFYzhC0txn7WV0/jCC7SvrGRaRz0NMsRPf8SIA==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-linux-ppc64le/0.14.36:
+    resolution: {integrity: sha512-1Bg3QgzZjO+QtPhP9VeIBhAduHEc2kzU43MzBnMwpLSZ890azr4/A9Dganun8nsqD/1TBcqhId0z4mFDO8FAvg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-linux-riscv64/0.14.36:
+    resolution: {integrity: sha512-dOE5pt3cOdqEhaufDRzNCHf5BSwxgygVak9UR7PH7KPVHwSTDAZHDoEjblxLqjJYpc5XaU9+gKJ9F8mp9r5I4A==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-linux-s390x/0.14.36:
+    resolution: {integrity: sha512-g4FMdh//BBGTfVHjF6MO7Cz8gqRoDPzXWxRvWkJoGroKA18G9m0wddvPbEqcQf5Tbt2vSc1CIgag7cXwTmoTXg==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-netbsd-64/0.14.36:
+    resolution: {integrity: sha512-UB2bVImxkWk4vjnP62ehFNZ73lQY1xcnL5ZNYF3x0AG+j8HgdkNF05v67YJdCIuUJpBuTyCK8LORCYo9onSW+A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-openbsd-64/0.14.36:
+    resolution: {integrity: sha512-NvGB2Chf8GxuleXRGk8e9zD3aSdRO5kLt9coTQbCg7WMGXeX471sBgh4kSg8pjx0yTXRt0MlrUDnjVYnetyivg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-sunos-64/0.14.36:
+    resolution: {integrity: sha512-VkUZS5ftTSjhRjuRLp+v78auMO3PZBXu6xl4ajomGenEm2/rGuWlhFSjB7YbBNErOchj51Jb2OK8lKAo8qdmsQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-windows-32/0.14.36:
+    resolution: {integrity: sha512-bIar+A6hdytJjZrDxfMBUSEHHLfx3ynoEZXx/39nxy86pX/w249WZm8Bm0dtOAByAf4Z6qV0LsnTIJHiIqbw0w==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-windows-64/0.14.36:
+    resolution: {integrity: sha512-+p4MuRZekVChAeueT1Y9LGkxrT5x7YYJxYE8ZOTcEfeUUN43vktSn6hUNsvxzzATrSgq5QqRdllkVBxWZg7KqQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild-windows-arm64/0.14.36:
+    resolution: {integrity: sha512-fBB4WlDqV1m18EF/aheGYQkQZHfPHiHJSBYzXIo8yKehek+0BtBwo/4PNwKGJ5T0YK0oc8pBKjgwPbzSrPLb+Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /esbuild/0.14.36:
+    resolution: {integrity: sha512-HhFHPiRXGYOCRlrhpiVDYKcFJRdO0sBElZ668M4lh2ER0YgnkLxECuFe7uWCf23FrcLc59Pqr7dHkTqmRPDHmw==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      esbuild-android-64: 0.14.36
+      esbuild-android-arm64: 0.14.36
+      esbuild-darwin-64: 0.14.36
+      esbuild-darwin-arm64: 0.14.36
+      esbuild-freebsd-64: 0.14.36
+      esbuild-freebsd-arm64: 0.14.36
+      esbuild-linux-32: 0.14.36
+      esbuild-linux-64: 0.14.36
+      esbuild-linux-arm: 0.14.36
+      esbuild-linux-arm64: 0.14.36
+      esbuild-linux-mips64le: 0.14.36
+      esbuild-linux-ppc64le: 0.14.36
+      esbuild-linux-riscv64: 0.14.36
+      esbuild-linux-s390x: 0.14.36
+      esbuild-netbsd-64: 0.14.36
+      esbuild-openbsd-64: 0.14.36
+      esbuild-sunos-64: 0.14.36
+      esbuild-windows-32: 0.14.36
+      esbuild-windows-64: 0.14.36
+      esbuild-windows-arm64: 0.14.36
+    dev: true
+
+  /fsevents/2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /function-bind/1.1.1:
+    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+    dev: true
+
+  /has/1.0.3:
+    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
+    engines: {node: '>= 0.4.0'}
+    dependencies:
+      function-bind: 1.1.1
+    dev: true
+
+  /is-core-module/2.8.1:
+    resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==}
+    dependencies:
+      has: 1.0.3
+    dev: true
+
+  /nanoid/3.3.2:
+    resolution: {integrity: sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: true
+
+  /path-parse/1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
+
+  /picocolors/1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+    dev: true
+
+  /postcss/8.4.12:
+    resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.2
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
+  /resolve/1.22.0:
+    resolution: {integrity: sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.8.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /rollup/2.70.2:
+    resolution: {integrity: sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /source-map-js/1.0.2:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /supports-preserve-symlinks-flag/1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /typescript/4.6.3:
+    resolution: {integrity: sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: true
+
+  /vite/2.9.5:
+    resolution: {integrity: sha512-dvMN64X2YEQgSXF1lYabKXw3BbN6e+BL67+P3Vy4MacnY+UzT1AfkHiioFSi9+uiDUiaDy7Ax/LQqivk6orilg==}
+    engines: {node: '>=12.2.0'}
+    hasBin: true
+    peerDependencies:
+      less: '*'
+      sass: '*'
+      stylus: '*'
+    peerDependenciesMeta:
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+    dependencies:
+      esbuild: 0.14.36
+      postcss: 8.4.12
+      resolve: 1.22.0
+      rollup: 2.70.2
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
diff --git a/src/Animation.ts b/src/Animation.ts
new file mode 100644
index 0000000..13adb6c
--- /dev/null
+++ b/src/Animation.ts
@@ -0,0 +1,23 @@
+import { ctx } from "./consts";
+import Drawable from "./Drawable";
+
+export default class Anime extends Drawable {
+  i = 0;
+  j = 0;
+
+  constructor(drawable: Drawable, public frames: string[]) {
+    super(drawable._x, drawable._y)
+    this.width = drawable.width
+    this.height = drawable.height
+  }
+
+  draw(): boolean {
+    // console.log("drawing", this)
+    ctx.fillStyle = this.frames[this.i];
+    ctx.fillRect(this.x, this.y, this.width, this.height);
+    this.j++;
+    if (this.j === 50) { this.i++; this.j = 0; }
+    return this.i !== this.frames.length;
+  }
+}
+
diff --git a/src/Drawable.ts b/src/Drawable.ts
new file mode 100644
index 0000000..eccb5c3
--- /dev/null
+++ b/src/Drawable.ts
@@ -0,0 +1,93 @@
+import { canvas, ctx } from "./consts";
+import { IMGS } from "./Images";
+
+export default abstract class Drawable {
+  public stopAtBorder = false
+  public width!: number;
+  public height!: number;
+  public sprite!: string | HTMLImageElement;
+  public squares!: Array<Rectangle>;
+  public sprites!: Array<string>;
+
+  constructor(public _x: number, public _y: number,) { }
+
+  collides(w: Drawable): boolean {
+    for (const square of this.squares) {
+      for (const s of w.squares) {
+        if (square.x < s.x2 && square.x2 > s.x &&
+          square.y < s.y2 && square.y2 > s.y) return true
+      }
+    }
+    return false;
+  }
+
+  draw() {
+    if (typeof this.sprite === "string") {
+      ctx.fillStyle = this.sprite;
+      ctx.fillRect(this.x, this.y, this.width, this.height);
+      // } else if (this.sprite instanceof HTMLImageElement) {
+    } else {
+      ctx.drawImage(this.sprite, this.x, this.y)
+    }
+  }
+
+  get x() { return this._x }
+  set x(val) {
+    if (!this.stopAtBorder) {
+      this._x = val;
+      return
+    }
+    // Used only for Player
+    if (val <= 35) { this._x = 35; this.sprite = IMGS.playerUp }
+    else if (val + this.width >= canvas.width - 35) { this._x = canvas.width - 35 - this.width; this.sprite = IMGS.playerUp }
+    else this._x = val
+  }
+  get y() { return this._y }
+  set y(val) {
+    if (!this.stopAtBorder) {
+      this._y = val;
+      return
+    }
+    // Used only for Player
+    if (val <= 15 + 24) this._y = 15 + 24;
+    else if (val + this.height >= canvas.height - 15) this._y = canvas.height - 15 - this.height;
+    else this._y = val
+  }
+
+  get x2() { return this.x + this.width }
+  get y2() { return this.y + this.height }
+
+  /// Should be abstract but this is extended by Animation which doesnt move
+  // abstract move(): boolean;
+  move() { return true; };
+
+}
+
+export class Rectangle extends Drawable {
+  constructor(public begetter: Drawable, x?: number, y?: number, width?: number, height?: number) {
+    x = x ?? begetter.x
+    y = y ?? begetter.y
+    super(x, y);
+    this.change(x, y, width ?? begetter.width, height ?? begetter.height)
+  }
+  change(x: number, y: number, width: number, height: number) {
+    this._x = x
+    this._y = y
+    this.width = width
+    this.height = height
+
+  }
+  get x(): number { return this.begetter.x + this._x; }
+  get y(): number { return this.begetter.y + this._y; }
+  set x(val) { this._x = val }
+  set y(val) { this._y = val }
+  get x2() { return this.x + this.width }
+  get y2() { return this.y + this.width }
+  sprite = "rgba(128,0,128, 0.5)"
+}
+// export abstract class Square {
+//   constructor(public x: number, public y: number, public width: number, public height: number) { }
+
+//   get x2() { return this.x + this.width }
+//   get y2() { return this.y + this.height }
+// }
diff --git a/src/Events.ts b/src/Events.ts
new file mode 100644
index 0000000..7975fe3
--- /dev/null
+++ b/src/Events.ts
@@ -0,0 +1,33 @@
+// export interface Keys {
+//   right: boolean;
+//   left: boolean;
+//   up: boolean;
+//   down: boolean;
+//   fire: boolean;
+// }
+export const keys = {
+  right: false,
+  left: false,
+  up: false,
+  down: false,
+  fire: false,
+  repeat: false,
+  fps: 50,
+}
+
+// window.onkeydown = window.onkeydown ?? ((e: KeyboardEvent) => e.repeat ? keys.fire = false : setKey(e.key, true))
+window.onkeydown = window.onkeydown ?? ((e: KeyboardEvent) => setKey(e.key, true, e.repeat))
+window.onkeyup = window.onkeyup ?? ((e: KeyboardEvent) => setKey(e.key, false, e.repeat))
+
+function setKey(key: string, val: boolean, repeat: boolean) {
+  if (["w", "k"].includes(key)) keys.up = val;
+  else if (["a", "h"].includes(key)) keys.left = val;
+  else if (["s", "j"].includes(key)) keys.down = val;
+  else if (["d", "l"].includes(key)) keys.right = val;
+  else if (["m", ";", "/"].includes(key)) { keys.fire = val; keys.repeat = repeat }
+  else if (["r"].includes(key)) location.reload();
+  else if (["f"].includes(key)) keys.fps = 50;
+  else if (["g"].includes(key)) keys.fps = 1;
+  // console.log(key, val ? "keydown" : "keyup")
+}
+
diff --git a/src/Highscore.ts b/src/Highscore.ts
new file mode 100644
index 0000000..f823393
--- /dev/null
+++ b/src/Highscore.ts
@@ -0,0 +1,119 @@
+// import { canvas } from "./consts";
+import { canvas, ctx, alphabet } from "./consts";
+import Drawable from "./Drawable";
+import { Background } from "./drawables/Background";
+import { Selector } from "./drawables/Selector";
+import { keys } from "./Events";
+import { IMGS } from "./Images";
+
+export default class Highscore extends Drawable {
+  width = canvas.width
+  height = canvas.height
+  show = false;
+  imgPixels: ImageData | null = null;
+  selector = new Selector(12, 37);
+  _bx = 12
+  _by = 27
+  moving = false;
+  dx = 32;
+  dy = 26;
+  name = [' ', ' ', ' '];
+  lastTimestamp = 0;
+  constructor() {
+    super(0, 0)
+  }
+  drawHg(bg: Background) {
+    if (this.imgPixels == null) {
+      const imgPixels = bg.getImageData();
+      for (let y = 0; y < imgPixels.height; y++) {
+        for (let x = 0; x < imgPixels.width; x++) {
+          const i = (y * 4) * imgPixels.width + x * 4;
+          const avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
+          imgPixels.data[i] = avg;
+          imgPixels.data[i + 1] = avg;
+          imgPixels.data[i + 2] = avg;
+        }
+      }
+      this.imgPixels = imgPixels;
+    }
+    ctx.putImageData(this.imgPixels, 0, 24, 0, 0, this.imgPixels.width, this.imgPixels.height);
+    this.selector.draw()
+    let x = 17, y = 40;
+    for (const char of alphabet) {
+      ctx.drawImage(IMGS.font.white[char], x, y)
+      x += this.dx;
+      if (x > 275) {
+        x = 17;
+        y += this.dy;
+      }
+    }
+    while (x < 275) { ctx.drawImage(IMGS.font.yellow['-'], x, y); x += this.dx / 2; }
+    x = 17;
+    y += this.dy;
+    const botTxt = ['a', 't', 'h', ' ', 'a', 'b', 'c', 'd', 'e', 'f', 'g', ' ', ...this.name, ' ', 'z', 'y'];
+    for (let char of botTxt) {
+      ctx.drawImage(IMGS.font.yellow[char], x, y);
+      x += this.dx / 2;
+    }
+  }
+  move(): boolean {
+    if (!this.moving) {
+      if (+keys.right ^ +keys.left) {
+        keys.right ? this.bx = this.selector.x + this.dx : this.bx = this.selector.x - this.dx
+      } else {
+        this.bx = this.selector.x
+      }
+
+      if (+keys.up ^ +keys.down) {
+        keys.down ? this.by = this.selector.y + this.dy : this.by = this.selector.y - this.dy
+      } else {
+        this.by = this.selector.y
+      }
+
+      if (keys.fire && Date.now() - this.lastTimestamp > 300) {
+        let [x, y] = [this.selector.x, this.selector.y]
+        x = Math.floor(x / this.dx)
+        y = Math.floor(y / this.dy) - 1
+        const char = alphabet[x + y * 9];
+        if (char === "rv") {
+          for (let i = this.name.length - 1; i >= 0; i--) {
+            if (this.name[i] !== " ") this.name[i] = ' '
+          }
+        }
+        else if (char === "ed") {
+          console.log("%csaving", "color: darkblue; font-size: 1.3em; background-color: darkgreen;");
+        }
+        else if (this.name.filter(a => a !== ' ').length === 3) this.name[2] = char;
+        else {
+          for (let i = 0; i < this.name.length; i++) {
+            if (this.name[i] === " ") { this.name[i] = char; break; }
+          }
+        }
+
+        this.lastTimestamp = Date.now()
+      }
+    }
+
+    if (this.selector.x !== this.bx || this.selector.y !== this.by) {
+      this.moving = true;
+      if (this.selector.x < this.bx) this.selector.x += 2;
+      if (this.selector.x > this.bx) this.selector.x -= 2;
+      if (this.selector.y < this.by) this.selector.y += 2;
+      if (this.selector.y > this.by) this.selector.y -= 2;
+      return true;
+    }
+    this.moving = false
+    return true;
+  }
+
+  get bx() { return this._bx }
+  get by() { return this._by }
+  set bx(val) {
+    if (val > 10 && val < 17 + this.dx * 8)
+      this._bx = val
+  }
+  set by(val) {
+    if (val > 30 && val < 40 + this.dy * 3)
+      this._by = val
+  }
+} 
diff --git a/src/Images.ts b/src/Images.ts
new file mode 100644
index 0000000..f0e1ba0
--- /dev/null
+++ b/src/Images.ts
@@ -0,0 +1,61 @@
+// const URLS = [
+//   "/src/imgs/bg2.png",
+//   "/src/imgs/topbar.png",
+// ];
+import { alphabet } from "./consts";
+import { toKebabCase } from "./helpers";
+
+export const IMGS = {
+  bg: {} as HTMLImageElement,
+  topbar: {} as HTMLImageElement,
+  playerUp: {} as HTMLImageElement,
+  playerLeft: {} as HTMLImageElement,
+  playerRight: {} as HTMLImageElement,
+  bigCircleDown: {} as HTMLImageElement,
+  bigCircleDownToRight1: {} as HTMLImageElement,
+  bigCircleDownToRight2: {} as HTMLImageElement,
+  bigCircleDownToRight3: {} as HTMLImageElement,
+  bigCircleRight: {} as HTMLImageElement,
+  bigCircleRightToUp1: {} as HTMLImageElement,
+  bigCircleRightToUp2: {} as HTMLImageElement,
+  bigCircleRightToUp3: {} as HTMLImageElement,
+  bigCircleUp: {} as HTMLImageElement,
+  bigCircleUpToLeft1: {} as HTMLImageElement,
+  bigCircleUpToLeft2: {} as HTMLImageElement,
+  bigCircleUpToLeft3: {} as HTMLImageElement,
+  bigCircleLeft: {} as HTMLImageElement,
+  bigCircleLeftToDown1: {} as HTMLImageElement,
+  bigCircleLeftToDown2: {} as HTMLImageElement,
+  bigCircleLeftToDown3: {} as HTMLImageElement,
+  font: {
+    white: {} as any,
+    yellow: {} as any,
+    ' ': {} as HTMLImageElement,
+  },
+  selector: {} as HTMLImageElement,
+  empty: {} as HTMLImageElement,
+};
+// window.IMGS = IMGS;
+export default async function loadAllImages() {
+  for (const key in IMGS) {
+    if (["empty", "font"].includes(key)) continue;
+    IMGS[key as keyof typeof IMGS] = await asyncImageLoader("/src/imgs/" + toKebabCase(key) + ".png") as any
+  }
+  for (const color of ['yellow', 'white']) {
+    for (const char of [...alphabet]) {
+      (((IMGS.font as any)[color] as any)[char]) = await asyncImageLoader("/src/imgs/font/" + color + "/" + encodeURIComponent(char) + ".png") as any
+    }
+  }
+  IMGS.font[' '] = await asyncImageLoader("/src/imgs/font/ .png")
+  IMGS.font.yellow[' '] = await asyncImageLoader("/src/imgs/font/ .png")
+  IMGS.font.white[' '] = await asyncImageLoader("/src/imgs/font/ .png")
+}
+async function asyncImageLoader(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.src = url
+    image.onload = () => resolve(image)
+    image.onerror = () => { console.log("img did not load", url); reject() }
+  })
+}
+
diff --git a/src/Player.ts b/src/Player.ts
new file mode 100644
index 0000000..8890466
--- /dev/null
+++ b/src/Player.ts
@@ -0,0 +1,72 @@
+import Anime from "./Animation";
+import Bullet from "./drawables/Bullet";
+import { BULLET_VEL, ctx, FIRE_DELAY, PLAYER_SIZE, PLAYER_VEL } from "./consts";
+import Drawable, { Rectangle } from "./Drawable";
+import { keys } from "./Events";
+import { IMGS } from "./Images";
+
+export default class Player extends Drawable {
+  static startx = 250;
+  static starty = 100;
+
+  width = PLAYER_SIZE;
+  height = PLAYER_SIZE;
+  sprite = IMGS.empty;
+  xvel = 0;
+  yvel = 0;
+  lastShoot = 0;
+  stopAtBorder = true;
+  squares: Rectangle[] = [new Rectangle(this)]
+
+  lifes = 3;
+
+  constructor() {
+    super(Player.startx, Player.starty)
+  }
+
+  shoot(bullet: Bullet[]) {
+    if (!keys.fire || keys.repeat) return;
+    if (Date.now() - this.lastShoot < FIRE_DELAY) return;
+    this.lastShoot = Date.now()
+    bullet.push(new Bullet(this.x + (this.width / 2) - Bullet.width / 2, this.y - Bullet.height, 0, -BULLET_VEL, true))
+  }
+
+  move() {
+    if (+keys.right ^ +keys.left) {
+      keys.right ? this.xvel = PLAYER_VEL : this.xvel = -PLAYER_VEL;
+    } else {
+      this.xvel = 0
+    }
+
+    if (+keys.up ^ +keys.down) {
+      keys.down ? this.yvel = PLAYER_VEL : this.yvel = -PLAYER_VEL;
+    } else {
+      this.yvel = 0
+    }
+
+    if (keys.left && keys.right) this.sprite = IMGS.playerUp
+    else if (keys.right) this.sprite = IMGS.playerRight
+    else if (keys.left) this.sprite = IMGS.playerLeft
+    else this.sprite = IMGS.playerUp
+
+    this.x += this.xvel;
+    this.y += this.yvel;
+
+    // this.squares[0].x = this.x
+    // this.squares[0].y = this.y
+    // this.squares[0].width = this.sprite.width
+    // this.squares[0].height = this.sprite.height
+
+    return true;
+  }
+  draw() {
+    this.sprite = this.sprite ?? IMGS.playerUp;
+    try {
+      ctx.drawImage(this.sprite, this.x, this.y)
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  get deathAnimation() { return new Anime(this, ["red", "green", "blue"]) }
+}
diff --git a/src/consts.ts b/src/consts.ts
new file mode 100644
index 0000000..5893b85
--- /dev/null
+++ b/src/consts.ts
@@ -0,0 +1,12 @@
+export const canvas = document.querySelector<HTMLCanvasElement>('canvas')!
+export const ctx = canvas.getContext("2d")!
+ctx.imageSmoothingEnabled = false;
+
+export const PLAYER_SIZE = 20; // canvas-dot
+export const PLAYER_VEL = 3.5; // canvas-dot / frame
+export const BULLET_VEL = 4.5; // canvas-dot / frame
+export const FIRE_DELAY = 300; // ms
+export const TOPBAR_HEIGHT = 24; // ms
+
+export const FPS = 1;
+export const alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '.', '-', '&', '?', '!', 'man', 'woman', 'heart', 'rv', 'ed']
diff --git a/src/drawables/Background.ts b/src/drawables/Background.ts
new file mode 100644
index 0000000..1eef6c4
--- /dev/null
+++ b/src/drawables/Background.ts
@@ -0,0 +1,26 @@
+import { canvas, ctx } from "../consts";
+import Drawable from "../Drawable";
+import { IMGS } from "../Images";
+
+export class Background extends Drawable {
+  sprite = IMGS.bg;
+  width = canvas.width
+  height = canvas.height - 24
+  constructor() {
+    super(0, 0)
+  }
+  // delta = -1751 + 24 + 2693;
+  delta = 0
+  move(): boolean {
+    this.delta += 1;
+    return true;
+  }
+  draw() {
+    if (this.sprite.src == null) this.sprite = IMGS.bg;
+    ctx.drawImage(this.sprite, 0, 2693 - this.delta + 24, 320, 200 - 24, 0, 24, this.width, this.height)
+  }
+  getImageData() {
+    ctx.drawImage(this.sprite, 0, 2693 - this.delta + 24, 320, 200 - 24, 0, 24, this.width, this.height)
+    return ctx.getImageData(0, 24, this.width, this.height);
+  }
+}
diff --git a/src/drawables/Bullet.ts b/src/drawables/Bullet.ts
new file mode 100644
index 0000000..68f55e8
--- /dev/null
+++ b/src/drawables/Bullet.ts
@@ -0,0 +1,27 @@
+import { canvas } from "../consts";
+import Drawable from "../Drawable";
+
+export default class Bullet extends Drawable {
+  static width = 2;
+  static height = 5;
+  static color = "black";
+  color = "black";
+  sprite = "black";
+
+  squares = [this]
+
+  constructor(x: number, y: number, public xvel: number, public yvel: number, public players: boolean) {
+    super(x, y);
+    this.width = Bullet.width;
+    this.height = Bullet.height;
+  }
+
+  move(): boolean {
+    this.x += this.xvel;
+    this.y += this.yvel;
+
+    return (
+      this.x + this.width < 0 || this.y + this.height < 0 || this.x > canvas.width || this.y > canvas.height
+    );
+  }
+}
diff --git a/src/drawables/Selector.ts b/src/drawables/Selector.ts
new file mode 100644
index 0000000..b72d839
--- /dev/null
+++ b/src/drawables/Selector.ts
@@ -0,0 +1,15 @@
+import { canvas, ctx } from "../consts";
+import Drawable from "../Drawable";
+import { IMGS } from "../Images";
+
+export class Selector extends Drawable {
+  sprite = IMGS.selector
+  width = canvas.width
+  height = 24
+  draw() {
+    if (this.sprite.src == null) this.sprite = IMGS.selector;
+    ctx.drawImage(this.sprite, this.x, this.y)
+  }
+}
+
+
diff --git a/src/drawables/TopBar.ts b/src/drawables/TopBar.ts
new file mode 100644
index 0000000..f021f77
--- /dev/null
+++ b/src/drawables/TopBar.ts
@@ -0,0 +1,17 @@
+import { canvas, ctx } from "../consts";
+import Drawable from "../Drawable";
+import { IMGS } from "../Images";
+
+export class TopBar extends Drawable {
+  sprite = IMGS.topbar;
+  width = canvas.width
+  height = 24
+  constructor() {
+    super(0, 0)
+  }
+  draw() {
+    if (this.sprite.src == null) this.sprite = IMGS.topbar;
+    ctx.drawImage(this.sprite, 0, 0)
+  }
+}
+
diff --git a/src/enemies/BigCircle.ts b/src/enemies/BigCircle.ts
new file mode 100644
index 0000000..3a5506c
--- /dev/null
+++ b/src/enemies/BigCircle.ts
@@ -0,0 +1,149 @@
+import { canvas } from "../consts";
+// import { keys } from "../Events";
+import { Rectangle } from "../Drawable";
+import { IMGS } from "../Images";
+import Enemy from "./Enemy";
+
+export default class BigCircle extends Enemy {
+  width = 48
+  height = 40
+  sprite: HTMLImageElement | string = IMGS.bigCircleDown;
+  sprites = ["pink", "red", "blue", "green", "black", "white"]
+  vel = 1.8
+
+  phase = 0;
+
+  squares: Rectangle[] = [
+    // new Rectangle(this.x, this.y, this.width, this.height),
+    new Rectangle(this, 14, 0, 20, 8),
+    new Rectangle(this, 20, 7, 8, 12),
+    new Rectangle(this, 0, 20, 48, 20),
+  ]
+
+  counter = 0;
+  move() {
+    if (this.sprite instanceof HTMLImageElement && this.sprite.src == null) this.sprite = IMGS.bigCircleDown
+    if (this.sprite instanceof HTMLImageElement) this.width = this.sprite.width
+    if (this.sprite instanceof HTMLImageElement) this.height = this.sprite.height
+
+    let yShift = 0, xShift = 0
+
+    switch (this.phase) {
+      case 0:
+        yShift = this.vel;
+        // if (this.y2 > 124) { this.phase++; keys.fps = 1 }
+        if (this.y2 > 124) this.phase++
+        break;
+      case 1:
+        this.sprite = IMGS.bigCircleDownToRight1;
+        // this.squares = [new Rectangle(this.x, this.y, this.width, this.height)]
+        this.phase++;
+        break;
+      case 2:
+        yShift = this.vel;
+        xShift = this.vel;
+        this.phase++;
+        break;
+      case 3:
+        this.sprite = IMGS.bigCircleDownToRight2;
+        // this.squares = [new Rectangle(this.x, this.y, this.width, this.height)]
+        this.counter = 0;
+        this.phase++;
+        break;
+      case 4:
+        xShift = this.vel;
+        yShift = this.vel;
+        if (this.counter++ === 1) this.phase++;
+        break;
+      case 5:
+        this.sprite = IMGS.bigCircleDownToRight3;
+        // this.squares = [new Rectangle(this.x, this.y, this.width, this.height)]
+        this.phase++;
+        break;
+      case 6:
+        xShift = this.vel;
+        yShift = this.vel;
+        this.phase++;
+        break;
+      case 7:
+        this.sprite = IMGS.bigCircleRight;
+        // width = 48
+        // height = 40
+        this.squares[0].change(0, 14, 8, 16);
+        this.squares[1].change(0, 18, 44, 8);
+        this.squares[2].change(22, 0, 14, 43);
+        // new Rectangle(this.x + 20, this.y + 7, 8, 12),
+        // new Rectangle(this.x, this.y + 20, 48, 20),
+        this.phase++;
+        break;
+      case 8:
+        xShift = this.vel;
+        break;
+      // case 4:
+      //   // this.sprite = this.sprites[3];
+      //   xShift = this.vel;
+      //   yShift = this.vel;
+      //   if (this.y2 > 160) this.phase++;
+      //   break;
+      // case 5:
+      //   // this.sprite = this.sprites[0];
+      //   xShift = this.vel;
+      //   if (this.x2 > 150) this.phase++;
+      //   break;
+      // case 6:
+      //   // this.sprite = this.sprites[1];
+      //   yShift = -this.vel;
+      //   xShift = this.vel;
+      //   if (this.x2 > 220) this.phase++;
+      //   break;
+      // case 7:
+      //   // this.sprite = this.sprites[2];
+      //   yShift = -this.vel;
+      //   xShift = this.vel;
+      //   if (this.x2 > 240) this.phase++;
+      //   break;
+      // case 8:
+      //   // this.sprite = this.sprites[3];
+      //   yShift = -this.vel;
+      //   xShift = this.vel;
+      //   if (this.x2 > 260) this.phase++;
+      //   break;
+      // case 9:
+      //   // this.sprite = this.sprites[0];
+      //   yShift = -this.vel;
+      //   if (this.y < 50) this.phase++;
+      //   break;
+      // case 10:
+      //   yShift = -this.vel
+
+      default:
+        break;
+    }
+
+    // if (this.y > 80 && this.phase === 0) this.phase++;
+    // else if (this.x > 40) this.phase++;
+
+    // if (this.x === 25 && this.y < 100) {
+    //   yShift = this.vel
+    // } else if (this.y.toFixed(0) === '101' && this.x < 200) {
+    //   xShift = this.vel
+    // } else if (this.y > 20) {
+    //   yShift = -this.vel;
+    // } else if (this.x > 25) {
+    //   xShift = -this.vel;
+    // } else {
+    //   yShift = this.vel;
+    // }
+
+    this.x += xShift;
+    this.y += yShift;
+    // for (const s of this.squares) {
+    //   s.x += xShift;
+    //   s.y += yShift;
+    // }
+
+    return this.x2 < 0 || this.y2 < 0 || this.x > canvas.width || this.y > canvas.height
+  }
+
+}
+
diff --git a/src/enemies/Enemy.ts b/src/enemies/Enemy.ts
new file mode 100644
index 0000000..607a612
--- /dev/null
+++ b/src/enemies/Enemy.ts
@@ -0,0 +1,12 @@
+import Bullet from "../drawables/Bullet";
+import { BULLET_VEL } from "../consts";
+import Drawable, { Rectangle } from "../Drawable";
+
+export default abstract class Enemy extends Drawable {
+  squares: Array<Rectangle> = [new Rectangle(this)]
+  points = 5;
+
+  shoot(bullet: Bullet[]) {
+    bullet.push(new Bullet(this.x + (this.width / 2) - Bullet.width / 2, this.y2, 0, BULLET_VEL, true))
+  }
+}
diff --git a/src/enemies/Straight.ts b/src/enemies/Straight.ts
new file mode 100644
index 0000000..c397332
--- /dev/null
+++ b/src/enemies/Straight.ts
@@ -0,0 +1,17 @@
+import { canvas, PLAYER_VEL } from "../consts";
+import Enemy from "./Enemy";
+
+export default class Straight extends Enemy {
+  width = 20;
+  height = 20;
+  sprite = "blue";
+  vel = PLAYER_VEL * 0.8
+
+  move() {
+    if (this.y + this.height > canvas.height) { this.y = canvas.height - this.height; }
+    else if (this.y === canvas.height - this.height) { this.vel *= -1; this.y += this.vel; }
+    else { this.y += this.vel; }
+
+    return this.y + this.height < 0
+  }
+}
diff --git a/src/game.ts b/src/game.ts
new file mode 100644
index 0000000..fafa0ee
--- /dev/null
+++ b/src/game.ts
@@ -0,0 +1,108 @@
+import Anime from "./Animation";
+import { Background } from "./drawables/Background";
+import Bullet from "./drawables/Bullet";
+import { canvas, ctx } from "./consts";
+import BigCircle from "./enemies/BigCircle";
+import Enemy from "./enemies/Enemy";
+import { clearCtx, sleep } from "./helpers";
+import Player from "./Player";
+import { TopBar } from "./drawables/TopBar";
+import { keys } from "./Events";
+import Highscore from "./Highscore";
+
+let p = new Player()
+let pLifes = 3;
+let bullets = [] as Bullet[]
+let enemies = [] as Enemy[]
+// let bg = new Background();
+let animations = [] as Anime[]
+let intervalId = 0;
+let rafId = 0;
+intervalId; rafId;
+const bg = new Background()
+const tb = new TopBar()
+const hg = new Highscore()
+
+export function start() {
+  p = new Player()
+  bullets = [] as Bullet[]
+  enemies = [] as Enemy[]
+  animations = [] as Anime[]
+  enemies.push(new BigCircle(25, -20))
+  // enemies.push(new Straight(20, 0))
+  intervalId = setTimeout(cpuLoop, 1000 / keys.fps)
+  rafId = requestAnimationFrame(gpuLoop)
+}
+export function cpuLoop() {
+  if (hg.show) {
+    hg.move();
+    setTimeout(cpuLoop, 1000 / keys.fps)
+    return;
+  }
+  p.move()
+  p.shoot(bullets)
+  bg.move()
+  if (enemies.length === 0) {
+    enemies.push(new BigCircle(25, -20))
+    setTimeout(() => enemies.push(new BigCircle(25, -20)), 1000)
+  }
+
+  // enemies = enemies.filter(e => !bullets.some(b => b.collides(e)))
+  enemies.forEach(e => Math.random() < 0.05 && e.shoot(bullets))
+  enemies = enemies.filter(e => !e.move())
+
+  bullets = bullets.filter(b => !b.move())
+
+  // const collidingEnemy = enemies.filter(e => p.collides(e));
+  // const collidingBullets = bullets.filter(b => p.collides(b));
+  // if (collidingBullets.length || collidingEnemy.length) playerDied(collidingEnemy[0])
+  setTimeout(cpuLoop, 1000 / keys.fps)
+}
+
+export function gpuLoop() {
+  rafId = requestAnimationFrame(gpuLoop)
+
+  clearCtx()
+
+  if (hg.show) {
+    hg.drawHg(bg)
+    tb.draw()
+    return;
+  }
+
+  bg.draw()
+  bullets.forEach(b => b.draw())
+  p.squares.forEach(s => s.draw())
+  p.draw()
+  enemies.forEach(e => {
+    e.draw()
+    if (e instanceof BigCircle) {
+      e.squares.forEach(s => s.draw())
+    }
+  })
+  animations = animations.filter(a => a.draw())
+  tb.draw()
+}
+
+export async function playerDied(_enemy?: Enemy) {
+  animations.push(p.deathAnimation)
+  p.width = 0;
+  p.height = 0;
+  // clearTimeout(intervalId)
+  // cancelAnimationFrame(rafId)
+  if (--pLifes) {
+    await drawRestartScreen();
+    start()
+  } else {
+    hg.show = true
+  }
+}
+
+export async function drawRestartScreen() {
+  clearCtx()
+
+  ctx.fillStyle = "yellow"
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  await sleep(2000)
+}
+
diff --git a/src/helpers.ts b/src/helpers.ts
new file mode 100644
index 0000000..8a17555
--- /dev/null
+++ b/src/helpers.ts
@@ -0,0 +1,8 @@
+import { canvas, ctx } from "./consts";
+
+export const sleep = (ms: number) => new Promise(res => setTimeout(res, ms));
+export const clearCtx = () => ctx.clearRect(0, 0, canvas.width, canvas.height)
+export const toKebabCase = (str: string) => str
+  .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+  ?.map(x => x.toLowerCase())
+  .join('-');
diff --git a/src/imgs/bg.png b/src/imgs/bg.png
new file mode 100644
index 0000000..c89e65c
--- /dev/null
+++ b/src/imgs/bg.png
diff --git a/src/imgs/bg.xcf b/src/imgs/bg.xcf
new file mode 100644
index 0000000..e72dd7b
--- /dev/null
+++ b/src/imgs/bg.xcf
diff --git a/src/imgs/bg1.png b/src/imgs/bg1.png
new file mode 100644
index 0000000..f7d3aa8
--- /dev/null
+++ b/src/imgs/bg1.png
diff --git a/src/imgs/bg2.png b/src/imgs/bg2.png
new file mode 100644
index 0000000..c89e65c
--- /dev/null
+++ b/src/imgs/bg2.png
diff --git a/src/imgs/big-circle-down-to-right1.png b/src/imgs/big-circle-down-to-right1.png
new file mode 100644
index 0000000..12d650d
--- /dev/null
+++ b/src/imgs/big-circle-down-to-right1.png
diff --git a/src/imgs/big-circle-down-to-right2.png b/src/imgs/big-circle-down-to-right2.png
new file mode 100644
index 0000000..5edd0d9
--- /dev/null
+++ b/src/imgs/big-circle-down-to-right2.png
diff --git a/src/imgs/big-circle-down-to-right3.png b/src/imgs/big-circle-down-to-right3.png
new file mode 100644
index 0000000..bd06d3a
--- /dev/null
+++ b/src/imgs/big-circle-down-to-right3.png
diff --git a/src/imgs/big-circle-down.png b/src/imgs/big-circle-down.png
new file mode 100644
index 0000000..2c8b0d3
--- /dev/null
+++ b/src/imgs/big-circle-down.png
diff --git a/src/imgs/big-circle-left-to-down1.png b/src/imgs/big-circle-left-to-down1.png
new file mode 100644
index 0000000..6b5993a
--- /dev/null
+++ b/src/imgs/big-circle-left-to-down1.png
diff --git a/src/imgs/big-circle-left-to-down2.png b/src/imgs/big-circle-left-to-down2.png
new file mode 100644
index 0000000..4039a62
--- /dev/null
+++ b/src/imgs/big-circle-left-to-down2.png
diff --git a/src/imgs/big-circle-left-to-down3.png b/src/imgs/big-circle-left-to-down3.png
new file mode 100644
index 0000000..86afd9a
--- /dev/null
+++ b/src/imgs/big-circle-left-to-down3.png
diff --git a/src/imgs/big-circle-left.png b/src/imgs/big-circle-left.png
new file mode 100644
index 0000000..8820f70
--- /dev/null
+++ b/src/imgs/big-circle-left.png
diff --git a/src/imgs/big-circle-right-to-up1.png b/src/imgs/big-circle-right-to-up1.png
new file mode 100644
index 0000000..dbaf2e6
--- /dev/null
+++ b/src/imgs/big-circle-right-to-up1.png
diff --git a/src/imgs/big-circle-right-to-up2.png b/src/imgs/big-circle-right-to-up2.png
new file mode 100644
index 0000000..606c47c
--- /dev/null
+++ b/src/imgs/big-circle-right-to-up2.png
diff --git a/src/imgs/big-circle-right-to-up3.png b/src/imgs/big-circle-right-to-up3.png
new file mode 100644
index 0000000..23f12ff
--- /dev/null
+++ b/src/imgs/big-circle-right-to-up3.png
diff --git a/src/imgs/big-circle-right.png b/src/imgs/big-circle-right.png
new file mode 100644
index 0000000..825c4d7
--- /dev/null
+++ b/src/imgs/big-circle-right.png
diff --git a/src/imgs/big-circle-up-to-left1.png b/src/imgs/big-circle-up-to-left1.png
new file mode 100644
index 0000000..462d358
--- /dev/null
+++ b/src/imgs/big-circle-up-to-left1.png
diff --git a/src/imgs/big-circle-up-to-left2.png b/src/imgs/big-circle-up-to-left2.png
new file mode 100644
index 0000000..6e0305f
--- /dev/null
+++ b/src/imgs/big-circle-up-to-left2.png
diff --git a/src/imgs/big-circle-up-to-left3.png b/src/imgs/big-circle-up-to-left3.png
new file mode 100644
index 0000000..8ab9bf5
--- /dev/null
+++ b/src/imgs/big-circle-up-to-left3.png
diff --git a/src/imgs/big-circle-up.png b/src/imgs/big-circle-up.png
new file mode 100644
index 0000000..5b1508b
--- /dev/null
+++ b/src/imgs/big-circle-up.png
diff --git a/src/imgs/enemy-bullet.png b/src/imgs/enemy-bullet.png
new file mode 100644
index 0000000..66c2533
--- /dev/null
+++ b/src/imgs/enemy-bullet.png
diff --git a/src/imgs/font/ .png b/src/imgs/font/ .png
new file mode 100644
index 0000000..c900961
--- /dev/null
+++ b/src/imgs/font/ .png
diff --git a/src/imgs/font/white/!.png b/src/imgs/font/white/!.png
new file mode 100644
index 0000000..f7f4963
--- /dev/null
+++ b/src/imgs/font/white/!.png
diff --git a/src/imgs/font/white/&.png b/src/imgs/font/white/&.png
new file mode 100644
index 0000000..4f97229
--- /dev/null
+++ b/src/imgs/font/white/&.png
diff --git a/src/imgs/font/white/-.png b/src/imgs/font/white/-.png
new file mode 100644
index 0000000..18eb462
--- /dev/null
+++ b/src/imgs/font/white/-.png
diff --git a/src/imgs/font/white/..png b/src/imgs/font/white/..png
new file mode 100644
index 0000000..e29178a
--- /dev/null
+++ b/src/imgs/font/white/..png
diff --git a/src/imgs/font/white/?.png b/src/imgs/font/white/?.png
new file mode 100644
index 0000000..71884d7
--- /dev/null
+++ b/src/imgs/font/white/?.png
diff --git a/src/imgs/font/white/_.png b/src/imgs/font/white/_.png
new file mode 100644
index 0000000..7fd5f84
--- /dev/null
+++ b/src/imgs/font/white/_.png
diff --git a/src/imgs/font/white/a.png b/src/imgs/font/white/a.png
new file mode 100644
index 0000000..8cee648
--- /dev/null
+++ b/src/imgs/font/white/a.png
diff --git a/src/imgs/font/white/b.png b/src/imgs/font/white/b.png
new file mode 100644
index 0000000..62f4851
--- /dev/null
+++ b/src/imgs/font/white/b.png
diff --git a/src/imgs/font/white/c.png b/src/imgs/font/white/c.png
new file mode 100644
index 0000000..691f1d7
--- /dev/null
+++ b/src/imgs/font/white/c.png
diff --git a/src/imgs/font/white/d.png b/src/imgs/font/white/d.png
new file mode 100644
index 0000000..eb721b5
--- /dev/null
+++ b/src/imgs/font/white/d.png
diff --git a/src/imgs/font/white/e.png b/src/imgs/font/white/e.png
new file mode 100644
index 0000000..2b6031c
--- /dev/null
+++ b/src/imgs/font/white/e.png
diff --git a/src/imgs/font/white/ed.png b/src/imgs/font/white/ed.png
new file mode 100644
index 0000000..c180fc6
--- /dev/null
+++ b/src/imgs/font/white/ed.png
diff --git a/src/imgs/font/white/f.png b/src/imgs/font/white/f.png
new file mode 100644
index 0000000..e97e8c5
--- /dev/null
+++ b/src/imgs/font/white/f.png
diff --git a/src/imgs/font/white/g.png b/src/imgs/font/white/g.png
new file mode 100644
index 0000000..9b116d8
--- /dev/null
+++ b/src/imgs/font/white/g.png
diff --git a/src/imgs/font/white/h.png b/src/imgs/font/white/h.png
new file mode 100644
index 0000000..a563a82
--- /dev/null
+++ b/src/imgs/font/white/h.png
diff --git a/src/imgs/font/white/heart.png b/src/imgs/font/white/heart.png
new file mode 100644
index 0000000..ec57f75
--- /dev/null
+++ b/src/imgs/font/white/heart.png
diff --git a/src/imgs/font/white/i.png b/src/imgs/font/white/i.png
new file mode 100644
index 0000000..da655ed
--- /dev/null
+++ b/src/imgs/font/white/i.png
diff --git a/src/imgs/font/white/j.png b/src/imgs/font/white/j.png
new file mode 100644
index 0000000..ced6588
--- /dev/null
+++ b/src/imgs/font/white/j.png
diff --git a/src/imgs/font/white/k.png b/src/imgs/font/white/k.png
new file mode 100644
index 0000000..33d1649
--- /dev/null
+++ b/src/imgs/font/white/k.png
diff --git a/src/imgs/font/white/l.png b/src/imgs/font/white/l.png
new file mode 100644
index 0000000..83c6de9
--- /dev/null
+++ b/src/imgs/font/white/l.png
diff --git a/src/imgs/font/white/m.png b/src/imgs/font/white/m.png
new file mode 100644
index 0000000..1b7903c
--- /dev/null
+++ b/src/imgs/font/white/m.png
diff --git a/src/imgs/font/white/man.png b/src/imgs/font/white/man.png
new file mode 100644
index 0000000..f3aeb7d
--- /dev/null
+++ b/src/imgs/font/white/man.png
diff --git a/src/imgs/font/white/n.png b/src/imgs/font/white/n.png
new file mode 100644
index 0000000..778a738
--- /dev/null
+++ b/src/imgs/font/white/n.png
diff --git a/src/imgs/font/white/o.png b/src/imgs/font/white/o.png
new file mode 100644
index 0000000..48664f5
--- /dev/null
+++ b/src/imgs/font/white/o.png
diff --git a/src/imgs/font/white/p.png b/src/imgs/font/white/p.png
new file mode 100644
index 0000000..0c8652e
--- /dev/null
+++ b/src/imgs/font/white/p.png
diff --git a/src/imgs/font/white/q.png b/src/imgs/font/white/q.png
new file mode 100644
index 0000000..b0c5097
--- /dev/null
+++ b/src/imgs/font/white/q.png
diff --git a/src/imgs/font/white/r.png b/src/imgs/font/white/r.png
new file mode 100644
index 0000000..511a916
--- /dev/null
+++ b/src/imgs/font/white/r.png
diff --git a/src/imgs/font/white/rv.png b/src/imgs/font/white/rv.png
new file mode 100644
index 0000000..869d37a
--- /dev/null
+++ b/src/imgs/font/white/rv.png
diff --git a/src/imgs/font/white/s.png b/src/imgs/font/white/s.png
new file mode 100644
index 0000000..932714f
--- /dev/null
+++ b/src/imgs/font/white/s.png
diff --git a/src/imgs/font/white/t.png b/src/imgs/font/white/t.png
new file mode 100644
index 0000000..828a5f9
--- /dev/null
+++ b/src/imgs/font/white/t.png
diff --git a/src/imgs/font/white/u.png b/src/imgs/font/white/u.png
new file mode 100644
index 0000000..5d32614
--- /dev/null
+++ b/src/imgs/font/white/u.png
diff --git a/src/imgs/font/white/v.png b/src/imgs/font/white/v.png
new file mode 100644
index 0000000..a77f1dd
--- /dev/null
+++ b/src/imgs/font/white/v.png
diff --git a/src/imgs/font/white/w.png b/src/imgs/font/white/w.png
new file mode 100644
index 0000000..64f0866
--- /dev/null
+++ b/src/imgs/font/white/w.png
diff --git a/src/imgs/font/white/woman.png b/src/imgs/font/white/woman.png
new file mode 100644
index 0000000..f6e1422
--- /dev/null
+++ b/src/imgs/font/white/woman.png
diff --git a/src/imgs/font/white/x.png b/src/imgs/font/white/x.png
new file mode 100644
index 0000000..f186b8f
--- /dev/null
+++ b/src/imgs/font/white/x.png
diff --git a/src/imgs/font/white/y.png b/src/imgs/font/white/y.png
new file mode 100644
index 0000000..98d1bb8
--- /dev/null
+++ b/src/imgs/font/white/y.png
diff --git a/src/imgs/font/white/z.png b/src/imgs/font/white/z.png
new file mode 100644
index 0000000..ade4c33
--- /dev/null
+++ b/src/imgs/font/white/z.png
diff --git a/src/imgs/font/yellow/!.png b/src/imgs/font/yellow/!.png
new file mode 100644
index 0000000..919037b
--- /dev/null
+++ b/src/imgs/font/yellow/!.png
diff --git a/src/imgs/font/yellow/&.png b/src/imgs/font/yellow/&.png
new file mode 100644
index 0000000..74489a2
--- /dev/null
+++ b/src/imgs/font/yellow/&.png
diff --git a/src/imgs/font/yellow/-.png b/src/imgs/font/yellow/-.png
new file mode 100644
index 0000000..2677b45
--- /dev/null
+++ b/src/imgs/font/yellow/-.png
diff --git a/src/imgs/font/yellow/..png b/src/imgs/font/yellow/..png
new file mode 100644
index 0000000..5f0e9c3
--- /dev/null
+++ b/src/imgs/font/yellow/..png
diff --git a/src/imgs/font/yellow/?.png b/src/imgs/font/yellow/?.png
new file mode 100644
index 0000000..98ac04b
--- /dev/null
+++ b/src/imgs/font/yellow/?.png
diff --git a/src/imgs/font/yellow/_.png b/src/imgs/font/yellow/_.png
new file mode 100644
index 0000000..6211922
--- /dev/null
+++ b/src/imgs/font/yellow/_.png
diff --git a/src/imgs/font/yellow/a.png b/src/imgs/font/yellow/a.png
new file mode 100644
index 0000000..395ea56
--- /dev/null
+++ b/src/imgs/font/yellow/a.png
diff --git a/src/imgs/font/yellow/b.png b/src/imgs/font/yellow/b.png
new file mode 100644
index 0000000..e7740e0
--- /dev/null
+++ b/src/imgs/font/yellow/b.png
diff --git a/src/imgs/font/yellow/c.png b/src/imgs/font/yellow/c.png
new file mode 100644
index 0000000..98d9c02
--- /dev/null
+++ b/src/imgs/font/yellow/c.png
diff --git a/src/imgs/font/yellow/d.png b/src/imgs/font/yellow/d.png
new file mode 100644
index 0000000..b5378a9
--- /dev/null
+++ b/src/imgs/font/yellow/d.png
diff --git a/src/imgs/font/yellow/e.png b/src/imgs/font/yellow/e.png
new file mode 100644
index 0000000..9334386
--- /dev/null
+++ b/src/imgs/font/yellow/e.png
diff --git a/src/imgs/font/yellow/ed.png b/src/imgs/font/yellow/ed.png
new file mode 100644
index 0000000..7c7de83
--- /dev/null
+++ b/src/imgs/font/yellow/ed.png
diff --git a/src/imgs/font/yellow/f.png b/src/imgs/font/yellow/f.png
new file mode 100644
index 0000000..277e750
--- /dev/null
+++ b/src/imgs/font/yellow/f.png
diff --git a/src/imgs/font/yellow/g.png b/src/imgs/font/yellow/g.png
new file mode 100644
index 0000000..b47882f
--- /dev/null
+++ b/src/imgs/font/yellow/g.png
diff --git a/src/imgs/font/yellow/h.png b/src/imgs/font/yellow/h.png
new file mode 100644
index 0000000..3ecc26b
--- /dev/null
+++ b/src/imgs/font/yellow/h.png
diff --git a/src/imgs/font/yellow/heart.png b/src/imgs/font/yellow/heart.png
new file mode 100644
index 0000000..93e6f58
--- /dev/null
+++ b/src/imgs/font/yellow/heart.png
diff --git a/src/imgs/font/yellow/i.png b/src/imgs/font/yellow/i.png
new file mode 100644
index 0000000..3df7399
--- /dev/null
+++ b/src/imgs/font/yellow/i.png
diff --git a/src/imgs/font/yellow/j.png b/src/imgs/font/yellow/j.png
new file mode 100644
index 0000000..edc42c0
--- /dev/null
+++ b/src/imgs/font/yellow/j.png
diff --git a/src/imgs/font/yellow/k.png b/src/imgs/font/yellow/k.png
new file mode 100644
index 0000000..1a09894
--- /dev/null
+++ b/src/imgs/font/yellow/k.png
diff --git a/src/imgs/font/yellow/l.png b/src/imgs/font/yellow/l.png
new file mode 100644
index 0000000..aa449bb
--- /dev/null
+++ b/src/imgs/font/yellow/l.png
diff --git a/src/imgs/font/yellow/m.png b/src/imgs/font/yellow/m.png
new file mode 100644
index 0000000..77e2767
--- /dev/null
+++ b/src/imgs/font/yellow/m.png
diff --git a/src/imgs/font/yellow/man.png b/src/imgs/font/yellow/man.png
new file mode 100644
index 0000000..9c5dbc0
--- /dev/null
+++ b/src/imgs/font/yellow/man.png
diff --git a/src/imgs/font/yellow/n.png b/src/imgs/font/yellow/n.png
new file mode 100644
index 0000000..0dedbbb
--- /dev/null
+++ b/src/imgs/font/yellow/n.png
diff --git a/src/imgs/font/yellow/o.png b/src/imgs/font/yellow/o.png
new file mode 100644
index 0000000..d8d946d
--- /dev/null
+++ b/src/imgs/font/yellow/o.png
diff --git a/src/imgs/font/yellow/p.png b/src/imgs/font/yellow/p.png
new file mode 100644
index 0000000..7413ef1
--- /dev/null
+++ b/src/imgs/font/yellow/p.png
diff --git a/src/imgs/font/yellow/q.png b/src/imgs/font/yellow/q.png
new file mode 100644
index 0000000..749f269
--- /dev/null
+++ b/src/imgs/font/yellow/q.png
diff --git a/src/imgs/font/yellow/r.png b/src/imgs/font/yellow/r.png
new file mode 100644
index 0000000..323cac4
--- /dev/null
+++ b/src/imgs/font/yellow/r.png
diff --git a/src/imgs/font/yellow/rv.png b/src/imgs/font/yellow/rv.png
new file mode 100644
index 0000000..6c4f309
--- /dev/null
+++ b/src/imgs/font/yellow/rv.png
diff --git a/src/imgs/font/yellow/s.png b/src/imgs/font/yellow/s.png
new file mode 100644
index 0000000..9ac4e01
--- /dev/null
+++ b/src/imgs/font/yellow/s.png
diff --git a/src/imgs/font/yellow/t.png b/src/imgs/font/yellow/t.png
new file mode 100644
index 0000000..66a764c
--- /dev/null
+++ b/src/imgs/font/yellow/t.png
diff --git a/src/imgs/font/yellow/u.png b/src/imgs/font/yellow/u.png
new file mode 100644
index 0000000..e6445de
--- /dev/null
+++ b/src/imgs/font/yellow/u.png
diff --git a/src/imgs/font/yellow/v.png b/src/imgs/font/yellow/v.png
new file mode 100644
index 0000000..e7fe866
--- /dev/null
+++ b/src/imgs/font/yellow/v.png
diff --git a/src/imgs/font/yellow/w.png b/src/imgs/font/yellow/w.png
new file mode 100644
index 0000000..3073fa6
--- /dev/null
+++ b/src/imgs/font/yellow/w.png
diff --git a/src/imgs/font/yellow/woman.png b/src/imgs/font/yellow/woman.png
new file mode 100644
index 0000000..687d276
--- /dev/null
+++ b/src/imgs/font/yellow/woman.png
diff --git a/src/imgs/font/yellow/x.png b/src/imgs/font/yellow/x.png
new file mode 100644
index 0000000..b926580
--- /dev/null
+++ b/src/imgs/font/yellow/x.png
diff --git a/src/imgs/font/yellow/y.png b/src/imgs/font/yellow/y.png
new file mode 100644
index 0000000..1baf0ff
--- /dev/null
+++ b/src/imgs/font/yellow/y.png
diff --git a/src/imgs/font/yellow/z.png b/src/imgs/font/yellow/z.png
new file mode 100644
index 0000000..42161bf
--- /dev/null
+++ b/src/imgs/font/yellow/z.png
diff --git a/src/imgs/friendly-bullet.png b/src/imgs/friendly-bullet.png
new file mode 100644
index 0000000..77ec9a7
--- /dev/null
+++ b/src/imgs/friendly-bullet.png
diff --git a/src/imgs/green-down-to-left.png b/src/imgs/green-down-to-left.png
new file mode 100644
index 0000000..f970d4b
--- /dev/null
+++ b/src/imgs/green-down-to-left.png
diff --git a/src/imgs/green-down.png b/src/imgs/green-down.png
new file mode 100644
index 0000000..817bc83
--- /dev/null
+++ b/src/imgs/green-down.png
diff --git a/src/imgs/green-left-to-up.png b/src/imgs/green-left-to-up.png
new file mode 100644
index 0000000..fc79919
--- /dev/null
+++ b/src/imgs/green-left-to-up.png
diff --git a/src/imgs/green-left.png b/src/imgs/green-left.png
new file mode 100644
index 0000000..1851fb4
--- /dev/null
+++ b/src/imgs/green-left.png
diff --git a/src/imgs/green-right-to-down.png b/src/imgs/green-right-to-down.png
new file mode 100644
index 0000000..fc645b5
--- /dev/null
+++ b/src/imgs/green-right-to-down.png
diff --git a/src/imgs/green-right.png b/src/imgs/green-right.png
new file mode 100644
index 0000000..ce3496d
--- /dev/null
+++ b/src/imgs/green-right.png
diff --git a/src/imgs/green-up-to-right.png b/src/imgs/green-up-to-right.png
new file mode 100644
index 0000000..1250970
--- /dev/null
+++ b/src/imgs/green-up-to-right.png
diff --git a/src/imgs/green-up.png b/src/imgs/green-up.png
new file mode 100644
index 0000000..813ebbd
--- /dev/null
+++ b/src/imgs/green-up.png
diff --git a/src/imgs/player-left.png b/src/imgs/player-left.png
new file mode 100644
index 0000000..5061a1b
--- /dev/null
+++ b/src/imgs/player-left.png
diff --git a/src/imgs/player-right.png b/src/imgs/player-right.png
new file mode 100644
index 0000000..1f62209
--- /dev/null
+++ b/src/imgs/player-right.png
diff --git a/src/imgs/player-up.png b/src/imgs/player-up.png
new file mode 100644
index 0000000..8fefada
--- /dev/null
+++ b/src/imgs/player-up.png
diff --git a/src/imgs/red-down-to-left.png b/src/imgs/red-down-to-left.png
new file mode 100644
index 0000000..8313dc0
--- /dev/null
+++ b/src/imgs/red-down-to-left.png
diff --git a/src/imgs/red-down.png b/src/imgs/red-down.png
new file mode 100644
index 0000000..9042dfa
--- /dev/null
+++ b/src/imgs/red-down.png
diff --git a/src/imgs/red-left-to-up.png b/src/imgs/red-left-to-up.png
new file mode 100644
index 0000000..6139f50
--- /dev/null
+++ b/src/imgs/red-left-to-up.png
diff --git a/src/imgs/red-left.png b/src/imgs/red-left.png
new file mode 100644
index 0000000..21ac51c
--- /dev/null
+++ b/src/imgs/red-left.png
diff --git a/src/imgs/red-right-to-down.png b/src/imgs/red-right-to-down.png
new file mode 100644
index 0000000..429f536
--- /dev/null
+++ b/src/imgs/red-right-to-down.png
diff --git a/src/imgs/red-right.png b/src/imgs/red-right.png
new file mode 100644
index 0000000..83a35b1
--- /dev/null
+++ b/src/imgs/red-right.png
diff --git a/src/imgs/red-up-to-right.png b/src/imgs/red-up-to-right.png
new file mode 100644
index 0000000..5d593ea
--- /dev/null
+++ b/src/imgs/red-up-to-right.png
diff --git a/src/imgs/red-up.png b/src/imgs/red-up.png
new file mode 100644
index 0000000..0f671c0
--- /dev/null
+++ b/src/imgs/red-up.png
diff --git a/src/imgs/selector.png b/src/imgs/selector.png
new file mode 100644
index 0000000..9ccbcd7
--- /dev/null
+++ b/src/imgs/selector.png
diff --git a/src/imgs/simple-down.png b/src/imgs/simple-down.png
new file mode 100644
index 0000000..86f3fdf
--- /dev/null
+++ b/src/imgs/simple-down.png
diff --git a/src/imgs/simple-rot1.png b/src/imgs/simple-rot1.png
new file mode 100644
index 0000000..8dd3740
--- /dev/null
+++ b/src/imgs/simple-rot1.png
diff --git a/src/imgs/simple-rot2.png b/src/imgs/simple-rot2.png
new file mode 100644
index 0000000..9ed0864
--- /dev/null
+++ b/src/imgs/simple-rot2.png
diff --git a/src/imgs/simple-rot3.png b/src/imgs/simple-rot3.png
new file mode 100644
index 0000000..69362c0
--- /dev/null
+++ b/src/imgs/simple-rot3.png
diff --git a/src/imgs/simple-rot4.png b/src/imgs/simple-rot4.png
new file mode 100644
index 0000000..48afbd7
--- /dev/null
+++ b/src/imgs/simple-rot4.png
diff --git a/src/imgs/simple-up.png b/src/imgs/simple-up.png
new file mode 100644
index 0000000..bce253e
--- /dev/null
+++ b/src/imgs/simple-up.png
diff --git a/src/imgs/topbar.png b/src/imgs/topbar.png
new file mode 100644
index 0000000..8b798bc
--- /dev/null
+++ b/src/imgs/topbar.png
diff --git a/src/imgs/white-down.png b/src/imgs/white-down.png
new file mode 100644
index 0000000..46bf38f
--- /dev/null
+++ b/src/imgs/white-down.png
diff --git a/src/imgs/white-strange-left.png b/src/imgs/white-strange-left.png
new file mode 100644
index 0000000..803fecd
--- /dev/null
+++ b/src/imgs/white-strange-left.png
diff --git a/src/imgs/white-strange-right.png b/src/imgs/white-strange-right.png
new file mode 100644
index 0000000..e66ef02
--- /dev/null
+++ b/src/imgs/white-strange-right.png
diff --git a/src/imgs/white-turn.png b/src/imgs/white-turn.png
new file mode 100644
index 0000000..099ce93
--- /dev/null
+++ b/src/imgs/white-turn.png
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..9f462e5
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,10 @@
+import "./style.css";
+import "./Events";
+import loadAllImages from "./Images";
+import { start } from "./game";
+
+async function init() {
+  await loadAllImages();
+  start();
+}
+document.body.onload = init;
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..026f6a1
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,13 @@
+body {
+  display: grid; 
+  height: 100vh;
+}
+canvas {
+  --scale: 3;
+  width: calc(320px * var(--scale));
+  height: calc(200px * var(--scale));
+  place-self: center;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  border: 1px solid black;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..05f80b9
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true
+  },
+  "include": ["src"]
+}