andras/decla-red
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Add input handling

Browse source
This commit is contained in:
schmelczerandras 2020-07-18 22:02:09 +02:00
parent 29c6b14440
commit d5be727040
36 changed files with 417 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -19,3 +19,7 @@ A good-looking 2D adventure.
- lightweight object storage
- 502 error page for ingress
- vs code glsl formatter
- docker engine dashboard?
- local dev env
- vs code config
- prettier script

5
frontend/.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,5 @@
{
"typescript.tsdk": "node_modules\\typescript\\lib",
"editor.tabSize": 2,
"editor.formatOnSave": true
}

1
frontend/package.json
View file

@ -48,6 +48,7 @@
"ts-loader": "^8.0.1",
"twgl.js": "^4.15.2",
"typescript": "^3.8.3",
"uuid": "^8.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"

9
frontend/src/index.html
View file

@ -3,11 +3,14 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,viewport-fit=cover"
/>
<meta name="theme-color" content="#b7455e" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<title>Test</title>
</head>

4
frontend/src/index.ts
View file

@ -1,4 +1,4 @@
import './styling/main.scss';
import { main } from './scripting/main';
import './styles/main.scss';
import { main } from './scripts/main';
main();

21
frontend/src/scripting/helper/keyboard-listener.ts
View file

@ -1,21 +0,0 @@
export class KeyboardListener {
private keysDown: Set<string> = new Set();
constructor() {
document.addEventListener('keydown', (event) => {
this.keysDown.add(event.key);
});
document.addEventListener('keyup', (event) => {
this.keysDown.delete(event.key);
});
}
isKeyDown(key: string): boolean {
return (
this.keysDown.has(key) ||
this.keysDown.has(key.toLowerCase()) ||
this.keysDown.has(key.toUpperCase())
);
}
}

20
frontend/src/scripting/main.ts
View file

@ -1,20 +0,0 @@
import { Renderer } from './drawing/renderer';
import { KeyboardListener } from './helper/keyboard-listener';
import passthroughVertexShader from '../shaders/passthrough.vert';
import distanceFragmentShader from '../shaders/dist.frag';
export const main = async () => {
try {
const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
const renderer = new Renderer(canvas, [
passthroughVertexShader,
distanceFragmentShader,
]);
renderer.start();
} catch (e) {
console.error(e);
}
};

4
frontend/src/scripting/shared/vec2.ts
View file

@ -1,4 +0,0 @@
export interface Vec2 {
x: number;
y: number;
}

18
frontend/src/scripting/shared/world-map.ts
View file

@ -1,18 +0,0 @@
import { Line } from './line';
export class WorldMap {
private lines: Array<Line> = [];
constructor() {
const delta = 0.01;
for (let i = delta; i < 30; i += delta) {
const linePoints = {
a: { x: i - delta, y: Math.sin(i - delta) },
b: { x: i, y: Math.sin(i) },
};
/*Vec2 tangent = lines[i].b - lines[i].a;
lines[i].normal = vec2(-lines[i].normal.x * tangent.y, lines[i].normal.x * tangent.x);
linePoints.normal = */
}
}
}

13
frontend/src/scripts/commands/command-broadcaster.ts Normal file
View file

@ -0,0 +1,13 @@
import { CommandReceiver } from './command-receiver';
import { CommandGenerator } from './command-generator';
export class CommandBroadcaster {
constructor(
commandGenerators: Array<CommandGenerator>,
commandReceivers: Array<CommandReceiver>
) {
commandReceivers.forEach((r) =>
commandGenerators.forEach((g) => g.subscribe(r))
);
}
}

14
frontend/src/scripts/commands/command-generator.ts Normal file
View file

@ -0,0 +1,14 @@
import { CommandReceiver } from './command-receiver';
import { Command } from './command';
export class CommandGenerator {
private subscribers: Array<CommandReceiver> = [];
public subscribe(subscriber: CommandReceiver): void {
this.subscribers.push(subscriber);
}
protected sendCommand(command: Command): void {
this.subscribers.forEach((s) => s.sendCommand(command));
}
}

5
frontend/src/scripts/commands/command-receiver.ts Normal file
View file

@ -0,0 +1,5 @@
import { Command } from './command';
export interface CommandReceiver {
sendCommand(command: Command): void;
}

3
frontend/src/scripts/commands/command.ts Normal file
View file

@ -0,0 +1,3 @@
import { Typed } from '../transport/serializable';
export abstract class Command extends Typed {}

7
frontend/src/scripts/commands/types/key-down.ts Normal file
View file

@ -0,0 +1,7 @@
import { Command } from '../command';
export class KeyDownCommand extends Command {
public constructor(public readonly key: string) {
super();
}
}

7
frontend/src/scripts/commands/types/key-up.ts Normal file
View file

@ -0,0 +1,7 @@
import { Command } from '../command';
export class KeyUpCommand extends Command {
public constructor(public readonly key: string) {
super();
}
}

8
frontend/src/scripts/commands/types/primary-action.ts Normal file
View file

@ -0,0 +1,8 @@
import { Command } from '../command';
import { Vec2 } from '../../math/vec2';
export class PrimaryActionCommand extends Command {
public constructor(public readonly position: Vec2) {
super();
}
}

8
frontend/src/scripts/commands/types/secondary-action.ts Normal file
View file

@ -0,0 +1,8 @@
import { Command } from '../command';
import { Vec2 } from '../../math/vec2';
export class SecondaryActionCommand extends Command {
public constructor(public readonly position: Vec2) {
super();
}
}

8
frontend/src/scripts/commands/types/swipe.ts Normal file
View file

@ -0,0 +1,8 @@
import { Command } from '../command';
import { Vec2 } from '../../math/vec2';
export class SwipeCommand extends Command {
public constructor(public readonly delta: Vec2) {
super();
}
}

0
frontend/src/scripting/drawing/pipeline.ts → frontend/src/scripts/drawing/pipeline.ts
View file

43
frontend/src/scripting/drawing/renderer.ts → frontend/src/scripts/drawing/renderer.ts
View file

@ -1,17 +1,20 @@
import * as twgl from 'twgl.js';
const twgl = require('twgl.js');
import { TimeIt } from '../helper/timing';
import { KeyboardListener } from '../helper/keyboard-listener';
import { Vec2 } from '../shared/vec2';
import { Vec2 } from '../math/vec2';
import { ObjectContainer } from '../objects/object-container';
export class Renderer {
private gl: WebGL2RenderingContext;
private programInfo: any;
private bufferInfo: any;
private vao: any;
private cameraPosition: Vec2 = { x: 0, y: 0 };
private keys: KeyboardListener = new KeyboardListener();
constructor(private canvas: HTMLCanvasElement, shaderSources: Array<string>) {
constructor(
private canvas: HTMLCanvasElement,
private objects: ObjectContainer,
shaderSources: Array<string>
) {
twgl.setDefaults({ attribPrefix: 'a_' });
this.gl = this.canvas.getContext('webgl2');
@ -39,13 +42,7 @@ export class Renderer {
);
}
start() {
requestAnimationFrame(this.timedRender);
}
private timedRender = TimeIt(this.render.bind(this), 240);
private render(time: number) {
public render(time: number) {
const gl = this.gl;
twgl.resizeCanvasToDisplaySize(this.canvas);
@ -53,24 +50,8 @@ export class Renderer {
gl.clear(gl.COLOR_BUFFER_BIT);
if (this.keys.isKeyDown('w')) {
this.cameraPosition.y += 10;
}
if (this.keys.isKeyDown('s')) {
this.cameraPosition.y -= 10;
}
if (this.keys.isKeyDown('a')) {
this.cameraPosition.x -= 10;
}
if (this.keys.isKeyDown('d')) {
this.cameraPosition.x += 10;
}
const uniforms = {
cameraPosition: [this.cameraPosition.x, this.cameraPosition.y],
cameraPosition: this.objects.camera.position.list,
viewBoxSize: [this.gl.canvas.width, this.gl.canvas.height],
resolution: [this.gl.canvas.width, this.gl.canvas.height],
};
@ -81,7 +62,5 @@ export class Renderer {
twgl.setUniforms(this.programInfo, uniforms);
twgl.drawBufferInfo(this.gl, this.bufferInfo);
requestAnimationFrame(this.timedRender);
}
}

54
frontend/src/scripts/game-logic/game-logic.ts Normal file
View file

@ -0,0 +1,54 @@
import { Command } from '../commands/command';
import { CommandReceiver } from '../commands/command-receiver';
import { ObjectContainer } from '../objects/object-container';
import { KeyDownCommand } from '../commands/types/key-down';
import { KeyUpCommand } from '../commands/types/key-up';
import { SwipeCommand } from '../commands/types/swipe';
export class GameLogic implements CommandReceiver {
private commandBuffer: Array<Command> = [];
private keysDown: Set<string> = new Set();
constructor(private objects: ObjectContainer) {}
public step(time: DOMHighResTimeStamp) {
while (this.commandBuffer.length > 0) {
const command = this.commandBuffer.pop();
console.log(command);
if (command instanceof KeyDownCommand) {
this.keysDown.add(command.key);
}
if (command instanceof KeyUpCommand) {
this.keysDown.delete(command.key);
}
if (command instanceof SwipeCommand) {
this.objects.camera.position = this.objects.camera.position.subtract(
command.delta.scale(200)
);
}
}
if (this.keysDown.has('w')) {
this.objects.camera.position.y += 10;
}
if (this.keysDown.has('s')) {
this.objects.camera.position.y -= 10;
}
if (this.keysDown.has('a')) {
this.objects.camera.position.x -= 10;
}
if (this.keysDown.has('d')) {
this.objects.camera.position.x += 10;
}
}
public sendCommand(command: Command) {
this.commandBuffer.push(command);
}
}

0
frontend/src/scripting/helper/timing.ts → frontend/src/scripts/helper/timing.ts
View file

4
frontend/src/scripts/identity/identity-manager.ts Normal file
View file

@ -0,0 +1,4 @@
export class IdentityManager {
public static sourceId: string;
public static targetId: string;
}

19
frontend/src/scripts/input/keyboard-listener.ts Normal file
View file

@ -0,0 +1,19 @@
import { CommandGenerator } from '../commands/command-generator';
import { KeyDownCommand } from '../commands/types/key-down';
import { KeyUpCommand } from '../commands/types/key-up';
export class KeyboardListener extends CommandGenerator {
constructor(target: Element = document.body) {
super();
target.addEventListener('keydown', (event: KeyboardEvent) => {
const key = event.key.toLowerCase();
this.sendCommand(new KeyDownCommand(key));
});
target.addEventListener('keyup', (event: KeyboardEvent) => {
const key = event.key.toLowerCase();
this.sendCommand(new KeyUpCommand(key));
});
}
}

56
frontend/src/scripts/input/mouse-listener.ts Normal file
View file

@ -0,0 +1,56 @@
import { CommandGenerator } from '../commands/command-generator';
import { PrimaryActionCommand } from '../commands/types/primary-action';
import { SecondaryActionCommand } from '../commands/types/secondary-action';
import { Vec2 } from '../math/vec2';
import { SwipeCommand } from '../commands/types/swipe';
export class MouseListener extends CommandGenerator {
private previousPosition: Vec2 = null;
private isMouseDown = false;
constructor(private target: Element = document.body) {
super();
target.addEventListener('mousedown', (event: MouseEvent) => {
const position = this.positionFromEvent(event);
this.previousPosition = position;
this.isMouseDown = true;
if (event.button == 0) {
this.sendCommand(new PrimaryActionCommand(position));
}
});
target.addEventListener('mousemove', (event: MouseEvent) => {
if (this.isMouseDown) {
const position = this.positionFromEvent(event);
this.sendCommand(
new SwipeCommand(this.previousPosition.subtract(position))
);
this.previousPosition = position;
}
});
target.addEventListener('mouseup', (event: MouseEvent) => {
this.isMouseDown = false;
});
target.addEventListener('mouseleave', (event: MouseEvent) => {
this.isMouseDown = false;
});
target.addEventListener('contextmenu', (event: MouseEvent) => {
event.preventDefault();
const position = this.positionFromEvent(event);
this.sendCommand(new SecondaryActionCommand(position));
});
}
private positionFromEvent(event: MouseEvent): Vec2 {
return new Vec2(
-event.clientX / this.target.clientWidth,
event.clientY / this.target.clientHeight
);
}
}

42
frontend/src/scripts/input/touch-listener.ts Normal file
View file

@ -0,0 +1,42 @@
import { CommandGenerator } from '../commands/command-generator';
import { PrimaryActionCommand } from '../commands/types/primary-action';
import { SecondaryActionCommand } from '../commands/types/secondary-action';
import { Vec2 } from '../math/vec2';
import { SwipeCommand } from '../commands/types/swipe';
export class TouchListener extends CommandGenerator {
private previousPosition: Vec2 = null;
constructor(private target: Element = document.body) {
super();
target.addEventListener('touchstart', (event: TouchEvent) => {
const touchCount = event.touches.length;
const position = this.positionFromEvent(event);
this.previousPosition = position;
if (touchCount == 1) {
this.sendCommand(new PrimaryActionCommand(position));
} else {
this.sendCommand(new SecondaryActionCommand(position));
}
});
target.addEventListener('touchmove', (event: TouchEvent) => {
const position = this.positionFromEvent(event);
this.sendCommand(
new SwipeCommand(position.subtract(this.previousPosition))
);
this.previousPosition = position;
});
}
private positionFromEvent(event: TouchEvent): Vec2 {
return new Vec2(
event.touches[0].clientX / this.target.clientWidth,
-event.touches[0].clientY / this.target.clientHeight
);
}
}

48
frontend/src/scripts/main.ts Normal file
View file

@ -0,0 +1,48 @@
import { Renderer } from './drawing/renderer';
import passthroughVertexShader from '../shaders/passthrough.vert';
import distanceFragmentShader from '../shaders/dist.frag';
import { KeyboardListener } from './input/keyboard-listener';
import { MouseListener } from './input/mouse-listener';
import { TouchListener } from './input/touch-listener';
import { CommandBroadcaster } from './commands/command-broadcaster';
import { GameLogic } from './game-logic/game-logic';
import { GameObject } from './objects/game-object';
import { ObjectContainer } from './objects/object-container';
import { Camera } from './objects/types/camera';
const startGameLoop = (gameLogic: GameLogic, renderer: Renderer) => {
const loop = (time: DOMHighResTimeStamp) => {
gameLogic.step(time);
renderer.render(time);
requestAnimationFrame(loop);
};
requestAnimationFrame(loop);
};
export const main = async () => {
try {
const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
const objects = new ObjectContainer(new Camera());
const gameLogic = new GameLogic(objects);
new CommandBroadcaster(
[
new KeyboardListener(document.body),
new MouseListener(canvas),
new TouchListener(canvas),
],
[gameLogic]
);
const renderer = new Renderer(canvas, objects, [
passthroughVertexShader,
distanceFragmentShader,
]);
startGameLoop(gameLogic, renderer);
} catch (e) {
console.error(e);
}
};

0
frontend/src/scripting/shared/line.ts → frontend/src/scripts/math/line.ts
View file

27
frontend/src/scripts/math/vec2.ts Normal file
View file

@ -0,0 +1,27 @@
import { Typed } from '../transport/serializable';
export class Vec2 extends Typed {
public constructor(public x: number = 0.0, public y: number = null) {
super();
if (this.y === null) {
this.y = this.x;
}
}
public scale(scalar: number): Vec2 {
return new Vec2(this.x * scalar, this.y * scalar);
}
public add(other: Vec2): Vec2 {
return new Vec2(this.x + other.x, this.y + other.y);
}
public subtract(other: Vec2): Vec2 {
return new Vec2(this.x - other.x, this.y - other.y);
}
public get list(): [number, number] {
return [this.x, this.y];
}
}

7
frontend/src/scripts/objects/game-object.ts Normal file
View file

@ -0,0 +1,7 @@
import { Typed } from '../transport/serializable';
import { Vec2 } from '../math/vec2';
export class GameObject extends Typed {
public position = new Vec2();
public boundingBoxSize = new Vec2();
}

8
frontend/src/scripts/objects/object-container.ts Normal file
View file

@ -0,0 +1,8 @@
import { GameObject } from './game-object';
import { Camera } from './types/camera';
export class ObjectContainer {
private objects: Array<GameObject> = [];
constructor(public camera: Camera) {}
}

3
frontend/src/scripts/objects/types/camera.ts Normal file
View file

@ -0,0 +1,3 @@
import { GameObject } from '../game-object';
export class Camera extends GameObject {}

9
frontend/src/scripts/transport/serializable.ts Normal file
View file

@ -0,0 +1,9 @@
export class Typed {
public get type(): string {
return this.constructor.name;
}
public toJSON() {
return { type: this.type, ...this };
}
}

19
frontend/src/shaders/dist.frag
View file

@ -41,6 +41,24 @@ float terrain(float x) {
return result;
}
vec2 random2(vec2 st){
st = vec2( dot(st,vec2(127.1,311.7)),
dot(st,vec2(269.5,183.3)) );
return -1.0 + 2.0*fract(sin(st)*43758.5453123);
}
float noise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
vec2 u = f*f*(3.0-2.0*f);
return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),
dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),
dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
}
float lineDistance(in vec2 position, in Line line, out float h) {
vec2 pa = position - line.a, ba = line.b - line.a;
h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
@ -50,6 +68,7 @@ float lineDistance(in vec2 position, in Line line, out float h) {
return length(delta) * side + terrain(length(ba * h));
}
Line endDummyLineFromLine(Line line) {
return Line(line.b, line.b + rotate90deg(line.normal), line.normal, false);
}

0
frontend/src/styling/main.scss → frontend/src/styles/main.scss
View file

10
frontend/webpack.config.js
View file

@ -7,6 +7,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const Sharp = require('responsive-loader/sharp');
const Sass = require('sass');
const tsNameof = require('ts-nameof');
const isProduction = process.env.NODE_ENV === 'production';
@ -73,7 +74,7 @@ module.exports = {
{
test: /\.(frag|vert)$/i,
use: {
loader: 'raw-loader'
loader: 'raw-loader',
},
},
{
@ -120,7 +121,12 @@ module.exports = {
},
{
test: /\.ts$/,
use: 'ts-loader',
use: {
loader: 'ts-loader',
options: {
getCustomTransformers: () => ({ before: [tsNameof] }),
},
},
exclude: /node_modules/,
},
],