Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-04-26 09:59:59 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Allow selecting preferred colours

Browse Source
This commit is contained in:
Andrio Celos 2023-12-11 13:55:48 +11:00
parent 08a539b67d
commit 329993b15d
4 changed files with 96 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
TableturfBattleClient/index.html
View File

@ -731,6 +731,35 @@
<div id="settingsMessage"></div> <div id="settingsMessage"></div>
<form id="settingsDialogForm" method="dialog"> <form id="settingsDialogForm" method="dialog">
<p><label for="optionsColourLock"><input type="checkbox" id="optionsColourLock" checked/> Colour lock</label></p> <p><label for="optionsColourLock"><input type="checkbox" id="optionsColourLock" checked/> Colour lock</label></p>
<p>
Preferred colours &ndash;
<label for="optionsColourGoodBox">Good guy:
<select id="optionsColourGoodBox">
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="limegreen">Lime</option>
<option value="green">Green</option>
<option value="turquoise">Turquoise</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
<option value="magenta">Magenta</option>
</select>
</label>
<label for="optionsColourBadBox">Bad guy:
<select id="optionsColourBadBox">
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="limegreen">Lime</option>
<option value="green">Green</option>
<option value="turquoise">Turquoise</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
<option value="magenta">Magenta</option>
</select>
</label>
</p>
<p><label for="optionsTurnNumberStyle">Turn number style: <select id="optionsTurnNumberStyle"><option value="remaining" selected>Turns remaining</option><option value="absolute">Turn number</option></select></label></p> <p><label for="optionsTurnNumberStyle">Turn number style: <select id="optionsTurnNumberStyle"><option value="remaining" selected>Turns remaining</option><option value="absolute">Turn number</option></select></label></p>
<p><label for="optionsSpecialWeaponSorting">Special weapon card sorting: <select id="optionsSpecialWeaponSorting"><option value="First" selected>First</option><option value="Last">Last</option><option value="InOrder">In order</option></select></label></p> <p><label for="optionsSpecialWeaponSorting">Special weapon card sorting: <select id="optionsSpecialWeaponSorting"><option value="First" selected>First</option><option value="Last">Last</option><option value="InOrder">In order</option></select></label></p>
<button type="submit">Close</button> <button type="submit">Close</button>

2
TableturfBattleClient/src/Config.ts
View File

@ -15,6 +15,8 @@ enum SpecialWeaponSorting {
class Config { class Config {
name: string | null = null; name: string | null = null;
colourLock = true; colourLock = true;
goodColour?: string;
badColour?: string;
absoluteTurnNumber = false; absoluteTurnNumber = false;
specialWeaponSorting = SpecialWeaponSorting.First; specialWeaponSorting = SpecialWeaponSorting.First;
lastCustomRoomConfig?: CustomRoomConfig; lastCustomRoomConfig?: CustomRoomConfig;

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

@ -29,9 +29,23 @@ const gameSetupSpectateBox = document.getElementById('gameSetupSpectateBox') as
const gameSetupSubmitButton = document.getElementById('gameSetupSubmitButton') as HTMLButtonElement; const gameSetupSubmitButton = document.getElementById('gameSetupSubmitButton') as HTMLButtonElement;
const optionsColourLock = document.getElementById('optionsColourLock') as HTMLInputElement; const optionsColourLock = document.getElementById('optionsColourLock') as HTMLInputElement;
const optionsColourGoodBox = document.getElementById('optionsColourGoodBox') as HTMLSelectElement;
const optionsColourBadBox = document.getElementById('optionsColourBadBox') as HTMLSelectElement;
const optionsTurnNumberStyle = document.getElementById('optionsTurnNumberStyle') as HTMLSelectElement; const optionsTurnNumberStyle = document.getElementById('optionsTurnNumberStyle') as HTMLSelectElement;
const optionsSpecialWeaponSorting = document.getElementById('optionsSpecialWeaponSorting') as HTMLSelectElement; const optionsSpecialWeaponSorting = document.getElementById('optionsSpecialWeaponSorting') as HTMLSelectElement;
const colours = {
red: { colour: { r: 0xf2, g: 0x20, b: 0x0d }, specialColour: { r: 0xff, g: 0x8c, b: 0x1a }, specialAccentColour: { r: 0xff, g: 0xd5, b: 0xcc }, uiBaseColourIsSpecialColour: false },
orange: { colour: { r: 0xf2, g: 0x74, b: 0x0d }, specialColour: { r: 0xff, g: 0x40, b: 0x00 }, specialAccentColour: { r: 0xff, g: 0xcc, b: 0x99 }, uiBaseColourIsSpecialColour: true },
yellow: { colour: { r: 0xec, g: 0xf9, b: 0x01 }, specialColour: { r: 0xfa, g: 0x9e, b: 0x00 }, specialAccentColour: { r: 0xf9, g: 0xf9, b: 0x1f }, uiBaseColourIsSpecialColour: true },
limegreen: { colour: { r: 0xc0, g: 0xf9, b: 0x15 }, specialColour: { r: 0x6a, g: 0xff, b: 0x00 }, specialAccentColour: { r: 0xe6, g: 0xff, b: 0x99 }, uiBaseColourIsSpecialColour: true },
green: { colour: { r: 0x06, g: 0xe0, b: 0x06 }, specialColour: { r: 0x33, g: 0xff, b: 0xcc }, specialAccentColour: { r: 0xb3, g: 0xff, b: 0xd9 }, uiBaseColourIsSpecialColour: false },
turquoise: { colour: { r: 0x00, g: 0xff, b: 0xea }, specialColour: { r: 0x00, g: 0xa8, b: 0xe0 }, specialAccentColour: { r: 0x99, g: 0xff, b: 0xff }, uiBaseColourIsSpecialColour: true },
blue: { colour: { r: 0x4a, g: 0x5c, b: 0xfc }, specialColour: { r: 0x01, g: 0xed, b: 0xfe }, specialAccentColour: { r: 0xd5, g: 0xe1, b: 0xe1 }, uiBaseColourIsSpecialColour: false },
purple: { colour: { r: 0xa1, g: 0x06, b: 0xef }, specialColour: { r: 0xff, g: 0x00, b: 0xff }, specialAccentColour: { r: 0xff, g: 0xb3, b: 0xff }, uiBaseColourIsSpecialColour: false },
magenta: { colour: { r: 0xf9, g: 0x06, b: 0xe0 }, specialColour: { r: 0x80, g: 0x06, b: 0xf9 }, specialAccentColour: { r: 0xeb, g: 0xb4, b: 0xfd }, uiBaseColourIsSpecialColour: true },
};
let shownMaxPlayersWarning = false; let shownMaxPlayersWarning = false;
function setLoadingMessage(message: string | null) { function setLoadingMessage(message: string | null) {
@ -289,6 +303,8 @@ preGameDeckEditorButton.addEventListener('click', e => {
preGameSettingsButton.addEventListener('click', e => { preGameSettingsButton.addEventListener('click', e => {
e.preventDefault(); e.preventDefault();
optionsColourGoodBox.value = userConfig.goodColour ?? 'yellow';
optionsColourBadBox.value = userConfig.badColour ?? 'blue';
optionsTurnNumberStyle.value = turnNumberLabel.absoluteMode ? 'absolute' : 'remaining'; optionsTurnNumberStyle.value = turnNumberLabel.absoluteMode ? 'absolute' : 'remaining';
optionsSpecialWeaponSorting.value = SpecialWeaponSorting[userConfig.specialWeaponSorting]; optionsSpecialWeaponSorting.value = SpecialWeaponSorting[userConfig.specialWeaponSorting];
settingsDialog.showModal(); settingsDialog.showModal();
@ -326,20 +342,45 @@ preGameReplayButton.addEventListener('click', e => {
new ReplayLoader(m[1]).loadReplay(); new ReplayLoader(m[1]).loadReplay();
}); });
function setPreferredColours() {
const colour1 = colours[(userConfig.goodColour ?? 'yellow') as keyof typeof colours];
document.body.style.setProperty('--primary-colour-1', `rgb(${colour1.colour.r}, ${colour1.colour.g}, ${colour1.colour.b})`);
document.body.style.setProperty('--special-colour-1', `rgb(${colour1.specialColour.r}, ${colour1.specialColour.g}, ${colour1.specialColour.b})`);
document.body.style.setProperty('--special-accent-colour-1', `rgb(${colour1.specialAccentColour.r}, ${colour1.specialAccentColour.g}, ${colour1.specialAccentColour.b})`);
uiBaseColourIsSpecialColourPerPlayer[0] = colour1.uiBaseColourIsSpecialColour;
uiBaseColourIsSpecialColourOutOfGame = colour1.uiBaseColourIsSpecialColour;
gamePage.dataset.uiBaseColourIsSpecialColour = uiBaseColourIsSpecialColourOutOfGame.toString();
const colour2 = colours[(userConfig.badColour ?? 'blue') as keyof typeof colours];
document.body.style.setProperty('--primary-colour-2', `rgb(${colour2.colour.r}, ${colour2.colour.g}, ${colour2.colour.b})`);
document.body.style.setProperty('--special-colour-2', `rgb(${colour2.specialColour.r}, ${colour2.specialColour.g}, ${colour2.specialColour.b})`);
document.body.style.setProperty('--special-accent-colour-2', `rgb(${colour2.specialAccentColour.r}, ${colour2.specialAccentColour.g}, ${colour2.specialAccentColour.b})`);
uiBaseColourIsSpecialColourPerPlayer[1] = colour2.uiBaseColourIsSpecialColour;
for (let i = 3; 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}`);
uiBaseColourIsSpecialColourPerPlayer[i] = true;
}
}
optionsColourLock.addEventListener('change', () => { optionsColourLock.addEventListener('change', () => {
userConfig.colourLock = optionsColourLock.checked; userConfig.colourLock = optionsColourLock.checked;
saveSettings(); saveSettings();
if (userConfig.colourLock) { setPreferredColours();
for (let i = 1; i <= 4; i++) { });
document.body.style.removeProperty(`--primary-colour-${i}`);
document.body.style.removeProperty(`--special-colour-${i}`); optionsColourGoodBox.addEventListener('change', () => {
document.body.style.removeProperty(`--special-accent-colour-${i}`); userConfig.goodColour = optionsColourGoodBox.value;
uiBaseColourIsSpecialColourOutOfGame = true; saveSettings();
uiBaseColourIsSpecialColourPerPlayer = [ true, false, true, true ]; setPreferredColours();
gamePage.dataset.uiBaseColourIsSpecialColour = 'true'; });
} optionsColourBadBox.addEventListener('change', () => {
} userConfig.badColour = optionsColourBadBox.value;
}) saveSettings();
setPreferredColours();
});
optionsTurnNumberStyle.addEventListener('change', () => turnNumberLabel.absoluteMode = optionsTurnNumberStyle.value == 'absolute'); optionsTurnNumberStyle.addEventListener('change', () => turnNumberLabel.absoluteMode = optionsTurnNumberStyle.value == 'absolute');
optionsSpecialWeaponSorting.addEventListener('change', () => { optionsSpecialWeaponSorting.addEventListener('change', () => {
@ -359,6 +400,9 @@ window.addEventListener('popstate', () => {
// Initialise the settings dialog. // Initialise the settings dialog.
{ {
optionsColourLock.checked = userConfig.colourLock; optionsColourLock.checked = userConfig.colourLock;
optionsColourGoodBox.value = userConfig.goodColour ?? 'yellow';
optionsColourBadBox.value = userConfig.badColour ?? 'blue';
setPreferredColours();
} }
// Initialise the room settings dialog. // Initialise the room settings dialog.

10
TableturfBattleClient/tableturf.css
View File

@ -123,6 +123,16 @@ footer {
#stageSwitch button .stageName { width: 12em; text-align: start; } #stageSwitch button .stageName { width: 12em; text-align: start; }
#stageSwitch button .stageStatus { width: 8em; text-align: end; } #stageSwitch button .stageStatus { width: 8em; text-align: end; }
option[value='red'] { color: #f2200d; }
option[value='orange'] { color: #f2740d; }
option[value='yellow'] { color: #ecf901; }
option[value='limegreen'] { color: #c0f915; }
option[value='green'] { color: #06e006; }
option[value='turquoise'] { color: #00ffea; }
option[value='blue'] { color: #4a5cfc; }
option[value='purple'] { color: #a106ef; }
option[value='magenta'] { color: #f906e0; }
/* Lobby page */ /* Lobby page */
#lobbyPage:not([hidden]) { #lobbyPage:not([hidden]) {