change rotate to right click

client/index.css

@@ -148,6 +148,7 @@ button#leave {
     font-weight: bold;
     padding-top: 5px;
     width: 200px;
+    height: 80px;
 }
 #game_canvas {
     margin-left: 300px;
@@ -230,3 +231,8 @@ dialog.unsupported {
     display: none;
     z-index: 10;
 }
+#mob_rotate {
+    font-size: 200%;
+    margin: auto;
+    margin-top: 20px;
+}

client/index.html

@@ -29,7 +29,7 @@
 				<div class="box">
 					<h1>Statistics</h1>
 					<span class="stat">Players online: <span id="stats_players_online"></span></span>
-					<span class="stat">Players in game: <span id="stats_players"></span></span>
+					<span class="stat">Games in progress: <span id="stats_players"></span></span>
 					<span class="stat">Total games since server started: <span id="stats_games"></span></span>
 					<span class="stat">You've played in <span id="stats_clientgames"></span> matches this session.</span>
 				</div> 
@@ -47,7 +47,7 @@
 				</div> 
 				<div class="box">
 					<h1>How to play</h1>
-					<p>This is a guessing game inspired by <a href="https://en.wikipedia.org/wiki/Battleship_(game)" target="_blank">Battleship</a>, however this one works quite differently.</p>
+					<p>This is a web version of <a href="https://en.wikipedia.org/wiki/Battleship_(game)" target="_blank">Battleship</a> with a few differences.</p>
 					<ul>
 						<li>You start off by placing your ships onto the board.</li>
 						<li>Once you and your opponent finish placing the ships, the game begins.</li>
@@ -69,6 +69,7 @@
 						<div class="letterbox" id="messages"></div>
 						<input type="text" id="message_send" placeholder="Send message..">
 					</div>
+					<button id="mob_rotate" style="display: none;">Rotate Ship</button>
 				</div>
 			</div>
 			<div class="screen endresult" style="display: none;" id="endresult">

client/index.js

@@ -2,6 +2,7 @@
   let io = window.io.connect()
   let Battleship = {
     DOM: {},
+    mobile: false,
     playerName: '',
     playerID: '',
     verified: null,
@@ -133,6 +134,10 @@
       Battleship.ctx.clearRect(0, 0, Battleship.canvasW, Battleship.canvasH)
       Battleship.Game.myTurn = true
 
+      if (Battleship.mobile) {
+        Battleship.DOM.mobRotate.style.display = 'block'
+      }
+
       let p = 0
       let context = Battleship.ctx
 
@@ -360,6 +365,16 @@
       requestAnimFrame(GameDrawer.gameLoop)
     },
 
+    rotate: () => {
+      if (GameDrawer.placingShips) {
+        if (GameDrawer.shipOrientation === 0) {
+          GameDrawer.shipOrientation = 1
+        } else {
+          GameDrawer.shipOrientation = 0
+        }
+      } 
+    },
+
     initialize: () => {
       Battleship.DOM.canvas.addEventListener('mousemove', (e) => {
         let posOnCanvas = pointerOnCanvas(e)
@@ -377,19 +392,27 @@
         GameDrawer.mouseOn = false
       })
 
+      Battleship.DOM.canvas.addEventListener('contextmenu', (e) => {
+        e.preventDefault()
+
+        GameDrawer.rotate()
+
+        return false
+      })
+
       Battleship.DOM.canvas.addEventListener('click', (e) => {
         GameDrawer.click()
       })
 
-      document.addEventListener('keydown', (e) => {
+      Battleship.DOM.canvas.addEventListener('keydown', (e) => {
-        if (GameDrawer.placingShips && e.keyCode === 82) {
+        if (e.keyCode === 82) {
-          if (GameDrawer.shipOrientation === 0) {
+          GameDrawer.rotate()
-            GameDrawer.shipOrientation = 1
-          } else {
-            GameDrawer.shipOrientation = 0
-          }
         }
       })
+
+      Battleship.DOM.mobRotate.addEventListener('click', (e) => {
+        GameDrawer.rotate()
+      })
     }
   }
 
@@ -462,7 +485,7 @@
 
     io.emit('game_poll', {gameId: Battleship.Game.gameId})
 
-    logStatus('Place your ships onto the board.<br>Press `r` to rotate')
+    logStatus('Place your ships onto the board.<br>Right Click to rotate')
 
     Battleship.DOM.gameScreen.style.display = 'block'
     Battleship.DOM.selectionScreen.style.display = 'none'
@@ -669,6 +692,12 @@
     Battleship.DOM.modalMsg = alertModal.querySelector('#am_text')
     unsupportedModalFix(alertModal)
 
+    const mobRotate = Battleship.DOM.mobRotate = gameScreen.querySelector('#mob_rotate')
+
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
+      Battleship.mobile = true
+    }
+
     GameDrawer.initialize()
 
     let uname = getStored('name')
@@ -734,10 +763,14 @@
     })
 
     io.on('destroy_turn', (val) => {
+      if (GameDrawer.placingShips) {
+        Battleship.DOM.mobRotate.style.display = 'none'
         GameDrawer.placingShips = false
+      }
+
       if (val === true) {
         Battleship.Game.myTurn = true
-        logStatus('It\'s your turn!<br>Click anywhere on the grid to attempt to destroy enemy ships.')
+        logStatus('It\'s your turn!')
       } else {
         Battleship.Game.myTurn = false
         logStatus(Battleship.Game.opponentName + '\'s turn.')

server.js

@@ -7,8 +7,8 @@ const path = require('path')
 // * Timer
 
 const ships = [
-  {name: 'aircraft_carrier1', tiles: 5, destCount: 4},
+  {name: 'carrier1', tiles: 5, destCount: 4},
-  {name: 'aircraft_carrier2', tiles: 5, destCount: 4},
+  {name: 'carrier2', tiles: 5, destCount: 4},
   {name: 'cruiser', tiles: 4, destCount: 3},
   {name: 'ferry', tiles: 3, destCount: 2},
   {name: 'ferry2', tiles: 3, destCount: 2},