fix: demo fixes

Shlomi Assaf (shlassaf) · Shlomi Assaf (shlassaf) · commit 6e56e37dc17a · 2017-08-29T03:33:26.000+03:00
diff --git a/src/demo/app/app.component.ts b/src/demo/app/app.component.ts
@@ -8,11 +8,8 @@ import { AppState } from './app.service';
           <div fxLayout="column" fxFill>
               <div fxFlex="nogrow">
                   <md-toolbar color="primary">
-                      <span>{{ name }}</span>
+                      <a md-button [routerLink]=" ['./home'] ">{{ name }}</a>
                       <span class="fill"></span>
-                      <button md-button [routerLink]=" ['./home'] ">
-                          Home
-                      </button>
                       <button md-button [routerLink]=" ['./game'] ">
                           Game
                       </button>
diff --git a/src/demo/app/game/game.component.html b/src/demo/app/game/game.component.html
@@ -1,6 +1,8 @@
 <ng-template #playerGui let-ctx>
   <div>
-    <md-button-toggle-group [(ngModel)]="ctx.rawtype" (change)="onPlayerTypeChange($event.value, ctx)">
+    <md-button-toggle-group [(ngModel)]="ctx.rawtype"
+                            [vertical]="!board.isPortrait"
+                            (change)="onPlayerTypeChange($event.value, ctx)">
       <md-button-toggle color="primary" value="HUMAN">
         <md-icon>face</md-icon>
       </md-button-toggle>
@@ -51,7 +53,7 @@
   <div fxFlex style="overflow-y: hidden; position: relative">
     <div class="absolute-max">
       <div class="board-container">
-        <chess-board class="svg-chess-board" #board (onBoardResize)="onBoardResize($event)">
+        <chess-board #board (onBoardResize)="onBoardResize($event)" minLandscapeMargin="80">
           <div fxFlexFill fxLayout="column" fxLayoutAlign="start end" class="board-content-left">
             <ng-container *ngTemplateOutlet="playerGui; context: {'$implicit': black}"></ng-container>
           </div>
@@ -69,5 +71,6 @@
   </div>
   <div style="min-height: 25px;">
     <p *ngIf="!workerSupported" style="text-align: center; margin-top: 0">Your broswer does not support web workers, expect UI lags while computer thinks</p>
+    <p *ngIf="isFF" style="text-align: center; margin-top: 0">Not playing well with FireFox, please switch</p>
   </div>
 </div>
diff --git a/src/demo/app/game/game.component.scss b/src/demo/app/game/game.component.scss
@@ -1,25 +1,39 @@
+
 .game-toolbar {
-  margin: 10px 0;
+  margin: 10px;
+  transition: all 250ms linear;
 }
 
 .game-toolbar > * {
   margin: 5px;
 }
 
-.ai-select-container {
-  padding-top: 22px;
-}
 
 .board-content-left, .board-content-right {
   padding: 0 15px;
 }
 
+.ai-select-container {
+  margin: 35px 0 15px 0;
+  width: 80px;
+}
+
+@media (min-width: 480px) {
+  .game-toolbar {
+    margin-top: -25px;
+
+    .mat-mini-fab[disabled] {
+      background-color: rgb(214, 220 , 220);
+    }
+  }
+}
+
 @media (orientation: landscape) {
   .board-container {
     height: 100%;
     max-height: 100%;
   }
-  .svg-chess-board {
+  chess-board {
     margin: auto;
     height: 100%;
   }
@@ -31,7 +45,7 @@
     height: 100%;
     max-width: 100%;
   }
-  .svg-chess-board {
+  chess-board {
     width: 100%;
     height: 100%;
   }
diff --git a/src/demo/app/game/game.component.ts b/src/demo/app/game/game.component.ts
@@ -55,6 +55,8 @@ export class GameComponent implements AfterViewInit, OnDestroy {
 
   boardRect: BoardSizeChangeEvent = { height: 0, width: 0, clientHeight: 0, clientWidth: 0, xOffset: 0, yOffset: 0};
 
+  isFF = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
   constructor(private dialog: MdDialog) {}
 
   ngAfterViewInit() {
diff --git a/src/demo/assets/manifest.json b/src/demo/assets/manifest.json
@@ -1,5 +1,6 @@
 {
  "name": "App",
+ "display": "fullscreen",
  "icons": [
   {
    "src": "/assets/icon/android-icon-36x36.png",
diff --git a/src/demo/index.html b/src/demo/index.html
@@ -3,7 +3,8 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
   <title><%= htmlWebpackPlugin.options.title %></title>
   <meta name="description" content="<%= htmlWebpackPlugin.options.title %>">
   <!-- base url -->
diff --git a/src/demo/styles/styles.scss b/src/demo/styles/styles.scss
@@ -33,6 +33,13 @@ button.active:hover{
   flex: 1;
 }
 
+// workaround, see https://github.com/angular/material2/pull/6684
+game .ai-select-container {
+  .mat-select-trigger {
+    min-width: inherit;
+  }
+}
+
 main {
   display: flex;
   flex-direction: column;
diff --git a/src/ngx-chess/plugins/dom-svg-board/src/svg-chess-board/svg-chess-board.component.ts b/src/ngx-chess/plugins/dom-svg-board/src/svg-chess-board/svg-chess-board.component.ts
@@ -7,6 +7,7 @@ import {
   EventEmitter,
   ViewChild,
   ViewChildren,
+  Input,
   Output,
   Optional,
   QueryList,
@@ -90,13 +91,16 @@ export class SVGChessBoard extends ChessBoard implements AfterViewInit, AfterCon
   /** @internal */
   lastSizeEvent: BoardSizeChangeEvent;
 
+  @Input() minLandscapeMargin: number;
+
   get isPortrait(): boolean {
     return this._isPortrait;
   }
 
   private isDisabled: boolean;
   private rxWaste: Subscription[] = [];
   private onWindowResize: any;
+  private onDocumentTouchMove: (event: TouchEvent) => any;
   private _isPortrait: boolean;
 
   @ViewChild('board') private boardElRef: ElementRef;
@@ -114,11 +118,28 @@ export class SVGChessBoard extends ChessBoard implements AfterViewInit, AfterCon
     Object.defineProperty(this, 'viewBox', {value: `0 0 ${this.width} ${this.height}`});
     this.blockSize = this.height / engine.rowCount;
 
+    if (document) {
+      // prevent scrolling when interacting with board.
+      this.onDocumentTouchMove = (event: TouchEvent): any => {
+        if ( (event.target as any).ownerSVGElement === this.boardElRef.nativeElement) {
+          event.preventDefault();
+        }
+        return;
+      };
+      document.addEventListener('touchmove', this.onDocumentTouchMove, <any>{ passive: false } );
+    }
+
     if (window) {
       this.onWindowResize = (event$: any) => {
         const oldIsPortrait = this._isPortrait;
-        this._isPortrait = window.innerHeight > window.innerWidth;
         this.updateLastSizeEvent();
+        this._isPortrait = window.innerHeight > window.innerWidth;
+
+        // this._isPortrait = this.lastSizeEvent.yOffset > 0;
+        // if (!this._isPortrait && this.minLandscapeMargin && this.minLandscapeMargin > 0 && this.minLandscapeMargin > this.lastSizeEvent.xOffset) {
+        //   this._isPortrait = false;
+        // }
+
         this.onBoardResize.emit(this.lastSizeEvent);
 
         // on mobile, moving to landscape from portrait require another calc/redraw
@@ -189,6 +210,9 @@ export class SVGChessBoard extends ChessBoard implements AfterViewInit, AfterCon
 
   ngOnDestroy() {
    this.clearSubscriptions();
+   if (this.onDocumentTouchMove) {
+     document.removeEventListener("touchmove", this.onDocumentTouchMove);
+   }
    if (this.onWindowResize) {
      window.removeEventListener("resize", this.onWindowResize);
    }
@@ -253,11 +277,11 @@ export class SVGChessBoard extends ChessBoard implements AfterViewInit, AfterCon
   private registerDragAndDrop() {
     let svgElement: SVGSVGElement = this.boardElRef.nativeElement;
 
-    let mousedown = Observable.fromEvent(svgElement, 'mousedown');
-    let touchstart = Observable.fromEvent(svgElement, 'touchstart');
+    let mousedown = Observable.fromEvent(svgElement, 'mousedown', { passive: false });
+    let touchstart = Observable.fromEvent(svgElement, 'touchstart', { passive: false });
 
-    let mousemove = Observable.fromEvent(svgElement, 'mousemove');
-    let touchmove = Observable.fromEvent(svgElement, 'touchmove');
+    let mousemove = Observable.fromEvent(svgElement, 'mousemove', { passive: false });
+    let touchmove = Observable.fromEvent(svgElement, 'touchmove', { passive: false });
     // TODO: maybe catch mouseup on root component, get root via appRef boot event.
     let mouseup   = Observable.fromEvent(document, 'mouseup'); // catch drops everywhere
     let touchend   = Observable.fromEvent(document, 'touchend'); // catch drops everywhere
@@ -308,6 +332,7 @@ export class SVGChessBoard extends ChessBoard implements AfterViewInit, AfterCon
     });
 
     let touchdrag = touchstart.mergeMap((md: TouchEvent) => {
+      this.updateLastSizeEvent();
       if (this.isDisabled) return []; // only track when piece is clicked, nothing else.
       if (md.touches.length < 1) return [];
 
@@ -331,7 +356,6 @@ export class SVGChessBoard extends ChessBoard implements AfterViewInit, AfterCon
       // only drag when it's the piece turn.
       if (this.dragPiece.piece.color !== this.engine.turn()) return [];
 
-
       // since SVG is responsive 1 mouse px != 1 svg px
       // we get SVG px and we need a conversion ratio, from SVG to mouse px:
       const viewPortRatioX = this.ratioX,
@@ -481,6 +505,7 @@ export class SVGChessBoard extends ChessBoard implements AfterViewInit, AfterCon
         });
     }
     else {
+      this.dragPiece.reset(150);
       this.endDragAndDrop();
     }
   }
diff --git a/src/ngx-chess/plugins/dom-svg-board/src/svg-chess-board/svg-chess-board.styles.scss b/src/ngx-chess/plugins/dom-svg-board/src/svg-chess-board/svg-chess-board.styles.scss
@@ -1,31 +1,34 @@
-:host {
-  display: block;
+.no-user-select {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.xyz {
+:host {
+  @extend .no-user-select;
+  display: block;
+}
+
+.svg-chess-board {
   position: relative;
   display: block;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
   overflow-y: hidden;
   margin: auto;
   height: 100%;
+  width: 100%;
 }
 
 .chess-board {
   max-height: 100%;
   max-width: 100%;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
 @media (orientation: portrait) {
   .chess-board {
     height: 100%;
+    width: 100%;
   }
 }
 
diff --git a/src/ngx-chess/plugins/dom-svg-board/src/svg-chess-board/svg-chess-board.template.html b/src/ngx-chess/plugins/dom-svg-board/src/svg-chess-board/svg-chess-board.template.html
@@ -1,6 +1,7 @@
-<div class="xyz svg-chess-board">
+<div class="svg-chess-board no-user-select">
   <svg [attr.viewBox]="viewBox"
        class="chess-board"
+       [class.portrait]="isPortrait"
        preserveAspectRatio="xMidYMid meet" #board>
 
     <!-- Drop shadow for a piece -->

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "App",`
	`3`	`+ "display": "fullscreen",`
`3`	`4`	`"icons": [`
`4`	`5`	`{`
`5`	`6`	`"src": "/assets/icon/android-icon-36x36.png",`