cnml/pong-game
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added username validation

Browse Source 
Auto hide enter/leave room
Username starts as UNNAMED now
Show roomnumber for connected room
This commit is contained in:
Michael Chen
2022-11-04 15:13:56 +01:00
parent 391b5569a4
commit 531c0e1344
6 changed files with 113 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
PongGame/wwwroot/js/pong.js
View File

@ -11,26 +11,29 @@ function getElement(id) {
}
const connectionStatus = getElement("connection");
const createlobby = getElement("createlobby");
const createroom = getElement("createlobby");
const roomidinput = getElement("roomid");
const joinroom = getElement("joinroom");
const joinroomdiv = getElement("joinroomdiv");
const usernameinput = getElement("username");
const setusername = getElement("setusername");
const leavelobby = getElement("leavelobby");
const leaveroom = getElement("leavelobby");
const usernameerror = getElement("usernameerror");
const connectedroomid = getElement("connectedroomid");
connection.onclose(function (error) {
if (error) {
connection.onclose(function (err) {
if (err) {
connectionStatus.textContent = "Unexpected error!";
return console.error(`Connection aborted: ${error.message}`);
return console.error(`Connection aborted: ${err.message}`);
}
console.info("Disconnected!");
connectionStatus.textContent = "Closed!";
});
connection.onreconnecting(function (error) {
if (error) {
connection.onreconnecting(function (err) {
if (err) {
connectionStatus.textContent = "Reconnecting!";
return console.error(`Connection reconnecting: ${error.message}`);
return console.error(`Connection reconnecting: ${err.message}`);
}
console.info("Reconnecting!");
connectionStatus.textContent = "Reconnecting!";
@ -41,11 +44,20 @@ connection.onreconnected(function (connectionId) {
connectionStatus.textContent = "Connected!";
});
createlobby.addEventListener("click", function (event) {
connection.invoke("CreateRoom").then(function (roomId) {
roomidinput.value = roomId;
console.info(`Joined room [${roomId}]`);
}).catch(function (err) {
function show(elem) { elem.classList.remove("d-none"); }
function hide(elem) { elem.classList.add("d-none"); }
function roomJoined(roomId) {
roomidinput.value = roomId;
connectedroomid.textContent = roomId;
console.info(`Joined room [${roomId}]`);
hide(createroom);
hide(joinroomdiv);
show(leaveroom);
}
createroom.addEventListener("click", function (event) {
connection.invoke("CreateRoom").then(roomJoined).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
@ -57,24 +69,44 @@ connection.on("GameStateChanged", function (state) {
connection.on("UsernameChanged", function (username) {
console.info(`Username is now ${username}`);
usernameinput.value = username;
usernameinput.classList.remove("is-invalid");
usernameinput.classList.add("is-valid");
});
joinroom.addEventListener("click", function (event) {
connection.invoke("JoinRoom", roomidinput.value).catch(function (err) {
connection.invoke("JoinRoom", roomidinput.value).then(roomJoined).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
function hubExceptionMessage(msg) {
const needle = "HubException: ";
let idx = msg.lastIndexOf(needle);
if (idx < 0) return msg;
return msg.substr(idx + needle.length);
}
usernameinput.addEventListener("input", function (event) {
usernameinput.classList.remove("is-valid");
});
setusername.addEventListener("click", function (event) {
connection.invoke("RequestUsernameChange", usernameinput.value).catch(function (err) {
usernameerror.textContent = hubExceptionMessage(err.message);
usernameinput.classList.add("is-invalid");
return console.error(err.toString());
});
event.preventDefault();
});
leavelobby.addEventListener("click", function (event) {
connection.invoke("LeaveRoom").catch(function (err) {
leaveroom.addEventListener("click", function (event) {
connection.invoke("LeaveRoom").then(function () {
roomidinput.value = "";
show(createroom);
show(joinroomdiv);
hide(leaveroom);
}).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
@ -88,7 +120,7 @@ function movePaddle(direction) {
// Create the application helper and add its render target to the page
let app = new PIXI.Application({ width: 1000, height: 500 });
getElement('canvas-container').appendChild(app.view);
getElement("canvas-container").appendChild(app.view);
let graphics = new PIXI.Graphics();
app.stage.addChild(graphics);
@ -163,8 +195,8 @@ const keyEvent = (function () {
return handler;
})();
document.addEventListener('keydown', keyEvent);
document.addEventListener('keyup', keyEvent);
document.addEventListener("keydown", keyEvent);
document.addEventListener("keyup", keyEvent);
connection.start().then(function () {
console.info(`Connected!`);