@ndmspc/ndmvr 0.20220401.0 → 0.20220401.1

package/dist/index.js

@@ -4,6 +4,8 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var rxjs = require('rxjs');
 var AFRAME$1 = _interopDefault(require('aframe'));
+var socket_ioClient = require('socket.io-client');
+var THREE = require('three');
 
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
@@ -3266,6 +3268,103 @@ function NdmVrLaboratory() {
   }));
 }
 
+var Controller = function Controller(_ref) {
+  var socket = _ref.socket;
+
+  var _useState = React.useState(0),
+      time = _useState[0],
+      setTime = _useState[1];
+
+  React.useEffect(function () {
+    var camera = document.getElementById('camera');
+    var absolutePosition = new THREE.Vector3();
+    var rotationQuaternion = new THREE.Quaternion();
+    camera.object3D.getWorldPosition(absolutePosition);
+    var id = socket.id;
+    var interval = setInterval(function () {
+      camera.object3D.getWorldPosition(absolutePosition);
+      camera.object3D.getWorldQuaternion(rotationQuaternion);
+      socket.emit('move', {
+        id: id,
+        position: absolutePosition.toArray(),
+        rotation: rotationQuaternion.toArray()
+      });
+      setTime(function (prevTime) {
+        return prevTime + 1;
+      });
+    }, 10);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [time]);
+  return /*#__PURE__*/React__default.createElement("a-entity", null);
+};
+
+var UserWrapper = function UserWrapper(_ref) {
+  var position = _ref.position,
+      rotation = _ref.rotation,
+      id = _ref.id;
+  React.useEffect(function () {
+    var quaternionToApply = new THREE.Quaternion().fromArray(rotation);
+    var user = document.getElementById(id).object3D;
+    user.setRotationFromQuaternion(quaternionToApply);
+  }, [rotation]);
+  return /*#__PURE__*/React__default.createElement("a-box", {
+    position: position,
+    id: id,
+    color: "#4CC3D9"
+  });
+};
+
+var NetworkingComponent = function NetworkingComponent(_ref) {
+  var socketClient = _ref.socketClient,
+      clients = _ref.clients;
+  return /*#__PURE__*/React__default.createElement("a-entity", null, /*#__PURE__*/React__default.createElement(Controller, {
+    socket: socketClient
+  }), Object.keys(clients).filter(function (clientKey) {
+    return clientKey !== socketClient.id;
+  }).map(function (client) {
+    var _clients$client = clients[client],
+        position = _clients$client.position,
+        rotation = _clients$client.rotation;
+    var positionParse = position.join(' ');
+    return /*#__PURE__*/React__default.createElement(UserWrapper, {
+      key: client,
+      id: client,
+      position: positionParse,
+      rotation: rotation
+    });
+  }));
+};
+
+var NdmVrShared = function NdmVrShared() {
+  var _useState = React.useState(0),
+      socketClient = _useState[0],
+      setSocketClient = _useState[1];
+
+  var _useState2 = React.useState({}),
+      clients = _useState2[0],
+      setClients = _useState2[1];
+
+  React.useEffect(function () {
+    setSocketClient(socket_ioClient.io.connect('http://localhost:3001'));
+    return function () {
+      if (socketClient) socketClient.disconnect();
+    };
+  }, []);
+  React.useEffect(function () {
+    if (socketClient) {
+      socketClient.on('move', function (clients) {
+        setClients(clients);
+      });
+    }
+  }, [socketClient]);
+  return socketClient && /*#__PURE__*/React__default.createElement(NetworkingComponent, {
+    socketClient: socketClient,
+    clients: clients
+  });
+};
+
 var NdmVrScene = function NdmVrScene(_ref) {
   var data = _ref.data,
       info = _ref.info;
@@ -3287,7 +3386,7 @@ var NdmVrScene = function NdmVrScene(_ref) {
     projections: data.projections,
     range: data.range,
     theme: info.theme
-  }));
+  }), /*#__PURE__*/React__default.createElement(NdmVrShared, null));
 };
 
 var EntityBuilder = /*#__PURE__*/function () {