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

View File

@ -29,7 +29,7 @@
<div class="box"> <div class="box">
<h1>Statistics</h1> <h1>Statistics</h1>
<span class="stat">Players online: <span id="stats_players_online"></span></span> <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">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> <span class="stat">You've played in <span id="stats_clientgames"></span> matches this session.</span>
</div> </div>
@ -47,7 +47,7 @@
</div> </div>
<div class="box"> <div class="box">
<h1>How to play</h1> <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> <ul>
<li>You start off by placing your ships onto the board.</li> <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> <li>Once you and your opponent finish placing the ships, the game begins.</li>
@ -69,6 +69,7 @@
<div class="letterbox" id="messages"></div> <div class="letterbox" id="messages"></div>
<input type="text" id="message_send" placeholder="Send message.."> <input type="text" id="message_send" placeholder="Send message..">
</div> </div>
<button id="mob_rotate" style="display: none;">Rotate Ship</button>
</div> </div>
</div> </div>
<div class="screen endresult" style="display: none;" id="endresult"> <div class="screen endresult" style="display: none;" id="endresult">

View File

@ -2,6 +2,7 @@
let io = window.io.connect() let io = window.io.connect()
let Battleship = { let Battleship = {
DOM: {}, DOM: {},
mobile: false,
playerName: '', playerName: '',
playerID: '', playerID: '',
verified: null, verified: null,
@ -133,6 +134,10 @@
Battleship.ctx.clearRect(0, 0, Battleship.canvasW, Battleship.canvasH) Battleship.ctx.clearRect(0, 0, Battleship.canvasW, Battleship.canvasH)
Battleship.Game.myTurn = true Battleship.Game.myTurn = true
if (Battleship.mobile) {
Battleship.DOM.mobRotate.style.display = 'block'
}
let p = 0 let p = 0
let context = Battleship.ctx let context = Battleship.ctx
@ -360,6 +365,16 @@
requestAnimFrame(GameDrawer.gameLoop) requestAnimFrame(GameDrawer.gameLoop)
}, },
rotate: () => {
if (GameDrawer.placingShips) {
if (GameDrawer.shipOrientation === 0) {
GameDrawer.shipOrientation = 1
} else {
GameDrawer.shipOrientation = 0
}
}
},
initialize: () => { initialize: () => {
Battleship.DOM.canvas.addEventListener('mousemove', (e) => { Battleship.DOM.canvas.addEventListener('mousemove', (e) => {
let posOnCanvas = pointerOnCanvas(e) let posOnCanvas = pointerOnCanvas(e)
@ -377,19 +392,27 @@
GameDrawer.mouseOn = false GameDrawer.mouseOn = false
}) })
Battleship.DOM.canvas.addEventListener('contextmenu', (e) => {
e.preventDefault()
GameDrawer.rotate()
return false
})
Battleship.DOM.canvas.addEventListener('click', (e) => { Battleship.DOM.canvas.addEventListener('click', (e) => {
GameDrawer.click() 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}) 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.gameScreen.style.display = 'block'
Battleship.DOM.selectionScreen.style.display = 'none' Battleship.DOM.selectionScreen.style.display = 'none'
@ -669,6 +692,12 @@
Battleship.DOM.modalMsg = alertModal.querySelector('#am_text') Battleship.DOM.modalMsg = alertModal.querySelector('#am_text')
unsupportedModalFix(alertModal) 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() GameDrawer.initialize()
let uname = getStored('name') let uname = getStored('name')
@ -734,10 +763,14 @@
}) })
io.on('destroy_turn', (val) => { io.on('destroy_turn', (val) => {
GameDrawer.placingShips = false if (GameDrawer.placingShips) {
Battleship.DOM.mobRotate.style.display = 'none'
GameDrawer.placingShips = false
}
if (val === true) { if (val === true) {
Battleship.Game.myTurn = 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 { } else {
Battleship.Game.myTurn = false Battleship.Game.myTurn = false
logStatus(Battleship.Game.opponentName + '\'s turn.') logStatus(Battleship.Game.opponentName + '\'s turn.')

View File

@ -7,8 +7,8 @@ const path = require('path')
// * Timer // * Timer
const ships = [ 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: 'cruiser', tiles: 4, destCount: 3},
{name: 'ferry', tiles: 3, destCount: 2}, {name: 'ferry', tiles: 3, destCount: 2},
{name: 'ferry2', tiles: 3, destCount: 2}, {name: 'ferry2', tiles: 3, destCount: 2},