refactor: ui

packages/app/src/components/app/index.jsx

@@ -12,7 +12,7 @@ import {
 import {UserRequired} from '@flecks/user/local';
 import '@humus/app/scss/index.scss';
 
-import Ui from '../valent-ui';
+import Ui from './ui';
 import Login from './login';
 import Overview from './overview';
 import Play from './play';

packages/app/src/components/app/ui/index.jsx

@@ -0,0 +1,47 @@
+import {
+  PropTypes,
+  React,
+  useContext,
+  useEffect,
+  useRef,
+} from '@flecks/react';
+
+import Context from './context';
+import styles from './index.module.scss';
+
+export {Context};
+
+const Ui = ({children}) => {
+  const [width, height] = useContext(Context);
+  const $ui = useRef();
+  useEffect(() => {
+    if (!$ui.current) {
+      return undefined;
+    }
+    const onResize = () => {
+      const {innerWidth, innerHeight} = window;
+      const ratio = innerWidth / innerHeight;
+      const targetRatio = width / height;
+      $ui.current.style.setProperty(
+        '--scale',
+        ratio <= targetRatio ? innerWidth / width : innerHeight / height,
+      );
+    };
+    window.addEventListener('resize', onResize);
+    onResize();
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [$ui, height, width]);
+  return (
+    <div className={styles.ui} ref={$ui} style={{height: `${height}px`, width: `${width}px`}}>
+      {children}
+    </div>
+  );
+};
+
+Ui.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Ui;

packages/app/src/components/app/ui/index.module.scss

@@ -1,4 +1,4 @@
-.valent-ui {
+.ui {
   display: inline-block;
   left: 50%;
   overflow: hidden;

packages/app/src/components/valent-ui/index.jsx

@@ -1,60 +0,0 @@
-import './index.scss';
-
-import {
-  PropTypes,
-  React,
-  useContext,
-  useEffect,
-  useRef,
-} from '@flecks/react';
-
-import Context from './context';
-
-export {Context};
-
-const ValentUi = ({children}) => {
-  const [width, height] = useContext(Context);
-  const $ui = useRef();
-  useEffect(() => {
-    if (!$ui.current) {
-      return undefined;
-    }
-    const onResize = () => {
-      const RATIO = width / height;
-      const {innerWidth, innerHeight} = window;
-      const ratio = innerWidth / innerHeight;
-      let scale;
-      if (ratio < RATIO) {
-        scale = innerWidth / width;
-      }
-      else if (ratio > RATIO) {
-        scale = innerHeight / height;
-      }
-      else {
-        scale = innerWidth / width;
-      }
-      $ui.current.style.setProperty('--scale', scale);
-    };
-    window.addEventListener('resize', onResize);
-    onResize();
-    return () => window.removeEventListener('resize', onResize);
-  }, [$ui, height, width]);
-  return (
-    <div
-      className="valent-ui"
-      ref={$ui}
-      style={{
-        height: `${height}px`,
-        width: `${width}px`,
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-ValentUi.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default ValentUi;

packages/app/src/index.js

@@ -2,7 +2,7 @@ import {Hooks} from '@flecks/core';
 
 import App from './components/app';
 import {selfEntity} from './state';
-import Ui, {Context} from './components/valent-ui';
+import Ui, {Context} from './components/app/ui';
 
 export * from './hooks';
 export * from './state';