Merge pull request #23 from edumudu/feature/#22

Feature/#22

client/@types/files.d.ts

@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const src : string;
+  export default src;
+}
+
+declare module '*.mp3' {
+  const src : string;
+  export default src;
+}
+
+declare module '*.wav' {
+  const src : string;
+  export default src;
+}

client/@types/index.d.ts

@@ -0,0 +1,5 @@
+export interface CardJSON {
+ id: string;
+ order: number;
+ icon: string;
+}

client/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server",
+    "dev": "webpack-dev-server",
     "build": "webpack",
     "deploy": "yarn build && ./node_modules/.bin/gh-pages -d dist"
   },
@@ -22,20 +22,28 @@
     "@babel/preset-env": "^7.3.1",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "babel-loader": "^8.0.5",
-    "css-loader": "^2.1.0",
     "html-webpack-plugin": "^3.2.0",
     "socket.io-client": "^2.3.0",
-    "style-loader": "^0.23.1",
-    "svg-inline-loader": "^0.8.2",
     "webpack": "^4.29.3",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14"
+    "webpack-cli": "^3.2.3"
   },
   "devDependencies": {
+    "@types/html-webpack-plugin": "^3.2.3",
+    "@types/node": "^14.0.26",
+    "@types/socket.io-client": "^1.4.33",
+    "@types/webpack": "^4.41.21",
+    "@types/webpack-dev-server": "^3.11.0",
     "file-loader": "^6.0.0",
     "gh-pages": "^2.2.0",
     "node-sass": "^4.14.1",
-    "sass-loader": "^8.0.2"
+    "style-loader": "^0.23.1",
+    "svg-inline-loader": "^0.8.2",
+    "sass-loader": "^8.0.2",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
+    "ts-loader": "^8.0.1",
+    "ts-node": "^8.10.2",
+    "typescript": "^3.9.7",
+    "webpack-dev-server": "^3.1.14"
   }
 }

client/src/js/Game/AudioController.js → client/src/js/Game/AudioController.ts

@@ -2,18 +2,21 @@ import flipSound from '../../assets/audio/flip.wav';
 import matchSound from '../../assets/audio/match.mp3';
 
 class AudioController {
-  constructor() {
+  private flipSound : HTMLAudioElement;
+  private matchSound : HTMLAudioElement;
+
+  public constructor() {
     this.flipSound = new Audio(flipSound);
     this.matchSound = new Audio(matchSound);
   }
 
-  flip() {
+  public flip() : void {
     this.flipSound.play();
   }
 
-  match() {
+  public match() : void {
     this.matchSound.play();
   }
 }
 
-export default AudioController;
+export default AudioController;

client/src/js/Game/Board.js → client/src/js/Game/Board.ts

@@ -1,12 +1,26 @@
 import Card from './Card';
 import Scoreboard from './Scoreboard';
 import AudioController from './AudioController';
+import { CardJSON } from '../../../@types';
 
 class Board {
-  #board;
-
-  constructor(el, { elapsedTime, cards, players }, me) {
-    this.#board = el;
+  private board : HTMLElement;
+  private timer: HTMLDivElement;
+  private playerTurnEl: HTMLDivElement;
+  private cards : Card[];
+  private me : string;
+  private players : string[];
+  private elapsedTime : number;
+  private timerInterval : NodeJS.Timeout;
+  private AudioController : AudioController;
+  private scoreboard : Scoreboard;
+
+  constructor(
+    el : HTMLElement,
+    { elapsedTime, cards, players } : { elapsedTime: number, cards: CardJSON[], players: string[] },
+    me : string
+  ) {
+    this.board = el;
     this.me = me;
     this.elapsedTime = elapsedTime;
     this.players = players;
@@ -19,66 +33,67 @@ class Board {
     this.playerTurnEl.classList.add('player-turn');
 
     this.AudioController = new AudioController;
+    this.scoreboard = new Scoreboard;
 
     this.timer.classList.add('timer');
-    document.querySelector('#game-info').append(this.timer, this.playerTurnEl);
+    document.querySelector('#game-info')?.append(this.timer, this.playerTurnEl);
 
+    this.timerInterval = this.startTimer();
+
     this.insertCardsInBoard();
     this.initScoreBoard();
-    this.startTimer();
   }
 
-  initScoreBoard() {
-    this.scoreboard = new Scoreboard();
-    document.querySelector('#game-info').appendChild(this.scoreboard.el);
+  private initScoreBoard() : void {
+    document.querySelector('#game-info')?.appendChild(this.scoreboard.el);
   }
 
-  startTimer() {
-    this.timerInterval = setInterval(() => {
+  private startTimer() : NodeJS.Timeout {
+    return setInterval(() => {
       this.elapsedTime++;
       this.timer.textContent = `Time ${this.elapsedTime}`;
     }, 1000);
   }
 
-  insertCardsInBoard() {
-    this.cards.forEach(card => this.#board.appendChild(card.toNode()));
+  private insertCardsInBoard() : void {
+    this.cards.forEach(card => this.board.appendChild(card.toNode()));
   }
 
-  removeCardsFromBoard() {
-    this.cards.forEach(card => this.#board.removeChild(card.toNode()));
+  private removeCardsFromBoard() : void {
+    this.cards.forEach(card => this.board.removeChild(card.toNode()));
   }
 
-  flip (id) {
+  public flip (id : string) : void {
     const card = this.cards.find(card => id === card.id);
-    card.flip();
+    card?.flip();
   }
 
-  unflip (ids) {
+  public unflip (ids : string[]) : void {
     const cards = this.cards.filter(card => ids.includes(card.id));
     cards.forEach(card => card.unflip());
   }
 
-  check(ids) {
+  public check(ids : string[]) : void {
     const cards = this.cards.filter(card => ids.includes(card.id));
     cards.forEach(card => card.markAsMatched());
     this.AudioController.match();
   }
 
-  setScoreboard (score) {
+  public setScoreboard (score : Record<string, number>) : void {
     this.players.forEach(player => {
       this.scoreboard[player === this.me ? 'myHits' : 'enemyHits'] = score[player] || 0;
     })
   }
 
-  setPlayerTurn(playerOfTheTime) {
+  public setPlayerTurn(playerOfTheTime : string) : void {
     this.playerTurnEl.textContent = playerOfTheTime === this.me ? 'Your turn' : 'Enemy turn';
   }
 
-  stopTimers() {
+  public stopTimers() : void {
     clearInterval(this.timerInterval);
   }
 
-  destroy () {
+  public destroy () : void {
     this.removeCardsFromBoard();
     this.scoreboard.destroy();
     this.stopTimers();
@@ -87,4 +102,4 @@ class Board {
   }
 }
 
-export default Board;
+export default Board;