@ng-casino/rock-paper-scissors
Version:
Angular component to play a game of Rock, Paper, Scissors
1 lines • 5.52 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"RockPaperScissorsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"casino-rock-paper-scissors","template":"<div class=\"ng-casino__rps\">\n <ng-container *ngIf=\"playing\">\n <div class=\"ng-casino__rps-options\">\n <img class=\"ng-casino__rps-option ng-casino__rps-option--reversed ng-casino__rps-choice\"\n [src]=\"choiceImage ? choiceImage : gameImages.rock\"/>\n\n <img class=\"ng-casino__rps-option ng-casino__rps-choice\"\n [src]=\"opponentImage ? opponentImage : gameImages.rock\"/>\n </div>\n\n <ng-container *ngIf=\"result !== null\">\n <p class=\"ng-casino__rps-text\"\n *ngIf=\"result === gameOutcome.Won\">{{ wonText ? wonText : 'You have won this game!' }}</p>\n <p class=\"ng-casino__rps-text\"\n *ngIf=\"result === gameOutcome.Lost\">{{ lostText ? lostText : 'You have lost this game!' }}</p>\n <p class=\"ng-casino__rps-text\"\n *ngIf=\"result === gameOutcome.Draw\">{{ drawText ? drawText : 'There is no winner in this game!' }}</p>\n\n <div class=\"ng-casino__rps-try-again\">\n <button class=\"ng-casino__rps-try-again-button\"\n (click)=\"resetGame()\">{{ tryAgainText ? tryAgainText : 'Try again' }}</button>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!playing\">\n <div class=\"ng-casino__rps-options\">\n <img class=\"ng-casino__rps-option\"\n alt=\"Rock\"\n [src]=\"images?.rock ? images.rock : gameImages.rock\"\n (click)=\"play(gameChoice.Rock)\"/>\n <img class=\"ng-casino__rps-option\"\n alt=\"Paper\"\n [src]=\"images?.paper ? images.paper : gameImages.paper\"\n (click)=\"play(gameChoice.Paper)\"/>\n <img class=\"ng-casino__rps-option\"\n alt=\"Scissors\"\n [src]=\"images?.scissors ? images.scissors : gameImages.scissors\"\n (click)=\"play(gameChoice.Scissors)\"/>\n </div>\n\n <p class=\"ng-casino__rps-text\">{{ startText ? startText : 'Make your choice' }}</p>\n </ng-container>\n</div>\n","styles":[".ng-casino__rps-options{display:flex;justify-content:space-around}.ng-casino__rps-option{cursor:pointer;height:33%;position:relative;width:33%}.ng-casino__rps-option--reversed{transform:scaleX(-1)}.ng-casino__rps-option:not(.ng-casino__rps-choice):hover{-webkit-animation:upDownAnimation 1s linear infinite;animation:upDownAnimation 1s linear infinite}.ng-casino__rps-choice{-webkit-animation:upDownAnimation .5s linear 3;animation:upDownAnimation .5s linear 3;cursor:default}.ng-casino__rps-text{font-size:1.25rem;text-align:center}.ng-casino__rps-try-again{text-align:center}@-webkit-keyframes upDownAnimation{0%,to{bottom:0}50%{bottom:.5rem}}@keyframes upDownAnimation{0%,to{bottom:0}50%{bottom:.5rem}}"]}]}],"members":{"startText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"wonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"lostText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"drawText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"tryAgainText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"images":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"onPlaying":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":3}}]}],"onGameResult":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"play":[{"__symbolic":"method"}],"showResults":[{"__symbolic":"method"}],"getImage":[{"__symbolic":"method"}],"resetGame":[{"__symbolic":"method"}]}},"RockPaperScissorsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"RockPaperScissorsComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"exports":[{"__symbolic":"reference","name":"RockPaperScissorsComponent"}]}]}],"members":{}},"RockPaperScissorsChoice":{"Rock":0,"Paper":1,"Scissors":2},"RockPaperScissorsResult":{"Won":0,"Lost":1,"Draw":2}},"origins":{"RockPaperScissorsComponent":"./lib/rock-paper-scissors.component","RockPaperScissorsModule":"./lib/rock-paper-scissors.module","RockPaperScissorsChoice":"./lib/rock-paper-scissors.enums","RockPaperScissorsResult":"./lib/rock-paper-scissors.enums"},"importAs":"@ng-casino/rock-paper-scissors"}