diff --git a/css/style.css b/css/style.css index cc704eef..bf2edd55 100644 --- a/css/style.css +++ b/css/style.css @@ -139,3 +139,20 @@ h1 {font-weight: bold; margin-left: 10px;} #menu button { width: 120px; } + +.card { + float: left; + height: 208px; + width: 150px; + background-image: url("../images/spadesAce@2x.png"); + background-size: contain; + background-repeat: no-repeat; + margin: 5px; +} + + + + + + + diff --git a/images/clubsAce@2x.png b/images/clubsAce@2x.png new file mode 100644 index 00000000..2395ae3b Binary files /dev/null and b/images/clubsAce@2x.png differ diff --git a/images/diamondsAce@2x.png b/images/diamondsAce@2x.png new file mode 100644 index 00000000..d5b6e101 Binary files /dev/null and b/images/diamondsAce@2x.png differ diff --git a/images/heartsAce@2x.png b/images/heartsAce@2x.png new file mode 100644 index 00000000..169a7273 Binary files /dev/null and b/images/heartsAce@2x.png differ diff --git a/images/heartsQueen@2x.png b/images/heartsQueen@2x.png new file mode 100644 index 00000000..3cdac639 Binary files /dev/null and b/images/heartsQueen@2x.png differ diff --git a/images/spadesAce@2x.png b/images/spadesAce@2x.png new file mode 100644 index 00000000..867812e4 Binary files /dev/null and b/images/spadesAce@2x.png differ diff --git a/index.html b/index.html index d2c3c254..bd2b0e43 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,14 @@

TypeScript Casino

-
+
+
+
+
+
+ +
+
@@ -28,4 +35,4 @@

TypeScript Casino

- + \ No newline at end of file diff --git a/typescript/entrypoint.ts b/typescript/entrypoint.ts new file mode 100644 index 00000000..c5cca3c8 --- /dev/null +++ b/typescript/entrypoint.ts @@ -0,0 +1,30 @@ +function rotate(idx: number, next: WheelSymbol): void { + const x: any = document.getElementById("wheel"+String(idx)); + switch (next) { + case WheelSymbol.Spade: + x.style.backgroundImage = "url(../images/spadesAce@2x.png)"; + break; + case WheelSymbol.Diamond: + x.style.backgroundImage = "url(../images/diamondsAce@2x.png)"; + break; + case WheelSymbol.Club: + x.style.backgroundImage = "url(../images/clubsAce@2x.png)"; + break; + case WheelSymbol.Heart: + x.style.backgroundImage = "url(../images/heartsAce@2x.png)"; + break; + case WheelSymbol.Cherry: + x.style.backgroundImage = "url(../images/heartsQueen@2x.png)"; + break; + } +} + +function winner(): void{ + document.getElementById("winLose").innerText = "WINNER"; +} + +function looser(): void{ + document.getElementById("winLose").innerText = "Play Again"; +} + +const slotMachine: SlotMachine = new SlotMachine(); \ No newline at end of file diff --git a/typescript/slot_machine.ts b/typescript/slot_machine.ts new file mode 100644 index 00000000..e12fa1ad --- /dev/null +++ b/typescript/slot_machine.ts @@ -0,0 +1,59 @@ +class SlotMachine { + wheels: Wheel[]; + private running: boolean; + private stoppedWheels: number; + finalSymbols: WheelSymbol[]; + + constructor() { + this.wheels = [ + new Wheel(this, 1, 100), + new Wheel(this, 2, 200), + new Wheel(this, 3, 300), + ]; + this.running = false; + this.stoppedWheels = 0; + this.finalSymbols = []; + } + + // WheelDelegate interface implementation + wheelDidChangeSymbol(wheel: Wheel, symbol: WheelSymbol): void { + rotate(wheel.id, symbol); + wheel.advance(); + } + + // WheelDelegate interface implementation + wheelDidStop(wheel: Wheel, symbol: WheelSymbol): void { + this.stoppedWheels++; + this.finalSymbols.push(symbol); + if (this.stoppedWheels >= this.wheels.length) { + this.running = false; + for (let i: number = 0; i < this.wheels.length; i++) { + // reshuffle the wheels or else they will have the same value on every spin + this.wheels[i].shuffle(); + } + this.stoppedWheels = 0; + this.checkWinner(); + this.finalSymbols = []; + } + } + + checkWinner(): void{ + console.log(this.finalSymbols); + if(this.finalSymbols[0]==this.finalSymbols[1] && + this.finalSymbols[0]==this.finalSymbols[2]){ + winner(); + }else{ + looser(); + } + } + + run(): void { + if (this.running) { + return; + } + this.running = true; + for (let i: number = 0; i < this.wheels.length; i++) { + this.wheels[i].advance(); + } + } +} diff --git a/typescript/symbols.ts b/typescript/symbols.ts new file mode 100644 index 00000000..f3611e72 --- /dev/null +++ b/typescript/symbols.ts @@ -0,0 +1,8 @@ +enum WheelSymbol { + Heart, + Diamond, + Spade, + Club, + Cherry +} + diff --git a/typescript/tsconfig.json b/typescript/tsconfig.json new file mode 100644 index 00000000..5ef61637 --- /dev/null +++ b/typescript/tsconfig.json @@ -0,0 +1,64 @@ +{ + "compilerOptions": { + /* Basic Options */ + "target": "es3", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ + "module": "amd", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ + "lib": ["es2015", "dom"], /* Specify library files to be included in the compilation. */ + // "allowJs": true, /* Allow javascript files to be compiled. */ + // "checkJs": true, /* Report errors in .js files. */ + // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ + // "declaration": true, /* Generates corresponding '.d.ts' file. */ + // "sourceMap": true, /* Generates corresponding '.map' file. */ + "outFile": "../js/app.js", /* Concatenate and emit output to single file. */ + // "outDir": "./js", /* Redirect output structure to the directory. */ + // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ + "removeComments": true, /* Do not emit comments to output. */ + // "noEmit": true, /* Do not emit outputs. */ + // "importHelpers": true, /* Import emit helpers from 'tslib'. */ + // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ + // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ + + /* Strict Type-Checking Options */ + "strict": false, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* Enable strict null checks. */ + // "strictFunctionTypes": true, /* Enable strict checking of function types. */ + // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ + // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ + // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ + + /* Additional Checks */ + // "noUnusedLocals": true, /* Report errors on unused locals. */ + // "noUnusedParameters": true, /* Report errors on unused parameters. */ + // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ + // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ + + /* Module Resolution Options */ + "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ + // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ + // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ + // "typeRoots": [], /* List of folders to include type definitions from. */ + // "types": [], /* Type declaration files to be included in compilation. */ + // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ + "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ + // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ + + /* Source Map Options */ + // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ + // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ + // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ + + /* Experimental Options */ + // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ + // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ + }, + "files": [ + "symbols.ts", + "wheel.ts", + "wheel_delegate.ts", + "slot_machine.ts", + "entrypoint.ts" + ] +} \ No newline at end of file diff --git a/typescript/wheel.ts b/typescript/wheel.ts new file mode 100644 index 00000000..14fe18bf --- /dev/null +++ b/typescript/wheel.ts @@ -0,0 +1,62 @@ +// const symbolSeed: WheelSymbol[] = [ +// WheelSymbol.Diamond, WheelSymbol.Diamond, WheelSymbol.Diamond, // 6 diamonds +// WheelSymbol.Diamond, WheelSymbol.Diamond, WheelSymbol.Diamond, +// WheelSymbol.Diamond, WheelSymbol.Diamond, WheelSymbol.Diamond, // 6 diamonds +// WheelSymbol.Diamond, WheelSymbol.Diamond, WheelSymbol.Diamond, +// WheelSymbol.Heart, WheelSymbol.Heart, WheelSymbol.Heart, // 6 hearts +// WheelSymbol.Heart, WheelSymbol.Heart, WheelSymbol.Heart, +// WheelSymbol.Heart, WheelSymbol.Heart, WheelSymbol.Heart, // 6 hearts +// WheelSymbol.Heart, WheelSymbol.Heart, WheelSymbol.Heart, +// WheelSymbol.Club, WheelSymbol.Club, WheelSymbol.Club, WheelSymbol.Club, // 4 clubs +// WheelSymbol.Club, WheelSymbol.Club, WheelSymbol.Club, WheelSymbol.Club, // 4 clubs +// WheelSymbol.Spade, WheelSymbol.Spade, WheelSymbol.Spade, // 3 spades +// WheelSymbol.Spade, WheelSymbol.Spade, WheelSymbol.Spade, // 3 spades +// WheelSymbol.Cherry, // 1 cherry +// WheelSymbol.Cherry // 1 cherry +// ]; + +const symbolSeed: WheelSymbol[] = [ + WheelSymbol.Diamond, WheelSymbol.Diamond, WheelSymbol.Diamond, + WheelSymbol.Heart, WheelSymbol.Heart, WheelSymbol.Heart, + WheelSymbol.Club, WheelSymbol.Club, WheelSymbol.Club, WheelSymbol.Club, // 4 clubs + WheelSymbol.Spade, WheelSymbol.Spade, WheelSymbol.Spade, // 3 spades + WheelSymbol.Cherry, // 1 cherry +]; + +class Wheel { + symbols: WheelSymbol[]; + interval: number; + id: number; + delegate: WheelDelegate; + private idx: number; + + constructor(delegate: WheelDelegate, id: number, interval: number) { + this.delegate = delegate; + this.id = id; + this.interval = interval; + this.idx = 0; + this.symbols = symbolSeed.slice(0); + this.shuffle(); + } + + shuffle(): void { + // shuffle symbols array https://stackoverflow.com/a/6274381 + for (let i:number = this.symbols.length - 1; i > 0; i--) { + const j:number = Math.floor(Math.random() * (i + 1)); + [this.symbols[i], this.symbols[j]] = [this.symbols[j], this.symbols[i]]; + } + } + + advance(): void { + if (this.idx >= this.symbols.length) { + this.idx = 0; + this.delegate.wheelDidStop(this, this.symbols[this.symbols.length-1]); + return; + } + const symbol: WheelSymbol = this.symbols[this.idx]; + this.idx++; + setTimeout(():void => { + this.delegate.wheelDidChangeSymbol(this, symbol); + }, this.interval); + } +} diff --git a/typescript/wheel_delegate.ts b/typescript/wheel_delegate.ts new file mode 100644 index 00000000..9b481948 --- /dev/null +++ b/typescript/wheel_delegate.ts @@ -0,0 +1,4 @@ +interface WheelDelegate{ + wheelDidChangeSymbol(Wheel, WheelSymbol): void; + wheelDidStop(Wheel,WheelSymbol): void; +} \ No newline at end of file