benkyd/scrabble-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

client coming on ennit, nice little status bar

Browse Source
This commit is contained in:
Ben
2021-05-07 20:30:44 +01:00
parent b93c91243f
commit a9bb46b7c7
6 changed files with 123 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
TODO
View File

@@ -14,11 +14,12 @@
→ Update with new locales
→ French (Alexendro)
→ Czech (Mikdore)
→ Go through code again once finished and pick out locales
☐ Lobbying logic
✔ Create, join, delete and leave lobbies @done(21-04-12 20:51)
✔ Sort out how intents work in game transitioning @done(21-04-12 21:09)
→ Make lobbies publically discoverable on a list
✘ Make lobbies publically discoverable on a list @cancelled(21-05-07 20:11)
☐ Dictionary
→ Find appropriate scrabble dictionary for
@@ -29,18 +30,23 @@
→ Optimise! n-ary tree
☐ Game networking
☐ Figure out game reconnection procedure
☐ Perhaps players skip a turn if they disconnect on their turn
☐ Game should go on until 1 person remains
→ Figure out game reconnection procedure
→ Perhaps players skip a turn if they disconnect on their turn
→ Game should go on until 1 person remains
→ Game chat
☐ Game logic
✔ Game creation @done(21-04-26 17:38)
☐ Multiplayer game logic
☐ Process turns
☐ Display turns on client
→ Multiplayer game logic
→ Process turns
→ Display turns on client
✘ Singleplayer game logic - OUT OF SCOPE @cancelled(21-04-11 01:04)
✘ AI CPU player @cancelled(21-04-11 01:07)
☐ Client
→ Display multiplayer game info
→ Update dynamically
☐ Code
→ Refactor to code portsoc eslint
→ Refactor game client

25
client/public/scrabble/game.js
View File

@@ -9,28 +9,35 @@ function computeTurn()
function initGame(boardstate, tileset, myplayer, players)
{
// construct piece array
// structure [{letter: '', score: int}]
let drawerStructure = [];
for (const tile of myplayer.activetiles)
{
let points = 0;
// for (const pointband of tileset)
// {
// console.log(pointband)
// }
for (const pointband of tileset)
{
if (tile === '_')
{
points = '_';
break;
}
if (pointband.letters.includes(tile))
{
points = pointband.points;
break;
}
}
const piece = {
letter: tile,
score: points
}
drawerStructure.push(piece);
console.log(tile);
}
addPiecesToDrawer(drawerStructure);
return true;
}

23
client/public/scrabble/index.html
View File

@@ -23,7 +23,7 @@
<text x="0" y="15">SCRABBLE</text>
</svg>
</div>
<div id="connection-state"><script>document.write(localeString('status'))</script>:</div>
<div class="connection-state"><script>document.write(localeString('status'))</script>:</div>
<div id="chat">
<textarea id="game-chat" rows="10" cols=auto placeholder="chat" disabled></textarea>
<div id="chat-input">
@@ -304,17 +304,13 @@
</div>
<div id="game-info-compact" style="display: none;">
<div id="player-scores-compact">
<div class="player-scores" id="player-scores-compact">
<div id="p1" class="player">
<div id="p1-name" class="player-name">Jerry</div>
Score:<div id="p1-score" class="player-score">12</div>
</div>
<div id="p2" class="player">
<div id="p2-name" class="player-name">Computer</div>
Score:<div id="p2-score" class="player-score">102</div>
</div>
</div>
<div id="connection-state"><script>document.write(localeString('status'))</script>:</div>
<div class="connection-state"><script>document.write(localeString('status'))</script>:</div>
<div id="game-controls">
<input type="button" value="Exchange tiles">
<input type="button" value="Skip turn">
@@ -325,14 +321,10 @@
</div>
<div id="game-info-right">
<div id="player-scores">
<div id="p1" class="player">
<div id="p1-name" class="player-name">Jerry</div>
Score:<div id="p1-score" class="player-score">12</div>
</div>
<div id="p2" class="player">
<div id="p2-name" class="player-name">Computer</div>
Score:<div id="p2-score" class="player-score">102</div>
<div class="player-scores" id="player-scores">
<div class="p1 player">
<div class="p1-name player-name">Jerry</div>
Score:<div class="p1-score player-score">12</div>
</div>
</div>
<div id="game-controls">
@@ -354,6 +346,7 @@
<script src="board.js"></script>
<script src="pieces.js"></script>
<script src="game.js"></script>
<script src="ui.js"></script>
<script src="events.js"></script>
</body>
</html>

68
client/public/scrabble/network.js
View File

@@ -1,6 +1,6 @@
const urlParser = new URLSearchParams(window.location.search);
const ConnectionState = document.querySelector('#connection-state');
const ConnectionState = document.querySelectorAll('.connection-state');
const PieceDrawer = document.querySelector('#piece-drawer');
function initMultiplayer()
@@ -10,12 +10,16 @@ function initMultiplayer()
socket.on('connect', args => {
console.log('Socket Connected');
ConnectionState.innerHTML = `${localeString('status')}: Waiting for identify`;
ConnectionState.forEach(e => {
e.innerHTML = `${localeString('status')}: Waiting for identify`;
});
});
socket.on('disconnect', args => {
console.log('Socket Disconnected');
ConnectionState.innerHTML = `${localeString('status')}: ${localeString('status-disconnected')}`;
ConnectionState.forEach(e => {
e.innerHTML = `${localeString('status')}: ${localeString('status-disconnected')}`;
});
onDisconnect();
});
@@ -33,13 +37,16 @@ function initMultiplayer()
function onIdentify(socket, args)
{
ConnectionState.innerHTML = 'Identify recived'
ConnectionState.forEach(e => {
e.innerHTML = 'Identify recived'
});
if (!sessionStorage.user)
{
socket.disconnect();
ConnectionState.innerHTML = 'Identify cannot proceed, no user';
document.qu
ConnectionState.forEach(e => {
e.innerHTML = 'Identify cannot proceed, no user';
});
window.location = `/`;
return;
}
@@ -51,7 +58,9 @@ function onIdentify(socket, args)
} catch (e)
{
socket.disconnect();
ConnectionState.innerHTML = 'Identify cannot proceed, corrupted user';
ConnectionState.forEach(e => {
e.innerHTML = 'Identify cannot proceed, corrupted user';
});
window.location = `/`;
return;
}
@@ -59,7 +68,9 @@ function onIdentify(socket, args)
if (!user.uid)
{
socket.disconnect();
ConnectionState.innerHTML = 'Identify cannot proceed, corrupted user';
ConnectionState.forEach(e => {
e.innerHTML = 'Identify cannot proceed, corrupted user';
});
window.location = `/`;
return;
}
@@ -69,26 +80,34 @@ function onIdentify(socket, args)
if (!lobbyUID)
{
socket.disconnect();
ConnectionState.innerHTML = 'Identify cannot proceed, corrupted lobby';
ConnectionState.forEach(e => {
e.innerHTML = 'Identify cannot proceed, corrupted lobby';
});
window.location = `/`;
return;
}
socket.emit('identify', { userid: user.uid, lobbyuid: lobbyUID, intent: 'GAME' });
ConnectionState.innerHTML = 'Identify response';
ConnectionState.forEach(e => {
e.innerHTML = 'Identify response';
});
}
function onIdentifySuccess(socket, args)
{
console.log(args);
ConnectionState.innerHTML = localeString('status-connected-as') + ' ' + args.user.username;
ConnectionState.forEach(e => {
e.innerHTML = localeString('status-connected-as') + ' ' + args.user.username;
});
onConnect();
}
function onIdentifyError(socket, args)
{
console.log(args);
ConnectionState.innerHTML = JSON.stringify(args);
ConnectionState.forEach(e => {
e.innerHTML = JSON.stringify(args);
});
onDisconnect();
}
@@ -164,33 +183,40 @@ function onGameBegin(socket, args)
{
if (!args)
{
ConnectionState.innerHTML = localeString('error-game-begin');
ConnectionState.forEach(e => {
e.innerHTML = localeString('error-game-begin');
});
return;
}
if (!args.game.uid)
{
ConnectionState.innerHTML = localeString('error-game-begin');
ConnectionState.forEach(e => {
e.innerHTML = localeString('error-game-begin');
});
return;
}
console.log(args);
const boardstate = args.game.gamestates[args.game.gamestates.length-1];
const tileset = args.game.tileset;
const tileset = args.tileset;
const myplayer = args.gameuser;
const players = args.game.players;
if (!boardstate || !myplayer || !players || !tileset)
{
ConnectionState.innerHTML = localeString('error-game-begin');
return;
ConnectionState.forEach(e => {
e.innerHTML = localeString('error-game-begin');
}); return;
}
const status = initGame(boardstate, tileset, myplayer, players);
if (!status)
{
ConnectionState.innerHTML = localeString('error-game-begin');
ConnectionState.forEach(e => {
e.innerHTML = localeString('error-game-begin');
});
return;
}
}
@@ -210,7 +236,9 @@ if (urlParser.get('uid') === null)
if (isSingleplayer)
{
ConnectionState.innerHTML = localeString('no-connection-singleplayer');
ConnectionState.forEach(e => {
e.innerHTML = localeString('no-connection-singleplayer');
});
alert('Singleplayer is not implemented yet! a practice board will be set up to demonstrate tech and tile stuff');
} else
{

1
client/public/scrabble/pieces.js
View File

@@ -29,7 +29,6 @@ TILE OBJECT
let PiecesDrawer = [];
// Expects structure [{letter: '', score: int}]
// Returns array of tile IDs that were added
function addPiecesToDrawer(pieces)
{
for (const piece of pieces)

38
client/public/scrabble/ui.js Normal file
View File

@@ -0,0 +1,38 @@
// DOES NOT DEAL WITH GAME BOARD
function setupUsers()
{
}
function onExchangeTiles()
{
}
function onSkipTurn()
{
}
function onPlayTurn()
{
}
function onMessageSend()
{
}
function onTurnProcess()
{
}
function onTurnPlay()
{
}