feat: basic latency simulation

src/cell.js

@@ -1,4 +1,4 @@
-import {Ecs} from './ecs/index.js';
+import {Ecs} from '@/ecs/index.js';
 
 export default class Cell {
   constructor() {

src/components/dom.jsx

@@ -1,6 +1,7 @@
 import {useEffect, useRef, useState} from 'react';
 
-import {RESOLUTION} from '../constants.js';
+import {RESOLUTION} from '@/constants.js';
+
 import styles from './dom.module.css';
 
 /**

src/components/hotbar.jsx

@@ -1,6 +1,5 @@
-import Slot from './slot.jsx';
-
 import styles from './hotbar.module.css';
+import Slot from './slot.jsx';
 
 /**
  * The hotbar. 10 slots of inventory with an active selection.

src/components/pixi.jsx

@@ -4,13 +4,13 @@ import {
 } from '@pixi/react';
 import {useContext, useEffect, useState} from 'react';
 
-import {RESOLUTION} from '../constants.js';
-import ClientContext from '../context/client.js';
+import {RESOLUTION} from '@/constants.js';
+import ClientContext from '@/context/client.js';
+import {Ecs} from '@/ecs/index.js';
+
 import Entities from './entities.jsx';
 import styles from './pixi.module.css';
 
-import {Ecs} from '../ecs/index.js';
-
 export default function Pixi() {
   const client = useContext(ClientContext);
   const [entities, setEntities] = useState([]);

src/components/silphius.jsx

@@ -1,6 +1,7 @@
 import {useEffect, useState} from 'react';
 
-import ClientContext from '../context/client.js';
+import ClientContext from '@/context/client.js';
+
 import Title from './title.jsx';
 import Ui from './ui.jsx';
 
@@ -15,10 +16,10 @@ export default function Silphius() {
       let Client;
       switch (connectionTuple[0]) {
         case 'local':
-          ({default: Client} = await import('../net/client/local.js'));
+          ({default: Client} = await import('@/net/client/local.js'));
           break;
         case 'remote':
-          ({default: Client} = await import('../net/client/remote.js'));
+          ({default: Client} = await import('@/net/client/remote.js'));
           break;
       }
       const client = new Client();

src/components/ui.jsx

@@ -1,8 +1,9 @@
 import {useContext, useEffect} from 'react';
 
-import addKeyListener from '../add-key-listener.js';
-import {ACTION_MAP, RESOLUTION} from '../constants.js';
-import ClientContext from '../context/client.js';
+import addKeyListener from '@/add-key-listener.js';
+import {ACTION_MAP, RESOLUTION} from '@/constants.js';
+import ClientContext from '@/context/client.js';
+
 import Dom from './dom.jsx';
 import Pixi from './pixi.jsx';
 import styles from './ui.module.css';

src/constants.js

@@ -1,8 +1,14 @@
+export const CLIENT_LATENCY = 100;
+
 export const RESOLUTION = [
   800,
   450,
 ];
 
+export const SERVER_LATENCY = 100;
+
+export const TPS = 60;
+
 export const ACTION_MAP = {
   w: 'moveUp',
   d: 'moveRight',

src/gathered/packets.js

@@ -1,4 +1,4 @@
-export {default as Action} from '../net/packet/action.js';
-export {default as Connect} from '../net/packet/connect.js';
-export {default as Connected} from '../net/packet/connected.js';
-export {default as Tick} from '../net/packet/tick.js';
+export {default as Action} from '@/net/packet/action.js';
+export {default as Connect} from '@/net/packet/connect.js';
+export {default as Connected} from '@/net/packet/connected.js';
+export {default as Tick} from '@/net/packet/tick.js';

src/index.js

@@ -1,9 +1,9 @@
 import {createElement} from 'react';
 import {createRoot} from 'react-dom/client';
 
-import Silphius from './components/silphius.jsx';
+import Silphius from '@/components/silphius.jsx';
 
-await import('./isomorphinit.js');
+await import('@/isomorphinit.js');
 
 // Setup DOM.
 createRoot(document.querySelector('.silphius'))

src/isomorphinit.js

@@ -1,14 +1,14 @@
 // Gathering.
-const {default: PacketClass} = await import('./net/packet/packet.js');
-Object.values(await import('./gathered/packets.js'))
+const {default: PacketClass} = await import('@/net/packet/packet.js');
+Object.values(await import('@/gathered/packets.js'))
   .forEach((Packet) => {
     PacketClass.register(Packet);
   });
 PacketClass.mapRegistered();
 
-const {default: Ecs} = await import('./ecs/ecs.js');
+const {default: Ecs} = await import('@/ecs/ecs.js');
 Ecs.ComponentLikesAndOrBundleLikes = Object.fromEntries(
   Object.entries(
-    await import('./gathered/components.js'),
+    await import('@/gathered/components.js'),
   ),
 );

src/net/client/client.js

@@ -1,3 +1,5 @@
+import {CLIENT_LATENCY} from '@/constants.js';
+
 import Packet from '../packet/packet.js';
 
 export default class Client {
@@ -20,6 +22,14 @@ export default class Client {
     }
   }
   send(packet) {
-    this.transmit(Packet.transmit(packet));
+    if (CLIENT_LATENCY > 0) {
+      setTimeout(() => {
+        this.transmit(Packet.transmit(packet));
+      }, CLIENT_LATENCY);
+    }
+    else {
+      this.transmit(Packet.transmit(packet));
+    }
+
   }
 }

src/net/server/server.js

@@ -1,12 +1,15 @@
-import {MOVE_MAP} from '../../constants.js';
-import Cell from '../../cell.js';
-import {System} from '../../ecs/index.js';
+import {
+  MOVE_MAP,
+  SERVER_LATENCY,
+  TPS,
+} from '@/constants.js';
+import Cell from '@/cell.js';
+import {System} from '@/ecs/index.js';
 import Packet from "../packet/packet.js";
 
 const SPEED = 100;
-const TPS = 60;
 
-await import ('../../isomorphinit.js');
+await import ('@/isomorphinit.js');
 
 class MovementSystem extends System {
 
@@ -82,7 +85,14 @@ export default class Server {
   }
 
   send(connection, packet) {
-    this.transmit(connection, Packet.transmit(packet));
+    if (SERVER_LATENCY > 0) {
+      setTimeout(() => {
+        this.transmit(connection, Packet.transmit(packet));
+      }, SERVER_LATENCY);
+    }
+    else {
+      this.transmit(connection, Packet.transmit(packet));
+    }
   }
 
   start() {

src/stories/dom-decorator.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useRef, useState} from 'react';
 
-import Dom from '../components/dom.jsx';
-import {RESOLUTION} from '../constants.js';
+import Dom from '@/components/dom.jsx';
+import {RESOLUTION} from '@/constants.js';
 
 function Decorator({children, style}) {
   const ref = useRef();

src/stories/hotbar.stories.js

@@ -1,8 +1,8 @@
 import {useArgs} from '@storybook/preview-api';
 import {fn} from '@storybook/test';
 
-import potion from '../assets/potion.png';
-import Hotbar from '../components/hotbar.jsx';
+import potion from '@/assets/potion.png';
+import Hotbar from '@/components/hotbar.jsx';
 import DomDecorator from './dom-decorator.jsx';
 
 const slots = Array(10).fill({});

src/stories/slot.stories.js

@@ -1,5 +1,5 @@
-import potion from '../assets/potion.png';
-import Slot from '../components/slot.jsx';
+import potion from '@/assets/potion.png';
+import Slot from '@/components/slot.jsx';
 import DomDecorator from './dom-decorator.jsx';
 
 export default {

vite.config.js

@@ -1,5 +1,6 @@
 import {defineConfig} from 'vite'
 import react from '@vitejs/plugin-react'
+import {fileURLToPath} from 'node:url'
 
 const {
   SILPHIUS_WEBSOCKET_PORT = 8080
@@ -7,6 +8,14 @@ const {
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: [
+      {
+        find: '@',
+        replacement: fileURLToPath(new URL('./src', import.meta.url))
+      },
+    ],
+  },
   server: {
     host: true,
     proxy: {