diff --git a/packages/client/src/images/screen_rotation.svg b/packages/client/src/images/screen_rotation.svg
new file mode 100644
index 0000000..25d14ec
--- /dev/null
+++ b/packages/client/src/images/screen_rotation.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/client/src/scenes/GameUnity.tsx b/packages/client/src/scenes/GameUnity.tsx
index f619672..f446ba4 100644
--- a/packages/client/src/scenes/GameUnity.tsx
+++ b/packages/client/src/scenes/GameUnity.tsx
@@ -3,9 +3,13 @@ import Unity, { UnityContext } from "react-unity-webgl";
import fscreen from 'fscreen'
import { Button } from '../components';
import GameSceneContainer from '../components/GameSceneContainer';
-import { DEFAULT_GAME_DIMENSION, GAME_DETAILS, ORIENTATION_ANY } from '../constants'
+import { DEFAULT_GAME_DIMENSION, GAME_DETAILS,
+ ORIENTATION_ANY, ORIENTATION_PORTRAIT, ORIENTATION_LANDSCAPE } from '../constants'
import { Constants } from '@game3js/common';
import { makeNewGameSession, getGameNo, getGameSessionId, updateSessionScore, updateGameNo, createSessionId } from '../helpers/database';
+import {ReactComponent as ScreeRotateIcon} from "../images/screen_rotation.svg";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExpand } from '@fortawesome/free-solid-svg-icons'
const StyledBoxStyle = {
position: 'relative',
@@ -44,17 +48,19 @@ export class GameUnity extends React.Component {
screen.msLockOrientation;
window.addEventListener('resize', this.handleResize, false);
- window.addEventListener('orientationchange', this.handleResize, false);
+ window.addEventListener('orientationchange', this.handleOrienationChange, false);
this.preInitialize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize, false);
- window.removeEventListener('orientationchange', this.handleResize, false);
+ window.removeEventListener('orientationchange', this.handleOrienationChange, false);
}
unityElement: any = null
+ orientationLockSupported: boolean = false
+ neededOrientation: string = ORIENTATION_ANY
constructor(props) {
super(props);
@@ -77,16 +83,60 @@ export class GameUnity extends React.Component {
gameId: '',
width: '',
height: '',
- neededOrientation: ORIENTATION_ANY,
pseudoFullscreen: false,
+ orientationOk: true,
};
+ this.orientationLockSupported = false;
this.unityElement = React.createRef();
this.initializeUnity();
this.preparePlayButton();
}
+ handleOrienationChange = () => {
+ let orientationOk = false
+ // can be locked no need to ask user
+ if (!orientationOk && this.orientationLockSupported) {
+ orientationOk = true
+ }
+
+ const screen = window.screen as any
+ let orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation
+ || window.orientation;
+ if (orientation === 0 || orientation === 180) {
+ orientation = ORIENTATION_PORTRAIT
+ }
+ if (orientation === 90 || orientation === -90) {
+ orientation = ORIENTATION_LANDSCAPE
+ }
+
+ // can't check it, nothing we can do, allow play
+ if (!orientationOk && orientation === undefined) {
+ orientationOk = true
+ }
+
+ let orientationVal = '';
+ if (!orientationOk) {
+ [orientationVal] = orientation.split('-');
+ // unexpected value, nothing we can do, allow play
+ if (orientationVal !== ORIENTATION_PORTRAIT && orientationVal !== ORIENTATION_LANDSCAPE) {
+ orientationOk = true
+ }
+ }
+
+ // actual check
+ if (!orientationOk) {
+ orientationOk = this.neededOrientation === ORIENTATION_ANY
+ || orientationVal === this.neededOrientation
+ }
+
+ this.setState({
+ orientationOk
+ })
+ this.handleResize();
+ }
+
handleResize = () => {
const widthToHeight = DEFAULT_GAME_DIMENSION.width / DEFAULT_GAME_DIMENSION.height;
let newWidth = window.innerWidth;
@@ -148,9 +198,13 @@ export class GameUnity extends React.Component {
if (!gameDetails) {
return
}
- this.setState({
- neededOrientation: gameDetails.screenOrientation
- })
+
+ const screen = window.screen as any;
+ this.orientationLockSupported = !!((screen.orientation && typeof screen.orientation.lock === 'function')
+ || screen.lockOrientationUniversal);
+
+ this.neededOrientation = gameDetails.screenOrientation;
+ this.handleOrienationChange();
}
initializeGame = async (playerAddress, tournamentId) => {
@@ -416,7 +470,7 @@ export class GameUnity extends React.Component {
}
onClickFullscreen = () => {
- const { pseudoFullscreen, neededOrientation } = this.state
+ const { pseudoFullscreen } = this.state
if (fscreen.fullscreenEnabled) {
if (fscreen.fullscreenElement) {
fscreen.exitFullscreen();
@@ -429,8 +483,8 @@ export class GameUnity extends React.Component {
}, this.handleResize)
}
- if (neededOrientation !== ORIENTATION_ANY) {
- this.lockOrientation(neededOrientation);
+ if (this.neededOrientation !== ORIENTATION_ANY) {
+ this.lockOrientation(this.neededOrientation);
}
}
@@ -457,7 +511,7 @@ export class GameUnity extends React.Component {
render() {
const { isGameRunning, gameReady, playBtnText, progression,
- width, height, pseudoFullscreen } = this.state;
+ width, height, pseudoFullscreen, orientationOk } = this.state;
const { tournamentId } = this.props;
let canvasWidth = (window.innerWidth <= 950 ? `${width}px` : "100%");
@@ -472,7 +526,7 @@ export class GameUnity extends React.Component {
+ {!orientationOk && (
+
+
+
+ )}
>
}