Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ran pretty on the front

Browse source
This commit is contained in:
kharhamel 2021-09-06 14:27:54 +02:00
parent 7743bda3eb
commit 4160235b92
54 changed files with 808 additions and 694 deletions
Download patch file Download diff file Expand all files Collapse all files

24
front/src/Phaser/Items/ActionableItem.ts
View file

@ -3,17 +3,23 @@
* It has coordinates and an "activation radius"
*/
import Sprite = Phaser.GameObjects.Sprite;
import type {GameScene} from "../Game/GameScene";
import type { GameScene } from "../Game/GameScene";
import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js";
type EventCallback = (state: unknown, parameters: unknown) => void;
export class ActionableItem {
private readonly activationRadiusSquared : number;
private readonly activationRadiusSquared: number;
private isSelectable: boolean = false;
private callbacks: Map<string, Array<EventCallback>> = new Map<string, Array<EventCallback>>();
public constructor(private id: number, private sprite: Sprite, private eventHandler: GameScene, private activationRadius: number, private onActivateCallback: (item: ActionableItem) => void) {
public constructor(
private id: number,
private sprite: Sprite,
private eventHandler: GameScene,
private activationRadius: number,
private onActivateCallback: (item: ActionableItem) => void
) {
this.activationRadiusSquared = activationRadius * activationRadius;
}
@ -25,8 +31,8 @@ export class ActionableItem {
* Returns the square of the distance to the object center IF we are in item action range
* OR null if we are out of range.
*/
public actionableDistance(x: number, y: number): number|null {
const distanceSquared = (x - this.sprite.x)*(x - this.sprite.x) + (y - this.sprite.y)*(y - this.sprite.y);
public actionableDistance(x: number, y: number): number | null {
const distanceSquared = (x - this.sprite.x) * (x - this.sprite.x) + (y - this.sprite.y) * (y - this.sprite.y);
if (distanceSquared < this.activationRadiusSquared) {
return distanceSquared;
} else {
@ -45,7 +51,7 @@ export class ActionableItem {
this.getOutlinePlugin()?.add(this.sprite, {
thickness: 2,
outlineColor: 0xffff00
outlineColor: 0xffff00,
});
}
@ -60,8 +66,8 @@ export class ActionableItem {
this.getOutlinePlugin()?.remove(this.sprite);
}
private getOutlinePlugin(): OutlinePipelinePlugin|undefined {
return this.sprite.scene.plugins.get('rexOutlinePipeline') as unknown as OutlinePipelinePlugin|undefined;
private getOutlinePlugin(): OutlinePipelinePlugin | undefined {
return this.sprite.scene.plugins.get("rexOutlinePipeline") as unknown as OutlinePipelinePlugin | undefined;
}
/**
@ -78,7 +84,7 @@ export class ActionableItem {
}
public on(eventName: string, callback: EventCallback): void {
let callbacksArray: Array<EventCallback>|undefined = this.callbacks.get(eventName);
let callbacksArray: Array<EventCallback> | undefined = this.callbacks.get(eventName);
if (callbacksArray === undefined) {
callbacksArray = new Array<EventCallback>();
this.callbacks.set(eventName, callbacksArray);

87
front/src/Phaser/Items/Computer/computer.ts
View file

@ -1,86 +1,91 @@
import * as Phaser from 'phaser';
import {Scene} from "phaser";
import * as Phaser from "phaser";
import { Scene } from "phaser";
import Sprite = Phaser.GameObjects.Sprite;
import type {ITiledMapObject} from "../../Map/ITiledMap";
import type {ItemFactoryInterface} from "../ItemFactoryInterface";
import type {GameScene} from "../../Game/GameScene";
import {ActionableItem} from "../ActionableItem";
import type { ITiledMapObject } from "../../Map/ITiledMap";
import type { ItemFactoryInterface } from "../ItemFactoryInterface";
import type { GameScene } from "../../Game/GameScene";
import { ActionableItem } from "../ActionableItem";
import * as tg from "generic-type-guard";
const isComputerState =
new tg.IsInterface().withProperties({
const isComputerState = new tg.IsInterface()
.withProperties({
status: tg.isString,
}).get();
})
.get();
type ComputerState = tg.GuardedType<typeof isComputerState>;
let state: ComputerState = {
'status': 'off'
status: "off",
};
export default {
preload: (loader: Phaser.Loader.LoaderPlugin): void => {
loader.atlas('computer', '/resources/items/computer/computer.png', '/resources/items/computer/computer_atlas.json');
loader.atlas(
"computer",
"/resources/items/computer/computer.png",
"/resources/items/computer/computer_atlas.json"
);
},
create: (scene: GameScene): void => {
scene.anims.create({
key: 'computer_off',
key: "computer_off",
frames: [
{
key: 'computer',
frame: 'computer_off'
}
key: "computer",
frame: "computer_off",
},
],
frameRate: 10,
repeat: -1
repeat: -1,
});
scene.anims.create({
key: 'computer_run',
key: "computer_run",
frames: [
{
key: 'computer',
frame: 'computer_on1'
},
{
key: 'computer',
frame: 'computer_on2'
}
],
{
key: "computer",
frame: "computer_on1",
},
{
key: "computer",
frame: "computer_on2",
},
],
frameRate: 5,
repeat: -1
repeat: -1,
});
},
factory: (scene: GameScene, object: ITiledMapObject, initState: unknown): ActionableItem => {
if (initState !== undefined) {
if (!isComputerState(initState)) {
throw new Error('Invalid state received for computer object');
throw new Error("Invalid state received for computer object");
}
state = initState;
}
// Idée: ESSAYER WebPack? https://paultavares.wordpress.com/2018/07/02/webpack-how-to-generate-an-es-module-bundle/
const computer = new Sprite(scene, object.x, object.y, 'computer');
const computer = new Sprite(scene, object.x, object.y, "computer");
scene.add.existing(computer);
if (state.status === 'on') {
computer.anims.play('computer_run');
if (state.status === "on") {
computer.anims.play("computer_run");
}
const item = new ActionableItem(object.id, computer, scene, 32, (item: ActionableItem) => {
if (state.status === 'off') {
state.status = 'on';
item.emit('TURN_ON', state);
if (state.status === "off") {
state.status = "on";
item.emit("TURN_ON", state);
} else {
state.status = 'off';
item.emit('TURN_OFF', state);
state.status = "off";
item.emit("TURN_OFF", state);
}
});
item.on('TURN_ON', () => {
computer.anims.play('computer_run');
item.on("TURN_ON", () => {
computer.anims.play("computer_run");
});
item.on('TURN_OFF', () => {
computer.anims.play('computer_off');
item.on("TURN_OFF", () => {
computer.anims.play("computer_off");
});
return item;
//scene.add.sprite(object.x, object.y, 'computer');
}
},
} as ItemFactoryInterface;

6
front/src/Phaser/Items/ItemFactoryInterface.ts
View file

@ -1,6 +1,6 @@
import type {GameScene} from "../Game/GameScene";
import type {ITiledMapObject} from "../Map/ITiledMap";
import type {ActionableItem} from "./ActionableItem";
import type { GameScene } from "../Game/GameScene";
import type { ITiledMapObject } from "../Map/ITiledMap";
import type { ActionableItem } from "./ActionableItem";
import LoaderPlugin = Phaser.Loader.LoaderPlugin;
export interface ItemFactoryInterface {