@satheshsat/puzzle
Version:
Puzzle game
212 lines (204 loc) • 16.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, NgModule } from '@angular/core';
import { timer } from 'rxjs';
import * as i1 from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
class PuzzleService {
constructor() { }
}
PuzzleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PuzzleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
PuzzleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PuzzleService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PuzzleService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class ImagePuzzleComponent {
constructor() {
this.imageUrl = 'https://cdn.britannica.com/86/170586-050-AB7FEFAE/Taj-Mahal-Agra-India.jpg';
this.imageSize = 500;
this.gridsize = 2;
this.boxSize = 100 / (this.gridsize - 1);
this.index = 0;
this.totalBoxes = this.gridsize * this.gridsize;
this.Image = [];
this.imageName = this.imageUrl.substr(this.imageUrl.lastIndexOf('/') + 1).split('.')[0];
this.difficulty = '2';
this.steps = 0;
this.ticks = '0:00';
this.timer = timer(0, 1000);
this.gameComplete = false;
this.indexes = [];
this.position = [];
}
ngOnInit() {
this.startGame();
}
isSorted(indexes) {
let i = 0;
for (i = 0; i < indexes.length; i++) {
if (indexes[i] !== i) {
return false;
}
}
return true;
}
randomize(imageParts) {
let i = 0, img = [], ran = 0;
for (i = 0; i < imageParts.length; i++) {
ran = Math.floor(Math.random() * imageParts.length);
while (imageParts[ran] == null) {
ran = Math.floor(Math.random() * imageParts.length);
}
img.push(imageParts[ran]);
this.position.push(imageParts[ran].index);
imageParts[ran] = null;
}
this.printIndexes(this.indexes);
this.printIndexes(this.position);
return img;
}
onDragStart(event) {
event.dataTransfer.setData('data', event.target.id);
}
onDrop(event) {
let origin = event.dataTransfer.getData('data');
let dest = event.target.id;
let originEl = document.getElementById(origin);
let destEl = document.getElementById(dest);
let origincss = originEl.style.cssText;
let destcss = event.target.style.cssText;
destEl.style.cssText = origincss;
originEl.style.cssText = destcss;
originEl.id = dest;
destEl.id = origin;
for (let i = 0; i < this.position.length; i++) {
if (this.position[i].toString() === originEl.id) {
this.position[i] = Number(destEl.id);
}
else if (this.position[i].toString() === destEl.id) {
this.position[i] = Number(originEl.id);
}
}
this.printIndexes(this.position);
this.steps++;
this.gameComplete = this.isSorted(this.position);
if (this.gameComplete) {
if (this.timeVar) {
this.timeVar.unsubscribe();
}
}
}
allowDrop(event) {
event.preventDefault();
event.target.style.opacity = 1;
}
printIndexes(sorts) {
let i = 0, ind = '';
for (i = 0; i < sorts.length; i++) {
ind += sorts[i].toString() + ' , ';
}
console.log(ind);
}
reRandomize() {
this.gameComplete = false;
this.Image = this.randomize(this.Image);
}
startGame() {
this.reset();
this.initializeGame();
this.breakImageParts();
this.reRandomize();
if (this.timeVar) {
this.timeVar.unsubscribe();
}
this.timeVar = this.timer.subscribe((t) => {
this.settime(t);
});
}
settime(t) {
this.ticks = Math.floor(t / 60).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }) + ':' +
(t % 60).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
}
breakImageParts() {
for (this.index = 0; this.index < this.totalBoxes; this.index++) {
const x = (this.boxSize * (this.index % this.gridsize)) + '%';
const y = (this.boxSize * Math.floor(this.index / this.gridsize)) + '%';
let img = new ImageBox();
img.x_pos = x;
img.y_pos = y;
img.index = this.index;
this.indexes.push(this.index);
this.Image.push(img);
}
this.boxSize = this.imageSize / this.gridsize;
}
initializeGame() {
this.gridsize = Number(this.difficulty);
console.log(this.gridsize);
this.boxSize = 100 / (this.gridsize - 1);
this.index = 0;
this.totalBoxes = this.gridsize * this.gridsize;
}
reset() {
this.Image = [];
this.indexes = [];
this.position = [];
}
}
ImagePuzzleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImagePuzzleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ImagePuzzleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImagePuzzleComponent, selector: "lib-image-puzzle", ngImport: i0, template: "<div class=\"imagePuzzle\">\n\t<div class=\"unsolvedPuzzle\">\n\t\t<h1 class=\"sectionName\">{{imageName}}</h1>\n\t\t<ul class=\"puzzle\" dropzone=\"true\">\n\t\t\t<li *ngFor=\"let img of Image\" class=\"box\" [draggable]=\"true\" [id]=\"img.index\" (dragstart)=\"onDragStart($event)\"\n\t\t\t\t(drop)=\"onDrop($event)\" (dragover)=\"allowDrop($event)\" [style.width.px]=\"boxSize\" [style.height.px]=\"boxSize\"\n\t\t\t\t[ngStyle]=\"{'background-image':'url(' + imageUrl + ') ','background-repeat':'no-repeat', 'background-position': '' + img.x_pos + ' ' + img.y_pos + '','background-size':''+ (gridsize * 100) +'% '+ (gridsize * 100) +'%'}\">\n\n\t\t\t</li>\n\t\t</ul>\n\t\t<div class=\"successMessage\" *ngIf=\"gameComplete\">\n\t\t\tGame Complete. <br>\n\t\t\tYou completed the game in time = {{ticks}} & {{steps }} steps.\n\t\t</div>\n\n\t</div>\n\t<div class=\"scoreboard\">\n\t\t<h1 class=\"sectionName\">Scoreboard</h1>\n\t\t<h3 class=\"score-detail\">\n\t\t\t<span>Time Spent: {{ ticks }} </span>\n\t\t\t<span> Steps : {{steps}}</span>\n\t\t</h3>\n\t\t<div class=\"finalImage\" [ngStyle]=\"{'background-image':'url(' + imageUrl + ') '}\"></div>\n\t\t<div class=\"image-url\">\n\t\t\t<div class=\"input-group\">\n\t\t\t\t<span class=\"input-group-btn\">\n <div class=\"btn btn-default\" >Image Url!</div>\n </span>\n\t\t\t\t<input type=\"url\" class=\"form-control\" placeholder=\"Image Url...\" [(ngModel)]=\"imageUrl\">\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h3>Difficulty Level</h3>\n\t\t<div class=\"difficulty-levels\">\n\t\t\t<div class=\"input-group\">\n\t\t\t\t<input type=\"radio\" [(ngModel)]=\"difficulty\" name=\"difficulty\" value=\"2\" checked (change)=\"startGame()\">Low\n\t\t\t</div>\n\t\t\t<div class=\"input-group\">\n\t\t\t\t<input type=\"radio\" [(ngModel)]=\"difficulty\" name=\"difficulty\" value=\"3\" (change)=\"startGame()\">Medium\n\t\t\t</div>\n\t\t\t<div class=\"input-group\">\n\t\t\t\t<input type=\"radio\" [(ngModel)]=\"difficulty\" name=\"difficulty\" value=\"4\" (change)=\"startGame()\">High\n\t\t\t</div>\n\t\t</div>\n\t\t<br>\n\t\t<div class=\"score-detail\">\n\t\t\t<button type=\"button\" class=\"btn btn-primary\" (click)=\"startGame()\"> Restart Game</button>\n\t\t\t<button type=\"button\" class=\"btn btn-primary\" (click)=\"reRandomize()\"> Randomize</button>\n\t\t</div>\n\n\t</div>\n</div>", styles: [".imagePuzzle{color:#fff;width:1200px;height:700px;margin:auto;display:flex;justify-content:center;background-color:#789}.unsolvedPuzzle,.scoreboard{width:50%;box-sizing:border-box;padding:0 5%}.sectionName{background-color:#fff;color:#000;text-align:center;width:500px;height:50px}.score-detail,.difficulty-levels{color:#fff;display:flex;justify-content:space-around}li{width:100px;list-style-type:none}.puzzle{width:500px;height:500px;display:flex;justify-content:center;padding:0;flex-wrap:wrap;box-sizing:initial;border:1px solid red}.box{display:inline-block;border:0;padding:0;margin:0}.finalImage{width:250px;height:250px;margin:auto;background-size:100% 100%}.unsolved,.solved{width:50%}.image-url{margin-top:5%}.successMessage{margin:5%;border:1px solid green;border-radius:10px;color:#000;background-color:#90ee90;padding:5%}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImagePuzzleComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-image-puzzle', template: "<div class=\"imagePuzzle\">\n\t<div class=\"unsolvedPuzzle\">\n\t\t<h1 class=\"sectionName\">{{imageName}}</h1>\n\t\t<ul class=\"puzzle\" dropzone=\"true\">\n\t\t\t<li *ngFor=\"let img of Image\" class=\"box\" [draggable]=\"true\" [id]=\"img.index\" (dragstart)=\"onDragStart($event)\"\n\t\t\t\t(drop)=\"onDrop($event)\" (dragover)=\"allowDrop($event)\" [style.width.px]=\"boxSize\" [style.height.px]=\"boxSize\"\n\t\t\t\t[ngStyle]=\"{'background-image':'url(' + imageUrl + ') ','background-repeat':'no-repeat', 'background-position': '' + img.x_pos + ' ' + img.y_pos + '','background-size':''+ (gridsize * 100) +'% '+ (gridsize * 100) +'%'}\">\n\n\t\t\t</li>\n\t\t</ul>\n\t\t<div class=\"successMessage\" *ngIf=\"gameComplete\">\n\t\t\tGame Complete. <br>\n\t\t\tYou completed the game in time = {{ticks}} & {{steps }} steps.\n\t\t</div>\n\n\t</div>\n\t<div class=\"scoreboard\">\n\t\t<h1 class=\"sectionName\">Scoreboard</h1>\n\t\t<h3 class=\"score-detail\">\n\t\t\t<span>Time Spent: {{ ticks }} </span>\n\t\t\t<span> Steps : {{steps}}</span>\n\t\t</h3>\n\t\t<div class=\"finalImage\" [ngStyle]=\"{'background-image':'url(' + imageUrl + ') '}\"></div>\n\t\t<div class=\"image-url\">\n\t\t\t<div class=\"input-group\">\n\t\t\t\t<span class=\"input-group-btn\">\n <div class=\"btn btn-default\" >Image Url!</div>\n </span>\n\t\t\t\t<input type=\"url\" class=\"form-control\" placeholder=\"Image Url...\" [(ngModel)]=\"imageUrl\">\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h3>Difficulty Level</h3>\n\t\t<div class=\"difficulty-levels\">\n\t\t\t<div class=\"input-group\">\n\t\t\t\t<input type=\"radio\" [(ngModel)]=\"difficulty\" name=\"difficulty\" value=\"2\" checked (change)=\"startGame()\">Low\n\t\t\t</div>\n\t\t\t<div class=\"input-group\">\n\t\t\t\t<input type=\"radio\" [(ngModel)]=\"difficulty\" name=\"difficulty\" value=\"3\" (change)=\"startGame()\">Medium\n\t\t\t</div>\n\t\t\t<div class=\"input-group\">\n\t\t\t\t<input type=\"radio\" [(ngModel)]=\"difficulty\" name=\"difficulty\" value=\"4\" (change)=\"startGame()\">High\n\t\t\t</div>\n\t\t</div>\n\t\t<br>\n\t\t<div class=\"score-detail\">\n\t\t\t<button type=\"button\" class=\"btn btn-primary\" (click)=\"startGame()\"> Restart Game</button>\n\t\t\t<button type=\"button\" class=\"btn btn-primary\" (click)=\"reRandomize()\"> Randomize</button>\n\t\t</div>\n\n\t</div>\n</div>", styles: [".imagePuzzle{color:#fff;width:1200px;height:700px;margin:auto;display:flex;justify-content:center;background-color:#789}.unsolvedPuzzle,.scoreboard{width:50%;box-sizing:border-box;padding:0 5%}.sectionName{background-color:#fff;color:#000;text-align:center;width:500px;height:50px}.score-detail,.difficulty-levels{color:#fff;display:flex;justify-content:space-around}li{width:100px;list-style-type:none}.puzzle{width:500px;height:500px;display:flex;justify-content:center;padding:0;flex-wrap:wrap;box-sizing:initial;border:1px solid red}.box{display:inline-block;border:0;padding:0;margin:0}.finalImage{width:250px;height:250px;margin:auto;background-size:100% 100%}.unsolved,.solved{width:50%}.image-url{margin-top:5%}.successMessage{margin:5%;border:1px solid green;border-radius:10px;color:#000;background-color:#90ee90;padding:5%}\n"] }]
}] });
class ImageBox {
}
class PuzzleComponent {
constructor() { }
ngOnInit() {
}
}
PuzzleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PuzzleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
PuzzleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PuzzleComponent, selector: "satheshsat-puzzle", ngImport: i0, template: "<nav class=\"navbar navbar-inverse\">\n\t<div class=\"game-title\">Image Puzzle Game</div>\n</nav>\n<div class=\"ImagePuzzleContainer\">\n\t<lib-image-puzzle></lib-image-puzzle>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box!important}.game-title{text-align:center;font-size:2em;margin:auto;color:#fff}.ImagePuzzleContainer{margin-top:50px}\n"], components: [{ type: ImagePuzzleComponent, selector: "lib-image-puzzle" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PuzzleComponent, decorators: [{
type: Component,
args: [{ selector: 'satheshsat-puzzle', template: "<nav class=\"navbar navbar-inverse\">\n\t<div class=\"game-title\">Image Puzzle Game</div>\n</nav>\n<div class=\"ImagePuzzleContainer\">\n\t<lib-image-puzzle></lib-image-puzzle>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box!important}.game-title{text-align:center;font-size:2em;margin:auto;color:#fff}.ImagePuzzleContainer{margin-top:50px}\n"] }]
}], ctorParameters: function () { return []; } });
class PuzzleModule {
}
PuzzleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PuzzleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
PuzzleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PuzzleModule, declarations: [PuzzleComponent,
ImagePuzzleComponent], imports: [FormsModule,
BrowserModule], exports: [PuzzleComponent] });
PuzzleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PuzzleModule, imports: [[
FormsModule,
BrowserModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PuzzleModule, decorators: [{
type: NgModule,
args: [{
declarations: [
PuzzleComponent,
ImagePuzzleComponent
],
imports: [
FormsModule,
BrowserModule
],
exports: [
PuzzleComponent
]
}]
}] });
/*
* Public API Surface of puzzle
*/
/**
* Generated bundle index. Do not edit.
*/
export { PuzzleComponent, PuzzleModule, PuzzleService };
//# sourceMappingURL=satheshsat-puzzle.mjs.map