├── .editorconfig ├── .firebase ├── hosting.ZGlzdFxicm93c2Vy.cache └── hosting.ZGlzdFxteWFwcA.cache ├── .firebaserc ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.json ├── firebase.json ├── karma.conf.js ├── ngsw-config.json ├── package-lock.json ├── package.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── board │ │ ├── board.component.html │ │ ├── board.component.scss │ │ ├── board.component.spec.ts │ │ └── board.component.ts │ └── square │ │ ├── square.component.spec.ts │ │ └── square.component.ts ├── assets │ ├── .gitkeep │ └── icons │ │ ├── icon-128x128.png │ │ ├── icon-144x144.png │ │ ├── icon-152x152.png │ │ ├── icon-192x192.png │ │ ├── icon-384x384.png │ │ ├── icon-512x512.png │ │ ├── icon-72x72.png │ │ └── icon-96x96.png ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── manifest.webmanifest ├── polyfills.ts ├── styles.scss ├── test.ts └── themes.scss ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.firebase/hosting.ZGlzdFxicm93c2Vy.cache: -------------------------------------------------------------------------------- 1 | favicon.ico,1568560240791,2c19690e9587bae12f419b34d2edeecc76808099540a9c9f4ea6194116cfc8f7 2 | index.html,1568560253556,b5dbe4a1c880ef1b767238bce1ebe46778baeb5f62b7bba1eb670f22abd7292e 3 | 3rdpartylicenses.txt,1568560240790,71c6520fae93c3e6b12525f5c094ca666a7c9dc86a9d40a29e80b55e62dd572d 4 | runtime-es2015.24b02acc1f369d9b9f37.js,1568560243253,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29 5 | runtime-es5.24b02acc1f369d9b9f37.js,1568560243266,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29 6 | polyfills-es2015.fd917e7c3ed57f282ee5.js,1568560241849,597aea6bf09f25be57228b80f045822d8676487b3d34889cb9ac784dc50a0ac5 7 | polyfills-es5.3aa54d3e5134f5b5b842.js,1568560245808,bffb375e8b3eaa35f44e5e6925a85aba1800d74f16e82f4e6fcc0199959df5fc 8 | styles.c58c683e510ece3ba4f6.css,1568560240791,3ca601d901d599c802a38466800553c7faca4fcf81076c79e4d69a4661ba96b9 9 | main-es2015.a78d0d7a945fdb6d4ca8.js,1568560253163,254a842a0ab3413416c5e5689f1fc3434f384a58dc53f8d0a8cb1cb530a4892e 10 | main-es5.a78d0d7a945fdb6d4ca8.js,1568560253377,6802bd1dc2cc6ae5bb862c6e2877392c918262e9fdcd60e99851309c41c74085 11 | -------------------------------------------------------------------------------- /.firebase/hosting.ZGlzdFxteWFwcA.cache: -------------------------------------------------------------------------------- 1 | favicon.ico,1568562404356,2c19690e9587bae12f419b34d2edeecc76808099540a9c9f4ea6194116cfc8f7 2 | index.html,1568562404619,06816dbcf6d76988e6475cbfe9b6a6c5f17f4a6d0f28558ef36f3da5eaaa6970 3 | manifest.webmanifest,1568562404356,74e88b3540e53eb6aa169cb034a6c52e29a7ea87d767fbce3bba8b96df4fdcba 4 | 3rdpartylicenses.txt,1568562404356,50ea69994d2d6ff150ad011fae3fb7392cdc5417d9a7b0aefd9ee23bc61028ae 5 | ngsw.json,1568562404902,4966ddd9e51d20ccda6286c6b677ec6d6f5a310ccb44302a47e8805d1e1913fa 6 | polyfills-es2015.fd917e7c3ed57f282ee5.js,1568560241837,597aea6bf09f25be57228b80f045822d8676487b3d34889cb9ac784dc50a0ac5 7 | runtime-es2015.24b02acc1f369d9b9f37.js,1568560243231,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29 8 | runtime-es5.24b02acc1f369d9b9f37.js,1568560243231,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29 9 | safety-worker.js,1568562404954,40226cabd4735f93fc57c887bdb3ed6e6930cb6b1c986d6a640758edaf490050 10 | worker-basic.min.js,1568562404951,40226cabd4735f93fc57c887bdb3ed6e6930cb6b1c986d6a640758edaf490050 11 | assets/icons/icon-128x128.png,1568562404364,1331bbcee85eb4c732d2b2468c0118ead141aa56c741dc1a93a54d4812e79d4d 12 | assets/icons/icon-144x144.png,1568562404365,ab4052ca6640d9378a090b7a6825df604c939ec738dae88d89500aee8eb7087f 13 | assets/icons/icon-192x192.png,1568562404365,5b2471e9386f4fe3dcf1d2151c7048c3cc22d3c504161debeca3af3a2efd0a04 14 | assets/icons/icon-152x152.png,1568562404365,b1cb2eb328c9eedac5eb3994d04c73040c462a73cf7254c38eafa2d582a078d6 15 | assets/icons/icon-384x384.png,1568562404365,e28ae36bf6b6f9c9a5eb8716806f3077d2932c9723f89d0c0275fbde43dcdce9 16 | assets/icons/icon-512x512.png,1568562404366,cb62ee904d0aa462c04667e945abbefe928c1c874d9a919ec237f3ebc1822dc9 17 | assets/icons/icon-72x72.png,1568562404365,215a8d62891dff36be3e0a554c28e627bbd34dea95aca21b718414452b581dce 18 | assets/icons/icon-96x96.png,1568562404365,5dbec692238f9b1305461df3fe87c910306d95db26941804b8929cd0d99bd508 19 | polyfills-es5.3aa54d3e5134f5b5b842.js,1568560245728,bffb375e8b3eaa35f44e5e6925a85aba1800d74f16e82f4e6fcc0199959df5fc 20 | ngsw-worker.js,1568562404904,dc4947600b0957d8ed0e09fe107ca3f44621ad27f0d7655b61d92c618ab441c8 21 | styles.c58c683e510ece3ba4f6.css,1568562404356,3ca601d901d599c802a38466800553c7faca4fcf81076c79e4d69a4661ba96b9 22 | main-es2015.efc37d33908c750f9bff.js,1568561328167,4cfcc7dcf9f078721eb0cf4ccabc0e19755c7e7e26987442f3b3595aa04f9a0f 23 | main-es5.efc37d33908c750f9bff.js,1568561328219,96c164112d65aabfbeee5a794dbbdafd835bad622617481377a304950695950e 24 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "targets": { 3 | "instafire-app": { 4 | "hosting": { 5 | "myapp": [ 6 | "instafire-app" 7 | ] 8 | } 9 | } 10 | }, 11 | "projects": { 12 | "default": "instafire-app" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular Tic-Tac-Toe PWA 2 | 3 | [Full Angular Course](https://fireship.io/courses/angular/) -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "myapp": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:browser", 19 | "options": { 20 | "outputPath": "dist/myapp", 21 | "index": "src/index.html", 22 | "main": "src/main.ts", 23 | "polyfills": "src/polyfills.ts", 24 | "tsConfig": "tsconfig.app.json", 25 | "aot": false, 26 | "assets": [ 27 | "src/favicon.ico", 28 | "src/assets", 29 | "src/manifest.webmanifest" 30 | ], 31 | "styles": [ 32 | "src/styles.scss" 33 | ], 34 | "scripts": [] 35 | }, 36 | "configurations": { 37 | "production": { 38 | "fileReplacements": [ 39 | { 40 | "replace": "src/environments/environment.ts", 41 | "with": "src/environments/environment.prod.ts" 42 | } 43 | ], 44 | "optimization": true, 45 | "outputHashing": "all", 46 | "sourceMap": false, 47 | "extractCss": true, 48 | "namedChunks": false, 49 | "aot": true, 50 | "extractLicenses": true, 51 | "vendorChunk": false, 52 | "buildOptimizer": true, 53 | "budgets": [ 54 | { 55 | "type": "initial", 56 | "maximumWarning": "2mb", 57 | "maximumError": "5mb" 58 | }, 59 | { 60 | "type": "anyComponentStyle", 61 | "maximumWarning": "6kb", 62 | "maximumError": "10kb" 63 | } 64 | ], 65 | "serviceWorker": true, 66 | "ngswConfigPath": "ngsw-config.json" 67 | } 68 | } 69 | }, 70 | "serve": { 71 | "builder": "@angular-devkit/build-angular:dev-server", 72 | "options": { 73 | "browserTarget": "myapp:build" 74 | }, 75 | "configurations": { 76 | "production": { 77 | "browserTarget": "myapp:build:production" 78 | } 79 | } 80 | }, 81 | "extract-i18n": { 82 | "builder": "@angular-devkit/build-angular:extract-i18n", 83 | "options": { 84 | "browserTarget": "myapp:build" 85 | } 86 | }, 87 | "test": { 88 | "builder": "@angular-devkit/build-angular:karma", 89 | "options": { 90 | "main": "src/test.ts", 91 | "polyfills": "src/polyfills.ts", 92 | "tsConfig": "tsconfig.spec.json", 93 | "karmaConfig": "karma.conf.js", 94 | "assets": [ 95 | "src/favicon.ico", 96 | "src/assets", 97 | "src/manifest.webmanifest" 98 | ], 99 | "styles": [ 100 | "src/styles.scss" 101 | ], 102 | "scripts": [] 103 | } 104 | }, 105 | "lint": { 106 | "builder": "@angular-devkit/build-angular:tslint", 107 | "options": { 108 | "tsConfig": [ 109 | "tsconfig.app.json", 110 | "tsconfig.spec.json", 111 | "e2e/tsconfig.json" 112 | ], 113 | "exclude": [ 114 | "**/node_modules/**" 115 | ] 116 | } 117 | }, 118 | "e2e": { 119 | "builder": "@angular-devkit/build-angular:protractor", 120 | "options": { 121 | "protractorConfig": "e2e/protractor.conf.js", 122 | "devServerTarget": "myapp:serve" 123 | }, 124 | "configurations": { 125 | "production": { 126 | "devServerTarget": "myapp:serve:production" 127 | } 128 | } 129 | }, 130 | "deploy": { 131 | "builder": "@angular/fire:deploy", 132 | "options": {} 133 | } 134 | } 135 | } 136 | }, 137 | "defaultProject": "myapp" 138 | } -------------------------------------------------------------------------------- /browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | 'browserName': 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('myapp app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "dist/myapp", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/myapp'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /ngsw-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/service-worker/config/schema.json", 3 | "index": "/index.html", 4 | "assetGroups": [ 5 | { 6 | "name": "app", 7 | "installMode": "prefetch", 8 | "resources": { 9 | "files": [ 10 | "/favicon.ico", 11 | "/index.html", 12 | "/manifest.webmanifest", 13 | "/*.css", 14 | "/*.js" 15 | ] 16 | } 17 | }, { 18 | "name": "assets", 19 | "installMode": "lazy", 20 | "updateMode": "prefetch", 21 | "resources": { 22 | "files": [ 23 | "/assets/**", 24 | "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)" 25 | ] 26 | } 27 | } 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapp", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~8.2.4", 15 | "@angular/cdk": "^8.0.0", 16 | "@angular/common": "~8.2.4", 17 | "@angular/compiler": "~8.2.4", 18 | "@angular/core": "~8.2.4", 19 | "@angular/fire": "^5.2.1", 20 | "@angular/forms": "~8.2.4", 21 | "@angular/platform-browser": "~8.2.4", 22 | "@angular/platform-browser-dynamic": "~8.2.4", 23 | "@angular/pwa": "^0.803.4", 24 | "@angular/router": "~8.2.4", 25 | "@angular/service-worker": "~8.2.4", 26 | "@nebular/eva-icons": "4.2.2", 27 | "@nebular/theme": "^4.2.2", 28 | "eva-icons": "^1.1.1", 29 | "rxjs": "~6.4.0", 30 | "tslib": "^1.10.0", 31 | "zone.js": "~0.9.1", 32 | "firebase": ">= 5.5.7 <7" 33 | }, 34 | "devDependencies": { 35 | "@angular-devkit/build-angular": "~0.803.3", 36 | "@angular/cli": "~8.3.3", 37 | "@angular/compiler-cli": "~8.2.4", 38 | "@angular/language-service": "~8.2.4", 39 | "@schematics/angular": "~8.3.3", 40 | "@types/jasmine": "~3.3.8", 41 | "@types/jasminewd2": "~2.0.3", 42 | "@types/node": "~8.9.4", 43 | "codelyzer": "^5.0.0", 44 | "jasmine-core": "~3.4.0", 45 | "jasmine-spec-reporter": "~4.2.1", 46 | "karma": "~4.1.0", 47 | "karma-chrome-launcher": "~2.2.0", 48 | "karma-coverage-istanbul-reporter": "~2.0.1", 49 | "karma-jasmine": "~2.0.1", 50 | "karma-jasmine-html-reporter": "^1.4.0", 51 | "protractor": "~5.4.0", 52 | "ts-node": "~7.0.0", 53 | "tslint": "~5.15.0", 54 | "typescript": "~3.5.3", 55 | "@angular-devkit/architect": "<0.900 || ^0.900.0-0 || ^9.0.0-0", 56 | "firebase-tools": "^6.10.0", 57 | "fuzzy": "^0.1.3", 58 | "inquirer": "^6.2.2", 59 | "inquirer-autocomplete-prompt": "^1.0.1" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | 5 | const routes: Routes = []; 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forRoot(routes)], 9 | exports: [RouterModule] 10 | }) 11 | export class AppRoutingModule { } 12 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/app/app.component.scss -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.debugElement.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'myapp'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.debugElement.componentInstance; 26 | expect(app.title).toEqual('myapp'); 27 | }); 28 | 29 | it('should render title', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.debugElement.nativeElement; 33 | expect(compiled.querySelector('.content span').textContent).toContain('myapp app is running!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'myapp'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { SquareComponent } from './square/square.component'; 7 | import { BoardComponent } from './board/board.component'; 8 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 9 | import { NbThemeModule, NbLayoutModule, NbButtonModule } from '@nebular/theme'; 10 | import { NbEvaIconsModule } from '@nebular/eva-icons'; 11 | import { ServiceWorkerModule } from '@angular/service-worker'; 12 | import { environment } from '../environments/environment'; 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent, 17 | SquareComponent, 18 | BoardComponent 19 | ], 20 | imports: [ 21 | BrowserModule, 22 | AppRoutingModule, 23 | BrowserAnimationsModule, 24 | NbThemeModule.forRoot({ name: 'cosmic' }), 25 | NbLayoutModule, 26 | NbEvaIconsModule, 27 | NbButtonModule, 28 | ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }) 29 | ], 30 | providers: [], 31 | bootstrap: [AppComponent] 32 | }) 33 | export class AppModule { } 34 | -------------------------------------------------------------------------------- /src/app/board/board.component.html: -------------------------------------------------------------------------------- 1 |

Current Player: {{ player }}

2 | 3 | 4 | 5 | 6 |

7 | Player {{ winner }} won the game! 8 |

9 | 10 | 11 |
12 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/app/board/board.component.scss: -------------------------------------------------------------------------------- 1 | main { 2 | display: grid; 3 | grid-template-columns: 200px 200px 200px; 4 | grid-gap: 0px; 5 | } 6 | 7 | app-square { 8 | border: 1px gray solid; 9 | height: 200px; 10 | } -------------------------------------------------------------------------------- /src/app/board/board.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { BoardComponent } from './board.component'; 4 | 5 | describe('BoardComponent', () => { 6 | let component: BoardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ BoardComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(BoardComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/board/board.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-board', 5 | templateUrl: './board.component.html', 6 | styleUrls: ['./board.component.scss'] 7 | }) 8 | export class BoardComponent implements OnInit { 9 | squares: string[]; 10 | xIsNext: boolean; 11 | winner: string; 12 | 13 | constructor() {} 14 | 15 | ngOnInit() { 16 | this.newGame(); 17 | } 18 | 19 | newGame() { 20 | this.squares = Array(9).fill(null); 21 | this.winner = null; 22 | this.xIsNext = true; 23 | } 24 | 25 | get player() { 26 | return this.xIsNext ? 'X' : 'O'; 27 | } 28 | 29 | makeMove(idx: number) { 30 | if (!this.squares[idx]) { 31 | this.squares.splice(idx, 1, this.player); 32 | this.xIsNext = !this.xIsNext; 33 | } 34 | 35 | this.winner = this.calculateWinner(); 36 | } 37 | 38 | calculateWinner() { 39 | const lines = [ 40 | [0, 1, 2], 41 | [3, 4, 5], 42 | [6, 7, 8], 43 | [0, 3, 6], 44 | [1, 4, 7], 45 | [2, 5, 8], 46 | [0, 4, 8], 47 | [2, 4, 6] 48 | ]; 49 | for (let i = 0; i < lines.length; i++) { 50 | const [a, b, c] = lines[i]; 51 | if ( 52 | this.squares[a] && 53 | this.squares[a] === this.squares[b] && 54 | this.squares[a] === this.squares[c] 55 | ) { 56 | return this.squares[a]; 57 | } 58 | } 59 | return null; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/app/square/square.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SquareComponent } from './square.component'; 4 | 5 | describe('SquareComponent', () => { 6 | let component: SquareComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SquareComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SquareComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/square/square.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-square', 5 | template: ` 6 | 7 | 8 | 9 | `, 10 | styles: ['button { width: 100%; height: 100%; font-size: 5em !important; }'] 11 | }) 12 | export class SquareComponent { 13 | 14 | @Input() value: 'X' | 'O'; 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/assets/icons/icon-128x128.png -------------------------------------------------------------------------------- /src/assets/icons/icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/assets/icons/icon-144x144.png -------------------------------------------------------------------------------- /src/assets/icons/icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/assets/icons/icon-152x152.png -------------------------------------------------------------------------------- /src/assets/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/assets/icons/icon-192x192.png -------------------------------------------------------------------------------- /src/assets/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/assets/icons/icon-384x384.png -------------------------------------------------------------------------------- /src/assets/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/assets/icons/icon-512x512.png -------------------------------------------------------------------------------- /src/assets/icons/icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/assets/icons/icon-72x72.png -------------------------------------------------------------------------------- /src/assets/icons/icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/assets/icons/icon-96x96.png -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/angular-tic-tac-toe/bf67f2058dad4aac070045b29cf4c2979ae35a97/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Myapp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/manifest.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapp", 3 | "short_name": "myapp", 4 | "theme_color": "#1976d2", 5 | "background_color": "#fafafa", 6 | "display": "standalone", 7 | "scope": "/", 8 | "start_url": "/", 9 | "icons": [ 10 | { 11 | "src": "assets/icons/icon-72x72.png", 12 | "sizes": "72x72", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "assets/icons/icon-96x96.png", 17 | "sizes": "96x96", 18 | "type": "image/png" 19 | }, 20 | { 21 | "src": "assets/icons/icon-128x128.png", 22 | "sizes": "128x128", 23 | "type": "image/png" 24 | }, 25 | { 26 | "src": "assets/icons/icon-144x144.png", 27 | "sizes": "144x144", 28 | "type": "image/png" 29 | }, 30 | { 31 | "src": "assets/icons/icon-152x152.png", 32 | "sizes": "152x152", 33 | "type": "image/png" 34 | }, 35 | { 36 | "src": "assets/icons/icon-192x192.png", 37 | "sizes": "192x192", 38 | "type": "image/png" 39 | }, 40 | { 41 | "src": "assets/icons/icon-384x384.png", 42 | "sizes": "384x384", 43 | "type": "image/png" 44 | }, 45 | { 46 | "src": "assets/icons/icon-512x512.png", 47 | "sizes": "512x512", 48 | "type": "image/png" 49 | } 50 | ] 51 | } -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'themes'; 2 | 3 | @import '~@nebular/theme/styles/globals'; 4 | 5 | @include nb-install() { 6 | @include nb-theme-global(); 7 | }; 8 | /* You can add global styles to this file, and also import other style files */ 9 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /src/themes.scss: -------------------------------------------------------------------------------- 1 | @import '~@nebular/theme/styles/theming'; 2 | @import '~@nebular/theme/styles/themes/cosmic'; 3 | 4 | $nb-themes: nb-register-theme(( 5 | 6 | // add your variables here like: 7 | 8 | // color-primary-100: #f2f6ff, 9 | // color-primary-200: #d9e4ff, 10 | // color-primary-300: #a6c1ff, 11 | // color-primary-400: #598bff, 12 | // color-primary-500: #3366ff, 13 | // color-primary-600: #274bdb, 14 | // color-primary-700: #1a34b8, 15 | // color-primary-800: #102694, 16 | // color-primary-900: #091c7a, 17 | 18 | ), cosmic, cosmic); 19 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.ts" 13 | ], 14 | "exclude": [ 15 | "src/test.ts", 16 | "src/**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | }, 22 | "angularCompilerOptions": { 23 | "fullTemplateTypeCheck": true, 24 | "strictInjectionParameters": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warning" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-use-before-declare": true, 64 | "no-var-requires": false, 65 | "object-literal-key-quotes": [ 66 | true, 67 | "as-needed" 68 | ], 69 | "object-literal-sort-keys": false, 70 | "ordered-imports": false, 71 | "quotemark": [ 72 | true, 73 | "single" 74 | ], 75 | "trailing-comma": false, 76 | "no-conflicting-lifecycle": true, 77 | "no-host-metadata-property": true, 78 | "no-input-rename": true, 79 | "no-inputs-metadata-property": true, 80 | "no-output-native": true, 81 | "no-output-on-prefix": true, 82 | "no-output-rename": true, 83 | "no-outputs-metadata-property": true, 84 | "template-banana-in-box": true, 85 | "template-no-negated-async": true, 86 | "use-lifecycle-interface": true, 87 | "use-pipe-transform-interface": true 88 | }, 89 | "rulesDirectory": [ 90 | "codelyzer" 91 | ] 92 | } --------------------------------------------------------------------------------