diff --git a/client/index.html b/client/index.html index 09f0534..2b77309 100644 --- a/client/index.html +++ b/client/index.html @@ -30,10 +30,20 @@ } .app .avocado-stage { margin: auto; + outline: none; + transform: scale(1); + transform-origin: 0 0; + transition-property: transform; + transition-duration: 0.125s; + } + .debug .ui { + background-image: url(/debug.png); } -
+
+
+
diff --git a/client/index.js b/client/index.js index f4b260c..80137af 100644 --- a/client/index.js +++ b/client/index.js @@ -18,6 +18,7 @@ import {InputPacket, KeysPacket, StatePacket} from '../common/packet'; import {augmentParserWithThroughput} from '../common/parser-throughput'; import {WorldTime} from '../common/world-time'; import Ui from './ui'; +import DebugUi from './ui/debug'; // DOM. const appNode = document.querySelector('.app'); // Lol Apple @@ -29,7 +30,6 @@ const visibleSize = [320, 180]; const visibleScale = [2, 2]; const stage = new Stage(Vector.mul(visibleSize, visibleScale)); stage.scale = visibleScale; -stage.addToDom(appNode); // Handle "own" entity. let selfEntity; function hasSelfEntity() { @@ -263,9 +263,18 @@ const renderHandle = setAnimation(render); // UI. const UiComponent = ; ReactDOM.render(UiComponent, stage.ui); +// Debug UI. +const debugUiNode = document.querySelector('.debug-container'); +const DebugUiComponent = ; +ReactDOM.render(DebugUiComponent, debugUiNode); +// Inject the stage last. +stage.addToDom(appNode); // Eval. const evaluationContext = { room, diff --git a/client/ui/debug/index.js b/client/ui/debug/index.js new file mode 100644 index 0000000..a8a14f1 --- /dev/null +++ b/client/ui/debug/index.js @@ -0,0 +1,75 @@ +// 3rd party. +import React, {useEffect, useState} from 'react'; +import {hot} from 'react-hot-loader/root'; +// 2nd party. +import {compose} from '@avocado/core'; +import contempo from 'contempo'; +// 3rd party. +import Throughput from './throughput'; + +const decorate = compose( + contempo(``), + hot, +); + +const DebugUi = ({actionRegistry, stage, Parser}) => { + const [size, setSize] = useState([0, 0]); + const [position, setPosition] = useState([0, 0]); + const [transformRatio, setTransformRatio] = useState(1); + const [isDebugging, setIsDebugging] = useState(false); + // Sync debug UI size with stage size. + useEffect(() => { + const onStageResized = (size) => { + const rect = stage.element.getBoundingClientRect(); + setPosition([rect.left, rect.top]); + setSize(size); + setTransformRatio(stage.transformRatio); + }; + stage.on('displaySizeChanged', onStageResized); + onStageResized(stage.displaySize); + return () => { + stage.off('resized', onStageResized); + }; + }, []); + // F2 toggle debug. + useEffect(() => { + const onKeyDown = (event) => { + event = event || window.event; + if ('F2' === event.key) { + setIsDebugging(!isDebugging); + } + }; + window.addEventListener('keydown', onKeyDown); + return () => { + window.removeEventListener('keydown', onKeyDown); + }; + }, [isDebugging]); + // Scale stage when debugging. + useEffect(() => { + stage.element.style.transform = `scale(${isDebugging ? '0.5' : '1'})`; + }, [isDebugging]); + return
+
+ +
+
; +}; + +export default decorate(DebugUi); diff --git a/client/ui/throughput.js b/client/ui/debug/throughput.js similarity index 95% rename from client/ui/throughput.js rename to client/ui/debug/throughput.js index ecf5469..46162e0 100644 --- a/client/ui/throughput.js +++ b/client/ui/debug/throughput.js @@ -5,21 +5,20 @@ import React, {useEffect, useState} from 'react'; import {compose} from '@avocado/core'; import {Vector} from '@avocado/math'; import contempo from 'contempo'; -// 1st party. -import {WorldTime} from '../../common/world-time'; const decorate = compose( contempo(` .throughput { background-color: rgba(0, 0, 0, .3); + border: 1px solid white; color: white; - font-size: 0.6em; + font-size: 0.8em; position: absolute; top: 0.5em; - left: 0.5em; + left: calc(320px + 0.5em); line-height: 1em; width: 11em; - padding: 0.5em; + padding: 0.125em; font-family: monospace; } .throughput .kbps:before { diff --git a/client/ui/index.js b/client/ui/index.js index 0209a00..98c0248 100644 --- a/client/ui/index.js +++ b/client/ui/index.js @@ -2,13 +2,11 @@ import React from 'react'; import {hot} from 'react-hot-loader/root'; // 1st party. -import Throughput from './throughput'; import WorldTime from './world-time'; -const Ui = ({Parser, worldTime}) => { +const Ui = ({worldTime}) => { return - ; }; diff --git a/resource/debug.png b/resource/debug.png new file mode 100644 index 0000000..400a04e Binary files /dev/null and b/resource/debug.png differ