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

4
front/src/Phaser/Components/ChatModeIcon.ts
View file

@ -2,7 +2,7 @@ import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
export class ChatModeIcon extends Phaser.GameObjects.Sprite {
constructor(scene: Phaser.Scene, x: number, y: number) {
super(scene, x, y, 'layout_modes', 3);
super(scene, x, y, "layout_modes", 3);
scene.add.existing(this);
this.setScrollFactor(0, 0);
this.setOrigin(0, 1);
@ -10,4 +10,4 @@ export class ChatModeIcon extends Phaser.GameObjects.Sprite {
this.setVisible(false);
this.setDepth(DEPTH_INGAME_TEXT_INDEX);
}
}
}

7
front/src/Phaser/Components/ClickButton.ts
View file

@ -1,11 +1,8 @@
export class ClickButton extends Phaser.GameObjects.Image{
export class ClickButton extends Phaser.GameObjects.Image {
constructor(scene: Phaser.Scene, x: number, y: number, textureName: string, callback: Function) {
super(scene, x, y, textureName);
this.scene.add.existing(this);
this.setInteractive();
this.on("pointerup", callback);
}
}
}

6
front/src/Phaser/Components/PresentationModeIcon.ts
View file

@ -1,8 +1,8 @@
import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";
import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
export class PresentationModeIcon extends Phaser.GameObjects.Sprite {
constructor(scene: Phaser.Scene, x: number, y: number) {
super(scene, x, y, 'layout_modes', 0);
super(scene, x, y, "layout_modes", 0);
scene.add.existing(this);
this.setScrollFactor(0, 0);
this.setOrigin(0, 1);
@ -10,4 +10,4 @@ export class PresentationModeIcon extends Phaser.GameObjects.Sprite {
this.setVisible(false);
this.setDepth(DEPTH_INGAME_TEXT_INDEX);
}
}
}

44
front/src/Phaser/Components/RadialMenu.ts
View file

@ -1,20 +1,20 @@
import Sprite = Phaser.GameObjects.Sprite;
import {DEPTH_UI_INDEX} from "../Game/DepthIndexes";
import {waScaleManager} from "../Services/WaScaleManager";
import { DEPTH_UI_INDEX } from "../Game/DepthIndexes";
import { waScaleManager } from "../Services/WaScaleManager";
export interface RadialMenuItem {
image: string,
name: string,
image: string;
name: string;
}
export const RadialMenuClickEvent = 'radialClick';
export const RadialMenuClickEvent = "radialClick";
export class RadialMenu extends Phaser.GameObjects.Container {
private resizeCallback: OmitThisParameter<() => void>;
constructor(scene: Phaser.Scene, x: number, y: number, private items: RadialMenuItem[]) {
super(scene, x, y);
this.setDepth(DEPTH_UI_INDEX)
this.setDepth(DEPTH_UI_INDEX);
this.scene.add.existing(this);
this.initItems();
@ -22,45 +22,45 @@ export class RadialMenu extends Phaser.GameObjects.Container {
this.resizeCallback = this.resize.bind(this);
this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
}
private initItems() {
const itemsNumber = this.items.length;
const menuRadius = 70 + (waScaleManager.uiScalingFactor - 1) * 20;
this.items.forEach((item, index) => this.createRadialElement(item, index, itemsNumber, menuRadius))
this.items.forEach((item, index) => this.createRadialElement(item, index, itemsNumber, menuRadius));
}
private createRadialElement(item: RadialMenuItem, index: number, itemsNumber: number, menuRadius: number) {
const image = new Sprite(this.scene, 0, menuRadius, item.image);
const image = new Sprite(this.scene, 0, menuRadius, item.image);
this.add(image);
this.scene.sys.updateList.add(image);
const scalingFactor = waScaleManager.uiScalingFactor * 0.075;
image.setScale(scalingFactor)
image.setScale(scalingFactor);
image.setInteractive({
useHandCursor: true,
});
image.on('pointerdown', () => this.emit(RadialMenuClickEvent, item));
image.on('pointerover', () => {
image.on("pointerdown", () => this.emit(RadialMenuClickEvent, item));
image.on("pointerover", () => {
this.scene.tweens.add({
targets: image,
props: {
scale: 2 * scalingFactor,
},
duration: 500,
ease: 'Power3',
})
ease: "Power3",
});
});
image.on('pointerout', () => {
image.on("pointerout", () => {
this.scene.tweens.add({
targets: image,
props: {
scale: scalingFactor,
},
duration: 500,
ease: 'Power3',
})
ease: "Power3",
});
});
const angle = 2 * Math.PI * index / itemsNumber;
Phaser.Actions.RotateAroundDistance([image], {x: 0, y: 0}, angle, menuRadius);
const angle = (2 * Math.PI * index) / itemsNumber;
Phaser.Actions.RotateAroundDistance([image], { x: 0, y: 0 }, angle, menuRadius);
}
private resize() {
@ -71,4 +71,4 @@ export class RadialMenu extends Phaser.GameObjects.Container {
this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback);
super.destroy();
}
}
}

24
front/src/Phaser/Components/SoundMeter.ts
View file

@ -1,4 +1,4 @@
import type {IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode} from 'standardized-audio-context';
import type { IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode } from "standardized-audio-context";
/**
* Class to measure the sound volume of a media stream
@ -7,10 +7,10 @@ export class SoundMeter {
private instant: number;
private clip: number;
//private script: ScriptProcessorNode;
private analyser: IAnalyserNode<IAudioContext>|undefined;
private dataArray: Uint8Array|undefined;
private context: IAudioContext|undefined;
private source: IMediaStreamAudioSourceNode<IAudioContext>|undefined;
private analyser: IAnalyserNode<IAudioContext> | undefined;
private dataArray: Uint8Array | undefined;
private context: IAudioContext | undefined;
private source: IMediaStreamAudioSourceNode<IAudioContext> | undefined;
constructor() {
this.instant = 0.0;
@ -27,8 +27,7 @@ export class SoundMeter {
this.dataArray = new Uint8Array(bufferLength);
}
public connectToSource(stream: MediaStream, context: IAudioContext): void
{
public connectToSource(stream: MediaStream, context: IAudioContext): void {
if (this.source !== undefined) {
this.stop();
}
@ -42,8 +41,6 @@ export class SoundMeter {
//analyser.connect(distortion);
//distortion.connect(this.context.destination);
//this.analyser.connect(this.context.destination);
}
public getVolume(): number {
@ -52,16 +49,15 @@ export class SoundMeter {
}
this.analyser.getByteFrequencyData(this.dataArray);
const input = this.dataArray;
let i;
let sum = 0.0;
//let clipcount = 0;
for (i = 0; i < input.length; ++i) {
sum += input[i] * input[i];
// if (Math.abs(input[i]) > 0.99) {
// clipcount += 1;
// }
// if (Math.abs(input[i]) > 0.99) {
// clipcount += 1;
// }
}
this.instant = Math.sqrt(sum / input.length);
//this.slow = 0.95 * that.slow + 0.05 * that.instant;
@ -84,6 +80,4 @@ export class SoundMeter {
this.dataArray = undefined;
this.source = undefined;
}
}

5
front/src/Phaser/Components/TextField.ts
View file

@ -1,10 +1,9 @@
export class TextField extends Phaser.GameObjects.BitmapText {
constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[], center: boolean = true) {
super(scene, x, y, 'main_font', text, 8);
super(scene, x, y, "main_font", text, 8);
this.scene.add.existing(this);
if (center) {
this.setOrigin(0.5).setCenterAlign()
this.setOrigin(0.5).setCenterAlign();
}
}
}