Creating and consuming modules

app/app.ts

@@ -0,0 +1,22 @@
+import { Player } from './player';
+import { Game } from './game';
+import * as Helpers from './utility';
+
+let newGame: Game;
+
+// add click handler to the start game button
+document.getElementById('startGame')!.addEventListener('click', () => {
+  const player: Player = new Player();
+  player.name = Helpers.getValue('playername');
+
+  const problemCount: number = Number(Helpers.getValue('problemCount'));
+  const factor: number = Number(Helpers.getValue('factor'));
+
+  newGame = new Game(player, problemCount, factor);
+  newGame.displayGame();
+});
+
+// add click handler to the calculate score button
+document.getElementById('calculate')!.addEventListener('click', () => {
+  newGame.calculateScore();
+});

app/game.ts

@@ -0,0 +1,59 @@
+import { getValue } from './utility';
+import { Result } from './result';
+import { Player } from './player';
+import { Scoreboard as ResultPanel } from './scoreboard';
+
+export class Game {
+  private scoreboard: ResultPanel = new ResultPanel();
+
+  constructor(public player: Player, public problemCount: number, public factor: number) {
+  }
+
+  displayGame(): void {
+
+    // create the html for the current game
+    let gameForm: string = '';
+    for (let i = 1; i <= this.problemCount; i++) {
+      gameForm += '<div class="form-group">';
+      gameForm += '<label for="answer' + i + '" class="col-sm-2 control-label">';
+      gameForm += String(this.factor) + ' x ' + i + ' = </label>';
+      gameForm += '<div class="col-sm-1"><input type="text" class="form-control" id="answer' + i + '" size="5" /></div>';
+      gameForm += '</div>';
+    }
+
+    // add the new game to the page
+    const gameElement: HTMLElement = document.getElementById('game')!;
+    gameElement.innerHTML = gameForm;
+
+    // enable the calculate score button
+    document.getElementById('calculate')!.removeAttribute('disabled');
+  }
+
+  calculateScore(): void {
+
+    let score: number = 0;
+
+    // loop through the text boxes and calculate the number that are correct
+    for (let i = 1; i <= this.problemCount; i++) {
+      const answer: number = Number(getValue('answer' + i));
+      if (i * this.factor === answer) {
+        score++;
+      }
+    }
+
+    // create a new result object to pass to the scoreboard
+    const result: Result = {
+      playerName: this.player.name,
+      score: score,
+      problemCount: this.problemCount,
+      factor: this.factor
+    };
+
+    // add the result and update the scoreboard
+    this.scoreboard.addResult(result);
+    this.scoreboard.updateScoreboard();
+
+    // disable the calculate score button
+    document.getElementById('calculate')!.setAttribute('disabled', 'true');
+  }  
+}

app/person.ts

@@ -0,0 +1,5 @@
+export interface Person {
+  name: string;
+  age?: number;
+  formatName: () => string;  
+}

app/player.ts

@@ -0,0 +1,11 @@
+import { Person } from './person';
+
+export class Player implements Person {
+  name: string;
+  age: number;
+  highScore: number;
+
+  formatName() {
+    return this.name.toUpperCase();
+  }  
+}

app/result.ts

@@ -0,0 +1,6 @@
+export interface Result {
+  playerName: string;
+  score: number;
+  problemCount: number;
+  factor: number;  
+}

app/scoreboard.ts

@@ -0,0 +1,24 @@
+import { Result } from './result';
+
+export class Scoreboard {
+
+  private results: Result[] = [];
+
+  addResult(newResult: Result): void {
+    this.results.push(newResult);
+  }
+
+  updateScoreboard(): void {
+    let output: string = '<h2>Scoreboard</h2>';
+
+    for (let index = 0; index < this.results.length; index++) {
+      const result: Result = this.results[index];
+      output += '<h4>';
+      output += result.playerName + ': ' + result.score + '/' + result.problemCount + ' for factor ' + result.factor;
+      output += '</h4>';
+    }
+
+    const scoresElement: HTMLElement = document.getElementById('scores')!;
+    scoresElement.innerHTML = output;
+  }  
+}

app/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.base",
+  "compilerOptions": {
+    "removeComments": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "traceResolution": true
+  },
+  "files": [
+    "./app.ts"
+  ]
+}

app/utility.ts

@@ -0,0 +1,11 @@
+function getInputValue(elementID: string): string {
+
+  const inputElement: HTMLInputElement = <HTMLInputElement>document.getElementById(elementID);
+  return inputElement.value;
+}
+
+function logger(message: string): void {
+  console.log(message);
+}
+
+export { getInputValue as getValue, logger }

index.html

@@ -49,13 +49,13 @@
 
     <div class="col-sm-offset-2 col-sm-10" id="scores">
         <h2>Scoreboard</h2>
-        <h4>No scores yet</h4>
+        <h4 id="postedScores">No scores yet</h4>
     </div>
 
     <div class="col-sm-offset-2 col-sm-10" id="messages"></div>
 
     <!-- add script tags here -->
-
+    <script src="bundle.js"></script>
 
 </body>
 </html>

package.json

@@ -10,7 +10,7 @@
   "license": "ISC",
   "devDependencies": {
     "ts-loader": "8.0.17",
-    "typescript": "4.1.5",
+    "typescript": "4.2.2",
     "webpack": "5.22.0",
     "webpack-cli": "4.5.0",
     "webpack-dev-server": "3.11.2"