Added types to helpers

2021-05-25 17:35:26 +10:00 · 2021-05-25 17:35:26 +10:00 · 86f15e9274
commit 86f15e9274
parent 5212c94a3d
33 changed files with 798 additions and 507 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,8 +1,7 @@
 import React from "react";
 import { ThemeProvider } from "theme-ui";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-import theme from "./theme.js";
+import theme from "./theme";
 import Home from "./routes/Home";
 import Game from "./routes/Game";
 import About from "./routes/About";
--- a/src/database.ts
+++ b/src/database.ts
@ -1,16 +1,16 @@
 // eslint-disable-next-line no-unused-vars
-import Dexie, { Version, DexieOptions } from "dexie";
+import Dexie, { Version, DexieOptions, Transaction } from "dexie";
 import "dexie-observable";
 import shortid from "shortid";
 import blobToBuffer from "./helpers/blobToBuffer";
-import { getGridDefaultInset } from "./helpers/grid";
+import { getGridDefaultInset, Grid } from "./helpers/grid";
 import { convertOldActionsToShapes } from "./actions";
 import { createThumbnail } from "./helpers/image";
 // Helper to create a thumbnail for a file in a db
-async function createDataThumbnail(data) {
+async function createDataThumbnail(data: any) {
-  let url;
+  let url: string;
  if (data?.resolutions?.low?.file) {
    url = URL.createObjectURL(new Blob([data.resolutions.low.file]));
  } else {
@ -20,7 +20,8 @@ async function createDataThumbnail(data) {
    new Promise((resolve) => {
      let image = new Image();
      image.onload = async () => {
-        const thumbnail = await createThumbnail(image);
+        // TODO: confirm parameter for type here
        const thumbnail = await createThumbnail(image, "file");
        resolve(thumbnail);
      };
      image.src = url;
@ -34,13 +35,16 @@ async function createDataThumbnail(data) {
 * @param {Version} version
 */
 type VersionCallback = (version: Version) => void
 /**
 * Mapping of version number to their upgrade function
 * @type {Object.<number, VersionCallback>}
 */
-const versions = {
+
 const versions: Record<number, VersionCallback> = {
  // v1.2.0
-  1(v) {
+  1(v: Version) {
    v.stores({
      maps: "id, owner",
      states: "mapId",
@ -49,29 +53,29 @@ const versions = {
    });
  },
  // v1.2.1 - Move from blob files to array buffers
-  2(v) {
+  2(v: Version) {
-    v.stores({}).upgrade(async (tx) => {
+    v.stores({}).upgrade(async (tx: Transaction) => {
      const maps = await Dexie.waitFor(tx.table("maps").toArray());
-      let mapBuffers = {};
+      let mapBuffers: any = {};
      for (let map of maps) {
        mapBuffers[map.id] = await Dexie.waitFor(blobToBuffer(map.file));
      }
      return tx
        .table("maps")
        .toCollection()
-        .modify((map) => {
+        .modify((map: any) => {
          map.file = mapBuffers[map.id];
        });
    });
  },
  // v1.3.0 - Added new default tokens
-  3(v) {
+  3(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("states")
        .toCollection()
-        .modify((state) => {
+        .modify((state: any) => {
-          function mapTokenId(id) {
+          function mapTokenId(id: any) {
            switch (id) {
              case "__default-Axes":
                return "__default-Barbarian";
@ -128,23 +132,23 @@ const versions = {
    });
  },
  // v1.3.1 - Added show grid option
-  4(v) {
+  4(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("maps")
        .toCollection()
-        .modify((map) => {
+        .modify((map: any) => {
          map.showGrid = false;
        });
    });
  },
  // v1.4.0 - Added fog subtraction
-  5(v) {
+  5(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("states")
        .toCollection()
-        .modify((state) => {
+        .modify((state: any) => {
          for (let fogAction of state.fogDrawActions) {
            if (fogAction.type === "add" || fogAction.type === "edit") {
              for (let shape of fogAction.shapes) {
@ -156,24 +160,24 @@ const versions = {
    });
  },
  // v1.4.2 - Added map resolutions
-  6(v) {
+  6(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("maps")
        .toCollection()
-        .modify((map) => {
+        .modify((map: any) => {
          map.resolutions = {};
          map.quality = "original";
        });
    });
  },
  // v1.5.0 - Fixed default token rogue spelling
-  7(v) {
+  7(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("states")
        .toCollection()
-        .modify((state) => {
+        .modify((state: any) => {
          for (let id in state.tokens) {
            if (state.tokens[id].tokenId === "__default-Rouge") {
              state.tokens[id].tokenId = "__default-Rogue";
@ -183,23 +187,23 @@ const versions = {
    });
  },
  // v1.5.0 - Added map snap to grid option
-  8(v) {
+  8(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("maps")
        .toCollection()
-        .modify((map) => {
+        .modify((map: any) => {
          map.snapToGrid = true;
        });
    });
  },
  // v1.5.1 - Added lock, visibility and modified to tokens
-  9(v) {
+  9(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("states")
        .toCollection()
-        .modify((state) => {
+        .modify((state: any) => {
          for (let id in state.tokens) {
            state.tokens[id].lastModifiedBy = state.tokens[id].lastEditedBy;
            delete state.tokens[id].lastEditedBy;
@ -211,51 +215,51 @@ const versions = {
    });
  },
  // v1.5.1 - Added token prop category and remove isVehicle bool
-  10(v) {
+  10(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("tokens")
        .toCollection()
-        .modify((token) => {
+        .modify((token: any) => {
          token.category = token.isVehicle ? "vehicle" : "character";
          delete token.isVehicle;
        });
    });
  },
  // v1.5.2 - Added automatic cache invalidation to maps
-  11(v) {
+  11(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("maps")
        .toCollection()
-        .modify((map) => {
+        .modify((map: any) => {
          map.lastUsed = map.lastModified;
        });
    });
  },
  // v1.5.2 - Added automatic cache invalidation to tokens
-  12(v) {
+  12(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("tokens")
        .toCollection()
-        .modify((token) => {
+        .modify((token: any) => {
          token.lastUsed = token.lastModified;
        });
    });
  },
  // v1.6.0 - Added map grouping and grid scale and offset
-  13(v) {
+  13(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("maps")
        .toCollection()
-        .modify((map) => {
+        .modify((map: any) => {
          map.group = "";
          map.grid = {
            size: { x: map.gridX, y: map.gridY },
            inset: getGridDefaultInset(
-              { size: { x: map.gridX, y: map.gridY }, type: "square" },
+              { size: { x: map.gridX, y: map.gridY }, type: "square" } as Grid,
              map.width,
              map.height
            ),
@ -268,21 +272,21 @@ const versions = {
    });
  },
  // v1.6.0 - Added token grouping
-  14(v) {
+  14(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("tokens")
        .toCollection()
-        .modify((token) => {
+        .modify((token: any) => {
          token.group = "";
        });
    });
  },
  // v1.6.1 - Added width and height to tokens
-  15(v) {
+  15(v: Version) {
-    v.stores({}).upgrade(async (tx) => {
+    v.stores({}).upgrade(async (tx: Transaction) => {
      const tokens = await Dexie.waitFor(tx.table("tokens").toArray());
-      let tokenSizes = {};
+      let tokenSizes: any = {};
      for (let token of tokens) {
        const url = URL.createObjectURL(new Blob([token.file]));
        let image = new Image();
@ -298,31 +302,31 @@ const versions = {
      return tx
        .table("tokens")
        .toCollection()
-        .modify((token) => {
+        .modify((token: any) => {
          token.width = tokenSizes[token.id].width;
          token.height = tokenSizes[token.id].height;
        });
    });
  },
  // v1.7.0 - Added note tool
-  16(v) {
+  16(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("states")
        .toCollection()
-        .modify((state) => {
+        .modify((state: any) => {
          state.notes = {};
          state.editFlags = [...state.editFlags, "notes"];
        });
    });
  },
  // 1.7.0 (hotfix) - Optimized fog shape edits to only include needed data
-  17(v) {
+  17(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("states")
        .toCollection()
-        .modify((state) => {
+        .modify((state: any) => {
          for (let i = 0; i < state.fogDrawActions.length; i++) {
            const action = state.fogDrawActions[i];
            if (action && action.type === "edit") {
@ -340,12 +344,12 @@ const versions = {
    });
  },
  // 1.8.0 - Added note text only mode, converted draw and fog representations
-  18(v) {
+  18(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("states")
        .toCollection()
-        .modify((state) => {
+        .modify((state: any) => {
          for (let id in state.notes) {
            state.notes[id].textOnly = false;
          }
@ -367,12 +371,12 @@ const versions = {
    });
  },
  // 1.8.0 - Add thumbnail to maps and add measurement to grid
-  19(v) {
+  19(v: Version) {
-    v.stores({}).upgrade(async (tx) => {
+    v.stores({}).upgrade(async (tx: Transaction) => {
      const userId = (await Dexie.waitFor(tx.table("user").get("userId")))
        .value;
      const maps = await Dexie.waitFor(tx.table("maps").toArray());
-      const thumbnails = {};
+      const thumbnails: any = {};
      for (let map of maps) {
        try {
          if (map.owner === userId) {
@ -383,19 +387,19 @@ const versions = {
      return tx
        .table("maps")
        .toCollection()
-        .modify((map) => {
+        .modify((map: any) => {
          map.thumbnail = thumbnails[map.id];
          map.grid.measurement = { type: "chebyshev", scale: "5ft" };
        });
    });
  },
  // 1.8.0 - Add thumbnail to tokens
-  20(v) {
+  20(v: Version) {
-    v.stores({}).upgrade(async (tx) => {
+    v.stores({}).upgrade(async (tx: Transaction) => {
      const userId = (await Dexie.waitFor(tx.table("user").get("userId")))
        .value;
      const tokens = await Dexie.waitFor(tx.table("tokens").toArray());
-      const thumbnails = {};
+      const thumbnails: any = {};
      for (let token of tokens) {
        try {
          if (token.owner === userId) {
@ -406,22 +410,22 @@ const versions = {
      return tx
        .table("tokens")
        .toCollection()
-        .modify((token) => {
+        .modify((token: any) => {
          token.thumbnail = thumbnails[token.id];
        });
    });
  },
  // 1.8.0 - Upgrade for Dexie.Observable
-  21(v) {
+  21(v: Version) {
    v.stores({});
  },
  // v1.8.1 - Shorten fog shape ids
-  22(v) {
+  22(v: Version) {
-    v.stores({}).upgrade((tx) => {
+    v.stores({}).upgrade((tx: Transaction) => {
      return tx
        .table("states")
        .toCollection()
-        .modify((state) => {
+        .modify((state: any) => {
          for (let id of Object.keys(state.fogShapes)) {
            const newId = shortid.generate();
            state.fogShapes[newId] = state.fogShapes[id];
@ -440,7 +444,7 @@ const latestVersion = 22;
 * @param {Dexie} db
 * @param {number=} upTo version number to load up to, latest version if undefined
 */
-export function loadVersions(db, upTo = latestVersion) {
+export function loadVersions(db: Dexie, upTo = latestVersion) {
  for (let versionNumber = 1; versionNumber <= upTo; versionNumber++) {
    versions[versionNumber](db.version(versionNumber));
  }
@ -454,7 +458,7 @@ export function loadVersions(db, upTo = latestVersion) {
 * @returns {Dexie}
 */
 export function getDatabase(
-  options,
+  options: DexieOptions,
  name = "OwlbearRodeoDB",
  versionNumber = latestVersion
 ) {
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -0,0 +1,2 @@
 declare module 'pepjs';
 declare module 'socket.io-msgpack-parser';
--- a/src/helpers/FakeStorage.ts
+++ b/src/helpers/FakeStorage.ts
@ -2,17 +2,17 @@
 * A faked local or session storage used when the user has disabled storage
 */
 class FakeStorage {
-  data = {};
+  data: { [keyName: string ]: any} = {};
-  key(index) {
+  key(index: number) {
    return Object.keys(this.data)[index] || null;
  }
-  getItem(keyName) {
+  getItem(keyName: string ) {
    return this.data[keyName] || null;
  }
-  setItem(keyName, keyValue) {
+  setItem(keyName: string, keyValue: any) {
    this.data[keyName] = keyValue;
  }
-  removeItem(keyName) {
+  removeItem(keyName: string) {
    delete this.data[keyName];
  }
  clear() {
--- a/src/helpers/KonvaBridge.tsx
+++ b/src/helpers/KonvaBridge.tsx
@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import {
  InteractionEmitterContext,
@ -47,7 +47,7 @@ import {
 /**
 * Provide a bridge for konva that forwards our contexts
 */
-function KonvaBridge({ stageRender, children }) {
+function KonvaBridge({ stageRender, children }: { stageRender: any, children: any}) {
  const mapStageRef = useMapStage();
  const auth = useAuth();
  const settings = useSettings();
--- a/src/helpers/Settings.ts
+++ b/src/helpers/Settings.ts
@ -8,7 +8,7 @@ class Settings {
  currentVersion;
  storage;
-  constructor(name) {
+  constructor(name: string) {
    this.name = name;
    // Try and use local storage if it is available, if not mock it with an in memory storage
    try {
@ -22,30 +22,30 @@ class Settings {
    this.currentVersion = this.get("__version");
  }
-  version(versionNumber, upgradeFunction) {
+  version(versionNumber: number, upgradeFunction: Function) {
    if (versionNumber > this.currentVersion) {
      this.currentVersion = versionNumber;
      this.setAll(upgradeFunction(this.getAll()));
    }
  }
-  getAll() {
+  getAll(): any {
    return JSON.parse(this.storage.getItem(this.name));
  }
-  get(key) {
+  get(key: string) {
    const settings = this.getAll();
    return settings && settings[key];
  }
-  setAll(newSettings) {
+  setAll(newSettings: any) {
    this.storage.setItem(
      this.name,
      JSON.stringify({ ...newSettings, __version: this.currentVersion })
    );
  }
-  set(key, value) {
+  set(key: string, value: string) {
    let settings = this.getAll();
    settings[key] = value;
    this.setAll(settings);
--- a/src/helpers/Size.ts
+++ b/src/helpers/Size.ts
@ -8,9 +8,9 @@ class Size extends Vector2 {
  /**
   * @param {number} width
   * @param {number} height
-   * @param {number=} radius Used to represent hexagon sizes
+   * @param {number} radius Used to represent hexagon sizes
   */
-  constructor(width, height, radius) {
+  constructor(width: number, height: number, radius?: number) {
    super(width, height);
    this._radius = radius;
  }
@ -18,35 +18,35 @@ class Size extends Vector2 {
  /**
   * @returns {number}
   */
-  get width() {
+  get width(): number {
    return this.x;
  }
  /**
   * @param {number} width
   */
-  set width(width) {
+  set width(width: number) {
    this.x = width;
  }
  /**
   * @returns {number}
   */
-  get height() {
+  get height(): number {
    return this.y;
  }
  /**
   * @param {number} height
   */
-  set height(height) {
+  set height(height: number) {
    this.y = height;
  }
  /**
   * @returns {number}
   */
-  get radius() {
+  get radius(): number {
    if (this._radius) {
      return this._radius;
    } else {
@ -57,7 +57,7 @@ class Size extends Vector2 {
  /**
   * @param {number} radius
   */
-  set radius(radius) {
+  set radius(radius: number) {
    this._radius = radius;
  }
 }
--- a/src/helpers/Vector2.ts
+++ b/src/helpers/Vector2.ts
@ -5,6 +5,14 @@ import {
  floorTo as floorToNumber,
 } from "./shared";
 export type BoundingBox = {
  min: Vector2, 
  max: Vector2, 
  width: number, 
  height: number, 
  center: Vector2
 }
 /**
 * Vector class with x, y and static helper methods
 */
@ -12,17 +20,17 @@ class Vector2 {
  /**
   * @type {number} x - X component of the vector
   */
-  x;
+  x: number;
  /**
   * @type {number} y - Y component of the vector
   */
-  y;
+  y: number;
  /**
   * @param {number} x
   * @param {number} y
   */
-  constructor(x, y) {
+  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
@ -31,7 +39,7 @@ class Vector2 {
   * @param {Vector2} p
   * @returns {number} Length squared of `p`
   */
-  static lengthSquared(p) {
+  static lengthSquared(p: Vector2): number {
    return p.x * p.x + p.y * p.y;
  }
@ -39,7 +47,7 @@ class Vector2 {
   * @param {Vector2} p
   * @returns {number} Length of `p`
   */
-  static length(p) {
+  static setLength(p: Vector2): number {
    return Math.sqrt(this.lengthSquared(p));
  }
@ -47,8 +55,8 @@ class Vector2 {
   * @param {Vector2} p
   * @returns {Vector2} `p` normalized, if length of `p` is 0 `{x: 0, y: 0}` is returned
   */
-  static normalize(p) {
+  static normalize(p: Vector2): Vector2 {
-    const l = this.length(p);
+    const l = this.setLength(p);
    if (l === 0) {
      return { x: 0, y: 0 };
    }
@ -60,7 +68,7 @@ class Vector2 {
   * @param {Vector2} b
   * @returns {number}  Dot product between `a` and `b`
   */
-  static dot(a, b) {
+  static dot(a: Vector2, b: Vector2): number {
    return a.x * b.x + a.y * b.y;
  }
@ -69,7 +77,7 @@ class Vector2 {
   * @param {(Vector2 | number)} b
   * @returns {Vector2} a - b
   */
-  static subtract(a, b) {
+  static subtract(a: Vector2, b: Vector2 | number): Vector2 {
    if (typeof b === "number") {
      return { x: a.x - b, y: a.y - b };
    } else {
@ -82,7 +90,7 @@ class Vector2 {
   * @param {(Vector2 | number)} b
   * @returns {Vector2} a + b
   */
-  static add(a, b) {
+  static add(a: Vector2, b: Vector2 | number): Vector2 {
    if (typeof b === "number") {
      return { x: a.x + b, y: a.y + b };
    } else {
@ -95,7 +103,7 @@ class Vector2 {
   * @param {(Vector2 | number)} b
   * @returns {Vector2} a * b
   */
-  static multiply(a, b) {
+  static multiply(a: Vector2, b: Vector2 | number): Vector2 {
    if (typeof b === "number") {
      return { x: a.x * b, y: a.y * b };
    } else {
@ -108,7 +116,7 @@ class Vector2 {
   * @param {(Vector2 | number)} b
   * @returns {Vector2} a / b
   */
-  static divide(a, b) {
+  static divide(a: Vector2, b: Vector2 | number): Vector2 {
    if (typeof b === "number") {
      return { x: a.x / b, y: a.y / b };
    } else {
@ -123,7 +131,7 @@ class Vector2 {
   * @param {number} angle Angle of rotation in degrees
   * @returns {Vector2} Rotated point
   */
-  static rotate(point, origin, angle) {
+  static rotate(point: Vector2, origin: Vector2, angle: number): Vector2 {
    const cos = Math.cos(toRadians(angle));
    const sin = Math.sin(toRadians(angle));
    const dif = this.subtract(point, origin);
@ -139,7 +147,7 @@ class Vector2 {
   * @param {number} angle Angle of rotation in degrees
   * @returns {Vector2} Rotated direction
   */
-  static rotateDirection(direction, angle) {
+  static rotateDirection(direction: Vector2, angle: number): Vector2 {
    return this.rotate(direction, { x: 0, y: 0 }, angle);
  }
@ -149,7 +157,7 @@ class Vector2 {
   * @param {(Vector2 | number)} [minimum] Value to compare
   * @returns {(Vector2 | number)}
   */
-  static min(a, minimum) {
+  static min(a: Vector2, minimum?: Vector2 | number): Vector2 | number {
    if (minimum === undefined) {
      return a.x < a.y ? a.x : a.y;
    } else if (typeof minimum === "number") {
@ -164,7 +172,7 @@ class Vector2 {
   * @param {(Vector2 | number)} [maximum] Value to compare
   * @returns {(Vector2 | number)}
   */
-  static max(a, maximum) {
+  static max(a: Vector2, maximum?: Vector2 | number): Vector2 | number {
    if (maximum === undefined) {
      return a.x > a.y ? a.x : a.y;
    } else if (typeof maximum === "number") {
@ -180,7 +188,7 @@ class Vector2 {
   * @param {Vector2} to
   * @returns {Vector2}
   */
-  static roundTo(p, to) {
+  static roundTo(p: Vector2, to: Vector2): Vector2 {
    return {
      x: roundToNumber(p.x, to.x),
      y: roundToNumber(p.y, to.y),
@ -193,7 +201,7 @@ class Vector2 {
   * @param {Vector2} to
   * @returns {Vector2}
   */
-  static floorTo(p, to) {
+  static floorTo(p: Vector2, to: Vector2): Vector2 {
    return {
      x: floorToNumber(p.x, to.x),
      y: floorToNumber(p.y, to.y),
@ -204,7 +212,7 @@ class Vector2 {
   * @param {Vector2} a
   * @returns {Vector2} The component wise sign of `a`
   */
-  static sign(a) {
+  static sign(a: Vector2): Vector2 {
    return { x: Math.sign(a.x), y: Math.sign(a.y) };
  }
@ -212,7 +220,7 @@ class Vector2 {
   * @param {Vector2} a
   * @returns {Vector2} The component wise absolute of `a`
   */
-  static abs(a) {
+  static abs(a: Vector2): Vector2 {
    return { x: Math.abs(a.x), y: Math.abs(a.y) };
  }
@ -221,7 +229,7 @@ class Vector2 {
   * @param {(Vector2 | number)} b
   * @returns {Vector2} `a` to the power of `b`
   */
-  static pow(a, b) {
+  static pow(a: Vector2, b: Vector2 | number): Vector2 {
    if (typeof b === "number") {
      return { x: Math.pow(a.x, b), y: Math.pow(a.y, b) };
    } else {
@ -233,7 +241,7 @@ class Vector2 {
   * @param {Vector2} a
   * @returns {number} The dot product between `a` and `a`
   */
-  static dot2(a) {
+  static dot2(a: Vector2): number {
    return this.dot(a, a);
  }
@ -244,7 +252,7 @@ class Vector2 {
   * @param {number} max
   * @returns {Vector2}
   */
-  static clamp(a, min, max) {
+  static clamp(a: Vector2, min: number, max: number): Vector2 {
    return {
      x: Math.min(Math.max(a.x, min), max),
      y: Math.min(Math.max(a.y, min), max),
@ -259,11 +267,11 @@ class Vector2 {
   * @param {Vector2} b End of the line
   * @returns {Object} The distance to and the closest point on the line segment
   */
-  static distanceToLine(p, a, b) {
+  static distanceToLine(p: Vector2, a: Vector2, b: Vector2): Object {
    const pa = this.subtract(p, a);
    const ba = this.subtract(b, a);
    const h = Math.min(Math.max(this.dot(pa, ba) / this.dot(ba, ba), 0), 1);
-    const distance = this.length(this.subtract(pa, this.multiply(ba, h)));
+    const distance = this.setLength(this.subtract(pa, this.multiply(ba, h)));
    const point = this.add(a, this.multiply(ba, h));
    return { distance, point };
  }
@ -278,7 +286,7 @@ class Vector2 {
   * @param {Vector2} C End of the curve
   * @returns {Object} The distance to and the closest point on the curve
   */
-  static distanceToQuadraticBezier(pos, A, B, C) {
+  static distanceToQuadraticBezier(pos: Vector2, A: Vector2, B: Vector2, C: Vector2): Object {
    let distance = 0;
    let point = { x: pos.x, y: pos.y };
@ -358,7 +366,7 @@ class Vector2 {
   * @param {Vector2[]} points
   * @returns {BoundingBox}
   */
-  static getBoundingBox(points) {
+  static getBoundingBox(points: Vector2[]): BoundingBox {
    let minX = Number.MAX_VALUE;
    let maxX = Number.MIN_VALUE;
    let minY = Number.MAX_VALUE;
@ -389,7 +397,7 @@ class Vector2 {
   * @param {Vector2[]} points
   * @returns {boolean}
   */
-  static pointInPolygon(p, points) {
+  static pointInPolygon(p: Vector2, points: Vector2[]): boolean {
    const bounds = this.getBoundingBox(points);
    if (
      p.x < bounds.min.x ||
@ -422,8 +430,9 @@ class Vector2 {
   * @param {Vector2} a
   * @param {Vector2} b
   * @param {number} threshold
   * @returns {boolean}
   */
-  static compare(a, b, threshold) {
+  static compare(a: Vector2, b: Vector2, threshold: number): boolean {
    return this.lengthSquared(this.subtract(a, b)) < threshold * threshold;
  }
@ -431,9 +440,10 @@ class Vector2 {
   * Returns the distance between two vectors
   * @param {Vector2} a
   * @param {Vector2} b
   * @returns {number}
   */
-  static distance(a, b) {
+  static distance(a: Vector2, b: Vector2): number {
-    return this.length(this.subtract(a, b));
+    return this.setLength(this.subtract(a, b));
  }
  /**
@ -443,15 +453,16 @@ class Vector2 {
   * @param {number} alpha
   * @returns {Vector2}
   */
-  static lerp(a, b, alpha) {
+  static lerp(a: Vector2, b: Vector2, alpha: number): Vector2 {
    return { x: lerpNumber(a.x, b.x, alpha), y: lerpNumber(a.y, b.y, alpha) };
  }
  /**
   * Returns total length of a an array of points treated as a path
   * @param {Vector2[]} points the array of points in the path
   * @returns {number}
   */
-  static pathLength(points) {
+  static pathLength(points: Vector2[]): number {
    let l = 0;
    for (let i = 1; i < points.length; i++) {
      l += this.distance(points[i - 1], points[i]);
@ -464,8 +475,9 @@ class Vector2 {
   * based off of http://depts.washington.edu/acelab/proj/dollar/index.html
   * @param {Vector2[]} points the points to resample
   * @param {number} n the number of new points
   * @returns {Vector2[]}
   */
-  static resample(points, n) {
+  static resample(points: Vector2[], n: number): Vector2[] {
    if (points.length === 0 || n <= 0) {
      return [];
    }
@ -501,7 +513,7 @@ class Vector2 {
   * @param {("counterClockwise"|"clockwise")=} direction Direction to rotate the vector
   * @returns {Vector2}
   */
-  static rotate90(p, direction = "clockwise") {
+  static rotate90(p: Vector2, direction: "counterClockwise" | "clockwise" = "clockwise"): Vector2 {
    if (direction === "clockwise") {
      return { x: p.y, y: -p.x };
    } else {
--- a/src/helpers/Vector3.ts
+++ b/src/helpers/Vector3.ts
@ -5,22 +5,22 @@ class Vector3 {
  /**
   * @type {number} x - X component of the vector
   */
-  x;
+  x: number;
  /**
   * @type {number} y - Y component of the vector
   */
-  y;
+  y: number;
  /**
   * @type {number} z - Z component of the vector
   */
-  z;
+  z: number;
  /**
   * @param {number} x
   * @param {number} y
   * @param {number} z
   */
-  constructor(x, y, z) {
+  constructor(x: number, y: number, z: number) {
    this.x = x;
    this.y = y;
    this.z = z;
@ -31,7 +31,7 @@ class Vector3 {
   * @param {Vector3} cube
   * @returns {Vector3}
   */
-  static cubeRound(cube) {
+  static cubeRound(cube: Vector3): Vector3 {
    var rX = Math.round(cube.x);
    var rY = Math.round(cube.y);
    var rZ = Math.round(cube.z);
--- a/src/helpers/actions.ts
+++ b/src/helpers/actions.ts
@ -1,17 +1,17 @@
 import shortid from "shortid";
-export function addPolygonDifferenceToShapes(shape, difference, shapes) {
+export function addPolygonDifferenceToShapes(shape: any, difference: any, shapes: any) {
  for (let i = 0; i < difference.length; i++) {
    let newId = shortid.generate();
    // Holes detected
    let holes = [];
    if (difference[i].length > 1) {
      for (let j = 1; j < difference[i].length; j++) {
-        holes.push(difference[i][j].map(([x, y]) => ({ x, y })));
+        holes.push(difference[i][j].map(([x, y]: [ x: number, y: number ]) => ({ x, y })));
      }
    }
-    const points = difference[i][0].map(([x, y]) => ({ x, y }));
+    const points = difference[i][0].map(([x, y]: [ x: number, y: number ]) => ({ x, y }));
    shapes[newId] = {
      ...shape,
@ -24,11 +24,11 @@ export function addPolygonDifferenceToShapes(shape, difference, shapes) {
  }
 }
-export function addPolygonIntersectionToShapes(shape, intersection, shapes) {
+export function addPolygonIntersectionToShapes(shape: any, intersection: any, shapes: any) {
  for (let i = 0; i < intersection.length; i++) {
    let newId = shortid.generate();
-    const points = intersection[i][0].map(([x, y]) => ({ x, y }));
+    const points = intersection[i][0].map(([x, y]: [ x: number, y: number ]) => ({ x, y }));
    shapes[newId] = {
      ...shape,
--- a/src/helpers/babylon.ts
+++ b/src/helpers/babylon.ts
@ -1,7 +1,7 @@
 import { Texture } from "@babylonjs/core/Materials/Textures/texture";
 // Turn texture load into an async function so it can be awaited
-export async function importTextureAsync(url) {
+export async function importTextureAsync(url: string) {
  return new Promise((resolve, reject) => {
    let texture = new Texture(
      url,
--- a/src/helpers/blobToBuffer.ts
+++ b/src/helpers/blobToBuffer.ts
@ -2,7 +2,7 @@
 * @param {Blob} blob
 * @returns {Promise<Uint8Array>}
 */
-async function blobToBuffer(blob) {
+async function blobToBuffer(blob: Blob): Promise<Uint8Array> {
  if (blob.arrayBuffer) {
    const arrayBuffer = await blob.arrayBuffer();
    return new Uint8Array(arrayBuffer);
@ -10,12 +10,12 @@ async function blobToBuffer(blob) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
-      function onLoadEnd(event) {
+      function onLoadEnd(event: any) {
        reader.removeEventListener("loadend", onLoadEnd, false);
        if (event.error) {
          reject(event.error);
        } else {
-          resolve(Buffer.from(reader.result));
+          resolve(Buffer.from(reader.result as ArrayBuffer));
        }
      }
--- a/src/helpers/colors.ts
+++ b/src/helpers/colors.ts
@ -1,5 +1,20 @@
 export type Colors = {
  blue: string;
  orange: string;
  red: string;
  yellow: string;
  purple: string;
  green: string;
  pink: string;
  teal: string;
  black: string;
  darkGray: string;
  lightGray: string;
  white: string;
 }
 // Colors used for the game for theme general UI colors look at theme.js
-const colors = {
+const colors: Colors = {
  blue: "rgb(26, 106, 255)",
  orange: "rgb(255, 116, 51)",
  red: "rgb(255, 77, 77)",
--- a/src/helpers/dice.ts
+++ b/src/helpers/dice.ts
@ -4,7 +4,7 @@ import { Vector3 } from "@babylonjs/core/Maths/math";
 * Find the number facing up on a mesh instance of a dice
 * @param {Object} instance The dice instance
 */
-export function getDiceInstanceRoll(instance) {
+export function getDiceInstanceRoll(instance: any) {
  let highestDot = -1;
  let highestLocator;
  for (let locator of instance.getChildTransformNodes()) {
@ -25,7 +25,7 @@ export function getDiceInstanceRoll(instance) {
 * Find the number facing up on a dice object
 * @param {Object} dice The Dice object
 */
-export function getDiceRoll(dice) {
+export function getDiceRoll(dice: any) {
  let number = getDiceInstanceRoll(dice.instance);
  // If the dice is a d100 add the d10
  if (dice.type === "d100") {
@ -42,8 +42,8 @@ export function getDiceRoll(dice) {
  return { type: dice.type, roll: number };
 }
-export function getDiceRollTotal(diceRolls) {
+export function getDiceRollTotal(diceRolls: []) {
-  return diceRolls.reduce((accumulator, dice) => {
+  return diceRolls.reduce((accumulator: number, dice: any) => {
    if (dice.roll === "unknown") {
      return accumulator;
    } else {
--- a/src/helpers/diff.ts
+++ b/src/helpers/diff.ts
@ -1,7 +1,7 @@
-import { applyChange, revertChange, diff as deepDiff } from "deep-diff";
+import { applyChange, Diff, revertChange, diff as deepDiff }from "deep-diff";
 import get from "lodash.get";
-export function applyChanges(target, changes) {
+export function applyChanges<LHS>(target: LHS, changes: Diff<LHS, any>[]) {
  for (let change of changes) {
    if (change.path && (change.kind === "E" || change.kind === "A")) {
      // If editing an object or array ensure that the value exists
@ -15,7 +15,7 @@ export function applyChanges(target, changes) {
  }
 }
-export function revertChanges(target, changes) {
+export function revertChanges<LHS>(target: LHS, changes: Diff<LHS, any>[]) {
  for (let change of changes) {
    revertChange(target, true, change);
  }
--- a/src/helpers/drawing.ts
+++ b/src/helpers/drawing.ts
@ -1,15 +1,20 @@
 import simplify from "simplify-js";
-import polygonClipping from "polygon-clipping";
+import polygonClipping, { Geom, Polygon, Ring } from "polygon-clipping";
-import Vector2 from "./Vector2";
+import Vector2, { BoundingBox } from "./Vector2";
 import Size from "./Size"
 import { toDegrees } from "./shared";
-import { getNearestCellCoordinates, getCellLocation } from "./grid";
+import { Grid, getNearestCellCoordinates, getCellLocation } from "./grid";
 /**
 * @typedef PointsData
 * @property {Vector2[]} points
 */
 type PointsData = {
  points: Vector2[]
 }
 /**
 * @typedef RectData
 * @property {number} x
@ -18,30 +23,55 @@ import { getNearestCellCoordinates, getCellLocation } from "./grid";
 * @property {number} height
 */
 type RectData = {
  x: number,
  y: number, 
  width: number, 
  height: number
 }
 /**
 * @typedef CircleData
 * @property {number} x
 * @property {number} y
 * @property {number} radius
 */
 type CircleData = {
  x: number, 
  y: number, 
  radius: number
 }
 /**
 * @typedef FogData
 * @property {Vector2[]} points
- * @property {Vector2[]} holes
+ * @property {Vector2[][]} holes
 */
 type FogData = {
  points: Vector2[]
  holes: Vector2[][]
 }
 /**
 * @typedef {(PointsData|RectData|CircleData)} ShapeData
 */
 type ShapeData = PointsData | RectData | CircleData
 /**
 * @typedef {("line"|"rectangle"|"circle"|"triangle")} ShapeType
 */
 type ShapeType = "line" | "rectangle" | "circle" | "triangle"
 /**
 * @typedef {("fill"|"stroke")} PathType
 */
 // type PathType = "fill" | "stroke"
 /**
 * @typedef Path
 * @property {boolean} blend
@ -53,6 +83,16 @@ import { getNearestCellCoordinates, getCellLocation } from "./grid";
 * @property {"path"} type
 */
 // type Path = {
 //   blend: boolean, 
 //   color: string, 
 //   data: PointsData,
 //   id: string, 
 //   pathType: PathType, 
 //   strokeWidth: number, 
 //   type: "path"
 // }
 /**
 * @typedef Shape
 * @property {boolean} blend
@ -64,6 +104,16 @@ import { getNearestCellCoordinates, getCellLocation } from "./grid";
 * @property {"shape"} type
 */
 // type Shape = {
 //   blend: boolean, 
 //   color: string, 
 //   data: ShapeData, 
 //   id: string, 
 //   shapeType: ShapeType, 
 //   strokeWidth: number, 
 //   type: "shape"
 // }
 /**
 * @typedef Fog
 * @property {string} color
@ -74,29 +124,39 @@ import { getNearestCellCoordinates, getCellLocation } from "./grid";
 * @property {boolean} visible
 */
 type Fog = {
  color: string, 
  data: FogData, 
  id: string, 
  strokeWidth: number, 
  type: "fog", 
  visible: boolean
 }
 /**
 *
 * @param {ShapeType} type
 * @param {Vector2} brushPosition
 * @returns {ShapeData}
 */
-export function getDefaultShapeData(type, brushPosition) {
+export function getDefaultShapeData(type: ShapeType, brushPosition: Vector2): ShapeData | undefined{
  // TODO: handle undefined if no type found
  if (type === "line") {
    return {
      points: [
        { x: brushPosition.x, y: brushPosition.y },
        { x: brushPosition.x, y: brushPosition.y },
      ],
-    };
+    } as PointsData;
  } else if (type === "circle") {
-    return { x: brushPosition.x, y: brushPosition.y, radius: 0 };
+    return { x: brushPosition.x, y: brushPosition.y, radius: 0 } as CircleData;
  } else if (type === "rectangle") {
    return {
      x: brushPosition.x,
      y: brushPosition.y,
      width: 0,
      height: 0,
-    };
+    } as RectData;
  } else if (type === "triangle") {
    return {
      points: [
@ -104,7 +164,7 @@ export function getDefaultShapeData(type, brushPosition) {
        { x: brushPosition.x, y: brushPosition.y },
        { x: brushPosition.x, y: brushPosition.y },
      ],
-    };
+    } as PointsData;
  }
 }
@ -112,7 +172,7 @@ export function getDefaultShapeData(type, brushPosition) {
 * @param {Vector2} cellSize
 * @returns {Vector2}
 */
-export function getGridCellRatio(cellSize) {
+export function getGridCellRatio(cellSize: Vector2): Vector2 {
  if (cellSize.x < cellSize.y) {
    return { x: cellSize.y / cellSize.x, y: 1 };
  } else if (cellSize.y < cellSize.x) {
@ -131,30 +191,34 @@ export function getGridCellRatio(cellSize) {
 * @returns {ShapeData}
 */
 export function getUpdatedShapeData(
-  type,
+  type: ShapeType,
-  data,
+  data: ShapeData,
-  brushPosition,
+  brushPosition: Vector2,
-  gridCellNormalizedSize,
+  gridCellNormalizedSize: Vector2,
-  mapWidth,
+  mapWidth: number,
-  mapHeight
+  mapHeight: number
-) {
+): ShapeData | undefined {
  // TODO: handle undefined type
  if (type === "line") {
    data = data as PointsData;
    return {
      points: [data.points[0], { x: brushPosition.x, y: brushPosition.y }],
-    };
+    } as PointsData;
  } else if (type === "circle") {
    data = data as CircleData; 
    const gridRatio = getGridCellRatio(gridCellNormalizedSize);
    const dif = Vector2.subtract(brushPosition, {
      x: data.x,
      y: data.y,
    });
    const scaled = Vector2.multiply(dif, gridRatio);
-    const distance = Vector2.length(scaled);
+    const distance = Vector2.setLength(scaled);
    return {
      ...data,
      radius: distance,
    };
  } else if (type === "rectangle") {
    data = data as RectData;
    const dif = Vector2.subtract(brushPosition, { x: data.x, y: data.y });
    return {
      ...data,
@ -162,6 +226,7 @@ export function getUpdatedShapeData(
      height: dif.y,
    };
  } else if (type === "triangle") {
    data = data as PointsData;
    // Convert to absolute coordinates
    const mapSize = { x: mapWidth, y: mapHeight };
    const brushPositionPixel = Vector2.multiply(brushPosition, mapSize);
@ -169,7 +234,7 @@ export function getUpdatedShapeData(
    const points = data.points;
    const startPixel = Vector2.multiply(points[0], mapSize);
    const dif = Vector2.subtract(brushPositionPixel, startPixel);
-    const length = Vector2.length(dif);
+    const length = Vector2.setLength(dif);
    const direction = Vector2.normalize(dif);
    // Get the angle for a triangle who's width is the same as it's length
    const angle = Math.atan(length / 2 / (length === 0 ? 1 : length));
@ -199,10 +264,10 @@ const defaultSimplifySize = 1 / 100;
 * @param {Vector2} gridCellSize
 * @param {number} scale
 */
-export function simplifyPoints(points, gridCellSize, scale) {
+export function simplifyPoints(points: Vector2[], gridCellSize: Vector2, scale: number): any {
  return simplify(
    points,
-    (Vector2.min(gridCellSize) * defaultSimplifySize) / scale
+    (Vector2.min(gridCellSize) as number * defaultSimplifySize) / scale
  );
 }
@ -212,43 +277,50 @@ export function simplifyPoints(points, gridCellSize, scale) {
 * @param {boolean} ignoreHidden
 * @returns {Fog[]}
 */
-export function mergeFogShapes(shapes, ignoreHidden = true) {
+export function mergeFogShapes(shapes: Fog[], ignoreHidden: boolean = true): Fog[] {
  if (shapes.length === 0) {
    return shapes;
  }
-  let geometries = [];
+  let geometries: Geom[] = [];
  for (let shape of shapes) {
    if (ignoreHidden && !shape.visible) {
      continue;
    }
-    const shapePoints = shape.data.points.map(({ x, y }) => [x, y]);
+    const shapePoints: Ring = shape.data.points.map(({ x, y }) => [x, y]);
-    const shapeHoles = shape.data.holes.map((hole) =>
+    const shapeHoles: Polygon = shape.data.holes.map((hole) =>
-      hole.map(({ x, y }) => [x, y])
+      hole.map(({ x, y }: { x: number, y: number }) => [x, y])
    );
-    let shapeGeom = [[shapePoints, ...shapeHoles]];
+    let shapeGeom: Geom = [[shapePoints, ...shapeHoles]];
    geometries.push(shapeGeom);
  }
  if (geometries.length === 0) {
-    return geometries;
+    return [];
  }
  try {
-    let union = polygonClipping.union(...geometries);
+    let union = polygonClipping.union(geometries[0], ...geometries.slice(1));
-    let merged = [];
+    let merged: Fog[] = [];
    for (let i = 0; i < union.length; i++) {
-      let holes = [];
+      let holes: Vector2[][] = [];
      if (union[i].length > 1) {
        for (let j = 1; j < union[i].length; j++) {
          holes.push(union[i][j].map(([x, y]) => ({ x, y })));
        }
      }
      // find the first visible shape
      let visibleShape = shapes.find((shape) => ignoreHidden || shape.visible);
      if (!visibleShape) {
        // TODO: handle if visible shape not found
        throw Error;
      }
      merged.push({
        // Use the data of the first visible shape as the merge
-        ...shapes.find((shape) => ignoreHidden || shape.visible),
+        ...visibleShape,
        id: `merged-${i}`,
        data: {
          points: union[i][0].map(([x, y]) => ({ x, y })),
          holes,
        },
        type: "fog"
      });
    }
    return merged;
@ -263,7 +335,7 @@ export function mergeFogShapes(shapes, ignoreHidden = true) {
 * @param {boolean} maxPoints Max amount of points per shape to get bounds for
 * @returns {Vector2.BoundingBox[]}
 */
-export function getFogShapesBoundingBoxes(shapes, maxPoints = 0) {
+export function getFogShapesBoundingBoxes(shapes: Fog[], maxPoints = 0): BoundingBox[] {
  let boxes = [];
  for (let shape of shapes) {
    if (maxPoints > 0 && shape.data.points.length > maxPoints) {
@ -280,14 +352,26 @@ export function getFogShapesBoundingBoxes(shapes, maxPoints = 0) {
 * @property {Vector2} end
 */
 // type Edge = {
 //   start: Vector2,
 //   end: Vector2
 // }
 /**
 * @typedef Guide
 * @property {Vector2} start
 * @property {Vector2} end
 * @property {("horizontal"|"vertical")} orientation
- * @property {number}
+ * @property {number} distance
 */
 type Guide = {
  start: Vector2, 
  end: Vector2, 
  orientation: "horizontal" | "vertical",
  distance: number
 }
 /**
 * @param {Vector2} brushPosition Brush position in pixels
 * @param {Vector2} grid
@ -299,14 +383,14 @@ export function getFogShapesBoundingBoxes(shapes, maxPoints = 0) {
 * @returns {Guide[]}
 */
 export function getGuidesFromGridCell(
-  brushPosition,
+  brushPosition: Vector2,
-  grid,
+  grid: Grid,
-  gridCellSize,
+  gridCellSize: Size,
-  gridOffset,
+  gridOffset: Vector2,
-  gridCellOffset,
+  gridCellOffset:  Vector2,
-  snappingSensitivity,
+  snappingSensitivity: number,
-  mapSize
+  mapSize: Vector2
-) {
+): Guide[] {
  let boundingBoxes = [];
  // Add map bounds
  boundingBoxes.push(
@ -366,11 +450,11 @@ export function getGuidesFromGridCell(
 * @returns {Guide[]}
 */
 export function getGuidesFromBoundingBoxes(
-  brushPosition,
+  brushPosition: Vector2,
-  boundingBoxes,
+  boundingBoxes: BoundingBox[],
-  gridCellSize,
+  gridCellSize: Vector2, // TODO: check if this was meant to be of type Size
-  snappingSensitivity
+  snappingSensitivity: number
-) {
+): Guide[] {
  let horizontalEdges = [];
  let verticalEdges = [];
  for (let bounds of boundingBoxes) {
@ -400,7 +484,7 @@ export function getGuidesFromBoundingBoxes(
      end: { x: bounds.max.x, y: bounds.max.y },
    });
  }
-  let guides = [];
+  let guides: Guide[] = [];
  for (let edge of verticalEdges) {
    const distance = Math.abs(brushPosition.x - edge.start.x);
    if (distance / gridCellSize.x < snappingSensitivity) {
@ -421,8 +505,8 @@ export function getGuidesFromBoundingBoxes(
 * @param {Guide[]} guides
 * @returns {Guide[]}
 */
-export function findBestGuides(brushPosition, guides) {
+export function findBestGuides(brushPosition: Vector2, guides: Guide[]): Guide[] {
-  let bestGuides = [];
+  let bestGuides: Guide[] = [];
  let verticalGuide = guides
    .filter((guide) => guide.orientation === "vertical")
    .sort((a, b) => a.distance - b.distance)[0];
--- a/src/helpers/grid.ts
+++ b/src/helpers/grid.ts
@ -14,12 +14,22 @@ const GRID_TYPE_NOT_IMPLEMENTED = new Error("Grid type not implemented");
 * @property {Vector2} bottomRight Bottom right position of the inset
 */
 type GridInset = {
  topLeft: Vector2,
  bottomRight: Vector2
 }
 /**
 * @typedef GridMeasurement
 * @property {("chebyshev"|"alternating"|"euclidean"|"manhattan")} type
 * @property {string} scale
 */
 type GridMeasurement ={
  type: ("chebyshev"|"alternating"|"euclidean"|"manhattan")
  scale: string
 }
 /**
 * @typedef Grid
 * @property {GridInset} inset The inset of the grid from the map
@ -27,6 +37,12 @@ const GRID_TYPE_NOT_IMPLEMENTED = new Error("Grid type not implemented");
 * @property {("square"|"hexVertical"|"hexHorizontal")} type
 * @property {GridMeasurement} measurement
 */
 export type Grid = {
  inset: GridInset,
  size: Vector2,
  type: ("square"|"hexVertical"|"hexHorizontal"),
  measurement: GridMeasurement
 }
 /**
 * Gets the size of a grid in pixels taking into account the inset
@ -35,7 +51,7 @@ const GRID_TYPE_NOT_IMPLEMENTED = new Error("Grid type not implemented");
 * @param {number} baseHeight Height of the grid in pixels before inset
 * @returns {Size}
 */
-export function getGridPixelSize(grid, baseWidth, baseHeight) {
+export function getGridPixelSize(grid: Grid, baseWidth: number, baseHeight: number): Size {
  const width = (grid.inset.bottomRight.x - grid.inset.topLeft.x) * baseWidth;
  const height = (grid.inset.bottomRight.y - grid.inset.topLeft.y) * baseHeight;
  return new Size(width, height);
@ -48,7 +64,7 @@ export function getGridPixelSize(grid, baseWidth, baseHeight) {
 * @param {number} gridHeight Height of the grid in pixels after inset
 * @returns {Size}
 */
-export function getCellPixelSize(grid, gridWidth, gridHeight) {
+export function getCellPixelSize(grid: Grid, gridWidth: number, gridHeight: number): Size {
  switch (grid.type) {
    case "square":
      return new Size(gridWidth / grid.size.x, gridHeight / grid.size.y);
@ -72,7 +88,7 @@ export function getCellPixelSize(grid, gridWidth, gridHeight) {
 * @param {Size} cellSize Cell size in pixels
 * @returns {Vector2}
 */
-export function getCellLocation(grid, col, row, cellSize) {
+export function getCellLocation(grid: Grid, col: number, row: number, cellSize: Size): Vector2 {
  switch (grid.type) {
    case "square":
      return {
@ -102,7 +118,7 @@ export function getCellLocation(grid, col, row, cellSize) {
 * @param {Size} cellSize Cell size in pixels
 * @returns {Vector2}
 */
-export function getNearestCellCoordinates(grid, x, y, cellSize) {
+export function getNearestCellCoordinates(grid: Grid, x: number, y: number, cellSize: Size): Vector2 {
  switch (grid.type) {
    case "square":
      return Vector2.divide(Vector2.floorTo({ x, y }, cellSize), cellSize);
@ -132,7 +148,7 @@ export function getNearestCellCoordinates(grid, x, y, cellSize) {
 * @param {Size} cellSize Cell size in pixels
 * @returns {Vector2[]}
 */
-export function getCellCorners(grid, x, y, cellSize) {
+export function getCellCorners(grid: Grid, x: number, y: number, cellSize: Size): Vector2[] {
  const position = new Vector2(x, y);
  switch (grid.type) {
    case "square":
@ -172,8 +188,9 @@ export function getCellCorners(grid, x, y, cellSize) {
 * Get the height of a grid based off of its width
 * @param {Grid} grid
 * @param {number} gridWidth Width of the grid in pixels after inset
 * @returns {number}
 */
-function getGridHeightFromWidth(grid, gridWidth) {
+function getGridHeightFromWidth(grid: Grid, gridWidth: number): number{
  switch (grid.type) {
    case "square":
      return (grid.size.y * gridWidth) / grid.size.x;
@ -195,7 +212,7 @@ function getGridHeightFromWidth(grid, gridWidth) {
 * @param {number} mapHeight Height of the map in pixels before inset
 * @returns {GridInset}
 */
-export function getGridDefaultInset(grid, mapWidth, mapHeight) {
+export function getGridDefaultInset(grid: Grid, mapWidth: number, mapHeight: number): GridInset {
  // Max the width of the inset and figure out the resulting height value
  const insetHeightNorm = getGridHeightFromWidth(grid, mapWidth) / mapHeight;
  return { topLeft: { x: 0, y: 0 }, bottomRight: { x: 1, y: insetHeightNorm } };
@ -208,7 +225,7 @@ export function getGridDefaultInset(grid, mapWidth, mapHeight) {
 * @param {number} mapHeight Height of the map in pixels before inset
 * @returns {GridInset}
 */
-export function getGridUpdatedInset(grid, mapWidth, mapHeight) {
+export function getGridUpdatedInset(grid: Grid, mapWidth: number, mapHeight: number): GridInset {
  let inset = grid.inset;
  // Take current inset width and use it to calculate the new height
  if (grid.size.x > 0 && grid.size.x > 0) {
@ -226,7 +243,7 @@ export function getGridUpdatedInset(grid, mapWidth, mapHeight) {
 * @param {Grid} grid
 * @returns {number}
 */
-export function getGridMaxZoom(grid) {
+export function getGridMaxZoom(grid: Grid): number {
  if (!grid) {
    return 10;
  }
@ -240,7 +257,7 @@ export function getGridMaxZoom(grid) {
 * @param {("hexVertical"|"hexHorizontal")} type
 * @returns {Vector2}
 */
-export function hexCubeToOffset(cube, type) {
+export function hexCubeToOffset(cube: Vector3, type: ("hexVertical"|"hexHorizontal")) {
  if (type === "hexVertical") {
    const x = cube.x + (cube.z + (cube.z & 1)) / 2;
    const y = cube.z;
@ -257,7 +274,7 @@ export function hexCubeToOffset(cube, type) {
 * @param {("hexVertical"|"hexHorizontal")} type
 * @returns {Vector3}
 */
-export function hexOffsetToCube(offset, type) {
+export function hexOffsetToCube(offset: Vector2, type: ("hexVertical"|"hexHorizontal")) {
  if (type === "hexVertical") {
    const x = offset.x - (offset.y + (offset.y & 1)) / 2;
    const z = offset.y;
@ -276,8 +293,9 @@ export function hexOffsetToCube(offset, type) {
 * @param {Grid} grid
 * @param {Vector2} a
 * @param {Vector2} b
 * @param {Size} cellSize
 */
-export function gridDistance(grid, a, b, cellSize) {
+export function gridDistance(grid: Grid, a: Vector2, b: Vector2, cellSize: Size) {
  // Get grid coordinates
  const aCoord = getNearestCellCoordinates(grid, a.x, a.y, cellSize);
  const bCoord = getNearestCellCoordinates(grid, b.x, b.y, cellSize);
@ -290,8 +308,8 @@ export function gridDistance(grid, a, b, cellSize) {
    } else if (grid.measurement.type === "alternating") {
      // Alternating diagonal distance like D&D 3.5 and Pathfinder
      const delta = Vector2.abs(Vector2.subtract(aCoord, bCoord));
-      const max = Vector2.max(delta);
+      const max: any = Vector2.max(delta);
-      const min = Vector2.min(delta);
+      const min: any = Vector2.min(delta);
      return max - min + Math.floor(1.5 * min);
    } else if (grid.measurement.type === "euclidean") {
      return Vector2.distance(aCoord, bCoord);
@ -322,15 +340,25 @@ export function gridDistance(grid, a, b, cellSize) {
 * @property {number} digits The precision of the scale
 */
 type GridScale = {
  multiplier: number, 
  unit: string, 
  digits: number
 }
 /**
 * Parse a string representation of scale e.g. 5ft into a `GridScale`
 * @param {string} scale
 * @returns {GridScale}
 */
-export function parseGridScale(scale) {
+export function parseGridScale(scale: string): GridScale {
  if (typeof scale === "string") {
    const match = scale.match(/(\d*)(\.\d*)?([a-zA-Z]*)/);
    // TODO: handle case where match is not found
    if (!match) {
      throw Error;
    }
    const integer = parseFloat(match[1]);
    const fractional = parseFloat(match[2]);
    const unit = match[3] || "";
@ -352,7 +380,7 @@ export function parseGridScale(scale) {
 * @param {number} n
 * @returns {number[]}
 */
-function factors(n) {
+function factors(n: number): number[] {
  const numbers = Array.from(Array(n + 1), (_, i) => i);
  return numbers.filter((i) => n % i === 0);
 }
@ -364,7 +392,7 @@ function factors(n) {
 * @param {number} b
 * @returns {number}
 */
-function gcd(a, b) {
+function gcd(a: number, b: number): number {
  while (b !== 0) {
    const t = b;
    b = a % b;
@ -379,7 +407,7 @@ function gcd(a, b) {
 * @param {number} b
 * @returns {number[]}
 */
-function dividers(a, b) {
+function dividers(a: number, b: number): number[] {
  const d = gcd(a, b);
  return factors(d);
 }
@ -398,7 +426,7 @@ const maxGridSize = 200;
 * @param {number} y
 * @returns {boolean}
 */
-export function gridSizeVaild(x, y) {
+export function gridSizeVaild(x: number, y: number): boolean {
  return (
    x > minGridSize && y > minGridSize && x < maxGridSize && y < maxGridSize
  );
@ -408,11 +436,12 @@ export function gridSizeVaild(x, y) {
 * Finds a grid size for an image by finding the closest size to the average grid size
 * @param {Image} image
 * @param {number[]} candidates
- * @returns {Vector2}
+ * @returns {Vector2 | null}
 */
-function gridSizeHeuristic(image, candidates) {
+function gridSizeHeuristic(image: CanvasImageSource, candidates: number[]): Vector2  | null {
-  const width = image.width;
+  // TODO: check type for Image and CanvasSourceImage
-  const height = image.height;
+  const width: any = image.width;
  const height: any = image.height;
  // Find the best candidate by comparing the absolute z-scores of each axis
  let bestX = 1;
  let bestY = 1;
@ -440,17 +469,23 @@ function gridSizeHeuristic(image, candidates) {
 * Finds the grid size of an image by running the image through a machine learning model
 * @param {Image} image
 * @param {number[]} candidates
- * @returns {Vector2}
+ * @returns {Vector2 | null}
 */
-async function gridSizeML(image, candidates) {
+async function gridSizeML(image: CanvasImageSource, candidates: number[]): Promise<Vector2 | null> {
-  const width = image.width;
+  // TODO: check this function because of context and CanvasImageSource -> JSDoc and Typescript do not match
-  const height = image.height;
+  const width: any = image.width;
  const height: any = image.height;
  const ratio = width / height;
  let canvas = document.createElement("canvas");
  let context = canvas.getContext("2d");
  canvas.width = 2048;
  canvas.height = Math.floor(2048 / ratio);
  // TODO: handle if context is null
  if (!context) {
    return null;
  }
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  let imageData = context.getImageData(
@ -507,8 +542,10 @@ async function gridSizeML(image, candidates) {
 * @param {Image} image
 * @returns {Vector2}
 */
-export async function getGridSizeFromImage(image) {
+export async function getGridSizeFromImage(image: CanvasImageSource) {
-  const candidates = dividers(image.width, image.height);
+  const width: any = image.width;
  const height: any = image.height;
  const candidates = dividers(width, height);
  let prediction;
  // Try and use ML grid detection
--- a/src/helpers/image.ts
+++ b/src/helpers/image.ts
@ -6,13 +6,18 @@ const lightnessDetectionOffset = 0.1;
 * @param {HTMLImageElement} image
 * @returns {boolean} True is the image is light
 */
-export function getImageLightness(image) {
+export function getImageLightness(image: HTMLImageElement) {
  const width = image.width;
  const height = image.height;
  let canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  let context = canvas.getContext("2d");
  if (!context) {
    // TODO: handle if context is null
    return;
  }
  context.drawImage(image, 0, 0);
  const imageData = context.getImageData(0, 0, width, height);
@ -44,13 +49,19 @@ export function getImageLightness(image) {
 * @property {number} height
 */
 type CanvasImage = {
  blob: Blob | null,
  width: number,
  height: number
 }
 /**
 * @param {HTMLCanvasElement} canvas
 * @param {string} type
 * @param {number} quality
 * @returns {Promise<CanvasImage>}
 */
-export async function canvasToImage(canvas, type, quality) {
+export async function canvasToImage(canvas: HTMLCanvasElement, type: string, quality: number): Promise<CanvasImage> {
  return new Promise((resolve) => {
    canvas.toBlob(
      (blob) => {
@ -69,7 +80,7 @@ export async function canvasToImage(canvas, type, quality) {
 * @param {number} quality if image is a jpeg or webp this is the quality setting
 * @returns {Promise<CanvasImage>}
 */
-export async function resizeImage(image, size, type, quality) {
+export async function resizeImage(image: HTMLImageElement, size: number, type: string, quality: number): Promise<CanvasImage> {
  const width = image.width;
  const height = image.height;
  const ratio = width / height;
@ -82,8 +93,10 @@ export async function resizeImage(image, size, type, quality) {
    canvas.height = size;
  }
  let context = canvas.getContext("2d");
-  context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  // TODO: Add error if context is empty
-
+  if (context) {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
  }
  return await canvasToImage(canvas, type, quality);
 }
@ -96,6 +109,13 @@ export async function resizeImage(image, size, type, quality) {
 * @property {string} id
 */
 type ImageFile = {
  file: Uint8Array | null, 
  width: number, 
  height: number, 
  type: "file",
  id: string
 }
 /**
 * Create a image file with resolution `size`x`size` with cover cropping
 * @param {HTMLImageElement} image the image to resize
@ -104,7 +124,7 @@ export async function resizeImage(image, size, type, quality) {
 * @param {number} quality if image is a jpeg or webp this is the quality setting
 * @returns {Promise<ImageFile>}
 */
-export async function createThumbnail(image, type, size = 300, quality = 0.5) {
+export async function createThumbnail(image: HTMLImageElement, type: string, size = 300, quality = 0.5): Promise<ImageFile> {
  let canvas = document.createElement("canvas");
  canvas.width = size;
  canvas.height = size;
@ -113,31 +133,35 @@ export async function createThumbnail(image, type, size = 300, quality = 0.5) {
  if (ratio > 1) {
    const center = image.width / 2;
    const halfHeight = image.height / 2;
-    context.drawImage(
+    if (context) {
-      image,
+      context.drawImage(
-      center - halfHeight,
+        image,
-      0,
+        center - halfHeight,
-      image.height,
+        0,
-      image.height,
+        image.height,
-      0,
+        image.height,
-      0,
+        0,
-      canvas.width,
+        0,
-      canvas.height
+        canvas.width,
-    );
+        canvas.height
      );
    }
  } else {
    const center = image.height / 2;
    const halfWidth = image.width / 2;
-    context.drawImage(
+    if (context) {
-      image,
+      context.drawImage(
-      0,
+        image,
-      center - halfWidth,
+        0,
-      image.width,
+        center - halfWidth,
-      image.width,
+        image.width,
-      0,
+        image.width,
-      0,
+        0,
-      canvas.width,
+        0,
-      canvas.height
+        canvas.width,
-    );
+        canvas.height
      );
    }
  }
  const thumbnailImage = await canvasToImage(canvas, type, quality);
--- a/src/helpers/konva.tsx
+++ b/src/helpers/konva.tsx
@ -6,9 +6,9 @@ import Color from "color";
 import Vector2 from "./Vector2";
 // Holes should be wound in the opposite direction as the containing points array
-export function HoleyLine({ holes, ...props }) {
+export function HoleyLine({ holes, ...props }: { holes: any, props: []}) {
  // Converted from https://github.com/rfestag/konva/blob/master/src/shapes/Line.ts
-  function drawLine(points, context, shape) {
+  function drawLine(points: number[], context: any, shape: any) {
    const length = points.length;
    const tension = shape.tension();
    const closed = shape.closed();
@ -76,7 +76,7 @@ export function HoleyLine({ holes, ...props }) {
  }
  // Draw points and holes
-  function sceneFunc(context, shape) {
+  function sceneFunc(context: any, shape: any) {
    const points = shape.points();
    const closed = shape.closed();
@ -109,7 +109,7 @@ export function HoleyLine({ holes, ...props }) {
  return <Line sceneFunc={sceneFunc} {...props} />;
 }
-export function Tick({ x, y, scale, onClick, cross }) {
+export function Tick({ x, y, scale, onClick, cross }: { x: any, y: any, scale: any, onClick: any, cross: any}) {
  const [fill, setFill] = useState("white");
  function handleEnter() {
    setFill("hsl(260, 100%, 80%)");
@ -144,13 +144,17 @@ export function Tick({ x, y, scale, onClick, cross }) {
  );
 }
-export function Trail({ position, size, duration, segments, color }) {
+interface TrailPoint extends Vector2 {
-  const trailRef = useRef();
+  lifetime: number
-  const pointsRef = useRef([]);
+}
 export function Trail({ position, size, duration, segments, color }: { position: Vector2, size: any, duration: number, segments: any, color: string }) {
  const trailRef: React.MutableRefObject<Konva.Line | undefined> = useRef();
  const pointsRef: React.MutableRefObject<TrailPoint[]> = useRef([]);
  const prevPositionRef = useRef(position);
  const positionRef = useRef(position);
-  const circleRef = useRef();
+  const circleRef: React.MutableRefObject<Konva.Circle | undefined> = useRef();
-  // Color of the end of the trial
+  // Color of the end of the trail
  const transparentColorRef = useRef(
    Color(color).lighten(0.5).alpha(0).string()
  );
@ -178,7 +182,7 @@ export function Trail({ position, size, duration, segments, color }) {
  useEffect(() => {
    let prevTime = performance.now();
    let request = requestAnimationFrame(animate);
-    function animate(time) {
+    function animate(time: any) {
      request = requestAnimationFrame(animate);
      const deltaTime = time - prevTime;
      prevTime = time;
@ -199,13 +203,13 @@ export function Trail({ position, size, duration, segments, color }) {
      }
      // Update the circle position to keep it in sync with the trail
-      if (circleRef.current) {
+      if (circleRef && circleRef.current) {
        circleRef.current.x(positionRef.current.x);
        circleRef.current.y(positionRef.current.y);
      }
-      if (trailRef.current) {
+      if (trailRef && trailRef.current) {
-        trailRef.current.getLayer().draw();
+        trailRef.current.getLayer()?.draw();
      }
    }
@ -215,14 +219,15 @@ export function Trail({ position, size, duration, segments, color }) {
  }, []);
  // Custom scene function for drawing a trail from a line
-  function sceneFunc(context) {
+  function sceneFunc(context: any) {
    // Resample points to ensure a smooth trail
    const resampledPoints = Vector2.resample(pointsRef.current, segments);
    if (resampledPoints.length === 0) {
      return;
    }
    // Draws a line offset in the direction perpendicular to its travel direction
-    const drawOffsetLine = (from, to, alpha) => {
+    // TODO: check alpha type
    const drawOffsetLine = (from: Vector2, to: Vector2, alpha: number) => {
      const forward = Vector2.normalize(Vector2.subtract(from, to));
      // Rotate the forward vector 90 degrees based off of the direction
      const side = Vector2.rotate90(forward);
@ -254,7 +259,7 @@ export function Trail({ position, size, duration, segments, color }) {
    // Create a radial gradient from the center of the trail to the tail
    const gradientCenter = resampledPoints[resampledPoints.length - 1];
    const gradientEnd = resampledPoints[0];
-    const gradientRadius = Vector2.length(
+    const gradientRadius = Vector2.setLength(
      Vector2.subtract(gradientCenter, gradientEnd)
    );
    let gradient = context.createRadialGradient(
@ -297,15 +302,24 @@ Trail.defaultProps = {
 * @param {Konva.Node} node
 * @returns {Vector2}
 */
-export function getRelativePointerPosition(node) {
+export function getRelativePointerPosition(node: Konva.Node): { x: number, y: number } | undefined {
  let transform = node.getAbsoluteTransform().copy();
  transform.invert();
-  let position = node.getStage().getPointerPosition();
+  // TODO: handle possible null value
  let position = node.getStage()?.getPointerPosition();
  if (!position) {
    // TODO: handle possible null value
    return;
  }
  return transform.point(position);
 }
-export function getRelativePointerPositionNormalized(node) {
+export function getRelativePointerPositionNormalized(node: Konva.Node): { x: number, y: number } | undefined {
  const relativePosition = getRelativePointerPosition(node);
  if (!relativePosition) {
    // TODO: handle possible null value
    return;
  }
  return {
    x: relativePosition.x / node.width(),
    y: relativePosition.y / node.height(),
@ -317,8 +331,8 @@ export function getRelativePointerPositionNormalized(node) {
 * @param {number[]} points points in an x, y alternating array
 * @returns {Vector2[]} a `Vector2` array
 */
-export function convertPointArray(points) {
+export function convertPointArray(points: number[]) {
-  return points.reduce((acc, _, i, arr) => {
+  return points.reduce((acc: any[], _, i, arr) => {
    if (i % 2 === 0) {
      acc.push({ x: arr[i], y: arr[i + 1] });
    }
--- a/src/helpers/logging.ts
+++ b/src/helpers/logging.ts
@ -1,6 +1,6 @@
 import { captureException } from "@sentry/react";
-export function logError(error) {
+export function logError(error: any): void {
  console.error(error);
  if (process.env.REACT_APP_LOGGING === "true") {
    captureException(error);
--- a/src/helpers/monsters.ts
+++ b/src/helpers/monsters.ts
@ -1,4 +1,4 @@
-const monsters = [
+const monsters: string[] = [
  "Aboleth",
  "Acolyte",
  "Black Dragon",
@ -295,6 +295,6 @@ const monsters = [
 export default monsters;
-export function getRandomMonster() {
+export function getRandomMonster(): string {
  return monsters[Math.floor(Math.random() * monsters.length)];
 }
--- a/src/helpers/select.tsx
+++ b/src/helpers/select.tsx
@ -8,10 +8,20 @@ import { groupBy } from "./shared";
 */
 // Helper for generating search results for items
-export function useSearch(items, search) {
+export function useSearch(items: [], search: string) {
-  const [filteredItems, setFilteredItems] = useState([]);
+  // TODO: add types to search items -> don't like the never type
-  const [filteredItemScores, setFilteredItemScores] = useState({});
+  const [filteredItems, setFilteredItems]: [
-  const [fuse, setFuse] = useState();
+    filteredItems: any,
    setFilteredItems: any
  ] = useState([]);
  const [filteredItemScores, setFilteredItemScores]: [
    filteredItemScores: {},
    setFilteredItemScores: React.Dispatch<React.SetStateAction<{}>>
  ] = useState({});
  const [fuse, setFuse]: [
    fuse: Fuse<never> | undefined,
    setFuse: React.Dispatch<Fuse<never> | undefined>
  ] = useState();
  // Update search index when items change
  useEffect(() => {
@ -21,14 +31,15 @@ export function useSearch(items, search) {
  // Perform search when search changes
  useEffect(() => {
    if (search) {
-      const query = fuse.search(search);
+      const query = fuse?.search(search);
-      setFilteredItems(query.map((result) => result.item));
+      setFilteredItems(query?.map((result: any) => result.item));
-      setFilteredItemScores(
+      let reduceResult: {} | undefined = query?.reduce(
-        query.reduce(
+        (acc: {}, value: any) => ({ ...acc, [value.item.id]: value.score }),
-          (acc, value) => ({ ...acc, [value.item.id]: value.score }),
+        {}
          {}
        )
      );
      if (reduceResult) {
        setFilteredItemScores(reduceResult);
      }
    }
  }, [search, items, fuse]);
@ -36,7 +47,12 @@ export function useSearch(items, search) {
 }
 // Helper for grouping items
-export function useGroup(items, filteredItems, useFiltered, filteredScores) {
+export function useGroup(
  items: any[],
  filteredItems: any[],
  useFiltered: boolean,
  filteredScores: any[]
 ) {
  const itemsByGroup = groupBy(useFiltered ? filteredItems : items, "group");
  // Get the groups of the items sorting by the average score if we're filtering or the alphabetical order
  // with "" at the start and "default" at the end if not
@ -44,10 +60,10 @@ export function useGroup(items, filteredItems, useFiltered, filteredScores) {
  if (useFiltered) {
    itemGroups.sort((a, b) => {
      const aScore = itemsByGroup[a].reduce(
-        (acc, item) => (acc + filteredScores[item.id]) / 2
+        (acc: any, item: any) => (acc + filteredScores[item.id]) / 2
      );
      const bScore = itemsByGroup[b].reduce(
-        (acc, item) => (acc + filteredScores[item.id]) / 2
+        (acc: any, item: any) => (acc + filteredScores[item.id]) / 2
      );
      return aScore - bScore;
    });
@ -67,12 +83,12 @@ export function useGroup(items, filteredItems, useFiltered, filteredScores) {
 // Helper for handling selecting items
 export function handleItemSelect(
-  item,
+  item: any,
-  selectMode,
+  selectMode: any,
-  selectedIds,
+  selectedIds: number[],
-  setSelectedIds,
+  setSelectedIds: any,
-  itemsByGroup,
+  itemsByGroup: any,
-  itemGroups
+  itemGroups: any
 ) {
  if (!item) {
    setSelectedIds([]);
@ -83,9 +99,9 @@ export function handleItemSelect(
      setSelectedIds([item.id]);
      break;
    case "multiple":
-      setSelectedIds((prev) => {
+      setSelectedIds((prev: any[]) => {
        if (prev.includes(item.id)) {
-          return prev.filter((id) => id !== item.id);
+          return prev.filter((id: number) => id !== item.id);
        } else {
          return [...prev, item.id];
        }
@ -94,32 +110,32 @@ export function handleItemSelect(
    case "range":
      // Create items array
      let items = itemGroups.reduce(
-        (acc, group) => [...acc, ...itemsByGroup[group]],
+        (acc: [], group: any) => [...acc, ...itemsByGroup[group]],
        []
      );
      // Add all items inbetween the previous selected item and the current selected
      if (selectedIds.length > 0) {
-        const mapIndex = items.findIndex((m) => m.id === item.id);
+        const mapIndex = items.findIndex((m: any) => m.id === item.id);
        const lastIndex = items.findIndex(
-          (m) => m.id === selectedIds[selectedIds.length - 1]
+          (m: any) => m.id === selectedIds[selectedIds.length - 1]
        );
-        let idsToAdd = [];
+        let idsToAdd: number[] = [];
-        let idsToRemove = [];
+        let idsToRemove: number[] = [];
        const direction = mapIndex > lastIndex ? 1 : -1;
        for (
          let i = lastIndex + direction;
          direction < 0 ? i >= mapIndex : i <= mapIndex;
          i += direction
        ) {
-          const itemId = items[i].id;
+          const itemId: number = items[i].id;
          if (selectedIds.includes(itemId)) {
            idsToRemove.push(itemId);
          } else {
            idsToAdd.push(itemId);
          }
        }
-        setSelectedIds((prev) => {
+        setSelectedIds((prev: any[]) => {
          let ids = [...prev, ...idsToAdd];
          return ids.filter((id) => !idsToRemove.includes(id));
        });
--- a/src/helpers/shared.ts
+++ b/src/helpers/shared.ts
@ -1,5 +1,5 @@
-export function omit(obj, keys) {
+export function omit(obj:object, keys: string[]) {
-  let tmp = {};
+  let tmp: { [key: string]: any } = {};
  for (let [key, value] of Object.entries(obj)) {
    if (keys.includes(key)) {
      continue;
@ -9,7 +9,7 @@ export function omit(obj, keys) {
  return tmp;
 }
-export function fromEntries(iterable) {
+export function fromEntries(iterable: any) {
  if (Object.fromEntries) {
    return Object.fromEntries(iterable);
  }
@ -20,32 +20,32 @@ export function fromEntries(iterable) {
 }
 // Check to see if all tracks are muted
-export function isStreamStopped(stream) {
+export function isStreamStopped(stream: any) {
-  return stream.getTracks().reduce((a, b) => a && b, { mute: true });
+  return stream.getTracks().reduce((a: any, b: any) => a && b, { mute: true });
 }
-export function roundTo(x, to) {
+export function roundTo(x: number, to: number): number {
  return Math.round(x / to) * to;
 }
-export function floorTo(x, to) {
+export function floorTo(x: number, to: number): number {
  return Math.floor(x / to) * to;
 }
-export function toRadians(angle) {
+export function toRadians(angle: number): number {
  return angle * (Math.PI / 180);
 }
-export function toDegrees(angle) {
+export function toDegrees(angle: number): number {
  return angle * (180 / Math.PI);
 }
-export function lerp(a, b, alpha) {
+export function lerp(a: number, b: number, alpha: number): number {
  return a * (1 - alpha) + b * alpha;
 }
 // Console log an image
-export function logImage(url, width, height) {
+export function logImage(url: string, width: number, height: number): void {
  const style = [
    "font-size: 1px;",
    `padding: ${height}px ${width}px;`,
@ -55,19 +55,19 @@ export function logImage(url, width, height) {
  console.log("%c ", style);
 }
-export function isEmpty(obj) {
+export function isEmpty(obj: any): boolean {
  return Object.keys(obj).length === 0 && obj.constructor === Object;
 }
-export function keyBy(array, key) {
+export function keyBy(array: any, key: any) {
  return array.reduce(
-    (prev, current) => ({ ...prev, [key ? current[key] : current]: current }),
+    (prev: any, current: any) => ({ ...prev, [key ? current[key] : current]: current }),
    {}
  );
 }
-export function groupBy(array, key) {
+export function groupBy(array: any, key: string) {
-  return array.reduce((prev, current) => {
+  return array.reduce((prev: any, current: any) => {
    const k = current[key];
    (prev[k] || (prev[k] = [])).push(current);
    return prev;
--- a/src/helpers/timer.ts
+++ b/src/helpers/timer.ts
@ -3,10 +3,22 @@ const MILLISECONDS_IN_MINUTE = 60000;
 const MILLISECONDS_IN_SECOND = 1000;
 /**
- * Returns a timers duration in milliseconds
+ * @typedef Time
- * @param {Object} t The object with an hour, minute and second property
+ * @property {number} hour
 * @property {number} minute
 * @property {number} second
 */
-export function getHMSDuration(t) {
+type Time = {
  hour: number, 
  minute: number, 
  second: number
 }
 /**
 * Returns a timers duration in milliseconds
 * @param {Time} t The object with an hour, minute and second property
 */
 export function getHMSDuration(t: Time) {
  if (!t) {
    return 0;
  }
@ -21,7 +33,7 @@ export function getHMSDuration(t) {
 * Returns an object with an hour, minute and second property
 * @param {number} duration The duration in milliseconds
 */
-export function getDurationHMS(duration) {
+export function getDurationHMS(duration: number) {
  let workingDuration = duration;
  const hour = Math.floor(workingDuration / MILLISECONDS_IN_HOUR);
  workingDuration -= hour * MILLISECONDS_IN_HOUR;
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,4 +1,3 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import * as Sentry from "@sentry/react";
 import App from "./App";
--- a/src/network/Connection.ts
+++ b/src/network/Connection.ts
@ -9,23 +9,26 @@ import blobToBuffer from "../helpers/blobToBuffer";
 const MAX_BUFFER_SIZE = 16000;
 class Connection extends SimplePeer {
-  constructor(props) {
+  currentChunks: any;
  dataChannels: any;
  constructor(props: any) {
    super(props);
-    this.currentChunks = {};
+    this.currentChunks = {} as Blob;
    this.dataChannels = {};
    this.on("data", this.handleData);
    this.on("datachannel", this.handleDataChannel);
  }
  // Intercept the data event with decoding and chunking support
-  handleData(packed) {
+  handleData(packed: any) {
-    const unpacked = decode(packed);
+    const unpacked: any = decode(packed);
    // If the special property __chunked is set and true
    // The data is a partial chunk of the a larger file
    // So wait until all chunks are collected and assembled
    // before emitting the dataComplete event
    if (unpacked.__chunked) {
-      let chunk = this.currentChunks[unpacked.id] || {
+      let chunk: any = this.currentChunks[unpacked.id] || {
        data: [],
        count: 0,
        total: unpacked.total,
@ -57,7 +60,7 @@ class Connection extends SimplePeer {
  // Custom send function with encoding, chunking and data channel support
  // Uses `write` to send the data to allow for buffer / backpressure handling
-  sendObject(object, channel) {
+  sendObject(object: any, channel: any) {
    try {
      const packedData = encode(object);
      if (packedData.byteLength > MAX_BUFFER_SIZE) {
@ -84,23 +87,25 @@ class Connection extends SimplePeer {
  // Override the create data channel function to store our own named reference to it
  // and to use our custom data handler
-  createDataChannel(channelName, channelConfig, opts) {
+  createDataChannel(channelName: string, channelConfig: any, opts: any) {
    // TODO: resolve createDataChannel
    // @ts-ignore
    const channel = super.createDataChannel(channelName, channelConfig, opts);
    this.handleDataChannel(channel);
    return channel;
  }
-  handleDataChannel(channel) {
+  handleDataChannel(channel: any) {
    const channelName = channel.channelName;
    this.dataChannels[channelName] = channel;
    channel.on("data", this.handleData.bind(this));
-    channel.on("error", (error) => {
+    channel.on("error", (error: any) => {
      this.emit("error", error);
    });
  }
  // Converted from https://github.com/peers/peerjs/
-  chunk(data) {
+  chunk(data: any) {
    const chunks = [];
    const size = data.byteLength;
    const total = Math.ceil(size / MAX_BUFFER_SIZE);
--- a/src/network/Session.ts
+++ b/src/network/Session.ts
@ -1,4 +1,4 @@
-import io from "socket.io-client";
+import io, { Socket } from "socket.io-client";
 import msgParser from "socket.io-msgpack-parser";
 import { EventEmitter } from "events";
@ -6,6 +6,7 @@ import Connection from "./Connection";
 import { omit } from "../helpers/shared";
 import { logError } from "../helpers/logging";
 import { SimplePeerData } from "simple-peer";
 /**
 * @typedef {object} SessionPeer
@ -14,6 +15,12 @@ import { logError } from "../helpers/logging";
 * @property {boolean} initiator - Is this peer the initiator of the connection
 * @property {boolean} ready - Ready for data to be sent
 */
 type SessionPeer = {
  id: string;
  connection: Connection;
  initiator: boolean;
  ready: boolean;
 };
 /**
 * @callback peerReply
@ -22,6 +29,8 @@ import { logError } from "../helpers/logging";
 * @param {string} channel - The channel to send to
 */
 type peerReply = (id: string, data: SimplePeerData, channel: string) => void;
 /**
 * Session Status Event - Status of the session has changed
 *
@ -50,24 +59,24 @@ class Session extends EventEmitter {
   *
   * @type {io.Socket}
   */
-  socket;
+  socket: Socket = io();
  /**
   * A mapping of socket ids to session peers
   *
   * @type {Object.<string, SessionPeer>}
   */
-  peers;
+  peers: Record<string, SessionPeer>;
  get id() {
    return this.socket && this.socket.id;
  }
-  _iceServers;
+  _iceServers: string[] = [];
  // Store party id and password for reconnect
-  _gameId;
+  _gameId: string = "";
-  _password;
+  _password: string = "";
  constructor() {
    super();
@ -81,6 +90,9 @@ class Session extends EventEmitter {
   */
  async connect() {
    try {
      if (!process.env.REACT_APP_ICE_SERVERS_URL) {
        return;
      }
      const response = await fetch(process.env.REACT_APP_ICE_SERVERS_URL);
      if (!response.ok) {
        throw Error("Unable to fetch ICE servers");
@ -88,6 +100,9 @@ class Session extends EventEmitter {
      const data = await response.json();
      this._iceServers = data.iceServers;
      if (!process.env.REACT_APP_BROKER_URL) {
        return;
      }
      this.socket = io(process.env.REACT_APP_BROKER_URL, {
        withCredentials: true,
        parser: msgParser,
@ -122,7 +137,7 @@ class Session extends EventEmitter {
   * @param {object} data
   * @param {string} channel
   */
-  sendTo(sessionId, eventId, data, channel) {
+  sendTo(sessionId: string, eventId: string, data: SimplePeerData, channel: string) {
    if (!(sessionId in this.peers)) {
      if (!this._addPeer(sessionId, true)) {
        return;
@ -151,7 +166,11 @@ class Session extends EventEmitter {
   * @param {MediaStreamTrack} track
   * @param {MediaStream} stream
   */
-  startStreamTo(sessionId, track, stream) {
+  startStreamTo(
    sessionId: string,
    track: MediaStreamTrack,
    stream: MediaStream
  ) {
    if (!(sessionId in this.peers)) {
      if (!this._addPeer(sessionId, true)) {
        return;
@ -174,7 +193,7 @@ class Session extends EventEmitter {
   * @param {MediaStreamTrack} track
   * @param {MediaStream} stream
   */
-  endStreamTo(sessionId, track, stream) {
+  endStreamTo(sessionId: string, track: MediaStreamTrack, stream: MediaStream) {
    if (sessionId in this.peers) {
      this.peers[sessionId].connection.removeTrack(track, stream);
    }
@ -186,7 +205,7 @@ class Session extends EventEmitter {
   * @param {string} gameId - the id of the party to join
   * @param {string} password - the password of the party
   */
-  async joinGame(gameId, password) {
+  async joinGame(gameId: string, password: string) {
    if (typeof gameId !== "string" || typeof password !== "string") {
      console.error(
        "Unable to join game: invalid game ID or password",
@ -198,7 +217,12 @@ class Session extends EventEmitter {
    this._gameId = gameId;
    this._password = password;
-    this.socket.emit("join_game", gameId, password, process.env.REACT_APP_VERSION);
+    this.socket.emit(
      "join_game",
      gameId,
      password,
      process.env.REACT_APP_VERSION
    );
    this.emit("status", "joining");
  }
@ -208,7 +232,7 @@ class Session extends EventEmitter {
   * @param {boolean} initiator
   * @returns {boolean} True if peer was added successfully
   */
-  _addPeer(id, initiator) {
+  _addPeer(id: string, initiator: boolean) {
    try {
      const connection = new Connection({
        initiator,
@ -221,15 +245,15 @@ class Session extends EventEmitter {
      const peer = { id, connection, initiator, ready: false };
-      function sendPeer(id, data, channel) {
+      const sendPeer = (id: string, data: SimplePeerData, channel: any) => {
        peer.connection.sendObject({ id, data }, channel);
-      }
+      };
-      function handleSignal(signal) {
+      const handleSignal = (signal: any) => {
        this.socket.emit("signal", JSON.stringify({ to: peer.id, signal }));
-      }
+      };
-      function handleConnect() {
+      const handleConnect = () => {
        if (peer.id in this.peers) {
          this.peers[peer.id].ready = true;
        }
@ -241,10 +265,14 @@ class Session extends EventEmitter {
         * @property {SessionPeer} peer
         * @property {peerReply} reply
         */
-        this.emit("peerConnect", { peer, reply: sendPeer });
+        const peerConnectEvent: { peer: SessionPeer; reply: peerReply } = {
-      }
+          peer,
          reply: sendPeer,
        };
        this.emit("peerConnect", peerConnectEvent);
      };
-      function handleDataComplete(data) {
+      const handleDataComplete = (data: any) => {
        /**
         * Peer Data Event - Data received by a peer
         *
@ -255,15 +283,30 @@ class Session extends EventEmitter {
         * @property {object} data
         * @property {peerReply} reply
         */
-        this.emit("peerData", {
+        let peerDataEvent: {
          peer: SessionPeer;
          id: string;
          data: any;
          reply: peerReply;
        } = {
          peer,
          id: data.id,
          data: data.data,
          reply: sendPeer,
-        });
+        };
-      }
+        console.log(`Data: ${JSON.stringify(data)}`)
        this.emit("peerData", peerDataEvent);
      };
-      function handleDataProgress({ id, count, total }) {
+      const handleDataProgress = ({
        id,
        count,
        total,
      }: {
        id: string;
        count: number;
        total: number;
      }) => {
        this.emit("peerDataProgress", {
          peer,
          id,
@ -271,9 +314,9 @@ class Session extends EventEmitter {
          total,
          reply: sendPeer,
        });
-      }
+      };
-      function handleTrack(track, stream) {
+      const handleTrack = (track: MediaStreamTrack, stream: MediaStream) => {
        /**
         * Peer Track Added Event - A `MediaStreamTrack` was added by a peer
         *
@ -283,7 +326,12 @@ class Session extends EventEmitter {
         * @property {MediaStreamTrack} track
         * @property {MediaStream} stream
         */
-        this.emit("peerTrackAdded", { peer, track, stream });
+        let peerTrackAddedEvent: {
          peer: SessionPeer;
          track: MediaStreamTrack;
          stream: MediaStream;
        } = { peer, track, stream };
        this.emit("peerTrackAdded", peerTrackAddedEvent);
        track.addEventListener("mute", () => {
          /**
           * Peer Track Removed Event - A `MediaStreamTrack` was removed by a peer
@ -294,11 +342,16 @@ class Session extends EventEmitter {
           * @property {MediaStreamTrack} track
           * @property {MediaStream} stream
           */
-          this.emit("peerTrackRemoved", { peer, track, stream });
+          let peerTrackRemovedEvent: {
            peer: SessionPeer;
            track: MediaStreamTrack;
            stream: MediaStream;
          } = { peer, track, stream };
          this.emit("peerTrackRemoved", peerTrackRemovedEvent);
        });
-      }
+      };
-      function handleClose() {
+      const handleClose = () => {
        /**
         * Peer Disconnect Event - A peer has disconnected
         *
@ -306,14 +359,15 @@ class Session extends EventEmitter {
         * @type {object}
         * @property {SessionPeer} peer
         */
-        this.emit("peerDisconnect", { peer });
+        let peerDisconnectEvent: { peer: SessionPeer } = { peer };
        this.emit("peerDisconnect", peerDisconnectEvent);
        if (peer.id in this.peers) {
          peer.connection.destroy();
          this.peers = omit(this.peers, [peer.id]);
        }
-      }
+      };
-      function handleError(error) {
+      const handleError = (error: Error) => {
        /**
         * Peer Error Event - An error occured with a peer connection
         *
@ -322,12 +376,16 @@ class Session extends EventEmitter {
         * @property {SessionPeer} peer
         * @property {Error} error
         */
-        this.emit("peerError", { peer, error });
+        let peerErrorEvent: { peer: SessionPeer; error: Error } = {
          peer,
          error,
        };
        this.emit("peerError", peerErrorEvent);
        if (peer.id in this.peers) {
          peer.connection.destroy();
          this.peers = omit(this.peers, [peer.id]);
        }
-      }
+      };
      peer.connection.on("signal", handleSignal.bind(this));
      peer.connection.on("connect", handleConnect.bind(this));
@ -363,7 +421,7 @@ class Session extends EventEmitter {
    this.emit("gameExpired");
  }
-  _handlePlayerJoined(id) {
+  _handlePlayerJoined(id: string) {
    /**
     * Player Joined Event - A player has joined the game
     *
@ -373,7 +431,7 @@ class Session extends EventEmitter {
    this.emit("playerJoined", id);
  }
-  _handlePlayerLeft(id) {
+  _handlePlayerLeft(id: string) {
    /**
     * Player Left Event - A player has left the game
     *
@ -387,7 +445,7 @@ class Session extends EventEmitter {
    }
  }
-  _handleSignal(data) {
+  _handleSignal(data: any) {
    const { from, signal } = data;
    if (!(from in this.peers)) {
      if (!this._addPeer(from, false)) {
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@ -0,0 +1 @@
 /// <reference types="react-scripts" />
--- a/src/serviceWorker.ts
+++ b/src/serviceWorker.ts
@ -20,9 +20,13 @@ const isLocalhost = Boolean(
    )
 );
-export function register(config) {
+export function register(config: any) {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    // The URL constructor is available in all browsers that support SW.
    if (!process.env.PUBLIC_URL) {
      // TODO: handle is PUBLIC_URL has not been set
      return; 
    }
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
@ -54,9 +58,9 @@ export function register(config) {
  }
 }
-function registerValidSW(swUrl, config) {
+function registerValidSW(swUrl: string | URL, config: any) {
  navigator.serviceWorker
-    .register(swUrl)
+    .register(swUrl as string)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
@ -98,7 +102,8 @@ function registerValidSW(swUrl, config) {
    });
 }
-function checkValidServiceWorker(swUrl, config) {
+// TODO: handle swUrl -> type has to be handled as RequestInfo OR string | URL
 function checkValidServiceWorker(swUrl: any, config: any) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl, {
    headers: { 'Service-Worker': 'script' }
--- a/src/settings.ts
+++ b/src/settings.ts
@ -1,6 +1,6 @@
 import Settings from "./helpers/Settings";
-function loadVersions(settings) {
+function loadVersions(settings: Settings) {
  settings.version(1, () => ({
    fog: {
      type: "polygon",
@ -28,17 +28,17 @@ function loadVersions(settings) {
    },
  }));
  // v1.5.2 - Added full screen support for map and label size
-  settings.version(2, (prev) => ({
+  settings.version(2, (prev: any) => ({
    ...prev,
    map: { fullScreen: false, labelSize: 1 },
  }));
  // v1.7.0 - Added game password
-  settings.version(3, (prev) => ({
+  settings.version(3, (prev: any) => ({
    ...prev,
    game: { usePassword: true },
  }));
  // v1.8.0 - Added pointer color, grid snapping sensitivity and remove measure
-  settings.version(4, (prev) => {
+  settings.version(4, (prev: any) => {
    let newSettings = {
      ...prev,
      pointer: { color: "red" },
@ -48,19 +48,19 @@ function loadVersions(settings) {
    return newSettings;
  });
  // v1.8.0 - Removed edge snapping for multilayer
-  settings.version(5, (prev) => {
+  settings.version(5, (prev: any) => {
    let newSettings = { ...prev };
    delete newSettings.fog.useEdgeSnapping;
    newSettings.fog.multilayer = false;
    return newSettings;
  });
  // v1.8.1 - Add show guides toggle
-  settings.version(6, (prev) => ({
+  settings.version(6, (prev: any) => ({
    ...prev,
    fog: { ...prev.fog, showGuides: true },
  }));
  // v1.8.1 - Add fog edit opacity
-  settings.version(7, (prev) => ({
+  settings.version(7, (prev: any) => ({
    ...prev,
    fog: { ...prev.fog, editOpacity: 0.5 },
  }));
--- a/src/shortcuts.js
+++ b/src/shortcuts.js
@ -1,110 +0,0 @@
 /**
 * @param {KeyboardEvent} event
 * @returns {boolean}
 */
 function hasModifier(event) {
  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 }
 /**
 * Key press without any modifiers and ignoring capitals
 * @param {KeyboardEvent} event
 * @param {string} key
 * @returns {boolean}
 */
 function singleKey(event, key) {
  return (
    !hasModifier(event) &&
    (event.key === key || event.key === key.toUpperCase())
  );
 }
 /**
 * @param {Keyboard} event
 */
 function undo(event) {
  const { key, ctrlKey, metaKey, shiftKey } = event;
  return (key === "z" || key === "Z") && (ctrlKey || metaKey) && !shiftKey;
 }
 /**
 * @param {Keyboard} event
 */
 function redo(event) {
  const { key, ctrlKey, metaKey, shiftKey } = event;
  return (key === "z" || key === "Z") && (ctrlKey || metaKey) && shiftKey;
 }
 /**
 * @param {Keyboard} event
 */
 function zoomIn(event) {
  const { key, ctrlKey, metaKey } = event;
  return (key === "=" || key === "+") && !ctrlKey && !metaKey;
 }
 /**
 * @param {Keyboard} event
 */
 function zoomOut(event) {
  const { key, ctrlKey, metaKey } = event;
  return (key === "-" || key === "_") && !ctrlKey && !metaKey;
 }
 /**
 * @callback shortcut
 * @param {KeyboardEvent} event
 * @returns {boolean}
 */
 /**
 * @type {Object.<string, shortcut>}
 */
 const shortcuts = {
  // Tools
  move: (event) => singleKey(event, " "),
  moveTool: (event) => singleKey(event, "w"),
  drawingTool: (event) => singleKey(event, "d"),
  fogTool: (event) => singleKey(event, "f"),
  measureTool: (event) => singleKey(event, "m"),
  pointerTool: (event) => singleKey(event, "q"),
  noteTool: (event) => singleKey(event, "n"),
  // Map editor
  gridNudgeUp: ({ key }) => key === "ArrowUp",
  gridNudgeLeft: ({ key }) => key === "ArrowLeft",
  gridNudgeRight: ({ key }) => key === "ArrowRight",
  gridNudgeDown: ({ key }) => key === "ArrowDown",
  // Drawing tool
  drawBrush: (event) => singleKey(event, "b"),
  drawPaint: (event) => singleKey(event, "p"),
  drawLine: (event) => singleKey(event, "l"),
  drawRect: (event) => singleKey(event, "r"),
  drawCircle: (event) => singleKey(event, "c"),
  drawTriangle: (event) => singleKey(event, "t"),
  drawErase: (event) => singleKey(event, "e"),
  drawBlend: (event) => singleKey(event, "o"),
  // Fog tool
  fogPolygon: (event) => singleKey(event, "p"),
  fogRectangle: (event) => singleKey(event, "r"),
  fogBrush: (event) => singleKey(event, "b"),
  fogToggle: (event) => singleKey(event, "t"),
  fogErase: (event) => singleKey(event, "e"),
  fogLayer: (event) => singleKey(event, "l"),
  fogPreview: (event) => singleKey(event, "f"),
  fogCut: (event) => singleKey(event, "c"),
  fogFinishPolygon: ({ key }) => key === "Enter",
  fogCancelPolygon: ({ key }) => key === "Escape",
  // Stage interaction
  stageZoomIn: zoomIn,
  stageZoomOut: zoomOut,
  stagePrecisionZoom: ({ key }) => key === "Shift",
  // Select
  selectRange: ({ key }) => key === "Shift",
  selectMultiple: ({ key }) => key === "Control" || key === "Meta",
  // Common
  undo,
  redo,
  delete: ({ key }) => key === "Backspace" || key === "Delete",
 };
 export default shortcuts;
--- a/src/shortcuts.ts
+++ b/src/shortcuts.ts
@ -0,0 +1,114 @@
 /**
 * @param {KeyboardEvent} event
 * @returns {boolean}
 */
 function hasModifier(event: KeyboardEvent): boolean {
  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 }
 /**
 * Key press without any modifiers and ignoring capitals
 * @param {KeyboardEvent} event
 * @param {string} key
 * @returns {boolean}
 */
 function singleKey(event: KeyboardEvent, key: string): boolean {
  return (
    !hasModifier(event) &&
    (event.key === key || event.key === key.toUpperCase())
  );
 }
 /**
 * @param {Keyboard} event
 * @returns {string | boolean}
 */
 function undo(event: KeyboardEvent): string | boolean {
  const { key, ctrlKey, metaKey, shiftKey } = event;
  return (key === "z" || key === "Z") && (ctrlKey || metaKey) && !shiftKey;
 }
 /**
 * @param {Keyboard} event
 * @returns {string | boolean}
 */
 function redo(event: KeyboardEvent): string | boolean {
  const { key, ctrlKey, metaKey, shiftKey } = event;
  return (key === "z" || key === "Z") && (ctrlKey || metaKey) && shiftKey;
 }
 /**
 * @param {Keyboard} event
 * @returns {string | boolean}
 */
 function zoomIn(event: KeyboardEvent): string | boolean {
  const { key, ctrlKey, metaKey } = event;
  return (key === "=" || key === "+") && !ctrlKey && !metaKey;
 }
 /**
 * @param {Keyboard} event
 * @returns {string | boolean}
 */
 function zoomOut(event: KeyboardEvent): string | boolean {
  const { key, ctrlKey, metaKey } = event;
  return (key === "-" || key === "_") && !ctrlKey && !metaKey;
 }
 /**
 * @callback shortcut
 * @param {KeyboardEvent} event
 * @returns {boolean}
 */
 /**
 * @type {Object.<string, shortcut>}
 */
 const shortcuts = {
  // Tools
  move: (event: KeyboardEvent) => singleKey(event, " "),
  moveTool: (event: KeyboardEvent) => singleKey(event, "w"),
  drawingTool: (event: KeyboardEvent) => singleKey(event, "d"),
  fogTool: (event: KeyboardEvent) => singleKey(event, "f"),
  measureTool: (event: KeyboardEvent) => singleKey(event, "m"),
  pointerTool: (event: KeyboardEvent) => singleKey(event, "q"),
  noteTool: (event: KeyboardEvent) => singleKey(event, "n"),
  // Map editor
  gridNudgeUp: ({ key }: { key: string}) => key === "ArrowUp",
  gridNudgeLeft: ({ key }: { key: string }) => key === "ArrowLeft",
  gridNudgeRight: ({ key }: { key: string }) => key === "ArrowRight",
  gridNudgeDown: ({ key }: { key: string }) => key === "ArrowDown",
  // Drawing tool
  drawBrush: (event: KeyboardEvent) => singleKey(event, "b"),
  drawPaint: (event: KeyboardEvent) => singleKey(event, "p"),
  drawLine: (event: KeyboardEvent) => singleKey(event, "l"),
  drawRect: (event: KeyboardEvent) => singleKey(event, "r"),
  drawCircle: (event: KeyboardEvent) => singleKey(event, "c"),
  drawTriangle: (event: KeyboardEvent) => singleKey(event, "t"),
  drawErase: (event: KeyboardEvent) => singleKey(event, "e"),
  drawBlend: (event: KeyboardEvent) => singleKey(event, "o"),
  // Fog tool
  fogPolygon: (event: KeyboardEvent) => singleKey(event, "p"),
  fogRectangle: (event: KeyboardEvent) => singleKey(event, "r"),
  fogBrush: (event: KeyboardEvent) => singleKey(event, "b"),
  fogToggle: (event: KeyboardEvent) => singleKey(event, "t"),
  fogErase: (event: KeyboardEvent) => singleKey(event, "e"),
  fogLayer: (event: KeyboardEvent) => singleKey(event, "l"),
  fogPreview: (event: KeyboardEvent) => singleKey(event, "f"),
  fogCut: (event: KeyboardEvent) => singleKey(event, "c"),
  fogFinishPolygon: ({ key }: { key: string }) => key === "Enter",
  fogCancelPolygon: ({ key }: { key: string }) => key === "Escape",
  // Stage interaction
  stageZoomIn: zoomIn,
  stageZoomOut: zoomOut,
  stagePrecisionZoom: ({ key }: { key: string }) => key === "Shift",
  // Select
  selectRange: ({ key }: { key: string }) => key === "Shift",
  selectMultiple: ({ key }: { key: string }) => key === "Control" || key === "Meta",
  // Common
  undo,
  redo,
  delete: ({ key }: { key: string }) => key === "Backspace" || key === "Delete",
 };
 export default shortcuts;
--- a/src/theme.ts
+++ b/src/theme.ts
		`@ -0,0 +1,2 @@`
							`declare module 'pepjs';`
							`declare module 'socket.io-msgpack-parser';`