diff --git a/public/index.html b/public/index.html index dface68..cd14f29 100644 --- a/public/index.html +++ b/public/index.html @@ -1,8 +1,10 @@ - Scuti Renderer + + +
- + diff --git a/public/script.js b/public/script.js index ffd4750..d6d63e0 100644 --- a/public/script.js +++ b/public/script.js @@ -2,60 +2,183 @@ import { Scuti } from '../src/Scuti'; import { Room } from '../src/objects/rooms/Room'; import { FloorMaterial } from '../src/objects/rooms/materials/FloorMaterial'; import { WallMaterial } from '../src/objects/rooms/materials/WallMaterial'; -import { Avatar } from '../src/objects/avatars/Avatar'; -import { AvatarAction } from '../src/objects/avatars/actions/AvatarAction'; - +import { FloorFurniture } from '../src/objects/furnitures/FloorFurniture'; +import { WiredSelectionFilter } from '../src/objects/filters/WiredSelectionFilter'; +import { WallFurniture } from '../src'; (async () => { - const renderer = new Scuti({ - canvas: document.getElementById('app'), - width: window.innerWidth, - height: window.innerHeight, - resources: './resources' - }); - await renderer.loadResources(); - - const tileMap = - 'x0000000000000000x\n' + - 'x0000000000000000x\n' + - 'x0000000000000000x\n' + - '00000000000000000x\n' + - 'x0000000000000000x\n' + - 'x0000000000000000x\n' + - 'x0000000000000000x\n' + - 'x0000000000000000x\n' + - 'x0000000000000000x\n' + - 'x0000000000000000x\n'; - - const room = new Room(renderer, { - tileMap: tileMap, - /*floorMaterial: new FloorMaterial(renderer, 110), - wallMaterial: new WallMaterial(renderer, 1501)*/ - //floorMaterial: new FloorMaterial(renderer, 307), - floorMaterial: new FloorMaterial(renderer, 110), - wallMaterial: new WallMaterial(renderer, 1601) - }); - avatar(room, 2, 1, 0, 0); - avatar(room, 4, 1, 0, 1); - avatar(room, 6, 1, 0, 2); - avatar(room, 8, 1, 0, 3); - avatar(room, 10, 1, 0, 4); - avatar(room, 12, 1, 0, 5); - avatar(room, 14, 1, 0, 6); - avatar(room, 16, 1, 0, 7); -})(); - -function avatar(room, x, y, z, direction) { - const avatar = new Avatar({ - figure: 'hr-100-61.hd-180-7.ch-210-66.lg-270-82.sh-290-80', - position: { - x: x, - y: y, - z: z - }, - bodyDirection: direction, - headDirection: direction, - actions: [AvatarAction.Talk, AvatarAction.Wave, AvatarAction.Walk, AvatarAction.CarryItem], - handItem: 55 - }); - room.objects.add(avatar); + const renderer = new Scuti({ + canvas: document.getElementById('app'), + width: window.innerWidth, + height: window.innerHeight + }); + await renderer.loadResources('https://kozennnn.github.io/scuti-resources/'); + const tileMap = 'xxxxxxxxxxxxxxxxxxxxxx\n' + + 'xxxxxxxxxxxxxxxxxxxxxx\n' + + 'xxxxxxxxxxxxxxxxxxxxxx\n' + + 'xxxx11100001xxxxxxxxxx\n' + + 'xxxx00000000xxxxxxxx0x\n' + + 'xxx0000000000000xxxx00\n' + + 'xxxx00000000xxxxxxxx00\n' + + 'xxxx000xxx00xxxxxxxx00\n' + + 'xxxx00000x00xx0xxxxx0x\n' + + 'xxxxx00xxx00xx0000xx00\n' + + 'xxxxx0000000xx0xx0xx0x\n' + + 'xxxxx0000000xx0x0000x0\n' + + 'xxxxx0000000xx0xx000x0\n' + + 'xxxxxxxxx00xxx00000x00\n' + + 'xxxxxxxxxxxxxxx000xx0x\n' + + 'xxxxxxxxxxxxxxxxxxxxxx\n' + + 'xxxxxxxxxxxxxxxxxxxxxx\n' + + 'xxxxxx00x00xxxxxxxxxxx\n' + + 'xxxxxxxxxxxxxxxxxxxxxx\n' + + 'xxxxxxxxxxxxxxxxxxxxxx\n' + + 'xxxxxxxx00xxxxxxxxxxxx\n' + + 'xxxxx00000x0xxxxxxxxxx\n' + + 'xxxxxxx00000000000xxxx\n' + + 'xxxxxxxx0xx000000x00xx\n' + + 'xxxxxxxxxxxxxxxx00xxxx\n'; + const room = new Room(renderer, { + tileMap, + floorMaterial: new FloorMaterial(renderer, 110), + wallMaterial: new WallMaterial(renderer, 2301) + }); + const furniture = new FloorFurniture({ + id: 4967, + position: { + x: 5, + y: 4, + z: 0 + }, + direction: 2, + state: 1 + }); + room.objects.add(furniture); + furniture.onPointerDown = () => { + console.log('clicked'); + }; + const furniture3 = new FloorFurniture({ + id: 8916, + position: { + x: 10, + y: 10, + z: 0 + }, + direction: 2, + state: 1 + }); + const furniture2 = new FloorFurniture({ + id: 8916, + position: { + x: 8, + y: 10, + z: 0 + }, + direction: 2, + state: 1 + }); + const wallFurniture = new WallFurniture({ + id: 4625, + position: { + x: -1, + y: 2, + offsetX: 2, + offsetY: -25 + }, + direction: 2, + state: 2 + }); + const wallFurniture2 = new WallFurniture({ + id: 4032, + position: { + x: 3, + y: -1, + offsetX: 4, + offsetY: -30 + }, + direction: 4, + state: 1 + }); + room.objects.add(furniture3); + room.objects.add(furniture2); + room.objects.add(wallFurniture); + room.objects.add(wallFurniture2); + setTimeout(() => { + return wallFurniture.move({ + x: -1, + y: 3, + offsetX: 2, + offsetY: -25 + }); + }, 3000); + setTimeout(() => { + return wallFurniture.move({ + x: -1, + y: 5, + offsetX: 2, + offsetY: -25 + }); + }, 5000); + furniture3.onLoadComplete = () => { + console.log('loaded!'); + }; + room.tiles.onPointerDown = (event) => { + furniture.move(event.position); + }; + document.onkeydown = (e) => { + e = e || window.event; + if (e.keyCode == '38') { + if (room.camera.zoomLevel <= 1) { + room.camera.zoomLevel = room.camera.zoomLevel * 2; + } + else { + room.camera.zoomLevel += 1; + } + } + else if (e.keyCode == '40') { + if (room.camera.zoomLevel <= 1) { + room.camera.zoomLevel = room.camera.zoomLevel / 2; + } + else { + room.camera.zoomLevel -= 1; + } + } + else if (e.keyCode == '37') { + furniture.rotate(4); + } + else if (e.keyCode == '39') { + const filter = new WiredSelectionFilter(0xffffff, 0x999999); + furniture.addFilter(filter); + } + }; +})().catch((error) => { + return console.error(error); +}); +function dice(room, x, y, z) { + const furni5 = new FloorFurniture({ + position: { + x, + y, + z + }, + direction: 0, + id: 284, + state: 1 + }); + room.objects.add(furni5); + let timeout; + furni5.onDoubleClick = (event) => { + console.log(event); + console.log('clicked furni5', event); + if (event.tag === 'activate') { + clearTimeout(timeout); + furni5.state = -1; + timeout = setTimeout(() => { + furni5.state = Math.floor(Math.random() * 6) + 1; + }, 1000); + } + else { + clearTimeout(timeout); + furni5.state = 0; + } + }; } diff --git a/public/script4.js b/public/script.ts similarity index 53% rename from public/script4.js rename to public/script.ts index 425655c..c92ef1a 100644 --- a/public/script4.js +++ b/public/script.ts @@ -1,27 +1,43 @@ -import { Scuti } from '../src/Scuti'; -import { Room } from '../src/objects/rooms/Room'; -import { FloorMaterial } from '../src/objects/rooms/materials/FloorMaterial'; -import { WallMaterial } from '../src/objects/rooms/materials/WallMaterial'; -import { FloorFurniture } from '../src/objects/furnitures/FloorFurniture'; -import {WiredSelectionFilter} from "../src/objects/filters/WiredSelectionFilter"; -import {WallFurniture} from "../src"; +import { Scuti } from '../src/Scuti' +import { Room } from '../src/objects/rooms/Room' +import { FloorMaterial } from '../src/objects/rooms/materials/FloorMaterial' +import { WallMaterial } from '../src/objects/rooms/materials/WallMaterial' +import { FloorFurniture } from '../src/objects/furnitures/FloorFurniture' +import { WiredSelectionFilter } from '../src/objects/filters/WiredSelectionFilter' +import { WallFurniture } from '../src' -(async () => { +// Initialising Scuti Engine +;(async () => { const renderer = new Scuti({ - canvas: document.getElementById('app'), + canvas: document.getElementById('app') as HTMLElement, width: window.innerWidth, - height: window.innerHeight, - resources: 'https://kozennnn.github.io/scuti-resources/' - }); - await renderer.loadResources('https://kozennnn.github.io/scuti-resources/'); + height: window.innerHeight + }) - const tileMap = 'x1110001\n' + 'x0000000\n' + '00000000\n' + 'x0000000\n' + 'x0000000\n'; + await renderer.loadResources('https://kozennnn.github.io/scuti-resources/') + + const tileMap = + 'xxxxxxxx000000xxxxx\n' + + 'xxxxxxx000000000xxx\n' + + 'xxxxxx000000000000x\n' + + 'xxx0x000xx0xxxx0000\n' + + 'xxx0x000x00x0000000\n' + + 'xxx0x000xx0x0000000\n' + + 'xxx0x000000x0000000\n' + + 'xxx0x000xx0x0000000\n' + + 'xxx0x000x00x0000000\n' + + 'xxx00000xx0x0000000\n' + + 'xxxxxx00000x0000000\n' + + 'xxxxxx0000000000000\n' + + 'xxxxxx0000000000000\n' + + 'xxxxxx00000x0000000\n' const room = new Room(renderer, { - tileMap: tileMap, + tileMap, floorMaterial: new FloorMaterial(renderer, 110), wallMaterial: new WallMaterial(renderer, 2301) - }); + }) + const furniture = new FloorFurniture({ //id: 4950, //id: 1619, @@ -33,11 +49,11 @@ import {WallFurniture} from "../src"; }, direction: 2, state: 1 - }); - room.objects.add(furniture); + }) + room.objects.add(furniture) furniture.onPointerDown = () => { - console.log('clicked'); - }; + console.log('clicked') + } const furniture3 = new FloorFurniture({ id: 8916, position: { @@ -47,7 +63,7 @@ import {WallFurniture} from "../src"; }, direction: 2, state: 1 - }); + }) const furniture2 = new FloorFurniture({ id: 8916, position: { @@ -57,7 +73,7 @@ import {WallFurniture} from "../src"; }, direction: 2, state: 1 - }); + }) const wallFurniture = new WallFurniture({ id: 4625, position: { @@ -68,7 +84,7 @@ import {WallFurniture} from "../src"; }, direction: 2, state: 2 - }); + }) const wallFurniture2 = new WallFurniture({ id: 4032, position: { @@ -79,88 +95,94 @@ import {WallFurniture} from "../src"; }, direction: 4, state: 1 - }); - room.objects.add(furniture3); - room.objects.add(furniture2); - room.objects.add(wallFurniture); - room.objects.add(wallFurniture2); - setTimeout(() => wallFurniture.move({ - x: -1, - y: 3, - offsetX: 2, - offsetY: -25 - }), 3000); - setTimeout(() => wallFurniture.move({ - x: -1, - y: 5, - offsetX: 2, - offsetY: -25 - }), 5000); + }) + room.objects.add(furniture3) + room.objects.add(furniture2) + room.objects.add(wallFurniture) + room.objects.add(wallFurniture2) + setTimeout(() => { + return wallFurniture.move({ + x: -1, + y: 3, + offsetX: 2, + offsetY: -25 + }) + }, 3000) + setTimeout(() => { + return wallFurniture.move({ + x: -1, + y: 5, + offsetX: 2, + offsetY: -25 + }) + }, 5000) //setTimeout(() => room.objects.add(furniture), 6000); furniture3.onLoadComplete = () => { - console.log('loaded!'); - }; + console.log('loaded!') + } room.tiles.onPointerDown = (event) => { - furniture.move(event.position); + furniture.move(event.position) //room.tileMap = tileMap; - }; + } //dice(room, 5, 5, 2); document.onkeydown = (e) => { - e = e || window.event; + e = e || window.event if (e.keyCode == '38') { if (room.camera.zoomLevel <= 1) { - room.camera.zoomLevel = room.camera.zoomLevel * 2; + room.camera.zoomLevel = room.camera.zoomLevel * 2 } else { - room.camera.zoomLevel += 1; + room.camera.zoomLevel += 1 } } else if (e.keyCode == '40') { if (room.camera.zoomLevel <= 1) { - room.camera.zoomLevel = room.camera.zoomLevel / 2; + room.camera.zoomLevel = room.camera.zoomLevel / 2 } else { - room.camera.zoomLevel -= 1; + room.camera.zoomLevel -= 1 } } else if (e.keyCode == '37') { - furniture.rotate(4); + furniture.rotate(4) } else if (e.keyCode == '39') { - const filter = new WiredSelectionFilter(0xffffff, 0x999999); - furniture.addFilter(filter); + const filter = new WiredSelectionFilter(0xffffff, 0x999999) + furniture.addFilter(filter) } - }; -})(); + } +})().catch((error) => { + return console.error(error) +}) function dice(room, x, y, z) { - let furni5 = new FloorFurniture({ + const furni5 = new FloorFurniture({ position: { - x: x, - y: y, - z: z + x, + y, + z }, //direction: randomRotation[Math.floor(Math.random() * randomRotation.length)], direction: 0, //id: furniId[Math.floor(Math.random() * furniId.length)], id: 284, state: 1 - }); - room.objects.add(furni5); - let timeout = undefined; + }) + room.objects.add(furni5) + let timeout furni5.onDoubleClick = (event) => { - console.log(event); + console.log(event) //if(furni5.infos.logic === "furniture_dice") { - console.log('clicked furni5', event); + console.log('clicked furni5', event) if (event.tag === 'activate') { - clearTimeout(timeout); - furni5.state = -1; + clearTimeout(timeout) + furni5.state = -1 timeout = setTimeout(() => { - furni5.state = Math.floor(Math.random() * 6) + 1; - }, 1000); + furni5.state = Math.floor(Math.random() * 6) + 1 + }, 1000) /*setTimeout(() => { furni5.state = 0 }, 2000);*/ } else { - clearTimeout(timeout); - furni5.state = 0; + clearTimeout(timeout) + furni5.state = 0 } //x@} - }; + } } diff --git a/src/Scuti.ts b/src/Scuti.ts index fd57297..b18bbfc 100644 --- a/src/Scuti.ts +++ b/src/Scuti.ts @@ -11,6 +11,7 @@ import { AssetLoader } from './utilities/AssetLoader' * Convenience class to create a new Scuti renderer. * * This class automatically load all the needed resources and initialise the PixiJS application. + * * @example * import { Scuti } from 'scuti-renderer'; * @@ -21,10 +22,10 @@ import { AssetLoader } from './utilities/AssetLoader' * height: window.innerHeight, * resources: './resources' * }); + * * await renderer.loadResources(); * * @class - * @memberof Scuti */ export class Scuti { /** @@ -49,7 +50,7 @@ export class Scuti { * @member {Logger} * @private */ - private readonly _logger: Logger = new Logger('Scuti') + private readonly _logger = new Logger('Scuti') /** * @param {IRendererConfiguration} [configuration] - The renderer configuration. @@ -93,7 +94,7 @@ export class Scuti { * @member {Promise} * @public */ - public async loadResources(domain: string = 'http://127.0.0.1:8081/'): Promise { + public async loadResources(domain: string): Promise { AssetLoader.domain = domain /** And now load them */ @@ -123,4 +124,15 @@ export class Scuti { public get application(): Application { return this._application } + + /** + * Reference to the renderer logger instance. + * + * @member {Logger} + * @readonly + * @public + */ + public get logger(): Logger { + return this._logger + } } diff --git a/src/enums/Direction.ts b/src/enums/Direction.ts index c31fdd6..3587245 100644 --- a/src/enums/Direction.ts +++ b/src/enums/Direction.ts @@ -5,12 +5,12 @@ * @memberof Scuti */ export enum Direction { - NORTH /** Direction 0 */, - NORTH_EAST /** Direction 1 */, - EAST /** Direction 2 */, - SOUTH_EAST /** Direction 3 */, - SOUTH /** Direction 4 */, - SOUTH_WEST /** Direction 5 */, - WEST /** Direction 6 */, - NORTH_WEST /** Direction 7 */ + NORTH, + NORTH_EAST, + EAST, + SOUTH_EAST, + SOUTH, + SOUTH_WEST, + WEST, + NORTH_WEST } diff --git a/src/index.ts b/src/index.ts index 5ea5a9b..02991e2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,8 +1,8 @@ -export { Scuti } from './Scuti'; -export { Room } from './objects/rooms/Room'; -export { FloorMaterial } from './objects/rooms/materials/FloorMaterial'; -export { FloorFurniture } from './objects/furnitures/FloorFurniture'; -export { WallMaterial } from './objects/rooms/materials/WallMaterial'; -export { WallFurniture } from './objects/furnitures/WallFurniture'; -export { Avatar } from './objects/avatars/Avatar'; -export { AvatarAction } from './objects/avatars/actions/AvatarAction'; +export { Scuti } from './Scuti' +export { Room } from './objects/rooms/Room' +export { FloorMaterial } from './objects/rooms/materials/FloorMaterial' +export { FloorFurniture } from './objects/furnitures/FloorFurniture' +export { WallMaterial } from './objects/rooms/materials/WallMaterial' +export { WallFurniture } from './objects/furnitures/WallFurniture' +export { Avatar } from './objects/avatars/Avatar' +export { AvatarAction } from './objects/avatars/actions/AvatarAction' diff --git a/src/objects/rooms/Room.ts b/src/objects/rooms/Room.ts index b78ddf5..e9bd5d3 100644 --- a/src/objects/rooms/Room.ts +++ b/src/objects/rooms/Room.ts @@ -1,16 +1,16 @@ -import { Container } from 'pixi.js'; +import { Container } from 'pixi.js' -import type { Scuti } from '../../Scuti'; -import { RoomVisualization } from './RoomVisualization'; -import { RoomTileMap } from './RoomTileMap'; -import type { Material } from './materials/Material'; -import { WallMaterial } from './materials/WallMaterial'; -import { FloorMaterial } from './materials/FloorMaterial'; -import { RoomCamera } from './RoomCamera'; -import type { EventManager } from '../interactions/EventManager'; -import type { IRoomConfig } from '../../types/Room'; -import type { RoomPartLayer } from './layers/RoomPartLayer'; -import type { RoomObjectLayer } from './layers/RoomObjectLayer'; +import type { Scuti } from '../../Scuti' +import { RoomVisualization } from './RoomVisualization' +import { RoomTileMap } from './RoomTileMap' +import type { Material } from './materials/Material' +import { WallMaterial } from './materials/WallMaterial' +import { FloorMaterial } from './materials/FloorMaterial' +import { RoomCamera } from './RoomCamera' +import type { EventManager } from '../interactions/EventManager' +import type { IRoomConfig } from '../../types/Room' +import type { RoomPartLayer } from './layers/RoomPartLayer' +import type { RoomObjectLayer } from './layers/RoomObjectLayer' /** * Room class for rendering rooms like the ones on Habbo Hotel. @@ -25,7 +25,7 @@ export class Room extends Container { * @member {Scuti} * @private */ - private readonly _engine: Scuti; + private readonly _engine: Scuti /** * The room tile map where every informations about the room model is stored. @@ -33,7 +33,7 @@ export class Room extends Container { * @member {RoomTileMap} * @private */ - private _tileMap: RoomTileMap; + private _tileMap: RoomTileMap /** * The wall material that will be applied in the room, it contains the color and the texture of the wall. @@ -41,7 +41,7 @@ export class Room extends Container { * @member {Material} * @private */ - private _wallMaterial: Material; + private _wallMaterial: Material /** * The floor material that will be applied in the room, it contains the color and the texture of the wall. @@ -49,7 +49,7 @@ export class Room extends Container { * @member {Material} * @private */ - private _floorMaterial: Material; + private _floorMaterial: Material /** * The wall thickness of the room. @@ -57,7 +57,7 @@ export class Room extends Container { * @member {number} * @private */ - private _wallThickness: number; + private _wallThickness: number /** * The floor thickness of the room. @@ -65,7 +65,7 @@ export class Room extends Container { * @member {number} * @private */ - private _floorThickness: number; + private _floorThickness: number /** * The wall height of the room, the height is added to the base height of the room. @@ -73,7 +73,7 @@ export class Room extends Container { * @member {number} * @private */ - private _wallHeight: number; + private _wallHeight: number /** * The room view instance, where all the objects like furnitures, avatars or the tiles, walls and stairs are stored. @@ -81,7 +81,7 @@ export class Room extends Container { * @member {RoomVisualization} * @private */ - private readonly _visualization: RoomVisualization; + private readonly _visualization: RoomVisualization /** * The room camera, it manage the room dragging and centering the room when it's out of bounds. @@ -89,7 +89,7 @@ export class Room extends Container { * @member {RoomCamera} * @private */ - private readonly _camera: RoomCamera; + private readonly _camera: RoomCamera /** * @param {Scuti} [engine] - The Scuti instance that will be used to render the room. @@ -102,24 +102,24 @@ export class Room extends Container { * @param {number} [config.wallThickness] - The room wall thickness. **/ constructor(engine: Scuti, config: IRoomConfig) { - super(); + super() /** Store variables */ - this._engine = engine; - this._wallMaterial = config.wallMaterial ?? new WallMaterial(this._engine); - this._floorMaterial = config.floorMaterial ?? new FloorMaterial(this._engine); - this._wallThickness = config.wallThickness ?? 8; - this._floorThickness = config.floorThickness ?? 8; - this._wallHeight = config.wallHeight ?? 0; + this._engine = engine + this._wallMaterial = config.wallMaterial ?? new WallMaterial(this._engine) + this._floorMaterial = config.floorMaterial ?? new FloorMaterial(this._engine) + this._wallThickness = config.wallThickness ?? 8 + this._floorThickness = config.floorThickness ?? 8 + this._wallHeight = config.wallHeight ?? 0 /** Initialise everything */ - this._tileMap = new RoomTileMap(config.tileMap); - this._visualization = new RoomVisualization(this); - this._camera = new RoomCamera(this); + this._tileMap = new RoomTileMap(config.tileMap) + this._visualization = new RoomVisualization(this) + this._camera = new RoomCamera(this) - /** Add the room view and then the room camera to the PixiJS application */ - this.addChild(this._visualization); - this._engine.application.stage.addChild(this._camera); + /** Add the room view and then the room camera to the Application */ + this.addChild(this._visualization) + this._engine.application.stage.addChild(this._camera) } /** @@ -130,7 +130,7 @@ export class Room extends Container { * @public */ public get engine(): Scuti { - return this._engine; + return this._engine } /** @@ -141,7 +141,7 @@ export class Room extends Container { * @public */ public get visualization(): RoomVisualization { - return this._visualization; + return this._visualization } /** @@ -152,7 +152,7 @@ export class Room extends Container { * @public */ public get tileMap(): RoomTileMap { - return this._tileMap; + return this._tileMap } /** @@ -162,8 +162,8 @@ export class Room extends Container { * @public */ public set tileMap(tileMap: RoomTileMap) { - this._tileMap = tileMap; - this._visualization.update(); + this._tileMap = tileMap + this._visualization.update() } /** @@ -174,7 +174,7 @@ export class Room extends Container { * @public */ public get wallMaterial(): Material { - return this._wallMaterial; + return this._wallMaterial } /** @@ -184,8 +184,8 @@ export class Room extends Container { * @public */ public set wallMaterial(material: Material) { - this._wallMaterial = material; - this._visualization.update(); + this._wallMaterial = material + this._visualization.update() } /** @@ -196,7 +196,7 @@ export class Room extends Container { * @public */ public get floorMaterial(): Material { - return this._floorMaterial; + return this._floorMaterial } /** @@ -206,8 +206,8 @@ export class Room extends Container { * @public */ public set floorMaterial(material: Material) { - this._floorMaterial = material; - this._visualization.update(); + this._floorMaterial = material + this._visualization.update() } /** @@ -218,7 +218,7 @@ export class Room extends Container { * @public */ public get wallThickness(): number { - return this._wallThickness; + return this._wallThickness } /** @@ -228,8 +228,8 @@ export class Room extends Container { * @public */ public set wallThickness(thickness: number) { - this._wallThickness = thickness; - this._visualization.update(); + this._wallThickness = thickness + this._visualization.update() } /** @@ -240,7 +240,7 @@ export class Room extends Container { * @public */ public get floorThickness(): number { - return this._floorThickness; + return this._floorThickness } /** @@ -250,8 +250,8 @@ export class Room extends Container { * @public */ public set floorThickness(thickness: number) { - this._floorThickness = thickness; - this._visualization.update(); + this._floorThickness = thickness + this._visualization.update() } /** @@ -262,7 +262,7 @@ export class Room extends Container { * @public */ public get wallHeight(): number { - return this._wallHeight; + return this._wallHeight } /** @@ -272,8 +272,8 @@ export class Room extends Container { * @public */ public set wallHeight(height: number) { - this._wallHeight = height; - this._visualization.update(); + this._wallHeight = height + this._visualization.update() } /** @@ -284,7 +284,7 @@ export class Room extends Container { * @public */ public get tiles(): EventManager { - return this._visualization.partLayer.tiles; + return this._visualization.partLayer.tiles } /** @@ -295,7 +295,7 @@ export class Room extends Container { * @public */ public get walls(): EventManager { - return this._visualization.partLayer.walls; + return this._visualization.partLayer.walls } /** @@ -306,7 +306,7 @@ export class Room extends Container { * @public */ public get objects(): RoomObjectLayer { - return this._visualization.objectLayer; + return this._visualization.objectLayer } /** @@ -317,7 +317,7 @@ export class Room extends Container { * @public */ public get parts(): RoomPartLayer { - return this._visualization.partLayer; + return this._visualization.partLayer } /** @@ -328,6 +328,6 @@ export class Room extends Container { * @public */ public get camera(): RoomCamera { - return this._camera; + return this._camera } } diff --git a/src/objects/rooms/parts/Cursor.ts b/src/objects/rooms/parts/Cursor.ts index d0200fa..07a5e5b 100644 --- a/src/objects/rooms/parts/Cursor.ts +++ b/src/objects/rooms/parts/Cursor.ts @@ -1,9 +1,9 @@ -import type { Spritesheet } from 'pixi.js'; -import { Container, Assets, Sprite } from 'pixi.js'; +import type { Spritesheet } from 'pixi.js' +import { Container, Assets, Sprite } from 'pixi.js' -import type { Room } from '../Room'; -import type { ICursorConfiguration, IPosition3D } from '../../../types/Room'; -import { ZOrder } from '../../../utilities/ZOrder'; +import type { Room } from '../Room' +import type { ICursorConfiguration, IPosition3D } from '../../../types/Room' +import { ZOrder } from '../../../utilities/ZOrder' /** * Cursor class that show up when we move the cursor on a room tile. @@ -18,19 +18,19 @@ export class Cursor extends Container { * @member {IPosition3D} * @private */ - private _position: IPosition3D; + private _position: IPosition3D /** * @param {Room} [_room] - The room instance where the cursor will be drawn. * @param {ICursorConfiguration} [configuration] - The tile configuration. **/ constructor(_room: Room, configuration: ICursorConfiguration) { - super(); + super() - this._position = configuration.position; + this._position = configuration.position /** Draw the cursor */ - this._draw(); + this._draw() // todo!(): create the blue circle 'cursor_64_b' cursor when needed } @@ -42,15 +42,15 @@ export class Cursor extends Container { */ private _draw(): void { /** Creating the sprite */ - const texture = Assets.get('room/cursors').textures['tile_cursor_64_a_0_0.png']; - const sprite = new Sprite(texture); + const texture = Assets.get('room/cursors').textures['tile_cursor_64_a_0_0.png'] + const sprite = new Sprite(texture) - sprite.y = -20; - this.addChild(sprite); + sprite.y = -20 + this.addChild(sprite) /** Positionate the cursor and its zIndex */ - this.moveTo(this._position); - this.zIndex = ZOrder.tileCursor(this._position); + this.moveTo(this._position) + this.zIndex = ZOrder.tileCursor(this._position) } /** @@ -62,8 +62,8 @@ export class Cursor extends Container { */ public moveTo(position: IPosition3D): void { // this.zOrder = ZOrder.tileCursor(position); - this._position = position; - this.x = 32 * this._position.x - 32 * this._position.y; - this.y = 16 * this._position.x + 16 * this._position.y - 32 * this._position.z; + this._position = position + this.x = 32 * this._position.x - 32 * this._position.y + this.y = 16 * this._position.x + 16 * this._position.y - 32 * this._position.z } } diff --git a/src/types/Configuration.d.ts b/src/types/Configuration.d.ts index 090135c..5e1739f 100644 --- a/src/types/Configuration.d.ts +++ b/src/types/Configuration.d.ts @@ -1,14 +1,13 @@ -import type { Spritesheet } from 'pixi.js'; +import type { Spritesheet } from 'pixi.js' export interface IRendererConfiguration { - canvas: HTMLElement; - width: number; - height: number; - resources: string; + canvas: HTMLElement + width: number + height: number } export interface ScutiSpritesheet extends Omit { data: { - partsType: { [key: string]: { gestures: string[] } }; - }; + partsType: { [key: string]: { gestures: string[] } } + } } diff --git a/src/types/Room.d.ts b/src/types/Room.d.ts index 7c0d79b..a8aa7bb 100644 --- a/src/types/Room.d.ts +++ b/src/types/Room.d.ts @@ -1,108 +1,108 @@ -import type { StairType } from '../enums/StairType'; -import type { Direction } from '../enums/Direction'; -import type { WallType } from '../enums/WallType'; -import type { Material } from '../objects/rooms/materials/Material'; -import type { IFloorPosition, IWallPosition } from './Furniture'; -import type { IAvatarPosition } from './Avatar'; +import type { StairType } from '../enums/StairType' +import type { Direction } from '../enums/Direction' +import type { WallType } from '../enums/WallType' +import type { Material } from '../objects/rooms/materials/Material' +import type { IFloorPosition, IWallPosition } from './Furniture' +import type { IAvatarPosition } from './Avatar' -export type TileMap = string[][]; +export type TileMap = string[][] export interface IRoomConfig { - tileMap: string; - floorMaterial?: Material; - floorThickness?: number; - wallMaterial?: Material; - wallHeight?: number; - wallThickness?: number; + tileMap: string + floorMaterial?: Material + floorThickness?: number + wallMaterial?: Material + wallHeight?: number + wallThickness?: number } export interface IRoomObjectConfig { - position: IWallPosition | IFloorPosition | IAvatarPosition; - direction: Direction; + position: IWallPosition | IFloorPosition | IAvatarPosition + direction: Direction } export interface ITileConfiguration { - material?: Material; - thickness?: number; - position: IPosition3D; + material?: Material + thickness?: number + position: IPosition3D } export interface IStairConfiguration { - material?: Material; - thickness?: number; - type: StairType; - position: IPosition3D; + material?: Material + thickness?: number + type: StairType + position: IPosition3D } export interface IWallConfiguration { - material?: Material; - thickness?: number; - height?: number; - position: IPosition3D; - type: WallType; - door?: boolean; + material?: Material + thickness?: number + height?: number + position: IPosition3D + type: WallType + door?: boolean } export interface ICursorConfiguration { - position: IPosition3D; + position: IPosition3D } export interface IPosition3D { - x: number; - y: number; - z: number; - direction?: number; + x: number + y: number + z: number + direction?: number } export interface IPosition2D { - x: number; - y: number; + x: number + y: number } export interface ITileInfo { - tile: boolean; - door: boolean; - height: number; - stairType?: { type: StairType; direction: Direction }; - wallType?: WallType; + tile: boolean + door: boolean + height: number + stairType?: { type: StairType; direction: Direction } + wallType?: WallType } // missing types here export interface RoomMaterial { - assets: { x: string; y: string; source?: string; flipH?: boolean }; + assets: { x: string; y: string; source?: string; flipH?: boolean } floorData: { floors: Array<{ - id: string; - visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }>; - }>; - }; + id: string + visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }> + }> + } materials: Array<{ - id: string; - matrices: Array<{ columns: Array<{ width: number; cells: Array<{ textureId: string }> }> }>; - }>; - textures: Array<{ id: string; bitmaps: Array<{ assetName: string }> }>; + id: string + matrices: Array<{ columns: Array<{ width: number; cells: Array<{ textureId: string }> }> }> + }> + textures: Array<{ id: string; bitmaps: Array<{ assetName: string }> }> wallData: Array<{ materials: Array<{ - id: string; - matrices: Array<{ columns: Array<{ width: number; cells: Array<{ textureId: string }> }> }>; - }>; - textures: Array<{ id: string; bitmaps: Array<{ assetName: string }> }>; + id: string + matrices: Array<{ columns: Array<{ width: number; cells: Array<{ textureId: string }> }> }> + }> + textures: Array<{ id: string; bitmaps: Array<{ assetName: string }> }> walls: Array<{ - id: string; - visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }>; - }>; - }>; - landscapeData: object; + id: string + visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }> + }> + }> + landscapeData: object // ... - visualizationType: string; - type: string; - logicType: string; - spritesheet: string; - name: string; + visualizationType: string + type: string + logicType: string + spritesheet: string + name: string maskData: { masks: Array<{ - id: string; - visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }>; - }>; - }; + id: string + visualizations: Array<{ size: number; layers: Array<{ color: number; materialId: string }> }> + }> + } } diff --git a/src/utilities/AssetLoader.ts b/src/utilities/AssetLoader.ts index 06dea87..9b911f3 100644 --- a/src/utilities/AssetLoader.ts +++ b/src/utilities/AssetLoader.ts @@ -1,26 +1,26 @@ -import { Assets, Cache } from 'pixi.js'; +import { Assets, Cache } from 'pixi.js' -const domain = 'http://localhost:8081/'; +const domain = 'http://localhost:8081/' interface LoadedKeys { - [key: string]: Promise; + [key: string]: Promise } -const loadedKeys: LoadedKeys = {}; +const loadedKeys: LoadedKeys = {} const load = async (key: string, url: string, onUncached?: () => void): Promise => { - if (loadedKeys[key] !== undefined) return await loadedKeys[key]; + if (loadedKeys[key] !== undefined) return await loadedKeys[key] if (!Cache.has(key)) { - if (onUncached != null) onUncached(); - Assets.add(key, AssetLoader.domain + url); - loadedKeys[key] = Assets.load(key); - await loadedKeys[key]; + if (onUncached != null) onUncached() + Assets.add(key, AssetLoader.domain + url) + loadedKeys[key] = Assets.load(key) + await loadedKeys[key] } -}; +} /** * Loads assets from a certain domain * * @memberof Scuti */ -export const AssetLoader = { domain, load }; +export const AssetLoader = { domain, load } diff --git a/src/utilities/Logger.ts b/src/utilities/Logger.ts index b42f666..31f71b6 100644 --- a/src/utilities/Logger.ts +++ b/src/utilities/Logger.ts @@ -11,13 +11,13 @@ export class Logger { * @member {string} * @private */ - private readonly _name: string; + private readonly _name: string /** * @param {string} [name] - The logger name. */ constructor(name: string) { - this._name = name; + this._name = name } /** @@ -28,7 +28,7 @@ export class Logger { * @public */ public log(message: string): void { - this._log('#078000', '#FFFFFF', message); + this._log('#078000', '#FFFFFF', message) } /** @@ -39,7 +39,7 @@ export class Logger { * @public */ public error(message: string): void { - this._log('#E86C5D', '#FFFFFF', message); + this._log('#E86C5D', '#FFFFFF', message) } /** @@ -50,7 +50,7 @@ export class Logger { * @public */ public warn(message: string): void { - this._log('#FFD100', '#000000', message); + this._log('#FFD100', '#000000', message) } /** @@ -61,7 +61,7 @@ export class Logger { * @public */ public info(message: string): void { - this._log('#EC3262', '#FFFFFF', message); + this._log('#EC3262', '#FFFFFF', message) } /** @@ -79,7 +79,7 @@ export class Logger { `background: #FFFFFF; color: #000000;`, `background: #000000; color: #FFFFFF`, `background: ${backgroundColor}; color: ${textColor};` - ); + ) } /** @@ -90,8 +90,8 @@ export class Logger { * @public */ public get time(): string { - const date = new Date(); - return String(date.getHours()) + ':' + String(date.getMinutes()) + ':' + String(date.getSeconds()); + const date = new Date() + return String(date.getHours()) + ':' + String(date.getMinutes()) + ':' + String(date.getSeconds()) } /** @@ -102,6 +102,6 @@ export class Logger { * @public */ public get name(): string { - return this._name; + return this._name } } diff --git a/src/utilities/ZOrder.ts b/src/utilities/ZOrder.ts index 1608611..13533f6 100644 --- a/src/utilities/ZOrder.ts +++ b/src/utilities/ZOrder.ts @@ -1,22 +1,22 @@ -import type { IPosition2D, IPosition3D } from '../types/Room'; -import type { IFloorPosition, IWallPosition } from '../types/Furniture'; +import type { IPosition2D, IPosition3D } from '../types/Room' +import type { IFloorPosition, IWallPosition } from '../types/Furniture' /** * Priority values */ -const PRIORITY_WALL = 6; -const PRIORITY_FLOOR = 7; -const PRIORITY_TILE_CURSOR = 11; -const PRIORITY_ROOM_AVATAR = 11; -const PRIORITY_ROOM_ITEM = 11; -const PRIORITY_WALL_ITEM = 9; -const PRIORITY_MULTIPLIER = 10000000; +const PRIORITY_WALL = 6 +// const PRIORITY_FLOOR = 7 +const PRIORITY_TILE_CURSOR = 11 +const PRIORITY_ROOM_AVATAR = 11 +const PRIORITY_ROOM_ITEM = 11 +const PRIORITY_WALL_ITEM = 9 +const PRIORITY_MULTIPLIER = 10000000 /** * Comparable values */ -const COMPARABLE_X_Y = 1000000; -const COMPARABLE_Z = 10000; +const COMPARABLE_X_Y = 1000000 +const COMPARABLE_Z = 10000 /** * Return the zOrder of an avatar by it's position in the room. @@ -31,8 +31,8 @@ const avatar = function (position: IPosition3D, z: number): number { (position.z + 0.001 * COMPARABLE_Z) + PRIORITY_MULTIPLIER * PRIORITY_ROOM_AVATAR + z - ); -}; + ) +} /** * Return the zOrder of the floor by it's position in the room. @@ -42,8 +42,8 @@ const avatar = function (position: IPosition3D, z: number): number { * @private */ const floor = function (position: IPosition2D): number { - return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_WALL; -}; + return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_WALL +} /** * Return the zOrder of the wall by it's position in the room. @@ -53,8 +53,8 @@ const floor = function (position: IPosition2D): number { * @private */ const wall = function (position: IPosition2D): number { - return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_WALL; -}; + return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_WALL +} /** * Return the zOrder of the tile cursor by it's position in the room. @@ -64,8 +64,8 @@ const wall = function (position: IPosition2D): number { * @private */ const tileCursor = function (position: IPosition2D): number { - return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_TILE_CURSOR; -}; + return (position.x + position.y) * COMPARABLE_X_Y + PRIORITY_MULTIPLIER * PRIORITY_TILE_CURSOR +} /** * Return the zOrder of a floor item by it's position in the room. @@ -76,13 +76,13 @@ const tileCursor = function (position: IPosition2D): number { * @private */ const floorItem = function (position: IFloorPosition, z: number): number { - const compareY = Math.trunc(z / 100) / 10; + const compareY = Math.trunc(z / 100) / 10 return ( (position.x + position.y + compareY) * COMPARABLE_X_Y + position.z * COMPARABLE_Z + PRIORITY_MULTIPLIER * PRIORITY_ROOM_ITEM - ); -}; + ) +} /** * Return the zOrder of a wall item by it's position in the room. @@ -93,10 +93,10 @@ const floorItem = function (position: IFloorPosition, z: number): number { * @private */ const wallItem = function (position: IWallPosition, z: number): number { - return (position.x + position.y) * COMPARABLE_X_Y + z * COMPARABLE_Z + PRIORITY_MULTIPLIER * PRIORITY_WALL_ITEM; -}; + return (position.x + position.y) * COMPARABLE_X_Y + z * COMPARABLE_Z + PRIORITY_MULTIPLIER * PRIORITY_WALL_ITEM +} /** * ZOrder variable that manage the z ordering of room objects. */ -export const ZOrder = { avatar, tileCursor, floorItem, wallItem, floor, wall }; +export const ZOrder = { avatar, tileCursor, floorItem, wallItem, floor, wall }