From 8c114878928e4d9dc0066c7bf894eed4882c204b Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Thu, 24 Mar 2022 19:47:11 -0500
Subject: [PATCH] feat: virtual gamepad

---
 packages/app/package.json                     |  4 +-
 .../app/play/controller/buttons/button.jsx    | 29 ++++++++++++++
 .../controller/buttons/button.module.scss     | 12 ++++++
 .../app/play/controller/buttons/index.jsx     | 38 +++++++++++++++++++
 .../play/controller/buttons/index.module.scss |  3 ++
 .../components/app/play/controller/index.jsx  | 25 ++++++++++++
 .../app/play/controller/index.module.scss     |  9 +++++
 .../app/play/controller/joystick.jsx          | 33 ++++++++++++++++
 .../app/play/controller/joystick.module.scss  | 13 +++++++
 .../app/src/components/app/play/index.jsx     | 27 +++++++++++--
 .../src/components/app/play/index.module.scss |  4 ++
 .../app/src/components/app/play/ui/index.jsx  |  8 +---
 .../components/app/play/ui/index.module.scss  |  5 +++
 13 files changed, 200 insertions(+), 10 deletions(-)
 create mode 100644 packages/app/src/components/app/play/controller/buttons/button.jsx
 create mode 100644 packages/app/src/components/app/play/controller/buttons/button.module.scss
 create mode 100644 packages/app/src/components/app/play/controller/buttons/index.jsx
 create mode 100644 packages/app/src/components/app/play/controller/buttons/index.module.scss
 create mode 100644 packages/app/src/components/app/play/controller/index.jsx
 create mode 100644 packages/app/src/components/app/play/controller/index.module.scss
 create mode 100644 packages/app/src/components/app/play/controller/joystick.jsx
 create mode 100644 packages/app/src/components/app/play/controller/joystick.module.scss
 create mode 100644 packages/app/src/components/app/play/index.module.scss
 create mode 100644 packages/app/src/components/app/play/ui/index.module.scss

diff --git a/packages/app/package.json b/packages/app/package.json
index 214f163..9f3293d 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -37,7 +37,9 @@
     "@flecks/redux": "^1.4.1",
     "@flecks/socket": "^1.4.1",
     "@flecks/user": "^1.4.1",
-    "@humus/inventory": "^2.0.0"
+    "@humus/inventory": "^2.0.0",
+    "fscreen": "^1.2.0",
+    "react-joystick-component": "^4.0.0"
   },
   "devDependencies": {
     "@flecks/fleck": "^1.4.1"
diff --git a/packages/app/src/components/app/play/controller/buttons/button.jsx b/packages/app/src/components/app/play/controller/buttons/button.jsx
new file mode 100644
index 0000000..8bb4193
--- /dev/null
+++ b/packages/app/src/components/app/play/controller/buttons/button.jsx
@@ -0,0 +1,29 @@
+import {PropTypes, React} from '@flecks/react';
+
+import styles from './button.module.scss';
+
+function Button({down, up}) {
+  return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    <button
+      className={styles.button}
+      onPointerDown={down}
+      onPointerUp={up}
+      type="button"
+    />
+  );
+}
+
+Button.defaultProps = {
+  down: () => {},
+  up: () => {},
+};
+
+Button.displayName = 'Button';
+
+Button.propTypes = {
+  down: PropTypes.func,
+  up: PropTypes.func,
+};
+
+export default Button;
diff --git a/packages/app/src/components/app/play/controller/buttons/button.module.scss b/packages/app/src/components/app/play/controller/buttons/button.module.scss
new file mode 100644
index 0000000..f1a445a
--- /dev/null
+++ b/packages/app/src/components/app/play/controller/buttons/button.module.scss
@@ -0,0 +1,12 @@
+.button {
+  background: radial-gradient(rgb(92, 113, 175) 30%, rgb(61, 89, 171)) !important;
+  border: 0.25rem solid rgb(0, 0, 51);
+  border-radius: 50px;
+  height: 5rem;
+  margin: 0 1.5rem;
+  opacity: 0.5;
+  width: 5rem;
+  &:hover {
+    background: radial-gradient(rgb(113, 129, 175) 30%, rgb(61, 89, 171)) !important;
+  }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/app/play/controller/buttons/index.jsx b/packages/app/src/components/app/play/controller/buttons/index.jsx
new file mode 100644
index 0000000..6b798b3
--- /dev/null
+++ b/packages/app/src/components/app/play/controller/buttons/index.jsx
@@ -0,0 +1,38 @@
+import {PropTypes, React} from '@flecks/react';
+
+import Button from './button';
+import styles from './index.module.scss';
+
+function Buttons({inputNormalizer}) {
+  return (
+    <div className={styles.buttons}>
+      <Button
+        down={() => {
+          inputNormalizer.onButtonPress({index: 0});
+        }}
+        up={() => {
+          inputNormalizer.onButtonRelease({index: 0});
+        }}
+      />
+      <Button
+        down={() => {
+          inputNormalizer.onButtonPress({index: 1});
+        }}
+        up={() => {
+          inputNormalizer.onButtonRelease({index: 1});
+        }}
+      />
+    </div>
+  );
+}
+
+Buttons.defaultProps = {};
+
+Buttons.displayName = 'Buttons';
+
+Buttons.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  inputNormalizer: PropTypes.any.isRequired,
+};
+
+export default Buttons;
diff --git a/packages/app/src/components/app/play/controller/buttons/index.module.scss b/packages/app/src/components/app/play/controller/buttons/index.module.scss
new file mode 100644
index 0000000..d9c88cf
--- /dev/null
+++ b/packages/app/src/components/app/play/controller/buttons/index.module.scss
@@ -0,0 +1,3 @@
+.buttons {
+  display: flex;
+}
diff --git a/packages/app/src/components/app/play/controller/index.jsx b/packages/app/src/components/app/play/controller/index.jsx
new file mode 100644
index 0000000..eeea536
--- /dev/null
+++ b/packages/app/src/components/app/play/controller/index.jsx
@@ -0,0 +1,25 @@
+import {PropTypes, React} from '@flecks/react';
+
+import Buttons from './buttons';
+import styles from './index.module.scss';
+import Joystick from './joystick';
+
+function Controller({inputNormalizer}) {
+  return (
+    <div className={styles.controller}>
+      <Joystick inputNormalizer={inputNormalizer} />
+      <Buttons inputNormalizer={inputNormalizer} />
+    </div>
+  );
+}
+
+Controller.defaultProps = {};
+
+Controller.displayName = 'Controller';
+
+Controller.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  inputNormalizer: PropTypes.any.isRequired,
+};
+
+export default Controller;
diff --git a/packages/app/src/components/app/play/controller/index.module.scss b/packages/app/src/components/app/play/controller/index.module.scss
new file mode 100644
index 0000000..3a15f2c
--- /dev/null
+++ b/packages/app/src/components/app/play/controller/index.module.scss
@@ -0,0 +1,9 @@
+.controller {
+  align-items: center;
+  bottom: 20%;
+  display: flex;
+  justify-content: space-between;
+  left: 10%;
+  position: absolute;
+  width: 80%;
+}
diff --git a/packages/app/src/components/app/play/controller/joystick.jsx b/packages/app/src/components/app/play/controller/joystick.jsx
new file mode 100644
index 0000000..260fc3b
--- /dev/null
+++ b/packages/app/src/components/app/play/controller/joystick.jsx
@@ -0,0 +1,33 @@
+import {PropTypes, React} from '@flecks/react';
+import {Joystick as JoystickComponent} from 'react-joystick-component';
+
+import styles from './joystick.module.scss';
+
+function Joystick({inputNormalizer}) {
+  return (
+    <div className={styles.joystick}>
+      <JoystickComponent
+        move={(event) => {
+          inputNormalizer.onAxisChange({index: 0, value: event.x / 50});
+          inputNormalizer.onAxisChange({index: 1, value: event.y / -50});
+        }}
+        size={100}
+        stop={() => {
+          inputNormalizer.onAxisChange({index: 0, value: 0});
+          inputNormalizer.onAxisChange({index: 1, value: 0});
+        }}
+      />
+    </div>
+  );
+}
+
+Joystick.defaultProps = {};
+
+Joystick.displayName = 'Joystick';
+
+Joystick.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  inputNormalizer: PropTypes.any.isRequired,
+};
+
+export default Joystick;
diff --git a/packages/app/src/components/app/play/controller/joystick.module.scss b/packages/app/src/components/app/play/controller/joystick.module.scss
new file mode 100644
index 0000000..0103cb3
--- /dev/null
+++ b/packages/app/src/components/app/play/controller/joystick.module.scss
@@ -0,0 +1,13 @@
+.joystick {
+  opacity: 0.5;
+  transform: scale(calc(1 / var(--scale)));
+  > div {
+    background: radial-gradient(rgb(0, 0, 21) 20%, rgb(0, 0, 51)) !important;
+    > button {
+      background: radial-gradient(rgb(92, 113, 175) 30%, rgb(61, 89, 171)) !important;
+      &:hover {
+        background: radial-gradient(rgb(113, 129, 175) 30%, rgb(61, 89, 171)) !important;
+      }
+    }
+  }
+}
diff --git a/packages/app/src/components/app/play/index.jsx b/packages/app/src/components/app/play/index.jsx
index 4e8618d..b31f61d 100644
--- a/packages/app/src/components/app/play/index.jsx
+++ b/packages/app/src/components/app/play/index.jsx
@@ -2,23 +2,34 @@ import {InputNormalizer} from '@avocado/input/client';
 import {
   React,
   useEffect,
+  useState,
 } from '@flecks/react';
 import {push} from '@flecks/react/router';
 import {useDispatch} from '@flecks/redux';
 import {useSocket} from '@flecks/socket';
 import {setSelfEntity} from '@humus/app/state';
+import fscreen from 'fscreen';
 
 import {
   useSelfEntity,
 } from '../../../hooks';
 
+import styles from './index.module.scss';
+import Controller from './controller';
 import Renderable from './renderable';
 import Ui from './ui';
 
+const focus = (element) => {
+  element.focus();
+};
+
+const inputNormalizer = new InputNormalizer();
+
 function Play() {
   const dispatch = useDispatch();
   const selfEntity = useSelfEntity();
   const socket = useSocket();
+  const [controllerVisible, setControllerVisible] = useState(false);
   // Join.
   useEffect(() => {
     const join = async () => {
@@ -42,7 +53,6 @@ function Play() {
     if (!selfEntity) {
       return undefined;
     }
-    const inputNormalizer = new InputNormalizer();
     inputNormalizer.listen(window.document.body);
     selfEntity.listenForInput(inputNormalizer);
     selfEntity.actionRegistry.setTransformerFor('UseItem', (type, value) => {
@@ -73,10 +83,21 @@ function Play() {
     }
   }, [selfEntity]);
   return (
-    <>
+    <div
+      className={styles.play}
+      onTouchStart={async () => {
+        await fscreen.requestFullscreen(window.document.body);
+        setControllerVisible(true);
+      }}
+      ref={focus}
+      role="presentation"
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex="0"
+    >
       <Renderable />
       <Ui />
-    </>
+      {controllerVisible && <Controller inputNormalizer={inputNormalizer} />}
+    </div>
   );
 }
 
diff --git a/packages/app/src/components/app/play/index.module.scss b/packages/app/src/components/app/play/index.module.scss
new file mode 100644
index 0000000..f5e272d
--- /dev/null
+++ b/packages/app/src/components/app/play/index.module.scss
@@ -0,0 +1,4 @@
+.play {
+  height: 100%;
+  width: 100%;
+}
diff --git a/packages/app/src/components/app/play/ui/index.jsx b/packages/app/src/components/app/play/ui/index.jsx
index 24412ec..4ea58f0 100644
--- a/packages/app/src/components/app/play/ui/index.jsx
+++ b/packages/app/src/components/app/play/ui/index.jsx
@@ -11,18 +11,14 @@ import {
   useSelfEntity,
 } from '../../../../hooks';
 import Hotbar from './hotbar';
-
-const focus = (element) => {
-  element.focus();
-};
+import styles from './index.module.scss';
 
 const PlayUi = () => {
   const {config: {'@humus/app': {resolution}}} = useFlecks();
   const room = useRoom();
   const selfEntity = useSelfEntity();
   return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    <div ref={focus} tabIndex="0">
+    <div className={styles.ui}>
       <RoomUi
         domScale={Vector.div(resolution, usePropertyChange(selfEntity?.camera, 'viewSize', [0, 0]))}
         position={Vector.scale(usePropertyChange(selfEntity?.camera, 'realOffset', [0, 0]), -1)}
diff --git a/packages/app/src/components/app/play/ui/index.module.scss b/packages/app/src/components/app/play/ui/index.module.scss
new file mode 100644
index 0000000..2f3d3d1
--- /dev/null
+++ b/packages/app/src/components/app/play/ui/index.module.scss
@@ -0,0 +1,5 @@
+.ui {
+  height: 100%;
+  position: relative;
+  width: 100%;
+}