Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-08-24 11:54:29 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add colour lock (currently on by default)

Browse Source
This commit is contained in:
Andrio Celos
2023-10-21 19:03:09 +11:00
parent e430d7f3d8
commit c9862539dc
5 changed files with 74 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
TableturfBattleClient/index.html
View File

@@ -58,6 +58,7 @@
<p>
<a id="preGameDeckEditorButton" href="deckeditor">Edit decks</a> |
<a id="preGameReplayButton" href="replay">Replay</a> |
<a id="preGameSettingsButton" href="settings">Settings</a> |
<a id="preGameHelpButton" href="help">Help</a>
</p>
<div id="preGameLoadingSection" class="loadingContainer" hidden>
@@ -655,6 +656,13 @@
</form>
</footer>
</dialog>
<dialog id="settingsDialog">
<div id="settingsMessage"></div>
<form id="settingsDialogForm" method="dialog">
<p><label for="optionsColourLock"><input type="checkbox" id="optionsColourLock" checked/> Colour lock</label></p>
<button type="submit">Close</button>
</form>
</dialog>
<script src="build/tsbuild.js"></script>
</body>
</html>

24
TableturfBattleClient/src/Config.ts
View File

@@ -1,4 +1,4 @@
interface Config {
interface AppConfig {
apiBaseUrl: string,
qrCodeGameUrl: string | null | undefined,
qrCodeCorrectionLevel: QRCode.CorrectLevel | keyof typeof QRCode.CorrectLevel | undefined,
@@ -6,5 +6,25 @@ interface Config {
discordTitle?: string
}
declare var config: Config;
class Config {
name: string | null = null;
colourLock = true;
}
declare var config: AppConfig;
declare var polyfillActive: boolean;
let userConfig = new Config();
{
const configString = localStorage.getItem('settings');
if (configString) {
const configDict = JSON.parse(configString);
for (const k in configDict)
(userConfig as any)[k] = configDict[k];
}
}
function saveSettings() {
localStorage.setItem('settings', JSON.stringify(userConfig));
}

15
TableturfBattleClient/src/Pages/GamePage.ts
View File

@@ -140,7 +140,7 @@ function initReplay() {
gameButtonsContainer.hidden = false;
gamePage.dataset.myPlayerIndex = '0';
updateColours();
gamePage.dataset.uiBaseColourIsSpecialColour = currentGame!.game.players[0].uiBaseColourIsSpecialColour?.toString();
gamePage.dataset.uiBaseColourIsSpecialColour = (userConfig.colourLock || (currentGame!.game.players[0].uiBaseColourIsSpecialColour ?? true)).toString();
canPlay = false;
showPage('game');
clearPlayContainers();
@@ -395,7 +395,9 @@ flipButton.addEventListener('click', () => {
if (currentReplay.watchingPlayer >= currentGame.game.players.length)
currentReplay.watchingPlayer = 0;
gamePage.dataset.myPlayerIndex = currentReplay.watchingPlayer.toString();
gamePage.dataset.uiBaseColourIsSpecialColour = currentGame.game.players[currentReplay.watchingPlayer].uiBaseColourIsSpecialColour?.toString();
gamePage.dataset.uiBaseColourIsSpecialColour = (userConfig.colourLock
? currentReplay.watchingPlayer != 1
: currentGame.game.players[currentReplay.watchingPlayer].uiBaseColourIsSpecialColour ?? true).toString();
board.flip = currentReplay.watchingPlayer % 2 != 0;
clearShowDeck();
replayUpdateHand();
@@ -1334,12 +1336,15 @@ function setColour(playerIndex: number, colourIndex: number, colour: Colour) {
if (!currentGame || playerIndex >= currentGame.game.players.length) return;
if (colourIndex == 0) {
currentGame.game.players[playerIndex].colour = colour;
document.body.style.setProperty(`--primary-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
if (!userConfig.colourLock)
document.body.style.setProperty(`--primary-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
} else if (colourIndex == 1) {
currentGame.game.players[playerIndex].specialColour = colour;
document.body.style.setProperty(`--special-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
if (!userConfig.colourLock)
document.body.style.setProperty(`--special-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
} else {
currentGame.game.players[playerIndex].specialAccentColour = colour;
document.body.style.setProperty(`--special-accent-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
if (!userConfig.colourLock)
document.body.style.setProperty(`--special-accent-colour-${playerIndex + 1}`, `rgb(${colour.r}, ${colour.g}, ${colour.b})`);
}
}

32
TableturfBattleClient/src/Pages/PreGamePage.ts
View File

@@ -8,8 +8,10 @@ const preGameDeckEditorButton = document.getElementById('preGameDeckEditorButton
const preGameLoadingSection = document.getElementById('preGameLoadingSection')!;
const preGameLoadingLabel = document.getElementById('preGameLoadingLabel')!;
const preGameReplayButton = document.getElementById('preGameReplayButton') as HTMLLinkElement;
const preGameSettingsButton = document.getElementById('preGameSettingsButton') as HTMLLinkElement;
const preGameHelpButton = document.getElementById('preGameHelpButton') as HTMLLinkElement;
const helpDialog = document.getElementById('helpDialog') as HTMLDialogElement;
const settingsDialog = document.getElementById('settingsDialog') as HTMLDialogElement;
const gameSetupDialog = document.getElementById('gameSetupDialog') as HTMLDialogElement;
const gameSetupForm = document.getElementById('gameSetupForm') as HTMLFormElement;
@@ -17,6 +19,8 @@ const maxPlayersBox = document.getElementById('maxPlayersBox') as HTMLSelectElem
const turnTimeLimitBox = document.getElementById('turnTimeLimitBox') as HTMLInputElement;
const goalWinCountBox = document.getElementById('goalWinCountBox') as HTMLSelectElement;
const optionsColourLock = document.getElementById('optionsColourLock') as HTMLInputElement;
let shownMaxPlayersWarning = false;
function setLoadingMessage(message: string | null) {
@@ -46,7 +50,7 @@ preGameForm.addEventListener('submit', e => {
e.preventDefault();
const name = nameBox.value;
window.localStorage.setItem('name', name);
localStorage.setItem('name', name);
if (e.submitter?.id == 'newGameButton' || (e.submitter?.id == 'preGameImplicitSubmitButton' && !gameIDBox.value)) {
createRoom(false);
@@ -61,7 +65,7 @@ gameSetupForm.addEventListener('submit', e => {
if (e.submitter?.id != 'gameSetupSubmitButton')
return;
const name = nameBox.value;
window.localStorage.setItem('name', name);
localStorage.setItem('name', name);
createRoom(true);
});
@@ -203,6 +207,11 @@ preGameDeckEditorButton.addEventListener('click', e => {
setUrl('deckeditor');
});
preGameSettingsButton.addEventListener('click', e => {
e.preventDefault();
settingsDialog.showModal();
});
preGameHelpButton.addEventListener('click', e => {
e.preventDefault();
helpDialog.showModal();
@@ -235,6 +244,20 @@ preGameReplayButton.addEventListener('click', e => {
new ReplayLoader(m[1]).loadReplay();
});
optionsColourLock.addEventListener('change', () => {
userConfig.colourLock = optionsColourLock.checked;
saveSettings();
if (userConfig.colourLock) {
for (let i = 1; i <= 4; i++) {
document.body.style.removeProperty(`--primary-colour-${i}`);
document.body.style.removeProperty(`--special-colour-${i}`);
document.body.style.removeProperty(`--special-accent-colour-${i}`);
uiBaseColourIsSpecialColourOutOfGame = true;
gamePage.dataset.uiBaseColourIsSpecialColour = 'true';
}
}
})
let playerName = localStorage.getItem('name');
(document.getElementById('nameBox') as HTMLInputElement).value = playerName || '';
@@ -244,6 +267,11 @@ window.addEventListener('popstate', () => {
processUrl();
});
// Initialise the settings dialog.
{
optionsColourLock.checked = userConfig.colourLock;
}
if (!canPushState)
preGameDeckEditorButton.href = '#deckeditor';
setLoadingMessage('Loading game data...');

6
TableturfBattleClient/src/app.ts
View File

@@ -70,7 +70,7 @@ function showPage(key: string) {
}
function setClientToken(token: string) {
window.localStorage.setItem('clientToken', token);
localStorage.setItem('clientToken', token);
clientToken = token;
}
@@ -125,7 +125,9 @@ function onGameStateChange(game: any, playerData: PlayerData | null) {
}
loadPlayers(game.players);
gamePage.dataset.myPlayerIndex = playerData ? playerData.playerIndex.toString() : '';
gamePage.dataset.uiBaseColourIsSpecialColour = playerData && game.players[playerData.playerIndex].uiBaseColourIsSpecialColour ? 'true' : 'false';
gamePage.dataset.uiBaseColourIsSpecialColour = (userConfig.colourLock
? (playerData?.playerIndex ?? 0) != 1
: game.players[playerData?.playerIndex ?? 0].uiBaseColourIsSpecialColour ?? true).toString();
if (game.state != GameState.WaitingForPlayers)
lobbyLockSettings(true);