4.4 Basic: declaring types.

- clean off the unused files from the previous branch.

app/app.ts

@@ -1,21 +1,44 @@
-import * as Helpers from './utility';
-import {Game} from './game';
-import {Player} from './player';
+function GetAllBooks() {
+  let books = [
+    {
+      author: 'James Joyce',
+      available: true,
+      title: 'Ulysses',
+    },
+    {
+      author: 'Ernest Hemingway',
+      available: false,
+      title: 'A farewall to arms',
+    },
+    {
+      author: 'Maya Angelou',
+      available: true,
+      title: 'I know why the caged bird sings',
+    },
+    {
+      author: 'Herman Melville',
+      available: true,
+      title: 'Moby Dick',
+    }
+  ];
 
-let newGame: Game;
+  return books;
+}
 
-document.getElementById('startGame')!.addEventListener('click', () => {
-  let player: Player = new Player();
-  player.name = Helpers.getValue('playername');
+function LogFirstAvailable(books): void {
 
-  let problemCount: number = Number(Helpers.getValue('problemCount'));
-  let factor: number = Number(Helpers.getValue('factor'));
+  const numberOfBooks: number = books.length;
+  let firstAvailable: string = '';
+  for (let currentBook of books) {
+    if (currentBook.available) {
+      firstAvailable = currentBook.title;
+      break;
+    }
+  }
 
-  newGame = new Game(player, problemCount, factor);
-  newGame.displayGame();
-});
+  console.log(`Total number of books: ${numberOfBooks}.`);
+  console.log(`First available: ${firstAvailable}.`);
+}
 
-// Add click handler to the calculate score button.
-document.getElementById('calculate')!.addEventListener('click', () => {
-  newGame.calculateScore();
-});
+const allBooks = GetAllBooks();
+LogFirstAvailable(allBooks);

app/game.ts

@@ -1,75 +0,0 @@
-import {getValue} from "./utility";
-import {Player} from "./player";
-import {Result} from "./result";
-import {Scoreboard as ResultPanel} from "./scoreboard";
-
-export class Game {
-  private scoreboard: ResultPanel = new ResultPanel();
-
-  /**
-   * Passing "public" parameters to constructor() automatically creates
-   * properties of the same name and initializes them to the value of the passed
-   * argument. Same with "protected", "private", and "readonly".
-   *
-   * The name for this is "parameter properties".
-   *
-   * @param player
-   * @param problemCount
-   * @param factor
-   */
-  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">';
-      // Note use of the String constructor vs a type assertion: they do not
-      // fulfill the same purpose.
-      gameForm += String(this.factor) + ' x ' + i + ' = </label>';
-      gameForm += '<div class="col-sm-1"><input type="text" class="form-control" id="answer' + i + '"></div>';
-      gameForm += '</div>';
-    }
-
-    // Add the game to the page.
-    let 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++) {
-      let answer: number = Number(getValue('answer' + i));
-      if (i * this.factor === answer) {
-        score++;
-      }
-    }
-
-    // Create a new result object to pass to the scoreboard.
-    let result: Result = {
-      playerName: this.player.name,
-      score,
-      problemCount: this.problemCount,
-      factor: this.factor,
-    };
-
-    this.scoreboard.addResult(result);
-    this.scoreboard.updateScoreboard();
-
-    // Disable the calculate score button.
-    document.getElementById('calculate')!.setAttribute('disabled', 'true');
-
-  }
-
-}

app/person.ts

@@ -1,6 +0,0 @@
-export interface Person {
-  // If age exists, then it must be a number; but it is not required to exist.
-  age?: number;
-  formatName: () => string;
-  name: string;
-}

app/player.ts

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

app/result.ts

@@ -1,9 +0,0 @@
-// Could have been a class, but since there are no methods involved, an
-// interface is cheaper (translates to just nothing in compiled code, unlike a
-// class).
-export interface Result {
-  playerName: string;
-  score: number;
-  problemCount: number;
-  factor: number;
-}

app/scoreboard.ts

@@ -1,28 +0,0 @@
-import {Result} from './result';
-import * as _ from 'lodash';
-
-export class Scoreboard {
-  private results: Result[] = [];
-
-  addResult(newResult: Result): void {
-    this.results.push(newResult);
-    let allCaps: string = _.upperCase(newResult.playerName);
-    console.log(`${allCaps} - ${newResult.score}`);
-  }
-
-  updateScoreboard(): void {
-    let output: string = '<h2>Scoreboard</h2>';
-
-    // Loop over results and create HTML for the scoreboard.
-    for (let index = 0; index < this.results.length; index++) {
-      let result: Result = this.results[index];
-      output += '<h4>';
-      output += result.playerName + ': ' + result.score + '/' + result.problemCount + ' for ' + result.factor;
-      output += '</h4>';
-    }
-
-    // Add the updated scoreboard to the page.
-    let scoresElement: HTMLElement = document.getElementById('scores')!;
-    scoresElement.innerHTML = output;
-  }
-}

app/utility.ts

@@ -1,13 +0,0 @@
-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,
-}

doc/modules.md

@@ -1,55 +0,0 @@
-# Résolution des modules
-## "Classic"
-### "./person" dans /Source/Multimath/player.ts
-
-1. `/Source/Multimath/person.ts`
-1. `/Source/Multimath/person.d.ts` (type definition file)
-
-### "person" dans /Source/Multimath/player.ts
-
-1. `/Source/Multimath/person.ts`
-1. `/Source/Multimath/person.d.ts`
-1. `/Source/person.ts`
-1. `/Source/person.d.ts`
-1. `/person.ts`
-1. `/person.d.ts`
-
-## "Node"
-### "./person" dans /Source/Multimath/player.ts
-
-1. `/Source/Multimath/person.ts`
-1. `/Source/Multimath/person.tsx` (equivalent de JSX en TS)
-1. `/Source/Multimath/person.d.ts` (type definition file)
-1. `/Source/Multimath/person/package.json`: s'il existe une propriété `typings` pointant vers un fichier, l'utiliser
-1. `/Source/Multimath/index.ts`
-1. `/Source/Multimath/index.tsx`
-1. `/Source/Multimath/index.d.ts`
-
-
-### "person" dans /Source/Multimath/player.ts
-
-1. `/Source/Multimath/node_modules/person.ts`
-1. `/Source/Multimath/node_modules/person.tsx`
-1. `/Source/Multimath/node_modules/person.d.ts`
-1. `/Source/Multimath/node_modules/person/package.json#typings` (?)
-1. `/Source/Multimath/node_modules/@types/*ts[x]` (?)
-1. `/Source/Multimath/node_modules/index.ts`
-1. `/Source/Multimath/node_modules/index.tsx`
-1. `/Source/Multimath/node_modules/index.d.ts`
-1. `/Source/node_modules/person.ts`
-1. `/Source/node_modules/person.tsx`
-1. `/Source/node_modules/person.d.ts`
-1. `/Source/node_modules/person/package.json#typings`
-1. `/Source/node_modules/@types/*ts[x]` (?)
-1. `/Source/node_modules/index.ts`
-1. `/Source/node_modules/index.tsx`
-1. `/Source/node_modules/index.d.ts`
-1. `/node_modules/person.ts`
-1. `/node_modules/person.tsx`
-1. `/node_modules/person.d.ts`
-1. `/node_modules/person/package.json#typings`
-1. `/node_modules/@types/*ts[x]` (?)
-1. `/node_modules/index.ts`
-1. `/node_modules/index.tsx`
-1. `/node_modules/index.d.ts`
-1. Then start again with `.js` extension instead of `.ts[x]`.

index.html

@@ -1,76 +0,0 @@
-<html>
-<head lang="en">
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="css/united.bootstrap.min.css" />
-    <link rel="icon" type="image/png" href="favicon.png" />
-    <title>MultiMath</title>
-</head>
-
-<body>
-    <nav class="navbar navbar-default">
-        <div class="container-fluid">
-            <div class="navbar-header">
-                <span class="navbar-brand">MultiMath</span>
-            </div>
-        </div>
-    </nav>
-
-    <div class="form-horizontal" id="nameform">
-        <div class="form-group">
-            <label for="playername" class="col-sm-2 control-label">Player Name</label>
-            <div class="col-sm-2">
-                <input type="text" class="form-control" id="playername" size="20" placeholder="Player name" />
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label for="factor" class="col-sm-2 control-label">Factor</label>
-            <div class="col-sm-2">
-                <input type="text" class="form-control" id="factor" size="20" value="5" placeholder="Factor" />
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label for="problemCount" class="col-sm-2 control-label">Number of Problems</label>
-            <div class="col-sm-2">
-                <input type="text" class="form-control" id="problemCount" size="20" placeholder="Number of problems" />
-            </div>
-        </div>
-
-        <div class="form-group">
-            <div class="col-sm-offset-2 col-sm-10">
-                <button class="btn btn-primary" id="startGame">Start Game</button>
-                <button class="btn btn-success" id="calculate" disabled>Calculate Score</button>
-            </div>
-        </div>
-
-        <div class="form-horizontal" id="game"></div>
-
-        <div class="col-sm-offset-2 col-sm-10" id="scores">
-            <h2>Scoreboard</h2>
-            <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="node_modules/systemjs/dist/system.js"></script>
-        <script>
-            System.config({
-              paths: {
-                'lodash': 'node_modules/lodash/lodash',
-              },
-              meta: {
-                format: 'cjs',
-              },
-              packages: {
-                '.': {
-                  defaultExtension: 'js'
-                }
-              },
-            });
-            System.import('./js/app.js');
-        </script>
-    </div>
-</body>
-</html>

output.js

@@ -1,7 +0,0 @@
-function startGame() {
-    // Starting a new game.
-    var messagesElement = document.getElementById('messages');
-    messagesElement.innerText = 'Welcome to MultiMath! Starting a new game';
-}
-document.getElementById('startGame').addEventListener('click', startGame);
-//# sourceMappingURL=output.js.map

output.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"output.js","sourceRoot":"","sources":["app/app.ts"],"names":[],"mappings":"AAAA;IACE,uBAAuB;IACvB,IAAM,eAAe,GAAG,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IAC5D,eAAe,CAAC,SAAS,GAAG,2CAA2C,CAAC;AAC1E,CAAC;AAED,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC"}