Angular: Need to animate and flip over a puzzle piece

I need to animate, then flip, the image in a certain puzzle piece cell.

Screen-Shot-2017-11-23-at-6.02.02-PM.png
I want to enable this functionality with a left click on any puzzle piece, that has a dog ear. And I suppose I want to "tear" the piece from upper right corner to lower left corner.

Once inverted, it can display a white background, for now.

I currently designate which gets a dog ear with these code snippets:
this.dogEarIndexes = [ 0, 2, 4, 11, 12, 19, 21, 23, 29, 35 ]; 

 this.isDogEared = this.dogEarIndexes.indexOf(this.id) > -1;

 <div [ngClass]="{ 'dog-ear' : isDogEared }"></div>

.dog-ear {
	position: absolute;
	top: 0;
	right: 0;
	height: 20px;
	width: 20px;
	background: linear-gradient(45deg, #333 0%, #333, #fff 50%, #fff 100%);
}

Open in new window


I have a puzzlecanvas which contains a matrix of puzzlepiece components.

I assume the event must originate with the puzzlecanvas, perhaps in the component.ts file:

import { Component, Input, OnInit } from '@angular/core';
import { NgFor } from '@angular/common';
import { PuzzlePieceComponent } from '../puzzlepiece/puzzle-piece.component';

@Component({
  selector: 'puzzle-canvas',
  templateUrl: './puzzle-canvas.component.html',
  styleUrls: ['./puzzle-canvas.component.css']
})

export class PuzzleCanvasComponent implements OnInit {
  title = 'Puzzle Peace';
  @Input() piece:PuzzlePieceComponent;
  pieces = [];
  columns:number = 8;
  rows:number = 5;

  constructor() { }

  ngOnInit() { 
    let index = 0;
    for(let row = 0; row < this.rows; row++) {
      for(let column = 0; column < this.columns; column++) {
        this.pieces[index] = new PuzzlePieceComponent();
        this.pieces[index].id=index;
        index++;
      }
    }
  }
}

Open in new window


and the functionality for the animation needs to go into the
puzzle-piece.component.ts file?

import { Component, OnInit, Input, Output } from '@angular/core';

@Component({
  selector: 'puzzle-piece',
  templateUrl: './puzzle-piece.component.html',
  styleUrls: ['./puzzle-piece.component.css']
})


export class PuzzlePieceComponent implements OnInit {
  @Input() id:number;
  @Input() value:PuzzlePieceComponent;
  @Output() title = 'Puzzle Piece'; 
  @Output() imageFilename:string;
  isDogEared:boolean;

  dogEarIndexes: number[];

  constructor() 
  { 
    this.dogEarIndexes = [ 0, 2, 4, 11, 12, 19, 21, 23, 29, 35 ]; 
  }

  ngOnInit() {
    this.id = this.value.id;

    this.imageFilename = "PuzzlePiece_Maps_" + (this.value.id + 1).toString() + ".gif";
    this.isDogEared = this.dogEarIndexes.indexOf(this.id) > -1;
    console.log('Id:'+this.id+" - " + this.imageFilename + " isDogEared="+ this.isDogEared.toString());    
  }
}

Open in new window


Curious.

Thanks.
newbiewebSr. Software EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I am guessing that you can probably do this with CSS transformations - depending on the effect you want.

CSS transforms can be applied with a class and a class can be conditionally applied to an element with the ngClass directive.

So, the simplest solution would probably be

<puzzlePiece (click)="flipped=!flipped" [ngClass]="{'flipped': flipped}" ...>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
newbiewebSr. Software EngineerAuthor Commented:
But, before we talk about the transformation, don't I need to write the HTML for the puzzle-piece side, when flipped? It seems I would use the flipped boolean.

I am thikning somethign like the following:

    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show; else elseBlock">Text to show</div>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>

so, my thoughts are in the following direction, but I am unsure...
<ng-container *ngFor="let piece of pieces, let i=index">
    <div *ngIf="i%8 == 0" class="rowclass">{{rowNames.shift()}}<div>
    <div *ngIf="flipped; else elseBlock">
            <puzzle-piece [value]="piece" (click)="flipped=!flipped" [ngClass]="{'flipped': flipped}"></puzzle-piece>
            <ng-template #elseBlock>Alternate text</ng-template>
    </div>

<!--/ng-container-->

Open in new window

Julian HansenCommented:
You probably can't use ngIf here because ngIf (when false) excludes the element completely from the DOM which is not really what you want when transitioning. One side is hidden and the visible side transitions to the hidden one - which I don't think will work with an ngIf.

I was going to put a sample together but I don't know what sort of transition your are thinking of
newbiewebSr. Software EngineerAuthor Commented:
True, using *ngIf and the HTML template  would require a page load to swap between flipped and !flipped.

Well, an animated "tear" of the map from right upper corner to left lower corner would be ideal. And it would be super cool, after the puzzle piece is flipped, to display the column and row number on a blank white background. From my other question, you can see the puzzle-canvas component constructs the following:

  constructor() { 
    this.rowNames = ['1', '2', '3', '4', '5' ];
    this.columnNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H' ];
  }

Open in new window


So, if the third column and the third row puzzle piece is flipped, display C3 on a white background.

Thanks!
newbiewebSr. Software EngineerAuthor Commented:
thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.