ui: tweaks

app/react-components/dom.jsx

@@ -28,7 +28,12 @@ export default function Dom({children}) {
   return (
     <div className={styles.dom} ref={ref}>
       {scale > 0 && (
-        <style>{`.${styles.dom}{--scale:${scale}}`}</style>
+        <style>{`
+          .${styles.dom}{
+            --scale: ${scale};
+            --unit: calc(${RESOLUTION.x} / 1000);
+          }
+        `}</style>
       )}
       {children}
     </div>

app/react-components/hotbar.module.css

@@ -1,15 +1,17 @@
 .hotbar {
-  border: 2px solid #999999;
+  --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: 135px;
+  left: calc(var(--unit) * 225px);
   line-height: 0;
   position: absolute;
-  top: 20px;
+  top: calc(var(--unit) * 25px);
 }
 
 .slotWrapper {
-  border: 2px solid #999999;
+  border: var(--border) solid #999999;
   box-sizing: border-box;
   display: inline-block;
   line-height: 0;
@@ -19,7 +21,7 @@
   }
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.2);
     cursor: pointer;
   }
 }

app/react-components/pixi.jsx

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

app/react-components/slot.module.css

@@ -1,32 +1,33 @@
 .slot {
-  --size: 35px;
+  --size: calc(var(--unit) * 50px);
-  --base: calc(var(--size) / 5);
+  --space: calc(var(--unit) * 10px);
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
-  box-sizing: border-box;
   display: inline-block;
+  height: var(--size);
   image-rendering: pixelated;
-  padding: var(--base);
   user-select: none;
+  width: var(--size);
 }
 
 .slotInner {
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
-  height: calc(var(--base) * 5);
+  height: calc(100% - var(--space) * 2);
+  padding: var(--space);
   position: relative;
-  width: calc(var(--base) * 5);
+  width: calc(100% - var(--space) * 2);
 }
 
 .qty {
-  bottom: calc(var(--base) / -1.25);
+  bottom: calc(var(--space) / -1.25);
   font-family: monospace;
-  font-size: calc(var(--base) * 2);
+  font-size: calc(var(--space) * 2);
   line-height: 1;
   position: absolute;
-  right: calc(var(--base) / -1.25);
+  right: calc(var(--space) / -1.25);
   text-shadow:
     0px -1px 0px white,
     1px 0px 0px white,
@@ -34,12 +35,12 @@
     -1px 0px 0px white
   ;
   &:global(.q-2) {
-    font-size: calc(var(--base) * 1.75);
+    font-size: calc(var(--space) * 1.75);
   }
   &:global(.q-3) {
-    font-size: calc(var(--base) * 1.5);
+    font-size: calc(var(--space) * 1.5);
   }
   &:global(.q-4) {
-    font-size: calc(var(--base) * 1.25);
+    font-size: calc(var(--space) * 1.25);
   }
 }