Dice Rolling Application Typoskript

Question

Ich mache gerade ein Tutorial auf edx.org über Typescript2. Aber ich brauche Hilfe bei der Self Assessment Lab:

„Nun, da Sie die Grundlagen des gelernt haben, wie Typoskript zu verwenden, müssen Sie einen einfachen Würfel machen sind auf die folgenden Parameter rollt Anwendung:

Verwenden die folgenden Arten in Ihrer Anwendung. Array, Zahl, ein String, Boolean

eine eNUM Verwenden Sie die möglichen gewalzten Werte zu erklären (Hinweis: Sie müssen Zahlen nicht sein)

Verwenden Sie eine Klasse zu erstellen. Ihr Würfel, einschließlich typisierter Eigenschaften für die benötigten CSS-Stile (Länge, Breite, Rahmen, Farbe)) und für den im Würfel enthaltenen Wert.

Erstellen Sie eine Schnittstelle, um die Typen Ihres Dies zu beschreiben.

Erweitern Sie die Klasse mit einer dieRoller-Klasse, um eine Methode zum Rolling des Dies zu erstellen.

Erstellen Sie eine Funktion zum Instanziieren von Würfeln mit der dieRoller-Klasse, die Elemente mit der Funktion constructor() bindet.

Erstellen Sie eine Schaltfläche, um alle Würfel auf einmal zu rollen.

Das fertige Produkt soll in etwa so am Ende aussehen und soll zufällig einen anderen Wert aus dem Enum für jeden einzelnen Chip erzeugen, wenn die „Roll Dice“ Taste gedrückt wird.“

sollte es vier Würfel und danach ein Knopf (alles in einer Zeile)

Mein Problem ist, dass ich nicht in der Lage bin, nur eine Schaltfläche zu erstellen, oder dass ich rolleDice() nicht verwenden kann (wenn ich die Schaltfläche außerhalb der Klasse deklariere ... normalerweise eine würde es wahrscheinlich draußen deklarieren und eine Instanz der Klasse erstellen ... aber keine Ahnung, wie man das macht, weil die Klasse einen Konstruktor mit einem Parameter hat. Vielleicht hast du also eine Idee ... Oder ich nur die Aufgabe missverstanden? :/

Vielen Dank!

class diceRoller { 
    span: Element; 
    constructor(span: Element) { 
     this.span = span; 
    } 
    rolleDice(diceValue: number): boolean { 
     (<HTMLElement>this.span).textContent = diceValues[diceValue]; 
     return true; 
    } 
} 
class dice extends diceRoller { 
    button: Element = document.createElement('button'); 
    constructor(span: Element) { 
     super(span); 
     (<HTMLElement>span).style.cssText = "border: 5px solid black; display: inline-block; height: 50px; width: 50px; margin: 2px"; 
     this.button.textContent = "Role Dice";  
     document.body.appendChild(this.button); 
    } 
} 
enum diceValues { 
    one, 
    two, 
    three, 
    four, 
    five, 
    six 
} 
interface diceTypes { 
    span: Element; 
} 
let Elements: Array<diceTypes> = []; 
for (let index: number = 0; index < 5; index++) { 
    Elements.push({ 
     'span': document.createElement('span'), 
    }); 
} 
let getRandomIntInclusive: Function = (min, max) => { 
    min = Math.ceil(min); 
    max = Math.floor(max); 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 
Elements.map((elem, index) => { 
    let cube = new dice(elem.span); 
    let button: Element = document.createElement('button'); 
    document.body.appendChild(elem.span); 
}); 

Answer 1

In Aufgabe sagte, dass dieRoller sterben, nicht stirbt verlängert dieRoller. Würfel ist nur ein Würfel, Würfel ist ein Würfel mit einer Methode.

Auch ich habe eine separate Klasse für RollButton, es hat Methode, die Array mit allen Würfeln und feuern seine RollDice-Methoden.

Eine Sache, ich bin mir nicht sicher, gibt es mehr Schönheit Weise nicht zwei separate Arrays zu verwenden - für Elemente und für diceCollection, sondern nur für diceCollection.

In idealer Weise sehe ich große Klasse, die Array von Dice-Instanzen und RollButton enthält.

es ist auch cool für DiceValues ​​von 1.

Auf jeden Fall starten funktioniert es aber Refactoring sind willkommen. http://jsbin.com/rahewuhije/edit?js,output

class Dice { 
    span: Element; 
    constructor(span: Element) { 
     this.span = span; 
    } 
} 
class DiceRoller extends Dice { 
    // button: Element = document.createElement('button'); 
    constructor(span: Element) { 
     super(span); 
     (<HTMLElement>span).style.cssText = "border: 5px solid black; display: inline-block; height: 50px; width: 50px; margin: 2px"; 
     // this.button.textContent = "Role Dice";  
     // document.body.appendChild(this.button); 
    } 
    rolleDice(diceValue: number): boolean { 
     (<HTMLElement>this.span).textContent = DiceValues[diceValue]; 
     return true; 
    } 
} 

class DiceRollerButton { 
    button: Element; 
    constructor(button: Element) { 
    this.button = button; 
    (<HTMLElement>this.button).style.cssText = "display: inline-block;"; 
    this.button.textContent = "Roll!"; 
    document.body.appendChild(this.button); 
    } 

    roll(diceCollection: Array<DiceRoller>) { 
    diceCollection.forEach((item) => { 
     item.span.textContent = DiceValues[getRandomIntInclusive(1, 6)]; 
    }); 
    } 
} 

enum DiceValues { 
    one = 1, 
    two, 
    three, 
    four, 
    five, 
    six 
} 
interface DiceTypes { 
    span: Element; 
} 
let Elements: Array<DiceTypes> = []; 

let diceCollection: Array<DiceRoller> = []; 

for (let index: number = 0; index < 5; index++) { 
    Elements.push({ 
     'span': document.createElement('span'), 
    }); 
} 
let getRandomIntInclusive: Function = (min, max) => { 
    min = Math.ceil(min); 
    max = Math.floor(max); 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 
Elements.map((elem, index) => { 
    let cube = new DiceRoller(elem.span); 
    // let button: Element = document.createElement('button'); 
    document.body.appendChild(elem.span); 

    diceCollection.push(cube); 
}); 

let diceRollerButton = new DiceRollerButton(document.createElement('button')); 

diceRollerButton.button.onclick = (event): void => { 
    diceRollerButton.roll(diceCollection); 
}