feat: ui res

latus.yml

@@ -41,11 +41,7 @@
   ],
   port: 32350,
 }
-'@latus/react': {
+'@latus/react': {}
-  providers: [
-    '@latus/redux/client',
-  ],
-}
 '@latus/redis': {}
 '@latus/redis/server': {
   docker: 'cached',

packages/core/src/client.js

@@ -2,10 +2,15 @@ import {connectRouter, routerMiddleware} from 'connected-react-router';
 
 import App from './components/app';
 import history from './components/app/history';
+import ValentUiContext from './components/valent-ui/context';
 
 export default {
   hooks: {
     '@latus/react/components': () => App,
+    '@latus/react/providers': async (latus) => [
+      ValentUiContext.Provider,
+      {value: latus.get('@humus/core.resolution')},
+    ],
     '@latus/redux/slices': () => ({
       router: connectRouter(history),
     }),

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

@@ -4,7 +4,9 @@ import './index.scss';
 import {hot} from 'react-hot-loader';
 
 // import {Universe} from '@humus/universe';
-import {React} from '@latus/react';
+import {
+  React,
+} from '@latus/react';
 import {ConnectedRouter} from 'connected-react-router';
 import {
   Redirect,
@@ -13,15 +15,13 @@ import {
 } from 'react-router-dom';
 
 import useIsNative from '../../hooks/use-is-native';
+import Ui from '../valent-ui';
 
-import Login from '../login';
+import Login from './login';
-import Title from '../title';
+import Title from './title';
 
 import history from './history';
 
-// const WIDTH = 1600;
-// const HEIGHT = 900;
-
 const isLoggedIn = true;
 
 const Humus = () => {
@@ -34,7 +34,9 @@ const Humus = () => {
             {isLoggedIn ? <Redirect to="/title" /> : Login}
           </Route>
           {/* <Universe width={WIDTH} height={HEIGHT} /> */}
-          {isNative ? <Route path="/title"><Title /></Route> : <Redirect to="/universe" />}
+          <Ui>
+            {isNative ? <Route path="/title"><Title /></Route> : <Redirect to="/universe" />}
+          </Ui>
         </Switch>
         <Route exact path="/">
           <Redirect to="/title" />

packages/core/src/components/valent-ui/context.js

@@ -0,0 +1,3 @@
+import {createContext} from '@latus/react';
+
+export default createContext(undefined);

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

@@ -1,11 +1,15 @@
 import {
   PropTypes,
   React,
+  useContext,
   useEffect,
   useRef,
 } from '@latus/react';
 
-const ValentUi = ({children, width, height}) => {
+import Context from './context';
+
+const ValentUi = ({children}) => {
+  const [width, height] = useContext(Context);
   const $ui = useRef();
   useEffect(() => {
     if (!$ui.current) {
@@ -45,15 +49,8 @@ const ValentUi = ({children, width, height}) => {
   );
 };
 
-ValentUi.defaultProps = {
-  height: 450,
-  width: 800,
-};
-
 ValentUi.propTypes = {
   children: PropTypes.node.isRequired,
-  height: PropTypes.number,
-  width: PropTypes.number,
 };
 
 export default ValentUi;

packages/core/src/index.js

@@ -2,7 +2,7 @@ import {gatherWithLatus} from '@latus/core';
 
 import {selfEntity} from './state';
 
-export {default as ValentUi} from './components/valent-ui';
+export {default as Ui} from './components/valent-ui';
 
 export * from './hooks';
 export * from './state';
@@ -12,6 +12,9 @@ export default {
     '@avocado/traits/traits': gatherWithLatus(
       require.context('./traits', false, /\.js$/),
     ),
+    '@latus/core/config': () => ({
+      resolution: [1600, 900],
+    }),
     '@latus/redux/slices': () => ({
       selfEntity,
     }),

packages/universe/src/components/index.jsx

@@ -1,5 +1,5 @@
-import {ValentUi} from '@humus/core';
+import {Ui} from '@humus/core';
-import {PropTypes, React} from '@latus/react';
+import {React} from '@latus/react';
 import {
   Route,
   Switch,
@@ -9,29 +9,20 @@ import Overview from './overview';
 import PlayRenderable from './play/renderable';
 import PlayUi from './play/ui';
 
-const Universe = ({
+const Universe = () => (
-  height,
+  <Route path="/universe">
-  width,
+    <Switch>
-// eslint-disable-next-line arrow-body-style
+      <Route path="/universe/:uuid/play" component={PlayRenderable} />
-}) => {
+    </Switch>
-  return (
+    <Ui>
-    <Route path="/universe">
       <Switch>
-        <Route path="/universe/:uuid/play" component={PlayRenderable} />
+        <Route path="/universe/:uuid/play" component={PlayUi} />
+        <Route path={['/universe/:uuid', '/universe']} component={Overview} />
       </Switch>
-      <ValentUi width={width} height={height}>
+    </Ui>
-        <Switch>
+  </Route>
-          <Route path="/universe/:uuid/play" component={PlayUi} />
+);
-          <Route path={['/universe/:uuid', '/universe']} component={Overview} />
-        </Switch>
-      </ValentUi>
-    </Route>
-  );
-};
 
-Universe.propTypes = {
+Universe.propTypes = {};
-  height: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-};
 
 export default Universe;