From 4099fa40b8e5ca15058b37224f671cdcdc0d1122 Mon Sep 17 00:00:00 2001 From: Evert Date: Thu, 6 Apr 2017 00:27:59 +0300 Subject: [PATCH] custom alert dialogs and compatibility improvement --- client/index.css | 34 ++++++++++++++++++++++++++++++++++ client/index.html | 4 ++++ client/index.js | 38 ++++++++++++++++++++++++++++++++------ 3 files changed, 70 insertions(+), 6 deletions(-) diff --git a/client/index.css b/client/index.css index 3de75e1..0568575 100644 --- a/client/index.css +++ b/client/index.css @@ -182,6 +182,10 @@ button#lobby { background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; + max-width: 254px; +} +.chatbox input { + max-width: 245px; } #messages { height: 250px; @@ -192,3 +196,33 @@ button#lobby { white-space: pre-line; 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; +} diff --git a/client/index.html b/client/index.html index c37abcc..c4ef47c 100644 --- a/client/index.html +++ b/client/index.html @@ -13,6 +13,10 @@ HTML5 Connect Four + + + +
diff --git a/client/index.js b/client/index.js index ce00af8..a1aa143 100644 --- a/client/index.js +++ b/client/index.js @@ -42,6 +42,11 @@ return html } + function modalAlert (msg) { + Connect4.DOM.modalMsg.innerHTML = msg + Connect4.DOM.alertModal.showModal() + } + function pointerOnCanvas (e) { let x let y @@ -278,7 +283,7 @@ function joinGame (game) { Connect4.played += 1 - alert('Game has started!') + modalAlert('Game has started!') //io.emit('leave_game', {gameId: Connect4.Game.gameId}) Connect4.Game.gameId = game.gameId Connect4.Game.opponentID = game.opponentId @@ -355,23 +360,23 @@ function gameEnds (reason, winner) { if (reason === 1) { if (winner === true) { - alert('You won!') + modalAlert('You won!') logStatus('You won!') } else { - alert('You lost.') + modalAlert('You lost.') logStatus('You lost.') } } 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.selectionScreen.style.display = 'block' Connect4.renderTick = false } if (reason === 2) { - alert('You tied!') + modalAlert('You tied!') logStatus('It\'s a tie!.') } @@ -420,6 +425,18 @@ 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 = () => { const startScreen = Connect4.DOM.startScreen = $.querySelector('#start') const selectionScreen = Connect4.DOM.selectionScreen = $.querySelector('#selection') @@ -455,6 +472,11 @@ const chatbox = Connect4.DOM.chatbox = gameScreen.querySelector('#messages') 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() let uname = getStored('name') @@ -468,6 +490,10 @@ } }, false) + alertClose.addEventListener('click', () => { + alertModal.close() + }) + chatfield.addEventListener('keydown', (e) => { if (e.keyCode === 13 && Connect4.Game.gameId) { if (chatfield.value != '') { @@ -545,7 +571,7 @@ }) io.on('game_error', (data) => { - alert(data.message) + modalAlert(data.message) gameEnds(0, null) io.emit('poll_games') })