evert/battleship
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

custom dialog

Browse Source
This commit is contained in:
Evert Prants 2017-04-06 00:33:35 +03:00
parent 0e314b7f39
commit 6378b0f2d8
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
3 changed files with 70 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
client/index.css
View File

@ -185,6 +185,10 @@ button#lobby {
background-color: #f9f9f9; background-color: #f9f9f9;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 5px; border-radius: 5px;
max-width: 254px;
}
.chatbox input {
max-width: 245px;
} }
#messages { #messages {
height: 250px; height: 250px;
@ -195,3 +199,34 @@ button#lobby {
white-space: pre-line; white-space: pre-line;
max-width: 254px; max-width: 254px;
} }
#alertModal {
top: 80px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 120%;
text-align: center;
}
#am_text {
display: block;
}
#alertModal button {
font-size: 80%;
margin-top: 10px;
}
dialog.unsupported {
position: absolute;
left: 0px;
right: 0px;
width: -moz-fit-content;
height: -moz-fit-content;
width: -webkit-fit-content;
height: -webkit-fit-content;
width: fit-content;
height: fit-content;
color: black;
margin: auto;
padding: 1em;
background: white;
display: none;
z-index: 10;
}

4
client/index.html
View File

@ -12,6 +12,10 @@
<title>HTML5 Battleship (simplified version)</title> <title>HTML5 Battleship (simplified version)</title>
</head> </head>
<body> <body>
<dialog id="alertModal">
<span class="message" id="am_text"></span>
<button id="close">Close this</button>
</dialog>
<div class="wrapper"> <div class="wrapper">
<div class="screen" id="start"> <div class="screen" id="start">
<div class="dialog"> <div class="dialog">

36
client/index.js
View File

@ -36,6 +36,11 @@
html = window.Mustache.to_html(html, data) html = window.Mustache.to_html(html, data)
return html return html
} }
function modalAlert (msg) {
Battleship.DOM.modalMsg.innerHTML = msg
Battleship.DOM.alertModal.showModal()
}
function pointerOnCanvas (e) { function pointerOnCanvas (e) {
let x let x
@ -413,7 +418,7 @@
function joinGame (game) { function joinGame (game) {
Battleship.played += 1 Battleship.played += 1
alert('Game has started!') modalAlert('Game has started!')
//io.emit('leave_game', {gameId: Battleship.Game.gameId}) //io.emit('leave_game', {gameId: Battleship.Game.gameId})
Battleship.Game.gameId = game.gameId Battleship.Game.gameId = game.gameId
Battleship.Game.opponentID = game.opponentId Battleship.Game.opponentID = game.opponentId
@ -491,16 +496,16 @@
function gameEnds (reason, winner) { function gameEnds (reason, winner) {
if (reason === 1) { if (reason === 1) {
if (winner === true) { if (winner === true) {
alert('You won!') modalAlert('You won!')
Battleship.DOM.winStatus.innerHTML = 'Won' Battleship.DOM.winStatus.innerHTML = 'Won'
} else { } else {
alert('You lost.') modalAlert('You lost.')
Battleship.DOM.winStatus.innerHTML = 'Lost' Battleship.DOM.winStatus.innerHTML = 'Lost'
} }
} }
if (reason === 0 && winner === true) { if (reason === 0 && winner === true) {
alert('Your opponent left the game.') modalAlert('Your opponent left the game.')
} }
Battleship.locked = false Battleship.locked = false
@ -557,6 +562,18 @@
Battleship.DOM.chatbox.scrollTop = Battleship.DOM.chatbox.scrollHeight Battleship.DOM.chatbox.scrollTop = Battleship.DOM.chatbox.scrollHeight
} }
function unsupportedModalFix (elem) {
if (!elem.showModal) {
elem.className = 'unsupported'
elem.showModal = () => {
elem.style.display = 'block'
}
elem.close = () => {
elem.style.display = 'none'
}
}
}
window.onload = () => { window.onload = () => {
const startScreen = Battleship.DOM.startScreen = $.querySelector('#start') const startScreen = Battleship.DOM.startScreen = $.querySelector('#start')
const selectionScreen = Battleship.DOM.selectionScreen = $.querySelector('#selection') const selectionScreen = Battleship.DOM.selectionScreen = $.querySelector('#selection')
@ -598,6 +615,11 @@
const chatbox = Battleship.DOM.chatbox = gameScreen.querySelector('#messages') const chatbox = Battleship.DOM.chatbox = gameScreen.querySelector('#messages')
const chatfield = Battleship.DOM.chatfield = gameScreen.querySelector('#message_send') const chatfield = Battleship.DOM.chatfield = gameScreen.querySelector('#message_send')
const alertModal = Battleship.DOM.alertModal = $.querySelector('#alertModal')
const alertClose = alertModal.querySelector('#close')
Battleship.DOM.modalMsg = alertModal.querySelector('#am_text')
unsupportedModalFix(alertModal)
GameDrawer.initialize() GameDrawer.initialize()
let uname = getStored('name') let uname = getStored('name')
@ -611,6 +633,10 @@
} }
}, false) }, false)
alertClose.addEventListener('click', () => {
alertModal.close()
})
chatfield.addEventListener('keydown', (e) => { chatfield.addEventListener('keydown', (e) => {
if (e.keyCode === 13 && Battleship.Game.gameId) { if (e.keyCode === 13 && Battleship.Game.gameId) {
if (chatfield.value != '') { if (chatfield.value != '') {
@ -715,7 +741,7 @@
}) })
io.on('game_error', (data) => { io.on('game_error', (data) => {
alert(data.message) modalAlert(data.message)
gameEnds(0, null) gameEnds(0, null)
io.emit('poll_games') io.emit('poll_games')
}) })