refactor: ValentUi

packages/core/package.json

@@ -34,6 +34,7 @@
     "@latus/socket": "^2.0.0",
     "autoprefixer": "^9.8.6",
     "debug": "4.3.1",
+    "is-electron": "^2.2.0",
     "msgpack-lite": "^0.1.26"
   },
   "devDependencies": {

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

@@ -1,14 +1,11 @@
-import './index.scss';
-
 import {
   PropTypes,
   React,
   useEffect,
   useRef,
 } from '@latus/react';
-import screenfull from 'screenfull';
 
-const Ui = ({children, width, height}) => {
+const ValentUi = ({children, width, height}) => {
   const $ui = useRef();
   useEffect(() => {
     if (!$ui.current) {
@@ -36,7 +33,7 @@ const Ui = ({children, width, height}) => {
   }, [$ui, height, width]);
   return (
     <div
-      className="ui"
+      className="valent-ui"
       ref={$ui}
       style={{
         height: `${height}px`,
@@ -44,29 +41,19 @@ const Ui = ({children, width, height}) => {
       }}
     >
       {children}
-      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-      <button
-        className="fullscreen"
-        onClick={() => {
-          if (screenfull.isEnabled) {
-            screenfull.toggle();
-          }
-        }}
-        type="button"
-      />
     </div>
   );
 };
 
-Ui.defaultProps = {
+ValentUi.defaultProps = {
   height: 450,
   width: 800,
 };
 
-Ui.propTypes = {
+ValentUi.propTypes = {
   children: PropTypes.node.isRequired,
   height: PropTypes.number,
   width: PropTypes.number,
 };
 
-export default Ui;
+export default ValentUi;

packages/core/src/components/valent-ui/index.scss

@@ -0,0 +1,11 @@
+.valent-ui {
+  display: inline-block;
+  left: 50%;
+  overflow: hidden;
+  position: absolute;
+  --scale: 0;
+  top: 50%;
+  transform: scale(var(--scale)) translate(-50%, -50%);
+  transform-origin: 0 0;
+  user-select: none;
+}

packages/core/src/index.js

@@ -2,6 +2,8 @@ import {gatherWithLatus} from '@latus/core';
 
 import {selfEntity} from './state';
 
+export {default as ValentUi} from './components/valent-ui';
+
 export * from './hooks';
 export * from './state';
 

packages/core/yarn.lock

@@ -5173,6 +5173,11 @@ is-directory@^0.3.1:
   resolved "http://npm.cha0sdev/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
+is-electron@^2.2.0:
+  version "2.2.0"
+  resolved "http://npm.cha0sdev/is-electron/-/is-electron-2.2.0.tgz#8943084f09e8b731b3a7a0298a7b5d56f6b7eef0"
+  integrity sha512-SpMppC2XR3YdxSzczXReBjqs2zGscWQpBIKqwXYBFic0ERaxNVgwLCHwOLZeESfdJQjX0RDvrJ1lBXX2ij+G1Q==
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "http://npm.cha0sdev/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"

packages/http/package.json

@@ -38,7 +38,6 @@
     "dotenv": "8.2.0",
     "electron": "^11.1.1",
     "history": "^4.7.2",
-    "is-electron": "^2.2.0",
     "pixi.js-legacy": "^5.3.7",
     "react-hot-loader": "4.13.0",
     "react-router": "^5.2.0",

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

@@ -3,7 +3,7 @@ import './index.scss';
 
 import {hot} from 'react-hot-loader';
 
-import {useIsNative} from '@humus/core';
+import {useIsNative, ValentUi} from '@humus/core';
 import {Universe} from '@humus/universe';
 import {React} from '@latus/react';
 import {ConnectedRouter} from 'connected-react-router';
@@ -17,7 +17,6 @@ import Login from '../login';
 import Play from '../play';
 import Renderer from '../renderer';
 import Title from '../title';
-import Ui from '../ui';
 
 import history from './history';
 
@@ -32,7 +31,7 @@ const Humus = () => {
     <div className="humus">
       <ConnectedRouter history={history}>
         <Renderer />
-        <Ui width={WIDTH} height={HEIGHT}>
+        <ValentUi width={WIDTH} height={HEIGHT}>
           <Switch>
             <Route path="/login">
               {isLoggedIn ? <Redirect to="/title" /> : Login}
@@ -41,7 +40,7 @@ const Humus = () => {
             <Route path={['/universe/:uuid', '/universe']} component={Universe} />
             {isNative ? <Route path="/title"><Title /></Route> : <Redirect to="/universe" />}
           </Switch>
-        </Ui>
+        </ValentUi>
         <Route exact path="/">
           <Redirect to="/title" />
         </Route>

packages/http/src/components/ui/index.scss

@@ -1,24 +0,0 @@
-.ui {
-  display: inline-block;
-  left: 50%;
-  overflow: hidden;
-  position: absolute;
-  --scale: 0;
-  top: 50%;
-  transform: scale(var(--scale)) translate(-50%, -50%);
-  transform-origin: 0 0;
-  user-select: none;
-}
-
-.fullscreen {
-  background-color: transparent;
-  background-image: url('./arrow-inout.png');
-  background-size: contain;
-  border: none;
-  font-size: 3em;
-  height: 64px;
-  position: absolute;
-  right: 16px;
-  top: 16px;
-  width: 64px;
-}

packages/http/yarn.lock

@@ -5822,11 +5822,6 @@ is-directory@^0.3.1:
   resolved "http://npm.cha0sdev/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
-is-electron@^2.2.0:
-  version "2.2.0"
-  resolved "http://npm.cha0sdev/is-electron/-/is-electron-2.2.0.tgz#8943084f09e8b731b3a7a0298a7b5d56f6b7eef0"
-  integrity sha512-SpMppC2XR3YdxSzczXReBjqs2zGscWQpBIKqwXYBFic0ERaxNVgwLCHwOLZeESfdJQjX0RDvrJ1lBXX2ij+G1Q==
-
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "http://npm.cha0sdev/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"