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
Signed by: cnml
GPG Key ID: 5845BF3F82D5F629
6 changed files with 113 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
PongGame/Hubs/PongHub.cs
View File

@ -21,7 +21,6 @@ public class PongHub : Hub<IPongClient> {
public override Task OnConnectedAsync() {
Player = Lobby.CreatePlayer();
Player.Client = Clients.Client(Context.ConnectionId);
Player.Username = "Anon";
return Task.CompletedTask;
}
@ -42,10 +41,10 @@ public class PongHub : Hub<IPongClient> {
return Task.FromResult(room.ID);
}
public Task<string> JoinRoom(string roomId) {
public async Task<string> JoinRoom(string roomId) {
AssertNotInRoom();
var room = Lobby.JoinRoom(Player, roomId);
return Task.FromResult(room.ID);
var room = await Lobby.JoinRoom(Player, roomId);
return room.ID;
}
public Task MovePaddle(int dir) {
@ -53,21 +52,14 @@ public class PongHub : Hub<IPongClient> {
var direction = (PongPaddleDirection)dir;
if (!Enum.IsDefined(direction))
throw new HubException($"Invalid direction: {dir}!");
room.MovePaddle(Player, direction);
return Task.CompletedTask;
return room.MovePaddle(Player, direction);
}
public Task LeaveRoom() {
Lobby.LeaveRoom(Player);
return Task.CompletedTask;
}
public Task LeaveRoom()
=> Lobby.LeaveRoom(Player);
public Task RequestUsernameChange(string username) {
// TOOD: check this
Logger.LogInformation("Player {Player} requested username change to [{username}]", Player, username);
Player.Username = username;
return Task.CompletedTask;
}
public Task RequestUsernameChange(string username)
=> Lobby.ChangeUsername(Player, username);
public override Task OnDisconnectedAsync(Exception? exception) {
Lobby.RemovePlayer(Player);

41
PongGame/Hubs/PongLobbyCollection.cs
View File

@ -1,4 +1,6 @@
using Microsoft.AspNetCore.SignalR;
using System.Numerics;
using System.Text.RegularExpressions;
using Microsoft.AspNetCore.SignalR;
namespace PongGame.Hubs;
@ -35,19 +37,24 @@ public class PongLobby {
return room;
}
public PongRoom JoinRoom(PongPlayer player, string roomId) {
public Task<PongRoom> JoinRoom(PongPlayer player, string roomId) {
PongRoom? room;
lock (PongRooms) {
room = PongRooms.GetValueOrDefault(roomId);
}
if (room is null) throw new HubException($"Room [{roomId}] not found!");
room.Join(player);
return room;
return Task.FromResult(room);
}
public void LeaveRoom(PongPlayer player) {
if (player.ConnectedRoom is PongRoom room)
public Task LeaveRoom(PongPlayer player) {
if (player.ConnectedRoom is PongRoom room) {
room.Leave(player);
if (room.IsEmpty)
lock (PongRooms)
_ = PongRooms.Remove(room.ID);
}
return Task.CompletedTask;
}
private readonly Random random = new();
@ -61,4 +68,28 @@ public class PongLobby {
} while (PongRooms.ContainsKey(id));
return id;
}
public async Task ChangeUsername(PongPlayer player, string username) {
username = ValidateUsername(username);
if (player.Username == username) {
await player.Client.UsernameChanged(username);
return;
}
lock (connectedPlayers) {
// TODO: separate hashset for usernames
if (connectedPlayers.Select(i => i.Username).Contains(username))
throw new HubException($"Username {username} is already taken!");
}
Logger.LogInformation("Player {Player} requested username change to [{username}]", player, username);
player.Username = username;
}
private static readonly Regex UsernameRegex = new(@"^(?!.*[._ -]{2})[\w._ -]{3,20}$", RegexOptions.Compiled, TimeSpan.FromMilliseconds(200));
private static string ValidateUsername(string username) {
username = username.Trim();
if (!UsernameRegex.IsMatch(username))
throw new HubException($"At most 20 characters, no two consecutive symbols");
return username;
}
}

2
PongGame/Hubs/PongPlayer.cs
View File

@ -4,7 +4,7 @@ namespace PongGame.Hubs;
[DebuggerDisplay($"{{{nameof(ToString)}(),nq}}")]
public class PongPlayer {
private string username = default!;
private string username = "UNNAMED";
public PongRoom? ConnectedRoom { get; internal set; }
public string Username {

11
PongGame/Hubs/PongRoom.cs
View File

@ -18,6 +18,8 @@ public class PongRoom {
public PongPlayer? Player1 { get; private set; }
public PongPlayer? Player2 { get; private set; }
public bool IsEmpty => Player1 is null && Player2 is null;
private PongGameState State = PongGameState.Initial;
public void Join(PongPlayer player) {
@ -67,7 +69,7 @@ public class PongRoom {
if (Player1 is PongPlayer player1 && Player2 is PongPlayer player2) {
Logger.LogInformation("[{ID}] Pong game started: {player1} vs. {player2}", ID, player1, player2);
ResumeGame();
} else if (Player1 is null && Player2 is null) {
} else if (IsEmpty) {
CloseRoom();
} else
PauseGame();
@ -84,16 +86,15 @@ public class PongRoom {
public override string ToString() => $"[{ID}]";
public void MovePaddle(PongPlayer player, PongPaddleDirection direction) {
public Task MovePaddle(PongPlayer player, PongPaddleDirection direction) {
if (Player1 == player) {
State.Paddle1.Direction = direction;
Logger.LogDebug(DIRECTION_LOG_TEMPLATE, ID, 1, player, direction);
return;
} else if (Player2 == player) {
State.Paddle2.Direction = direction;
Logger.LogDebug(DIRECTION_LOG_TEMPLATE, ID, 2, player, direction);
return;
}
} else
throw new InvalidOperationException("Player is not in this room, but moved! Assumably players room wasn't deleted.");
return Task.CompletedTask;
}
}

14
PongGame/Pages/Pong.cshtml
View File

@ -8,20 +8,24 @@
<h1 class="display-4">Pong</h1>
<h3 id="connection">Connection Status</h3>
<button id="createlobby" class="btn btn-primary mb-3">Create</button>
<button id="leavelobby" class="btn btn-primary mb-3">Leave</button>
<button id="createlobby" class="btn btn-primary mb-3">Create Room</button>
<button id="leavelobby" class="btn btn-primary mb-3 d-none">Leave Room</button>
<div class="input-group mb-3">
<div id="joinroomdiv" class="input-group mb-3">
<input id="roomid" type="text" class="form-control" placeholder="Room ID" aria-label="Room ID" aria-describedby="joinroom">
<button id="joinroom" class="btn btn-outline-secondary" type="button">Button</button>
<button id="joinroom" class="btn btn-outline-secondary" type="button">Join Room</button>
</div>
<div class="input-group mb-3">
<div class="input-group mb-3 has-validation">
<input id="username" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="setusername">
<button id="setusername" class="btn btn-outline-secondary" type="button">Set Username</button>
<div id="usernameerror" class="invalid-feedback"></div>
</div>
<div>
<h4>Room <span id="connectedroomid"></span></h4>
<div id="canvas-container" class="mb-3"></div>
</div>
</div>
<script src="~/lib/signalr/dist/browser/signalr.min.js"></script>

66
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) {
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}]`);
}).catch(function (err) {
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!`);