diff --git a/engine/package-lock.json b/engine/package-lock.json
index 4a1bb32..8f2e8ee 100644
--- a/engine/package-lock.json
+++ b/engine/package-lock.json
@@ -23,7 +23,6 @@
"prettier": "2.7.1",
"rimraf": "^3.0.2",
"ts-jest": "^29.0.3",
- "ts-loader": "^9.4.2",
"typedoc": "^0.23.19",
"typescript": "^4.8.4",
"webpack": "^5.75.0",
@@ -7603,92 +7602,6 @@
"node": ">=12"
}
},
- "node_modules/ts-loader": {
- "version": "9.4.2",
- "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.2.tgz",
- "integrity": "sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==",
- "dev": true,
- "dependencies": {
- "chalk": "^4.1.0",
- "enhanced-resolve": "^5.0.0",
- "micromatch": "^4.0.0",
- "semver": "^7.3.4"
- },
- "engines": {
- "node": ">=12.0.0"
- },
- "peerDependencies": {
- "typescript": "*",
- "webpack": "^5.0.0"
- }
- },
- "node_modules/ts-loader/node_modules/ansi-styles": {
- "version": "4.3.0",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
- "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
- "dev": true,
- "dependencies": {
- "color-convert": "^2.0.1"
- },
- "engines": {
- "node": ">=8"
- },
- "funding": {
- "url": "https://github.com/chalk/ansi-styles?sponsor=1"
- }
- },
- "node_modules/ts-loader/node_modules/chalk": {
- "version": "4.1.2",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
- "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
- "dev": true,
- "dependencies": {
- "ansi-styles": "^4.1.0",
- "supports-color": "^7.1.0"
- },
- "engines": {
- "node": ">=10"
- },
- "funding": {
- "url": "https://github.com/chalk/chalk?sponsor=1"
- }
- },
- "node_modules/ts-loader/node_modules/has-flag": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
- "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
- "dev": true,
- "engines": {
- "node": ">=8"
- }
- },
- "node_modules/ts-loader/node_modules/semver": {
- "version": "7.3.8",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
- "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
- "dev": true,
- "dependencies": {
- "lru-cache": "^6.0.0"
- },
- "bin": {
- "semver": "bin/semver.js"
- },
- "engines": {
- "node": ">=10"
- }
- },
- "node_modules/ts-loader/node_modules/supports-color": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
- "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
- "dev": true,
- "dependencies": {
- "has-flag": "^4.0.0"
- },
- "engines": {
- "node": ">=8"
- }
- },
"node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@@ -13858,63 +13771,6 @@
}
}
},
- "ts-loader": {
- "version": "9.4.2",
- "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.2.tgz",
- "integrity": "sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==",
- "dev": true,
- "requires": {
- "chalk": "^4.1.0",
- "enhanced-resolve": "^5.0.0",
- "micromatch": "^4.0.0",
- "semver": "^7.3.4"
- },
- "dependencies": {
- "ansi-styles": {
- "version": "4.3.0",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
- "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
- "dev": true,
- "requires": {
- "color-convert": "^2.0.1"
- }
- },
- "chalk": {
- "version": "4.1.2",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
- "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
- "dev": true,
- "requires": {
- "ansi-styles": "^4.1.0",
- "supports-color": "^7.1.0"
- }
- },
- "has-flag": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
- "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
- "dev": true
- },
- "semver": {
- "version": "7.3.8",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
- "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
- "dev": true,
- "requires": {
- "lru-cache": "^6.0.0"
- }
- },
- "supports-color": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
- "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
- "dev": true,
- "requires": {
- "has-flag": "^4.0.0"
- }
- }
- }
- },
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
diff --git a/pixelot/package-lock.json b/pixelot/package-lock.json
index c97a744..f45d984 100644
--- a/pixelot/package-lock.json
+++ b/pixelot/package-lock.json
@@ -46,6 +46,30 @@
"typescript": "~4.8.2"
}
},
+ "../engine": {
+ "version": "1.0.0",
+ "license": "ISC",
+ "devDependencies": {
+ "@jest/globals": "^29.3.1",
+ "@types/node": "^18.8.3",
+ "@types/offscreencanvas": "^2019.7.0",
+ "@typescript-eslint/eslint-plugin": "^5.44.0",
+ "@typescript-eslint/parser": "^5.44.0",
+ "avl": "^1.5.3",
+ "copyfiles": "^2.4.1",
+ "eslint": "^8.28.0",
+ "gl-matrix": "^3.4.3",
+ "jest": "^29.3.1",
+ "nw": "^0.70.1",
+ "prettier": "2.7.1",
+ "rimraf": "^3.0.2",
+ "ts-jest": "^29.0.3",
+ "typedoc": "^0.23.19",
+ "typescript": "^4.8.4",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.1"
+ }
+ },
"node_modules/@ampproject/remapping": {
"version": "2.2.0",
"dev": true,
@@ -10951,9 +10975,8 @@
}
},
"node_modules/retro-engine": {
- "version": "1.0.0",
- "resolved": "file:../engine",
- "license": "ISC"
+ "resolved": "../engine",
+ "link": true
},
"node_modules/retry": {
"version": "0.12.0",
@@ -20465,7 +20488,27 @@
}
},
"retro-engine": {
- "version": "1.0.0"
+ "version": "file:../engine",
+ "requires": {
+ "@jest/globals": "^29.3.1",
+ "@types/node": "^18.8.3",
+ "@types/offscreencanvas": "^2019.7.0",
+ "@typescript-eslint/eslint-plugin": "^5.44.0",
+ "@typescript-eslint/parser": "^5.44.0",
+ "avl": "^1.5.3",
+ "copyfiles": "^2.4.1",
+ "eslint": "^8.28.0",
+ "gl-matrix": "^3.4.3",
+ "jest": "^29.3.1",
+ "nw": "^0.70.1",
+ "prettier": "2.7.1",
+ "rimraf": "^3.0.2",
+ "ts-jest": "^29.0.3",
+ "typedoc": "^0.23.19",
+ "typescript": "^4.8.4",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.1"
+ }
},
"retry": {
"version": "0.12.0",
diff --git a/pixelot/src/app/app.module.ts b/pixelot/src/app/app.module.ts
index fc78e5f..457b8ee 100644
--- a/pixelot/src/app/app.module.ts
+++ b/pixelot/src/app/app.module.ts
@@ -5,7 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ToolbarComponent } from './toolbar/toolbar.component';
import { AddEntityDialog, AddLayerDialog, LeftSidebarComponent } from './left-sidebar/left-sidebar.component';
-import { AddComponentDialog, RightSidebarComponent } from './right-sidebar/right-sidebar.component';
+import { AddComponentDialog, RightSidebarComponent, AddAssetDialog } from './right-sidebar/right-sidebar.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SceneTabComponent } from './scene-tab/scene-tab.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -35,6 +35,7 @@ import { LandingComponent } from './landing/landing.component';
import { OpenProjectDialogComponent } from './open-project-dialog/open-project-dialog.component';
import { NewProjectDialogComponent } from './new-project-dialog/new-project-dialog.component';
import { DragDropModule } from '@angular/cdk/drag-drop';
+import {MatSelectModule} from '@angular/material/select';
@NgModule({
declarations: [
@@ -43,6 +44,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
LeftSidebarComponent,
RightSidebarComponent,
AddComponentDialog,
+ AddAssetDialog,
AddEntityDialog,
AddLayerDialog,
NavbarComponent,
@@ -61,6 +63,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
],
imports: [
BrowserModule,
+ MatSelectModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule,
diff --git a/pixelot/src/app/right-sidebar/add-asset-dialog.html b/pixelot/src/app/right-sidebar/add-asset-dialog.html
new file mode 100644
index 0000000..6cdd558
--- /dev/null
+++ b/pixelot/src/app/right-sidebar/add-asset-dialog.html
@@ -0,0 +1,16 @@
+Pick an asset to load into the Engine
+
+
+ Asset name
+
+
+ {{option}}
+
+
+
+
+
+ Cancel
+ Add
+
\ No newline at end of file
diff --git a/pixelot/src/app/right-sidebar/right-sidebar.component.html b/pixelot/src/app/right-sidebar/right-sidebar.component.html
index 7986052..9ca6c52 100644
--- a/pixelot/src/app/right-sidebar/right-sidebar.component.html
+++ b/pixelot/src/app/right-sidebar/right-sidebar.component.html
@@ -32,8 +32,17 @@ Components
+
+
+ {{property}}
+
+
+ {{asset}}
+
+
+
-
+
{{property}}
@@ -48,6 +57,7 @@ Components
+ Add asset
Remove Component
diff --git a/pixelot/src/app/right-sidebar/right-sidebar.component.ts b/pixelot/src/app/right-sidebar/right-sidebar.component.ts
index 4d39514..b0217e3 100644
--- a/pixelot/src/app/right-sidebar/right-sidebar.component.ts
+++ b/pixelot/src/app/right-sidebar/right-sidebar.component.ts
@@ -1,6 +1,7 @@
import { Component, ElementRef, EventEmitter, Inject, Input, Optional, Output, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import {MatSelectModule} from '@angular/material/select';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Observable } from 'rxjs';
import {map, startWith} from 'rxjs/operators';
@@ -8,7 +9,7 @@ import * as engine from 'retro-engine';
import { GameObjectBase } from 'retro-engine';
import { SceneDataService } from 'app/services/scene-data.service';
import { SceneTabComponent } from 'app/scene-tab/scene-tab.component';
-
+import { FileService } from 'app/services/file.service';
const nw = (window as any).nw;
const fs = nw.require('fs');
@@ -30,14 +31,35 @@ export class RightSidebarComponent {
numberType = engine.Types.Number;
booleanType = engine.Types.Boolean;
isResizing = false;
+ assetOptions = [];
+ assets = [];
+ selectedAsset:string;
- constructor(public dialog: MatDialog, private _snackBar: MatSnackBar, public sceneData: SceneDataService, private hostRef: ElementRef, @Optional() private parentComponent?: SceneTabComponent) {
+ constructor(public dialog: MatDialog, private _snackBar: MatSnackBar, public sceneData: SceneDataService, public fileService: FileService, private hostRef: ElementRef, @Optional() public parentComponent?: SceneTabComponent) {
+ this.parentComponent = parentComponent;
+ this.assets = [...engine.Renderer.textures.keys()];
this.update();
}
+ ngOnInit() {
+ //TODO change to make use of project assets folder
+ fs.readdir("../engine/images", (err: any, files: any[]) => {
+ if (err) {
+ console.log(err);
+ } else {
+ files.forEach(file => {
+ this.assetOptions.push(file);
+ });
+ }
+ });
+ }
ngOnChanges() {
this.update();
+ if(this.entity){
+ this.selectedAsset = this.sceneData.getComponentArgs(this.currentSceneName,this.entity.name,'Sprite')[0];
+ }
+ console.log(this.selectedAsset);
}
update() {
@@ -132,9 +154,12 @@ export class RightSidebarComponent {
if (event.target) {
// textbox event
this.sceneData.updateComponentArg(this.currentSceneName, this.entityName, component, index, event.target.value);
- } else {
+ } else if(event.checked) {
// checkbox event
this.sceneData.updateComponentArg(this.currentSceneName, this.entityName, component, index, event.checked.toString());
+ } else{
+ // dropdown event
+ this.sceneData.updateComponentArg(this.currentSceneName, this.entityName, component, index, event.value);
}
// remove and re-add component to update it
this.entity.removeByName(component);
@@ -183,6 +208,59 @@ export class RightSidebarComponent {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
}
+
+ addNewAsset() {
+ const dialogRef = this.dialog.open(AddAssetDialog, {
+ width: '500px',
+ data: this.assetOptions,
+ });
+ dialogRef.afterClosed().subscribe(result => {
+ if (result){
+ // Add texture to engine
+ const path = './assets/images/' + result + '.png';
+ engine.Renderer.loadTexture(path, result);
+ this.assets = [...engine.Renderer.textures.keys()];
+
+ // Add texture to project.json
+ const projectPath = this.fileService.path;
+ const projectFiles = engine.ImportManager.getFilePaths(projectPath);
+ const projJSONPath = projectPath + projectFiles.project + ".proj";
+ const projectJson = JSON.parse(fs.readFileSync(projJSONPath, "utf8"));
+ projectJson.textures.push({name: result, path: './assets/images/' + result + '.png'});
+ const jsonData = JSON.stringify(projectJson);
+ fs.writeFile(projJSONPath, jsonData, (err) => {
+ if (err) throw err;
+ console.log('Data written to file');
+ });
+ }
+ });
+ }
+}
+
+@Component({
+ selector: 'add-asset-dialog',
+ templateUrl: 'add-asset-dialog.html',
+})
+export class AddAssetDialog {
+ formControl = new FormControl('');
+ filteredOptions = [];
+ engineAssets = [...engine.Renderer.textures.keys()];
+
+ constructor(
+ public dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public options:string[],
+ ) {
+ this.filteredOptions = options;
+ this.filteredOptions = this.filteredOptions.map((option) => option.replace(/\.[^/.]+$/, ''));
+ this.filteredOptions = this.filteredOptions.filter(item => !this.engineAssets.includes(item));
+ }
+
+ onCancelClick(): void {}
+
+ onAddClick(): void {
+ const asset = this.formControl.value;
+ this.dialogRef.close(asset);
+ }
}
@Component({