updates and mobile controls

Author: danieledep

assets/style.css

@@ -3,7 +3,7 @@
   --heightScreen: 583px;
   --widthScreen: 800px;
   --backgroundColor: white;
-  --buttonSize: 50px;
+  --buttonSize: 42px;
 }
 
 body {
@@ -30,7 +30,7 @@ canvas {
   margin-top: 50px;
   margin-bottom: 50px;
   height:  var(--buttonSize);
-  width: 100%;
+  width: 85%;
   gap: 20px;
   display: flex;
   justify-content: center;
@@ -47,7 +47,7 @@ canvas {
 
 .button {
   position: absolute;
-  font-size: 35px;
+  font-size: 30px;
   width: var(--buttonSize);
   height: var(--buttonSize);
   left: 50%;
@@ -68,6 +68,10 @@ canvas {
 
 @media screen and (min-width: 768px) {
 
+  :root {
+    --buttonSize: 50px;
+  }
+
   canvas {
     width: auto;
     height: auto;
@@ -78,6 +82,7 @@ canvas {
   }
 
   .button {
+    font-size: 35px;
     width: var(--buttonSize);
     height: var(--buttonSize);
   }

src/cassette.js

@@ -14,5 +14,5 @@ socket.on('turn', (data) => {
 
   socket.on('button', (data) => {
       if (data.button == 'left') window.location.reload(false);
-      if (data.button == 'right') pause();
+      if (data.button == 'right') stop();
     });

src/controls.js

@@ -31,6 +31,41 @@ function createUI() {
   controlsContainer = createDiv();
   controlsContainer.addClass("controlsContainer");
 
+  screenshotButtonContainer = createDiv();
+  screenshotButtonContainer.addClass("buttonContainer");
+  screenshotButtonContainer.parent(controlsContainer);
+
+  screenshotButton = createButton("⏺");
+  screenshotButton.mousePressed(screenshotPage);
+  screenshotButton.mouseReleased(releaseScreenshotButton);
+  screenshotButton.touchStarted(screenshotPage);
+  screenshotButton.touchEnded(releaseScreenshotButton);
+  screenshotButton.addClass("button");
+  screenshotButton.parent(screenshotButtonContainer);
+
+  restartButtonContainer = createDiv();
+  restartButtonContainer.addClass("buttonContainer");
+  restartButtonContainer.parent(controlsContainer);
+
+  restartButton = createButton("🔄");
+  restartButton.mousePressed(restartPage);
+  restartButton.mouseReleased(releaseRestartButton);
+  restartButton.touchStarted(restartPage);
+  restartButton.touchEnded(releaseRestartButton);
+  restartButton.addClass("button");
+  restartButton.parent(restartButtonContainer);
+
+  newWheelButtonContainer = createDiv();
+  newWheelButtonContainer.addClass("buttonContainer");
+  newWheelButtonContainer.parent(controlsContainer);
+
+  newWheelButton = createButton("⏏️");
+  newWheelButton.mousePressed(ejectWheel);
+  newWheelButton.mouseReleased(releaseEjectWheelButton);
+  newWheelButton.touchStarted(ejectWheel);
+  newWheelButton.touchEnded(releaseEjectWheelButton);
+  newWheelButton.addClass("button");
+  newWheelButton.parent(newWheelButtonContainer);
 
   leftButtonContainer = createDiv();
   leftButtonContainer.addClass("buttonContainer");
@@ -49,8 +84,8 @@ function createUI() {
   pauseButtonContainer.parent(controlsContainer);
 
   pauseButton = createButton("▶️");
-  pauseButton.mousePressed(pause);
-  // pauseButton.touchStarted(pause);
+  pauseButton.mousePressed(stop);
+  // pauseButton.touchStarted(stop);
   pauseButton.addClass("button");
   pauseButton.style("font-bold", "bolder");
   pauseButton.parent(pauseButtonContainer);
@@ -67,41 +102,6 @@ function createUI() {
   rightButton.addClass("button");
   rightButton.parent(rightButtonContainer);
 
-  newWheelButtonContainer = createDiv();
-  newWheelButtonContainer.addClass("buttonContainer");
-  newWheelButtonContainer.parent(controlsContainer);
-
-  newWheelButton = createButton("⏏️");
-  newWheelButton.mousePressed(ejectWheel);
-  newWheelButton.mouseReleased(releaseEjectWheelButton);
-  newWheelButton.touchStarted(ejectWheel);
-  newWheelButton.touchEnded(releaseEjectWheelButton);
-  newWheelButton.addClass("button");
-  newWheelButton.parent(newWheelButtonContainer);
-
-  restartButtonContainer = createDiv();
-  restartButtonContainer.addClass("buttonContainer");
-  restartButtonContainer.parent(controlsContainer);
-
-  restartButton = createButton("🔄");
-  restartButton.mousePressed(restartPage);
-  restartButton.mouseReleased(releaseRestartButton);
-  restartButton.touchStarted(restartPage);
-  restartButton.touchEnded(releaseRestartButton);
-  restartButton.addClass("button");
-  restartButton.parent(restartButtonContainer);
-
-  screenshotButtonContainer = createDiv();
-  screenshotButtonContainer.addClass("buttonContainer");
-  screenshotButtonContainer.parent(controlsContainer);
-
-  screenshotButton = createButton("⏺");
-  screenshotButton.mousePressed(screenshotPage);
-  screenshotButton.mouseReleased(releaseScreenshotButton);
-  screenshotButton.touchStarted(screenshotPage);
-  screenshotButton.touchEnded(releaseScreenshotButton);
-  screenshotButton.addClass("button");
-  screenshotButton.parent(screenshotButtonContainer);
 }
 
 function updateUI() {
@@ -172,7 +172,7 @@ function keyReleased() {
   }
 
   if (keyCode === 32) {
-    pause();
+    stop();
   }
 
   if (keyCode === 38 || keyCode === 87) {
@@ -186,7 +186,7 @@ function keyReleased() {
   return false; // prevent any default behavior
 }
 
-function pause() {
+function stop() {
   if (gamePaused) {
     unpauseGame();
   } else {