diff --git a/client/index.css b/client/index.css
index 19562a4..f376f54 100644
--- a/client/index.css
+++ b/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;
+}
diff --git a/client/index.html b/client/index.html
index efea28c..0483b7b 100644
--- a/client/index.html
+++ b/client/index.html
@@ -29,7 +29,7 @@
Statistics
Players online:
- Players in game:
+ Games in progress:
Total games since server started:
You've played in matches this session.
@@ -47,7 +47,7 @@
How to play
-
This is a guessing game inspired by Battleship, however this one works quite differently.
+
This is a web version of Battleship with a few differences.
+
diff --git a/client/index.js b/client/index.js
index a080949..4e918a0 100644
--- a/client/index.js
+++ b/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,18 +392,26 @@
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) => {
- if (GameDrawer.placingShips && e.keyCode === 82) {
- if (GameDrawer.shipOrientation === 0) {
- GameDrawer.shipOrientation = 1
- } else {
- GameDrawer.shipOrientation = 0
- }
- }
+ Battleship.DOM.canvas.addEventListener('keydown', (e) => {
+ if (e.keyCode === 82) {
+ GameDrawer.rotate()
+ }
+ })
+
+ 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.
Press `r` to rotate')
+ logStatus('Place your ships onto the board.
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) => {
- GameDrawer.placingShips = false
+ if (GameDrawer.placingShips) {
+ Battleship.DOM.mobRotate.style.display = 'none'
+ GameDrawer.placingShips = false
+ }
+
if (val === true) {
Battleship.Game.myTurn = true
- logStatus('It\'s your turn!
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.')
diff --git a/server.js b/server.js
index adb7b76..94cce9e 100644
--- a/server.js
+++ b/server.js
@@ -7,8 +7,8 @@ const path = require('path')
// * Timer
const ships = [
- {name: 'aircraft_carrier1', tiles: 5, destCount: 4},
- {name: 'aircraft_carrier2', tiles: 5, destCount: 4},
+ {name: 'carrier1', 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},