diff --git a/src/components/ik-controller.js b/src/components/ik-controller.js index 1bf9e71de656aa9b4972cdf59e534af78599493b..e7c9260f80b233f314f483c42b94f9177baded99 100644 --- a/src/components/ik-controller.js +++ b/src/components/ik-controller.js @@ -169,7 +169,7 @@ AFRAME.registerComponent("ik-controller", { cameraYRotation.x = 0; cameraYRotation.z = 0; cameraYQuaternion.setFromEuler(cameraYRotation); - Quaternion.slerp(hips.quaternion, cameraYQuaternion, hips.quaternion, this.data.rotationSpeed * dt / 1000); + Quaternion.slerp(hips.quaternion, cameraYQuaternion, hips.quaternion, (this.data.rotationSpeed * dt) / 1000); // Take the head orientation computed from the hmd, remove the Y rotation already applied to it by the hips, // and apply it to the head diff --git a/src/components/media-loader.js b/src/components/media-loader.js index adae71d23a1cd47af037d6f76495ffef31104b91..ef8ea23cc33f5fb077bddf8ce6d0f269b6d04a36 100644 --- a/src/components/media-loader.js +++ b/src/components/media-loader.js @@ -24,9 +24,9 @@ AFRAME.registerComponent("media-loader", { const center = new THREE.Vector3(); const { min, max } = box; const halfExtents = { - x: Math.abs(min.x - max.x) / 2 * scaleCoefficient, - y: Math.abs(min.y - max.y) / 2 * scaleCoefficient, - z: Math.abs(min.z - max.z) / 2 * scaleCoefficient + x: (Math.abs(min.x - max.x) / 2) * scaleCoefficient, + y: (Math.abs(min.y - max.y) / 2) * scaleCoefficient, + z: (Math.abs(min.z - max.z) / 2) * scaleCoefficient }; center.addVectors(min, max).multiplyScalar(0.5 * scaleCoefficient); mesh.position.sub(center); diff --git a/src/components/water.js b/src/components/water.js index 52d9c01da3b086aa0bccecc4dd9a6074d43be1c9..7e35afcc07e8ce4300c9ca28ad9bff57a9754814 100644 --- a/src/components/water.js +++ b/src/components/water.js @@ -222,7 +222,7 @@ AFRAME.registerComponent("water", { }, tick(time) { - this.water.material.uniforms.time.value = time / 1000 * this.data.speed; + this.water.material.uniforms.time.value = (time / 1000) * this.data.speed; }, remove() { diff --git a/src/react-components/avatar-selector.js b/src/react-components/avatar-selector.js index 4915202400f8a0db66a593725175b445f4945e47..2949ecde7d777171b869548208dd7a245ea58efe 100644 --- a/src/react-components/avatar-selector.js +++ b/src/react-components/avatar-selector.js @@ -18,7 +18,7 @@ class AvatarSelector extends Component { static getAvatarIndex = (props, offset = 0) => { const currAvatarIndex = props.avatars.findIndex(avatar => avatar.id === props.avatarId); const numAvatars = props.avatars.length; - return ((currAvatarIndex + offset) % numAvatars + numAvatars) % numAvatars; + return (((currAvatarIndex + offset) % numAvatars) + numAvatars) % numAvatars; }; static nextAvatarIndex = props => AvatarSelector.getAvatarIndex(props, -1); static previousAvatarIndex = props => AvatarSelector.getAvatarIndex(props, 1); @@ -52,7 +52,7 @@ class AvatarSelector extends Component { ]; } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { // Push new avatar indices onto the array if necessary. this.setState(state => { const numAvatars = nextProps.avatars.length; @@ -128,7 +128,7 @@ class AvatarSelector extends Component { )); const avatarData = this.state.avatarIndices.map(i => [this.props.avatars[i], i]); const avatarEntities = avatarData.map(([avatar, i]) => ( - <a-entity key={avatar.id} rotation={`0 ${360 * -i / this.props.avatars.length} 0`}> + <a-entity key={avatar.id} rotation={`0 ${(360 * -i) / this.props.avatars.length} 0`}> <a-entity position="0 0 5" gltf-model-plus={`src: #${avatar.id}`} inflate="true"> <template data-selector=".RootScene"> <a-entity animation-mixer="" /> @@ -144,7 +144,7 @@ class AvatarSelector extends Component { </a-entity> )); - const rotationFromIndex = index => (360 * index / this.props.avatars.length + 180) % 360; + const rotationFromIndex = index => ((360 * index) / this.props.avatars.length + 180) % 360; const initialRotation = rotationFromIndex(this.state.initialAvatarIndex); const toRotation = rotationFromIndex(this.getAvatarIndex()); diff --git a/src/react-components/entry-buttons.js b/src/react-components/entry-buttons.js index d2bddfd908e9a40044d2349bd0729e38a7a25caf..132361cbe1800ee14543f6da4047c171745d66ac 100644 --- a/src/react-components/entry-buttons.js +++ b/src/react-components/entry-buttons.js @@ -105,7 +105,9 @@ export const DeviceEntryButton = props => { entryButtonProps.subtitle = entryButtonProps.isInHMD ? "entry.device-subtitle-vr" - : AFRAME.utils.device.isMobile() ? "entry.device-subtitle-mobile" : "entry.device-subtitle-desktop"; + : AFRAME.utils.device.isMobile() + ? "entry.device-subtitle-mobile" + : "entry.device-subtitle-desktop"; return <EntryButton {...entryButtonProps} />; }; diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js index b3aec47ab2d568180036d1c9a1bd932de0c46a25..c005800d43f9a8a5411a447c1b53925609438d30 100644 --- a/src/react-components/hub-create-panel.js +++ b/src/react-components/hub-create-panel.js @@ -116,7 +116,7 @@ class HubCreatePanel extends Component { setToEnvironmentOffset = async offset => { const numEnvs = this.props.environments.length; - const environmentIndex = ((this.state.environmentIndex + offset) % numEnvs + numEnvs) % numEnvs; + const environmentIndex = (((this.state.environmentIndex + offset) % numEnvs) + numEnvs) % numEnvs; const environmentThumbnail = this._getEnvironmentThumbnail(environmentIndex); await this._preloadImage(environmentThumbnail.srcset); diff --git a/src/react-components/link-root.js b/src/react-components/link-root.js index 66ab987b6493a0cb99ab0742eb966d074ffe5ad5..84b7101637357253da095a0c69bd0f20382318e4 100644 --- a/src/react-components/link-root.js +++ b/src/react-components/link-root.js @@ -25,7 +25,7 @@ class LinkRoot extends Component { failedAtLeastOnce: false }; - componentWillMount = () => { + componentDidMount = () => { document.addEventListener("keydown", this.handleKeyDown); }; diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index 0ab4bf813f1872564c9891399f8c3c42a7268277..b2fab4b9989c9c75ba5b3020e36756a09787c67d 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -324,7 +324,7 @@ class UIRoot extends Component { mediaSource: "screen", // Work around BMO 1449832 by calculating the width. This will break for multi monitors if you share anything // other than your current monitor that has a different aspect ratio. - width: 720 * screen.width / screen.height, + width: 720 * (screen.width / screen.height), height: 720, frameRate: 30 } diff --git a/src/utils/mouse-events-handler.js b/src/utils/mouse-events-handler.js index b5bdfc33ccd20dca44fe0e98850891895afffa87..0fdb330c6558e397e395908e4b0c09fa8c15d1f0 100644 --- a/src/utils/mouse-events-handler.js +++ b/src/utils/mouse-events-handler.js @@ -87,7 +87,7 @@ export default class MouseEventsHandler { this.look(e); } - this.cursor.moveCursor(e.clientX / window.innerWidth * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1); + this.cursor.moveCursor((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1); } onMouseUp(e) { diff --git a/src/utils/touch-events-handler.js b/src/utils/touch-events-handler.js index 5b6341cfc57f85bc7520c578f3182c2fa83c11bf..0cc392886162fbdfd1a6f32364f6c98275a2c4ec 100644 --- a/src/utils/touch-events-handler.js +++ b/src/utils/touch-events-handler.js @@ -50,7 +50,9 @@ export default class TouchEventsHandler { return; } if (!this.touchReservedForCursor) { - this.cursor.moveCursor(touch.clientX / window.innerWidth * 2 - 1, -(touch.clientY / window.innerHeight) * 2 + 1); + const targetX = (touch.clientX / window.innerWidth) * 2 - 1; + const targetY = -(touch.clientY / window.innerHeight) * 2 + 1; + this.cursor.moveCursor(targetX, targetY); this.cursor.forceCursorUpdate(); if (this.cursor.startInteraction()) { this.touchReservedForCursor = touch; @@ -71,7 +73,9 @@ export default class TouchEventsHandler { singleTouchMove(touch) { if (this.touchReservedForCursor && touch.identifier === this.touchReservedForCursor.identifier) { - this.cursor.moveCursor(touch.clientX / window.innerWidth * 2 - 1, -(touch.clientY / window.innerHeight) * 2 + 1); + const targetX = (touch.clientX / window.innerWidth) * 2 - 1; + const targetY = -(touch.clientY / window.innerHeight) * 2 + 1; + this.cursor.moveCursor(targetX, targetY); return; } if (touch.clientY / window.innerHeight >= VIRTUAL_JOYSTICK_HEIGHT) return; @@ -100,7 +104,7 @@ export default class TouchEventsHandler { if (touch.identifier === this.touchReservedForLookControls.identifier) { if (!this.touchReservedForCursor) { this.cursor.moveCursor( - touch.clientX / window.innerWidth * 2 - 1, + (touch.clientX / window.innerWidth) * 2 - 1, -(touch.clientY / window.innerHeight) * 2 + 1 ); } diff --git a/src/utils/vr-caps-detect.js b/src/utils/vr-caps-detect.js index baed879b07a360c1e5d095b760912ff83ed3edfc..3cea1c2e3029fa3354eaa3d07ecaba82b0438580 100644 --- a/src/utils/vr-caps-detect.js +++ b/src/utils/vr-caps-detect.js @@ -59,12 +59,16 @@ export async function getAvailableVREntryTypes() { const isUIWebView = typeof navigator.mediaDevices === "undefined"; const safari = isIDevice - ? !isUIWebView ? VR_DEVICE_AVAILABILITY.yes : VR_DEVICE_AVAILABILITY.maybe + ? !isUIWebView + ? VR_DEVICE_AVAILABILITY.yes + : VR_DEVICE_AVAILABILITY.maybe : VR_DEVICE_AVAILABILITY.no; const screen = isInHMD ? VR_DEVICE_AVAILABILITY.no - : isIDevice && isUIWebView ? VR_DEVICE_AVAILABILITY.maybe : VR_DEVICE_AVAILABILITY.yes; + : isIDevice && isUIWebView + ? VR_DEVICE_AVAILABILITY.maybe + : VR_DEVICE_AVAILABILITY.yes; let generic = AFRAME.utils.device.isMobile() ? VR_DEVICE_AVAILABILITY.no : VR_DEVICE_AVAILABILITY.maybe; let cardboard = VR_DEVICE_AVAILABILITY.no;