diff --git a/_src/assets/ts/snakeMultiplayer.ts b/_src/assets/ts/snakeMultiplayer.ts index 4ef3b8ea2b07137830788b41495ff3d2b8f6b9bb..2957774f71e56178de101578cd8d98398660bb00 100644 --- a/_src/assets/ts/snakeMultiplayer.ts +++ b/_src/assets/ts/snakeMultiplayer.ts @@ -102,12 +102,16 @@ function detectEnd(){ if(gameFinished){ sendMessage(`{"type": "gameOver","loser": "${clientID}"}`, gameTopic); - if(highscore < score){ + let hs:string = ""; + if(highscore < score) { localStorage.setItem("highscore", String(score)); - alert("Game Over, you lost with " + score + " points.\n This is your new highscore!!!\nTo start a new game, please reload the page."); - } else { - alert("Game Over, you lost with " + score + " points.\nTo start a new game, please reload the page."); + hs = "\nThis is your new highscore!!!"; } + Swal.fire( + 'Game Over', + "you lost with " + score + " points." + hs + "\nTo start a new game, please reload the page.", + 'error' + ); clearInterval(mainLoop); } } @@ -117,7 +121,11 @@ function setupMQTT(){ client = new Paho.MQTT.Client("wss://mqtt.eclipseprojects.io/mqtt", clientID); // set callback handlers client.onConnectionLost = function () { - alert("connection to Server lost"); + Swal.fire( + 'Server connection losr', + "We lost the connection to the server, please reload the page.", + 'error' + ); } client.onMessageArrived = function (message:any) { @@ -126,22 +134,34 @@ function setupMQTT(){ if (IsJsonString(message)){ let recivedJson = JSON.parse(message); if(recivedJson["type"] == "newGame" && gameID == ""){ - if(confirm(`Recived new game with id ${recivedJson["gameID"]}, do you want to join?`)){ + Swal.fire({ + title: 'New Game Invite', + text: `Recived new game with id ${recivedJson["gameID"]}, do you want to join?`, + icon: 'question', + showCancelButton: true, + confirmButtonColor: '#78e33b', + cancelButtonColor: '#d33', + confirmButtonText: 'Join' + }).then((result:any) => { + if (result.isConfirmed) { gameID = recivedJson["gameID"]; gameTopic = "/jobrouter/snakeMultiplayer/" + gameID; client.subscribe(gameTopic); client.unsubscribe("/jobrouter/snakeMultiplayer/games"); sendMessage(`{"type": "gameAccepted","gameID": "${gameID}"}`, gameTopic); snake = [[fieldSize, fieldSize], [fieldSize, fieldSize - 1], [fieldSize, fieldSize - 2]]; - } + } + }) } - else if(recivedJson["type"] == "gameAccepted" && recivedJson["gameID"] == gameID){ - console.log("game is accepted, ready to start"); - if(gameMaster) { - target = [getRandomInt(fieldSize), getRandomInt(fieldSize)]; - sendMessage(`{"type": "target","value": "${target.join(';')}"}`, gameTopic); - alert("Game is accepted, you can start"); - } + else if(recivedJson["type"] == "gameAccepted" && recivedJson["gameID"] == gameID && gameMaster){ + console.log("Game accepted"); + target = [getRandomInt(fieldSize), getRandomInt(fieldSize)]; + sendMessage(`{"type": "target","value": "${target.join(';')}"}`, gameTopic); + Swal.fire( + 'Game Accepted', + `Your game with ID ${gameID} was accepted by a player. You can start the game with any button press.`, + 'success' + ) drawField(); gameAccepted = true; } @@ -155,12 +175,16 @@ function setupMQTT(){ } else if(recivedJson["type"] == "gameOver"){ if(recivedJson["loser"] != clientID){ - if(highscore < score){ + let hs:string = ""; + if(highscore < score) { localStorage.setItem("highscore", String(score)); - alert("Game Over, you won with " + score + " points.\nThis is your new highscore!!!\nTo start a new game, please reload the page."); - } else { - alert("Game Over, you won with " + score + " points.\nTo start a new game, please reload the page."); + hs = "\nThis is your new highscore!!!"; } + Swal.fire( + 'Game Over', + "you won with " + score + " points." + hs + "\nTo start a new game, please reload the page.", + 'success' + ); clearInterval(mainLoop); } } @@ -189,7 +213,11 @@ newGameButton.onclick = function (){ sendMessage(`{"type": "newGame","gameID": "${gameID}"}`, "/jobrouter/snakeMultiplayer/games"); client.subscribe(gameTopic); client.unsubscribe("/jobrouter/snakeMultiplayer/games"); - alert("New game started, your ID is " + gameID); + Swal.fire( + 'Game Created', + `Your game with ID ${gameID} was created and published to the network.`, + 'success' + ) gameMaster = true; snake = [[1, 1], [1, 2], [1, 3]]; diff --git a/_src/snakeMultiplayer.html b/_src/snakeMultiplayer.html index 258db07d25f91aa7537bdf1ae73ab6817160d909..252fb9f34c1a060e53058fe821d2146d388e1413 100644 --- a/_src/snakeMultiplayer.html +++ b/_src/snakeMultiplayer.html @@ -6,6 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Workshop</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.13.0/dist/sweetalert2.all.min.js"></script> <link rel="stylesheet" href="assets/scss/snake.scss"> </head> diff --git a/package.json b/package.json index 126db33bc7b66d08828bc983793743967664a6e5..d95ef07db1803c6e48603a4c0bfb4c927c423f71 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "typescript": "^4.1.3" }, "scripts": { - "watch": "yarn parcel ./_src/*.html watch" + "watch": "start yarn parcel ./_src/*.html watch" }, "dependencies": { "@types/paho-mqtt": "^1.0.4",