chore: lint

app/package.json

@@ -39,6 +39,7 @@
     "@latus/user": "2.0.0",
     "dotenv": "8.2.0",
     "pixi.js": "^5.3.7",
+    "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-hot-loader": "4.13.0"
   },

app/src/react/components/renderer.jsx

@@ -1,5 +1,5 @@
-import {Color, Renderer, Primitives} from '@avocado/graphics';
+import {Color, Primitives} from '@avocado/graphics';
-import {PixiComponent} from '@inlet/react-pixi'
+import {PixiComponent} from '@inlet/react-pixi';
 
 const primitives = new Primitives();
 primitives.drawCircle(
@@ -12,7 +12,5 @@ primitives.drawCircle(
 );
 
 export default PixiComponent('Humus', {
-  create: props => {
+  create: () => primitives.internal,
-    return primitives.internal
-  },
 });

app/src/react/components/stage.jsx

@@ -1,17 +1,30 @@
 import './stage.scss';
 
-import {Stage} from '@inlet/react-pixi'
+import {Stage as PStage} from '@inlet/react-pixi';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import Renderer from './renderer';
 
-export default ({width = 800, height = 450}) => (
+const Stage = ({width, height}) => (
   <div className="stage">
-    <Stage
+    <PStage
       width={width}
       height={height}
     >
       <Renderer />
-    </Stage>
+    </PStage>
   </div>
 );
+
+Stage.defaultProps = {
+  height: 450,
+  width: 800,
+};
+
+Stage.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+};
+
+export default Stage;

app/src/react/components/ui.jsx

@@ -1,16 +1,16 @@
 import './ui.scss';
 
+import PropTypes from 'prop-types';
 import React, {useEffect, useRef} from 'react';
 
-export default ({width = 800, height = 450}) => {
+const Ui = ({width, height}) => {
-  const RATIO = width / height;
   const $ui = useRef();
   useEffect(() => {
     if (!$ui.current) {
       return undefined;
     }
     const onResize = () => {
-      const {overflow} = window.document.documentElement.style;
+      const RATIO = width / height;
       const {innerWidth, innerHeight} = window;
       const ratio = innerWidth / innerHeight;
       let scale;
@@ -28,7 +28,7 @@ export default ({width = 800, height = 450}) => {
     window.addEventListener('resize', onResize);
     onResize();
     return () => window.removeEventListener('resize', onResize);
-  }, $ui);
+  }, [$ui, height, width]);
   return (
     <div
       className="ui"
@@ -38,7 +38,19 @@ export default ({width = 800, height = 450}) => {
         width: `${width}px`,
       }}
     >
-      <button>Login</button>
+      <button type="button">Login</button>
     </div>
   );
 };
+
+Ui.defaultProps = {
+  height: 450,
+  width: 800,
+};
+
+Ui.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+};
+
+export default Ui;