change rotate to right click

This commit is contained in:
Evert Prants 2017-04-08 17:57:12 +03:00
parent dba5dec07f
commit 3f4959bc2a
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
4 changed files with 55 additions and 15 deletions

View File

@ -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;
}

View File

@ -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">

View File

@ -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) => {
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.<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) => {
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!<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.')

View File

@ -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},