cha0s/humus-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: time UI and styling

Browse Source
This commit is contained in:
cha0s 2019-04-04 18:14:49 -04:00
parent 1f8b9bdb9b
commit 78c960114a
2 changed files with 38 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/index.html
View File

@ -12,16 +12,35 @@
margin: 0;
overflow: hidden;
}
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.app {
align-items: center;
display: flex;
align-items: center;
height: 100%;
line-height: 0;
width: 100%;
}
canvas {
.app .avocado-stage {
margin: auto;
}
.ui .time {
background-color: rgba(0, 0, 0, .3);
border: 0.5px solid gray;
border-radius: 50px;
color: white;
position: absolute;
top: 5px;
right: 5px;
line-height: 1em;
padding: 0.5em;
font-family: monospace;
}
</style>
</head>
<body>

20
client/index.js
View File

@ -23,6 +23,10 @@ stage.element.addEventListener('focus', () => {
isFocused = true;
});
stage.addToDom(appNode);
// Time display.
const timeUi = document.createElement('div');
timeUi.className = 'time unselectable';
stage.ui.appendChild(timeUi);
// Create room.
const room = new Room();
room.world = new World();
@ -30,6 +34,7 @@ const roomView = new RoomView(room, stage.renderer);
stage.addChild(roomView);
// Time.
const time = new WorldTime();
let lastWorldTime = time.humanReadable();
// Synchronize state.
const stateSynchronizer = new StateSynchronizer({
room,
@ -52,7 +57,6 @@ room.on('entityAdded', (entity) => {
}
});
// Accept input.
const canvasNode = document.querySelector('.app canvas');
const actionRegistry = new ActionRegistry();
actionRegistry.mapKeysToActions({
'w': 'MoveUp',
@ -60,7 +64,7 @@ actionRegistry.mapKeysToActions({
's': 'MoveDown',
'd': 'MoveRight',
});
actionRegistry.listen(canvasNode);
actionRegistry.listen(stage.element);
// Mouse/touch movement.
function createMoveToNormal(position) {
if (!selfEntity) {
@ -79,9 +83,15 @@ function isPointingAtAnything() {
return -1 !== pointingAt[0] && -1 !== pointingAt[1];
}
stage.on('pointerDown', (event) => {
if (event.target !== stage.ui) {
return;
}
pointingAt = event.position;
});
stage.on('pointerMove', (event) => {
if (event.target !== stage.ui) {
return;
}
if (!isPointingAtAnything()) {
return;
}
@ -116,7 +126,6 @@ const messageHandle = setInterval(() => {
}, 1000 / 60);
// Prediction.
let lastTime = performance.now();
let nightIntensity = 0;
const predictionHandle = setInterval(() => {
const now = performance.now();
const elapsed = (now - lastTime) / 1000;
@ -143,7 +152,6 @@ const predictionHandle = setInterval(() => {
else {
stage.night(intensity);
}
nightIntensity += 0.0001;
}, 1000 / 80);
// State updates.
let dirty = false;
@ -166,6 +174,10 @@ function render() {
if (!dirty) {
return;
}
if (time.humanReadable() !== lastWorldTime) {
timeUi.textContent = time.humanReadable();
lastWorldTime = time.humanReadable();
}
stage.render();
dirty = false;
}