Code Review zur Übungsaufgabe: Countdown

resources/js/game/GameManager.js

@@ -0,0 +1,105 @@
+/* eslint-env browser */
+
+import Config from "../utils/Config.js";
+import { Event, Observable } from "../utils/Observable.js";
+import LetterGenerator from "./LetterGenerator.js";
+import WiktionaryClient from "../wiktionary/Wiktionary.js";
+
+var currentLetters,
+    countdownTimeout;
+
+function broadcastEvent(type, data) {
+    let event = new Event(type, data);
+    this.notifyAll(event);
+}
+
+function getResultObjectForValidWord(word) {
+    let points = (word.length === Config.MAX_CHARS) ? Config.POINTS_FOR_NINE_LETTER_WORD : word.length;
+    return getResultObject(word, Config.POSITIVE_RESULT_MESSAGE, points);
+}
+
+function getResultObject(word, hint, points) {
+    return {
+        word: word,
+        hint: hint,
+        points: points,
+    };
+}
+
+function addChar(char) {
+    if (currentLetters.length < Config.MAX_CHARS) {
+        currentLetters.push(char);
+        broadcastEvent.call(this, "CharAdded", char);
+    }
+    if (currentLetters.length === Config.MAX_CHARS) {
+        broadcastEvent.call(this, "LastCharAdded");
+    }
+}
+
+function isValidCharCombination(word) {
+    let result = word.toUpperCase();
+    for (let i = 0; i < currentLetters.length; i++) {
+        result = result.replace(currentLetters[i].toUpperCase(), "");
+    }
+    if (result.length === 0) {
+        return true;
+    }
+    return false;
+}
+
+function onTimeout() {
+    let event = new Event("CountdownStopped");
+    this.notifyAll(event);
+}
+
+function clearCountdownTimeoutIfRunning() {
+    if (countdownTimeout) {
+        clearTimeout(countdownTimeout);
+    }
+}
+
+class GameManager extends Observable {
+
+    reset() {
+        clearCountdownTimeoutIfRunning();
+        LetterGenerator.reset();
+        currentLetters = [];
+    }
+
+    startCountdown() {
+        countdownTimeout = setTimeout(onTimeout.bind(this), Config.GAME_TIME_IN_MS);
+        broadcastEvent.call(this, "CountdownStarted");
+    }
+
+    addRandomVowel() {
+        let vowel = LetterGenerator.getVowel();
+        addChar.call(this, vowel);
+    }
+
+    addRandomConsonant() {
+        let consonant = LetterGenerator.getConsonant();
+        addChar.call(this, consonant);
+    }
+
+    validateWord(word) {
+        return new Promise(function (resolve, reject) {
+            let isUsingCorrectLetters = isValidCharCombination(word);
+            if (!isUsingCorrectLetters) {
+                let result = getResultObject(word, Config.INVALID_COMBINATION_RESULT_MESSSAGE, 0);
+                reject(result);
+            } else {
+                let wc = new WiktionaryClient();
+                wc.assertWordExist(word).then(function () {
+                    let result = getResultObjectForValidWord(word);
+                    resolve(result);
+                }).catch(function () {
+                    let result = getResultObject(word, Config.INVALID_WORD_RESULT_MESSAGE, 0);
+                    resolve(result);
+                });
+            }
+        });
+    }
+
+}
+
+export default new GameManager();

resources/js/game/LetterGenerator.js

@@ -0,0 +1,78 @@
+/* eslint-env browser */
+
+import Config from "../utils/Config.js";
+
+let vowels,
+    consonants;
+
+function shuffleStack(stack) {
+    let j, x, i;
+    for (i = stack.length; i; i--) {
+        j = Math.floor(Math.random() * i);
+        x = stack[i - 1];
+        stack[i - 1] = stack[j];
+        stack[j] = x;
+    }
+}
+
+function prepareStacks(letterFreq) {
+    let target;
+    vowels = [];
+    consonants = [];
+    /**
+     * letterFreq is an object parsed from resources/data/letter-freq.json
+     * Each property of letterFreq represents an letter and its frequency:
+     * {
+     * "a": 8.167,
+     * "b": 1.492,
+     * "c": 2.782,
+     * "d": 4.253,
+     * ...
+     */
+    for (let char in letterFreq) {
+        if (Object.prototype.hasOwnProperty.call(letterFreq, char)) {
+            // rounding the current letter's frequency
+            let freq = Math.floor(letterFreq[char]);
+            target = undefined;
+            // selecting the correct array (stack)
+            if (Config.VOWELS.includes(char)) {
+                target = vowels;
+            } else if (Config.CONSONANTS.includes(char)) {
+                target = consonants;
+            }
+            // Adding the current letter n-times (freq) to the array
+            if (target) {
+                for (let i = 0; i < freq; i++) {
+                    target.push(char);
+                }
+            }
+        }
+    }
+    shuffleStack(vowels);
+    shuffleStack(consonants);
+}
+
+function selectRandomCharFrom(chars) {
+    let randomIndex = Math.floor(Math.random() * (chars.length - 1)),
+        randomChar = chars[randomIndex];
+    chars.splice(randomIndex, 1);
+    return randomChar;
+}
+
+class LetterGenerator {
+
+    reset() {
+        prepareStacks(Config.LETTER_FREQUENCY);
+    }
+
+    getVowel() {
+        return selectRandomCharFrom(vowels);
+    }
+
+    getConsonant() {
+        return selectRandomCharFrom(consonants);
+    }
+
+}
+
+export default new LetterGenerator();

resources/js/index.js

@@ -1,8 +1,104 @@
 /* eslint-env browser */
 
+import Config from "./utils/Config.js";
+import AudioPlayer from "./utils/AudioPlayer.js";
+import GameManager from "./game/GameManager.js";
+import ClockView from "./ui/ClockView.js";
+import LetterView from "./ui/LetterView.js";
+import MenuView from "./ui/MenuView.js";
+import ResultView from "./ui/ResultView.js";
+import ControlsView from "./ui/ControlsView.js";
+
+let menuView,
+	controlsView,
+	letterView,
+	clockView,
+	resultsView;
+
 function init() {
-	// Start here
-	console.log("#### Starting Countdown app ####");
+	initGameManager();
+	initUI();
+	initAudio();
+}
+
+function initGameManager() {
+	GameManager.addEventListener("CharAdded", onCharAdded);
+	GameManager.addEventListener("LastCharAdded", onLastCharAdded);
+	GameManager.addEventListener("CountdownStarted", onCountdownStarted);
+	GameManager.addEventListener("CountdownStopped", onCountdownStopped);
+}
+
+function initUI() {
+	let menuEl = document.querySelector(".menu-screen"),
+		controlsEl = document.querySelector(".controls"),
+		lettersEl = document.querySelector(".letters"),
+		clockEl = document.querySelector(".clock"),
+		resultsEl = document.querySelector(
+			".results");
+	menuView = new MenuView(menuEl);
+	menuView.addEventListener("StartButtonClicked", startGame);
+	controlsView = new ControlsView(controlsEl);
+	controlsView.addEventListener("AddVowel", addVowel);
+	controlsView.addEventListener("AddConsonant", addConsonant);
+	letterView = new LetterView(lettersEl);
+	clockView = new ClockView(clockEl);
+	resultsView = new ResultView(resultsEl);
+}
+
+function initAudio() {
+	AudioPlayer.setFile(Config.PATH_TO_BACKGROUND_MUSIC);
+}
+
+function startGame() {
+	menuView.hide();
+	controlsView.clear();
+	controlsView.disable();
+	letterView.clear();
+	resultsView.clear();
+	resultsView.hide();
+	clockView.reset();
+	GameManager.reset();
+}
+
+function addVowel() {
+	GameManager.addRandomVowel();
+}
+
+function addConsonant() {
+	GameManager.addRandomConsonant();
+}
+
+function showResults(results) {
+	resultsView.setPoints(results.points);
+	resultsView.setHint(results.hint);
+	resultsView.show();
+	setTimeout(() => menuView.show(), Config.TIME_BEFORE_MENU_IS_SHOWN);
+}
+
+function onCharAdded(event) {
+	letterView.addLetter(event.data);
+}
+
+function onLastCharAdded() {
+	GameManager.startCountdown();
+}
+
+function onCountdownStarted() {
+	clockView.start();
+	AudioPlayer.play();
+	controlsView.focus();
+	controlsView.enable();
+}
+
+function onCountdownStopped() {
+	clockView.reset();
+	AudioPlayer.stop();
+	let word = controlsView.getUserInput();
+	GameManager.validateWord(word).then((results) => {
+		showResults(results);
+	}).catch((results) => {
+		showResults(results);
+	});
 }
 
 init();

resources/js/ui/ClockView.js

@@ -0,0 +1,23 @@
+/* eslint-env browser */
+
+import View from "./View.js";
+
+class ClockView extends View {
+
+    constructor(el) {
+        super();
+        this.setElement(el);
+        this.clockHand = this.el.querySelector(".hand");
+    }
+
+    start() {
+        this.clockHand.classList.add("hand-animated");
+    }
+
+    reset() {
+        this.clockHand.classList.remove("hand-animated");
+    }
+
+}
+
+export default ClockView;

resources/js/ui/ControlsView.js

@@ -0,0 +1,44 @@
+/* eslint-env browser */
+
+import View from "./View.js";
+import { Event } from "../utils/Observable.js";
+
+function broadcastLetterEvent(type) {
+    let event = new Event(type);
+    this.notifyAll(event);
+}
+
+class ControlsView extends View {
+
+    constructor(el) {
+        super();
+        this.setElement(el);
+        this.inputEl = this.el.querySelector(".word-input");
+        this.el.querySelector(".add-vowel").addEventListener("click", broadcastLetterEvent.bind(this, "AddVowel"));
+        this.el.querySelector(".add-consonant").addEventListener("click", broadcastLetterEvent.bind(this, "AddConsonant"));
+    }
+
+    clear() {
+        this.inputEl.value = "";
+    }
+
+    enable() {
+        this.inputEl.disabled = false;
+    }
+
+    disable() {
+        this.inputEl.disabled = true;
+    }
+
+    focus() {
+        this.inputEl.focus();
+    }
+
+    getUserInput() {
+        return this.inputEl.value;
+    }
+
+
+}
+
+export default ControlsView;

resources/js/ui/LetterView.js

@@ -0,0 +1,30 @@
+/* eslint-env browser */
+
+import View from "./View.js";
+
+class LetterView extends View {
+
+    constructor(el) {
+        super();
+        this.setElement(el);
+    }
+
+    clear() {
+        let letters = this.el.querySelectorAll(".letter");
+        for (let i = 0; i < letters.length; i++) {
+            letters[i].innerHTML = "";
+            letters[i].classList.add("empty");
+        }
+    }
+
+    addLetter(letter) {
+        let nextLetterElement = this.el.querySelector(".letter.empty");
+        if (nextLetterElement !== undefined) {
+            nextLetterElement.innerHTML = letter;
+            nextLetterElement.classList.remove("empty");
+        }
+    }
+
+}
+
+export default LetterView;