From 01a182064a410e7e58de60995edd5a04c6cb7895 Mon Sep 17 00:00:00 2001 From: "szabolcs.hodossy" Date: Tue, 18 May 2021 16:55:45 +0200 Subject: [PATCH] feat: new reset button --- .prettierignore | 4 +++ .prettierrc | 8 +++++ package-lock.json | 54 ++++++++++++++++-------------- package.json | 11 ++++--- src/app/app.component.html | 67 +++++++++++++++++--------------------- src/app/app.component.scss | 45 +++++-------------------- src/app/utils.ts | 32 +++++++++--------- src/styles.scss | 35 +++++++++++--------- 8 files changed, 121 insertions(+), 135 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..dadb8f9 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +package.json +package-lock.json +dist +node_modules diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..6f8cfda --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "printWidth": 100, + "singleQuote": true, + "useTabs": false, + "tabWidth": 2, + "semi": true, + "bracketSpacing": true +} diff --git a/package-lock.json b/package-lock.json index 12b0853..44e09ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2135,9 +2135,9 @@ "dev": true }, "@types/jasminewd2": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.8.tgz", - "integrity": "sha512-d9p31r7Nxk0ZH0U39PTH0hiDlJ+qNVGjlt1ucOoTUptxb2v+Y5VMnsxfwN+i3hK4yQnqBi3FMmoMFcd1JHDxdg==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.9.tgz", + "integrity": "sha512-Oz+Faunpe2SimFvkMYMXxpK89WXl7rZHG8abTOKcGndu4xOoSbUZ+jUdZ0LQpmDqPEGLBWXF/yZP1tlsplGhzw==", "dev": true, "requires": { "@types/jasmine": "*" @@ -2156,9 +2156,9 @@ "dev": true }, "@types/node": { - "version": "14.11.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.5.tgz", - "integrity": "sha512-jVFzDV6NTbrLMxm4xDSIW/gKnk8rQLF9wAzLWIOg+5nU6ACrIMndeBdXci0FGtqJbP9tQvm6V39eshc96TO2wQ==", + "version": "14.14.45", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.45.tgz", + "integrity": "sha512-DssMqTV9UnnoxDWu959sDLZzfvqCF0qDNRjaWeYSui9xkFe61kKo4l1TWNTQONpuXEm+gLMRvdlzvNHBamzmEw==", "dev": true }, "@types/parse-json": { @@ -7135,9 +7135,9 @@ } }, "karma-jasmine-html-reporter": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.5.4.tgz", - "integrity": "sha512-PtilRLno5O6wH3lDihRnz0Ba8oSn0YUJqKjjux1peoYGwo0AQqrWRbdWk/RLzcGlb+onTyXAnHl6M+Hu3UxG/Q==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.6.0.tgz", + "integrity": "sha512-ELO9yf0cNqpzaNLsfFgXd/wxZVYkE2+ECUwhMHUD4PZ17kcsPsYsVyjquiRqyMn2jkd2sHt0IeMyAyq1MC23Fw==", "dev": true }, "karma-source-map-support": { @@ -7261,9 +7261,9 @@ } }, "lodash": { - "version": "4.17.20", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", - "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, "lodash.debounce": { @@ -10179,6 +10179,12 @@ "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=", "dev": true }, + "prettier": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz", + "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==", + "dev": true + }, "pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -11090,17 +11096,17 @@ } }, "rxjs": { - "version": "6.6.3", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz", - "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==", + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", + "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", "requires": { "tslib": "^1.9.0" }, "dependencies": { "tslib": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz", - "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==" + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" } } }, @@ -12435,9 +12441,9 @@ } }, "tslib": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz", - "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==" + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", + "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" }, "tslint": { "version": "6.1.3", @@ -13468,9 +13474,9 @@ "dev": true }, "y18n": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", - "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", + "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==", "dev": true }, "yallist": { diff --git a/package.json b/package.json index e343ecf..d29e4e4 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "@angular/platform-browser-dynamic": "~12.0.0", "@angular/router": "~12.0.0", "@angular/service-worker": "^12.0.0", - "rxjs": "^6.6.3", - "tslib": "^2.0.0", + "rxjs": "^6.6.7", + "tslib": "^2.2.0", "zone.js": "~0.11.4" }, "devDependencies": { @@ -32,8 +32,8 @@ "@angular/compiler-cli": "~12.0.0", "@angular/language-service": "~12.0.0", "@types/jasmine": "~3.6.0", - "@types/jasminewd2": "~2.0.8", - "@types/node": "^14.11.5", + "@types/jasminewd2": "^2.0.9", + "@types/node": "^14.14.45", "angular-cli-ghpages": "^0.6.2", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", @@ -42,7 +42,8 @@ "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", - "karma-jasmine-html-reporter": "^1.5.0", + "karma-jasmine-html-reporter": "^1.6.0", + "prettier": "^2.3.0", "protractor": "~7.0.0", "ts-node": "~9.0.0", "tslint": "~6.1.0", diff --git a/src/app/app.component.html b/src/app/app.component.html index 265a5e7..da0c0e9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,14 +1,7 @@
-

- Who starts? -

+

Who starts?

-
@@ -19,42 +12,40 @@

(touchcancel)="onTouchEnd($event)" (click)="onClick($event)" > - - {{ player.assignedOrder }} - -
- {{ timer }} +
+ {{ + timer + }} Tap to add or
remove players -
+
touch_app
- -
- -
- + + {{ player.assignedOrder }} + -
+
+ +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 22549c0..6acbc6f 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -41,6 +41,11 @@ main { } } + .instructions { + cursor: default; + user-select: none; + } + .reset { padding: 8px 32px; border-radius: 8px; @@ -62,41 +67,7 @@ main { } footer { - text-align: center; - padding: 0 12px 12px 12px; - - & > div { - overflow: hidden; - display: flex; - align-content: stretch; - } - - input[type="number"]::-webkit-outer-spin-button, - input[type="number"]::-webkit-inner-spin-button { - display: none; - } - - input[type="number"] { - -moz-appearance: textfield; - text-align: right; - } - - .controls { - display: inline-block; - text-align: right; - flex: 1 1 auto; - max-width: 50%; - margin: 0; - padding: 0 8px 0 0; - - mat-checkbox { - margin: 4px; - } - - mat-form-field { - width: 100%; - max-width: 250px; - margin: 4px; - } - } + position: fixed; + bottom: 60px; + right: 60px; } diff --git a/src/app/utils.ts b/src/app/utils.ts index 31f68cf..a65cc71 100644 --- a/src/app/utils.ts +++ b/src/app/utils.ts @@ -4,7 +4,7 @@ export interface Point { } export function distance(p1: Point, p2: Point): number { - return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2) + return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2); } export function shuffleArray(array: Array): Array { @@ -19,19 +19,19 @@ export function shuffleArray(array: Array): Array { } export function luminance(r: number, g: number, b: number): number { - var colorArray = [r, g, b]; - var colorFactor: number; - var i: number; - for (i = 0; i < colorArray.length; i++) { - colorFactor = colorArray[i] / 255; - if (colorFactor <= 0.03928) { - colorFactor = colorFactor / 12.92; - } else { - colorFactor = Math.pow(((colorFactor + 0.055) / 1.055), 2.4); - } - colorArray[i] = colorFactor; + var colorArray = [r, g, b]; + var colorFactor: number; + var i: number; + for (i = 0; i < colorArray.length; i++) { + colorFactor = colorArray[i] / 255; + if (colorFactor <= 0.03928) { + colorFactor = colorFactor / 12.92; + } else { + colorFactor = Math.pow((colorFactor + 0.055) / 1.055, 2.4); } - return (colorArray[0] * 0.2126 + colorArray[1] * 0.7152 + colorArray[2] * 0.0722) + 0.05; + colorArray[i] = colorFactor; + } + return colorArray[0] * 0.2126 + colorArray[1] * 0.7152 + colorArray[2] * 0.0722 + 0.05; } export function colorToRGBA(col: string): Array { @@ -40,7 +40,7 @@ export function colorToRGBA(col: string): Array { const ctx = canvas.getContext('2d'); if (!ctx) { - throw new Error('2DRenderingContext not available'); + return [0, 0, 0, 0]; } ctx.clearRect(0, 0, 1, 1); @@ -53,10 +53,10 @@ export function colorToRGBA(col: string): Array { ctx.fillStyle = '#fff'; ctx.fillStyle = col; if (computed !== ctx.fillStyle) { - throw new Error(`Invalid computed color: ${ctx.fillStyle}`); + return [0, 0, 0, 0]; } ctx.fillRect(0, 0, 1, 1); - return [ ... ctx.getImageData(0, 0, 1, 1).data ]; + return [...ctx.getImageData(0, 0, 1, 1).data]; } export function contrast(rgb1: Array, rgb2: Array): number { diff --git a/src/styles.scss b/src/styles.scss index b96f406..5c5d3fa 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -7,21 +7,21 @@ // Define a custom typography config that overrides the font-family as well as the // `headlines` and `body-1` levels. $whostarts-typography: mat.define-typography-config( - $font-family: '"Finger Paint", cursive', - $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em), - $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em), - $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em), - $display-1: mat.define-typography-level(34px, 40px, 400), - $headline: mat.define-typography-level(24px, 32px, 400), - $title: mat.define-typography-level(20px, 32px, 500), - $subheading-2: mat.define-typography-level(16px, 28px, 400), - $subheading-1: mat.define-typography-level(15px, 24px, 400), - $body-2: mat.define-typography-level(14px, 24px, 500), - $body-1: mat.define-typography-level(14px, 20px, 400), - $caption: mat.define-typography-level(12px, 20px, 400), - $button: mat.define-typography-level(24px, 32px, 500), + $font-family: '"Finger Paint", cursive', + $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em), + $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em), + $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em), + $display-1: mat.define-typography-level(34px, 40px, 400), + $headline: mat.define-typography-level(24px, 32px, 400), + $title: mat.define-typography-level(20px, 32px, 500), + $subheading-2: mat.define-typography-level(16px, 28px, 400), + $subheading-1: mat.define-typography-level(15px, 24px, 400), + $body-2: mat.define-typography-level(14px, 24px, 500), + $body-1: mat.define-typography-level(14px, 20px, 400), + $caption: mat.define-typography-level(12px, 20px, 400), + $button: mat.define-typography-level(24px, 32px, 500), // Line-height must be unit-less fraction of the font-size. - $input: mat.define-typography-level(inherit, 1.125, 400) + $input: mat.define-typography-level(inherit, 1.125, 400), ); // Include the common styles for Angular Material. We include this here so that you only @@ -48,7 +48,8 @@ $whostarts-theme: mat.define-dark-theme($whostarts-primary, $whostarts-accent, $ /* You can add global styles to this file, and also import other style files */ -html, body { +html, +body { height: 100%; } body { @@ -63,3 +64,7 @@ body { .mat-typography h2 { margin: 16px 0; } + +.mat-fab .mat-button-wrapper { + line-height: 20px !important; +}