+
+
+
+
+
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..31a6048
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,95 @@
+body {
+ margin: 0;
+ overflow: hidden;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+a {
+ text-decoration: none;
+ color: #2E86AB;
+}
+
+#notification_bar {
+ position: absolute;
+ top:20px;
+ right: 0;
+
+ height: 80px;
+ width: 0;
+ /*width: 320px; 320 is the expended value, when showed by Jquery*/
+ background-color: #1C232A;
+ opacity: 0; /* Set to 0.9 when showed */
+ z-index: 100;
+ border-left: 24px solid #2E86AB;
+}
+
+#notification_bar p{
+ margin: 6px;
+ color: #EAEAEA;
+ font-size: 1em;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+#picture_zoom{
+ position: absolute;
+ top: 10%;
+ bottom: 10%;
+ left: 10%;
+ right: 10%;
+ border: 4px solid black;
+ z-index: 100;
+
+}
+#picture_zoom img{
+ width: 100%;
+ height: 100%;
+}
+
+@media only screen and (min-width: 1000px) {
+ #movement_keys{
+ display: none;/*Those keys should be visible only on phones*/
+ }
+}
+
+#movement_keys{
+ z-index: 101;
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ width: 170px;
+ height: 115px;
+}
+
+#movement_keys div{
+ width: 50px;
+ height: 50px;
+ z-index: 102;
+ background-color: #2E86AB;
+}
+
+#key_up{
+ position: absolute;
+ top:5px;
+ left:50%;
+ transform: translateX(-50%);
+}
+
+#key_left{
+ position: absolute;
+ top:60px;
+ left:5px;
+}
+#key_down{
+ position: absolute;
+ top:60px;
+ left:60px;
+}
+#key_right{
+ position: absolute;
+ top:60px;
+ right:5px;
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 57b4dde..0d1a3d9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -30,6 +30,8 @@ addAssetsOnScene(scene).then(assets => {
// Events to listen keyboard inputs
document.addEventListener('keydown', PlayerMovement.handleKeyDown);
document.addEventListener('keyup', PlayerMovement.handleKeyUp);
+ PlayerMovement.initPhoneMovement();
+
/* --------------------- */
/* | ANIMATIONS | */
diff --git a/src/utils/playerMovement.js b/src/utils/playerMovement.js
index b2d55d9..3406b59 100644
--- a/src/utils/playerMovement.js
+++ b/src/utils/playerMovement.js
@@ -1,5 +1,6 @@
import * as THREE from 'three';
import * as MathUtils from 'three/src/math/MathUtils.js';
+import $ from 'jquery';
const PLAYER_SPEED = 0.015;
const ROTATION_SPEED = 0.05; // Vitesse de rotation
@@ -45,6 +46,33 @@ export function handleKeyDown(event) {
}
}
+ export function initPhoneMovement() {
+ // Used to define some functions that will handle movement on phones
+ $('#key_up').on('mouseenter', function() {
+ playerDirection.y = 1; // Button pressed, going up
+ }).on('mouseleave', function() {
+ playerDirection.y = 0; // Button released, stop
+ });
+
+ $('#key_down').on('mouseenter', function() {
+ playerDirection.y = -1;
+ }).on('mouseleave', function() {
+ playerDirection.y = 0;
+ });
+
+ $('#key_left').on('mouseenter', function() {
+ playerDirection.x = -1;
+ }).on('mouseleave', function() {
+ playerDirection.x = 0;
+ });
+
+ $('#key_right').on('mouseenter', function() {
+ playerDirection.x = 1;
+ }).on('mouseleave', function() {
+ playerDirection.x = 0;
+ });
+}
+
export function updatePlayerPositionAnimation(player, camera, scene) {
/* Function called in the main loop
Used to calculate the position and orientation of the player