evert/connect-four
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

custom alert dialogs and compatibility improvement

Browse Source
This commit is contained in:
Evert Prants 2017-04-06 00:27:59 +03:00
parent c71b29212c
commit 4099fa40b8
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
3 changed files with 70 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
client/index.css
View File

@ -182,6 +182,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;
@ -192,3 +196,33 @@ 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;
}

4
client/index.html
View File

@ -13,6 +13,10 @@
<title>HTML5 Connect Four</title> <title>HTML5 Connect Four</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">

38
client/index.js
View File

@ -42,6 +42,11 @@
return html return html
} }
function modalAlert (msg) {
Connect4.DOM.modalMsg.innerHTML = msg
Connect4.DOM.alertModal.showModal()
}
function pointerOnCanvas (e) { function pointerOnCanvas (e) {
let x let x
let y let y
@ -278,7 +283,7 @@
function joinGame (game) { function joinGame (game) {
Connect4.played += 1 Connect4.played += 1
alert('Game has started!') modalAlert('Game has started!')
//io.emit('leave_game', {gameId: Connect4.Game.gameId}) //io.emit('leave_game', {gameId: Connect4.Game.gameId})
Connect4.Game.gameId = game.gameId Connect4.Game.gameId = game.gameId
Connect4.Game.opponentID = game.opponentId Connect4.Game.opponentID = game.opponentId
@ -355,23 +360,23 @@
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!')
logStatus('You won!') logStatus('You won!')
} else { } else {
alert('You lost.') modalAlert('You lost.')
logStatus('You lost.') logStatus('You lost.')
} }
} }
if (reason === 0 && winner === true) { if (reason === 0 && winner === true) {
alert('Your opponent left the game.') modalAlert('Your opponent left the game.')
Connect4.DOM.gameScreen.style.display = 'none' Connect4.DOM.gameScreen.style.display = 'none'
Connect4.DOM.selectionScreen.style.display = 'block' Connect4.DOM.selectionScreen.style.display = 'block'
Connect4.renderTick = false Connect4.renderTick = false
} }
if (reason === 2) { if (reason === 2) {
alert('You tied!') modalAlert('You tied!')
logStatus('It\'s a tie!.') logStatus('It\'s a tie!.')
} }
@ -420,6 +425,18 @@
Connect4.DOM.chatbox.scrollTop = Connect4.DOM.chatbox.scrollHeight Connect4.DOM.chatbox.scrollTop = Connect4.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 = Connect4.DOM.startScreen = $.querySelector('#start') const startScreen = Connect4.DOM.startScreen = $.querySelector('#start')
const selectionScreen = Connect4.DOM.selectionScreen = $.querySelector('#selection') const selectionScreen = Connect4.DOM.selectionScreen = $.querySelector('#selection')
@ -455,6 +472,11 @@
const chatbox = Connect4.DOM.chatbox = gameScreen.querySelector('#messages') const chatbox = Connect4.DOM.chatbox = gameScreen.querySelector('#messages')
const chatfield = Connect4.DOM.chatfield = gameScreen.querySelector('#message_send') const chatfield = Connect4.DOM.chatfield = gameScreen.querySelector('#message_send')
const alertModal = Connect4.DOM.alertModal = $.querySelector('#alertModal')
const alertClose = alertModal.querySelector('#close')
Connect4.DOM.modalMsg = alertModal.querySelector('#am_text')
unsupportedModalFix(alertModal)
GameDrawer.initialize() GameDrawer.initialize()
let uname = getStored('name') let uname = getStored('name')
@ -468,6 +490,10 @@
} }
}, false) }, false)
alertClose.addEventListener('click', () => {
alertModal.close()
})
chatfield.addEventListener('keydown', (e) => { chatfield.addEventListener('keydown', (e) => {
if (e.keyCode === 13 && Connect4.Game.gameId) { if (e.keyCode === 13 && Connect4.Game.gameId) {
if (chatfield.value != '') { if (chatfield.value != '') {
@ -545,7 +571,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')
}) })