Migrated to TypeScript

client/package.json

@@ -64,7 +64,12 @@
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
+    "@types/gsap": "^1.20.2",
+    "@types/react": "^16.9.38",
+    "@types/react-native": "^0.62.13",
+    "@types/react-redux": "^7.1.9",
     "babel-eslint": "10.0.3",
-    "gh-pages": "^1.2.0"
+    "gh-pages": "^1.2.0",
+    "typescript": "^3.9.5"
   }
 }

client/src/App.js → client/src/App.tsx

@@ -20,7 +20,8 @@ if (Platform.OS !== "web") {
   }
 }
 
-const getNow = global.nativePerformanceNow || Date.now;
+// @ts-ignore
+const getNow = global.nativePerformanceNow ?? Date.now;
 
 export default function App() {
   const [loading, setLoading] = React.useState(true);
@@ -36,7 +37,7 @@ export default function App() {
           Font.loadAsync({
             "GothamNarrow-Book": require("./assets/fonts/GothamNarrow-Book.ttf"),
           }),
-          AudioManager.shared.setupAsync(),
+          AudioManager.setupAsync(),
         ]);
       } catch (error) {
         console.log("Error loading fonts and audio!");

client/src/AudioManager.js → client/src/AudioManager.ts

@@ -3,9 +3,9 @@ import { Audio } from "expo-av";
 import { Platform } from "react-native";
 // eslint-disable-line
 class AudioManager {
-  sounds = {};
+  sounds: Record<string, Audio.Sound> = {};
 
-  playAsync = async (name, isLooping) => {
+  playAsync = async (name: string, isLooping: boolean = false) => {
     if (store.getState().muted || Platform.OS === "web") {
       return;
     }
@@ -23,7 +23,7 @@ class AudioManager {
       console.warn("Audio doesn't exist", name);
     }
   };
-  stopAsync = async (name) => {
+  stopAsync = async (name: string) => {
     if (name in this.sounds) {
       const soundObject = this.sounds[name];
       try {
@@ -35,7 +35,7 @@ class AudioManager {
       console.warn("Audio doesn't exist", name);
     }
   };
-  volumeAsync = async (name, volume) => {
+  volumeAsync = async (name: string, volume: number) => {
     if (name in this.sounds) {
       const soundObject = this.sounds[name];
       try {
@@ -48,7 +48,7 @@ class AudioManager {
     }
   };
 
-  pauseAsync = async (name) => {
+  pauseAsync = async (name: string) => {
     if (name in this.sounds) {
       const soundObject = this.sounds[name];
       try {
@@ -71,16 +71,14 @@ class AudioManager {
       interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
     });
 
-  get assets() {
-    return {
-      "button_in.wav": require("./assets/audio/button_in.wav"),
-      "button_out.wav": require("./assets/audio/button_out.wav"),
-      "song.mp3": require("./assets/audio/song.mp3"),
-      "unlock.mp3": require("./assets/audio/unlock.mp3"),
-    };
-  }
+  assets: Record<string, number> = {
+    "button_in.wav": require("./assets/audio/button_in.wav"),
+    "button_out.wav": require("./assets/audio/button_out.wav"),
+    "song.mp3": require("./assets/audio/song.mp3"),
+    "unlock.mp3": require("./assets/audio/unlock.mp3"),
+  };
 
-  setupAudioAsync = async () => {
+  setupAudioAsync = async (): Promise<void> => {
     const keys = Object.keys(this.assets || {});
     for (const key of keys) {
       const item = this.assets[key];
@@ -97,6 +95,4 @@ class AudioManager {
   };
 }
 
-AudioManager.shared = new AudioManager();
-
-export default AudioManager;
+export default new AudioManager();

client/src/ExpoParty/Fire.js → client/src/ExpoParty/Fire.ts

@@ -1,7 +1,7 @@
-// @flow
 // import { dispatch } from "../rematch/store";
 import Constants from "expo-constants";
 import Settings from "../constants/Settings";
+// @ts-ignore: Secret file
 import Secret from "./Secret";
 
 import firebase from "firebase/app";

client/src/Game/Circle.ts

@@ -0,0 +1,55 @@
+import { CircleGeometry, Mesh, MeshPhongMaterial, Color } from "three";
+
+class CircleMesh extends Mesh {
+  private _alpha = 1;
+
+  constructor({
+    radius,
+    color,
+  }: {
+    radius: number;
+    color: number | string | Color;
+  }) {
+    super(
+      new CircleGeometry(radius, 32),
+      new MeshPhongMaterial({
+        color,
+        transparent: true,
+        // side: DoubleSide,
+      })
+    );
+  }
+
+  set alpha(value) {
+    this._alpha = value;
+    const transparent = value !== 1;
+    if (Array.isArray(this.material)) {
+      this.material.map((material) => {
+        material.transparent = transparent;
+        material.opacity = value;
+      });
+    } else if (this.material) {
+      this.material.transparent = transparent;
+      this.material.opacity = value;
+    }
+  }
+
+  reset = () => {
+    this.visible = false;
+    this.scale.x = 0.001;
+    this.scale.y = 0.001;
+    this.alpha = 0.8;
+  };
+
+  get alpha() {
+    return this._alpha;
+  }
+
+  explode = () => {
+    // todo tween disapate animation
+  };
+
+  update = () => {};
+}
+
+export default CircleMesh;