fix: relax

app/engine/engine.test.js

@@ -22,7 +22,7 @@ test('visibility-based updates', async () => {
   // Tick and get update. Should be a partial update.
   engine.tick(1);
   expect(engine.updateFor(undefined))
-    .to.deep.equal({
+    .to.deep.include({
       2: {
         Position: {x: (RESOLUTION.x * 1.5) + 32 - 1},
         VisibleAabb: {
@@ -34,10 +34,10 @@ test('visibility-based updates', async () => {
   // Tick and get update. Should remove the entity.
   engine.tick(1);
   expect(engine.updateFor(undefined))
-    .to.deep.equal({2: false});
+    .to.deep.include({2: false});
   // Aim back toward visible area and tick. Should be a full update for that entity.
   entity.Momentum.x = -1;
   engine.tick(1);
   expect(engine.updateFor(undefined))
-    .to.deep.equal({2: ecs.get(2).toJSON()});
+    .to.deep.include({2: ecs.get(2).toJSON()});
 });

app/react-components/dom.module.css

@@ -1,4 +1,6 @@
 .dom {
+  display: flex;
+  flex-direction: column;
   height: calc(100% / var(--scale));
   position: absolute;
   top: 0;

app/react-components/hotbar.jsx

@@ -6,7 +6,7 @@ import Slot from './slot.jsx';
  */
 export default function Hotbar({active, onActivate, slots}) {
   const Slots = slots.map((slot, i) => (
-    <div
+    <button
       className={
         [styles.slotWrapper, active === i && styles.active]
           .filter(Boolean).join(' ')
@@ -15,7 +15,7 @@ export default function Hotbar({active, onActivate, slots}) {
       key={i}
     >
       <Slot {...slot} />
-    </div>
+    </button>
   ));
   return (
     <div

app/react-components/hotbar.module.css

@@ -1,22 +1,32 @@
 .hotbar {
+  align-self: center;
   --border: calc(var(--unit) * 3px);
   background-color: rgba(0, 0, 0, 0.2);
   border: var(--border) solid #444444;
   box-sizing: border-box;
   display: inline-block;
-  left: calc(var(--unit) * 225px);
   line-height: 0;
   position: absolute;
   top: calc(var(--unit) * 25px);
 }
 
 .slotWrapper {
+  background-color: transparent;
   border: var(--border) solid #999999;
   box-sizing: border-box;
   display: inline-block;
   line-height: 0;
+  padding: 0;
+
+  &.active + .slotWrapper {
+    border-left: none;
+  }
+  &:not(:last-child) {
+    border-right: none;
+  }
 
   &.active {
+    border-right: var(--border) solid #999999;
     border-color: yellow;
   }
 

app/react-components/pixi.jsx

@@ -2,7 +2,7 @@ import {
   Stage as PixiStage,
 } from '@pixi/react';
 import {SCALE_MODES} from '@pixi/constants';
-import {settings} from '@pixi/settings';
+import {BaseTexture} from '@pixi/core';
 
 import {RESOLUTION} from '@/constants.js';
 import ClientContext from '@/context/client.js';
@@ -10,7 +10,7 @@ import ClientContext from '@/context/client.js';
 import Ecs from './ecs.jsx';
 import styles from './pixi.module.css';
 
-settings.SCALE_MODE = SCALE_MODES.NEAREST;
+BaseTexture.defaultOptions.scaleMode = SCALE_MODES.NEAREST;
 
 const ContextBridge = ({ children, Context, render }) => {
   return (

app/react-components/ui.jsx

@@ -58,7 +58,7 @@ export default function Ui({disconnected}) {
       </style>
       <Pixi />
       <Dom>
-        <HotBar active={0} slots={Array(10).fill(0).map(() => {})} />
+        <HotBar active={1} slots={Array(10).fill(0).map(() => {})} />
         {showDisconnected && (
           <Disconnected />
         )}

app/websocket.js

@@ -19,16 +19,11 @@ function onUpgrade(request, socket, head) {
   }
 }
 
-export default async function listen(server) {
+let engine;
-  server.on('upgrade', onUpgrade);
-
-  class SocketServer extends Server {
-    transmit(ws, packed) { ws.send(packed); }
-  }
-
 let onConnect;
-  function makeOnConnect(engine) {
+
-    return async (ws) => {
+function createOnConnect(engine) {
+  onConnect = async (ws) => {
     ws.on('close', () => {
       engine.disconnectPlayer(ws);
     })
@@ -37,27 +32,40 @@ export default async function listen(server) {
     });
     await engine.connectPlayer(ws);
   };
+  wss.on('connection', onConnect);
 }
 
-  let engine;
+class SocketServer extends Server {
-  async function makeEngine(Engine) {
+  transmit(ws, packed) { ws.send(packed); }
-    const engine = new Engine(SocketServer);
+}
+
+async function createEngine(Engine) {
+  engine = new Engine(SocketServer);
   await engine.load();
   engine.start();
   return engine;
 }
 
-  engine = await makeEngine(Engine);
+async function remakeServer(Engine) {
-  wss.on('connection', onConnect = makeOnConnect(engine));
+  if (onConnect) {
-
-  if (import.meta.hot) {
-    import.meta.hot.accept('./engine/engine.js', async ({default: Engine}) => {
     wss.off('connection', onConnect);
+  }
+  if (engine) {
     for (const [connection] of engine.connectedPlayers) {
       connection.close();
     }
-      engine = await makeEngine(Engine);
+  }
-      wss.on('connection', onConnect = makeOnConnect(engine));
+  createOnConnect(await createEngine(Engine));
+}
+
+await remakeServer(Engine);
+
+if (import.meta.hot) {
+  import.meta.hot.accept('./engine/engine.js', async ({default: Engine}) => {
+    await remakeServer(Engine);
   });
 }
+
+export default async function listen(server) {
+  server.on('upgrade', onUpgrade);
 }