123 lines
3.2 KiB
JavaScript
123 lines
3.2 KiB
JavaScript
import {create as createClient} from '@avocado/client';
|
|
import {EntityList} from '@avocado/entity';
|
|
import {ActionRegistry} from '@avocado/input';
|
|
import {Container, Renderer} from '@avocado/graphics';
|
|
import {World} from '@avocado/physics/matter/world';
|
|
import {StateSynchronizer} from '@avocado/state';
|
|
import {Room, RoomView} from '@avocado/topdown';
|
|
|
|
const renderer = new Renderer([640, 360]);
|
|
const stage = new Container();
|
|
stage.scale = [2, 2];
|
|
|
|
const room = new Room();
|
|
room.world = new World();
|
|
const roomView = new RoomView(room, renderer);
|
|
stage.addChild(roomView);
|
|
|
|
const stateSynchronizer = new StateSynchronizer({
|
|
room,
|
|
});
|
|
|
|
let selfEntity;
|
|
function hasSelfEntity() {
|
|
return selfEntity && 'string' !== typeof selfEntity;
|
|
}
|
|
room.on('entityAdded', (entity) => {
|
|
entity.removeTrait('controllable');
|
|
// Set self entity.
|
|
if ('string' === typeof selfEntity) {
|
|
if (entity === room.findEntity(selfEntity)) {
|
|
selfEntity = entity;
|
|
// Only self entity should be controllable.
|
|
entity.addTrait('controllable');
|
|
}
|
|
}
|
|
});
|
|
// Accept input.
|
|
const actionRegistry = new ActionRegistry();
|
|
actionRegistry.mapKeysToActions({
|
|
'w': 'MoveUp',
|
|
'a': 'MoveLeft',
|
|
's': 'MoveDown',
|
|
'd': 'MoveRight',
|
|
});
|
|
actionRegistry.listen();
|
|
let actionState = actionRegistry.state();
|
|
// Create the socket connection.
|
|
const socket = createClient(window.location.href);
|
|
// Create the graphics canvas.
|
|
const appNode = document.querySelector('.app');
|
|
appNode.appendChild(renderer.element);
|
|
// Input messages.
|
|
const messageHandle = setInterval(() => {
|
|
if (actionState !== actionRegistry.state()) {
|
|
actionState = actionRegistry.state();
|
|
socket.send({
|
|
type: 'input',
|
|
payload: actionState.toJS()
|
|
});
|
|
}
|
|
}, 1000 / 60);
|
|
// Prediction.
|
|
let lastTime = performance.now();
|
|
const predictionHandle = setInterval(() => {
|
|
const now = performance.now();
|
|
const elapsed = (now - lastTime) / 1000;
|
|
lastTime = now;
|
|
if (hasSelfEntity()) {
|
|
selfEntity.inputState = actionState.toJS();
|
|
}
|
|
room.tick(elapsed);
|
|
}, 1000 / 80);
|
|
// State updates.
|
|
let dirty = false;
|
|
function onMessage({type, payload}) {
|
|
switch (type) {
|
|
case 'state-update':
|
|
if (payload.selfEntity) {
|
|
selfEntity = payload.selfEntity;
|
|
}
|
|
stateSynchronizer.acceptStateChange(payload);
|
|
dirty = true;
|
|
break;
|
|
default:
|
|
}
|
|
}
|
|
socket.on('message', onMessage);
|
|
// Render.
|
|
function render() {
|
|
stage.tick();
|
|
if (!dirty) {
|
|
return;
|
|
}
|
|
renderer.render(stage);
|
|
dirty = false;
|
|
}
|
|
const renderHandle = setInterval(render, 1000 / 60);
|
|
// Hot reloading.
|
|
if (module.hot) {
|
|
module.hot.accept((error) => {
|
|
console.error(error);
|
|
});
|
|
module.hot.dispose(() => {
|
|
entityList.destroy();
|
|
appNode.removeChild(renderer.element);
|
|
stage.destroy();
|
|
renderer.destroy();
|
|
});
|
|
}
|
|
// Make sure dis boi always correct ratio and always maximally visible.
|
|
function onResize() {
|
|
const ratio = window.innerWidth / window.innerHeight;
|
|
const axe = ratio > (16 / 9) ? 'height' : 'width';
|
|
const nodes = window.document.querySelectorAll('.app canvas');
|
|
nodes.forEach((node) => {
|
|
for (const key of ['height', 'width']) {
|
|
node.style[key] = key === axe ? '100%' : 'auto';
|
|
}
|
|
});
|
|
}
|
|
window.addEventListener('resize', onResize);
|
|
onResize();
|