Add support for upcoming cards and stages

This commit is contained in:
Andrio Celos
2024-02-22 15:42:39 +11:00
parent 3bcf9cbb71
commit 125531cfbe
6 changed files with 389 additions and 28 deletions

View File

@@ -106,18 +106,20 @@ function openGalleryCardView(card: Card) {
galleryCardEditorSubmitButton.hidden = true;
galleryCardEditorCancelButton.innerText = 'Close';
galleryCardEditorRarityBox.value = card.rarity.toString();
galleryCardEditorColour1.value = `#${card.inkColour1.r.toString(16).padStart(2, '0')}${card.inkColour1.g.toString(16).padStart(2, '0')}${card.inkColour1.b.toString(16).padStart(2, '0')}`;
galleryCardEditorColour2.value = `#${card.inkColour2.r.toString(16).padStart(2, '0')}${card.inkColour2.g.toString(16).padStart(2, '0')}${card.inkColour2.b.toString(16).padStart(2, '0')}`;
updateSelectedPreset([card.inkColour1, card.inkColour2]);
if (card.isCustom) {
galleryCardEditorRarityBox.value = card.rarity.toString();
galleryCardEditorColour1.value = `#${card.inkColour1.r.toString(16).padStart(2, '0')}${card.inkColour1.g.toString(16).padStart(2, '0')}${card.inkColour1.b.toString(16).padStart(2, '0')}`;
galleryCardEditorColour2.value = `#${card.inkColour2.r.toString(16).padStart(2, '0')}${card.inkColour2.g.toString(16).padStart(2, '0')}${card.inkColour2.b.toString(16).padStart(2, '0')}`;
updateSelectedPreset([card.inkColour1, card.inkColour2]);
galleryCardEditorName.value = card.line2 == null ? card.name : `${card.line1}\n${card.line2}`;
for (let y = 0; y < 8; y++) {
for (let x = 0; x < 8; x++) {
galleryCardEditorGridButtons[y][x].dataset.state = card.grid[y][x].toString();
galleryCardEditorName.value = card.line2 == null ? card.name : `${card.line1}\n${card.line2}`;
for (let y = 0; y < 8; y++) {
for (let x = 0; x < 8; x++) {
galleryCardEditorGridButtons[y][x].dataset.state = card.grid[y][x].toString();
}
}
updateCustomCardSize();
}
updateCustomCardSize();
galleryCardDialog.showModal();
}
@@ -176,7 +178,7 @@ function updateBitsToComplete() {
if (!cardDatabase.cards) throw new Error('Card database not loaded');
let bitsRequired = 0;
for (const card of cardDatabase.cards) {
if (card.number in ownedCards) continue;
if (card.isUpcoming || card.number in ownedCards) continue;
switch (card.rarity) {
case Rarity.Fresh: bitsRequired += 40; break;
case Rarity.Rare: bitsRequired += 15; break;

View File

@@ -63,7 +63,9 @@ function setLoadingMessage(message: string | null) {
function preGameInitStageDatabase(stages: Stage[]) {
for (let i = 0; i < stages.length; i++) {
const stage = stages[i];
const status = userConfig.lastCustomRoomConfig ? userConfig.lastCustomRoomConfig.stageSwitch[i] : 0;
const status = userConfig.lastCustomRoomConfig && userConfig.lastCustomRoomConfig.stageSwitch.length > i
? userConfig.lastCustomRoomConfig.stageSwitch[i]
: (stages[i].name.startsWith('Upcoming') ? 2 : 0);
const button = document.createElement('button');

View File

@@ -23,17 +23,36 @@ class StageButton extends CheckButton {
for (var x = 0; x < stage.grid.length; x++) {
let col = [ ];
for (var y = 0; y < stage.grid[x].length; y++) {
if (stage.grid[x][y] == Space.Empty) {
if (stage.grid[x][y] == Space.OutOfBounds)
col.push(null);
else {
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.classList.add('empty');
rect.classList.add(Space[stage.grid[x][y]].toString());
rect.setAttribute('x', (100 * x).toString());
rect.setAttribute('y', (100 * y + offset).toString());
rect.setAttribute('width', '100');
rect.setAttribute('height', '100');
gridSvg.appendChild(rect);
col.push(rect);
} else
col.push(null);
if (stage.grid[x][y] & Space.SpecialInactive1) {
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', 'assets/SpecialOverlay.png');
image.setAttribute('x', rect.getAttribute('x')!);
image.setAttribute('y', rect.getAttribute('y')!);
image.setAttribute('width', rect.getAttribute('width')!);
image.setAttribute('height', rect.getAttribute('height')!);
gridSvg.appendChild(image);
} else if (stage.grid[x][y] & Space.Ink1) {
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', 'assets/InkOverlay.png');
image.setAttribute('x', rect.getAttribute('x')!);
image.setAttribute('y', rect.getAttribute('y')!);
image.setAttribute('width', rect.getAttribute('width')!);
image.setAttribute('height', rect.getAttribute('height')!);
gridSvg.appendChild(image);
}
}
}
cols.push(col);
}
@@ -50,7 +69,7 @@ class StageButton extends CheckButton {
setStartSpaces(numPlayers: number) {
for (const el of this.startCells) {
el[0].setAttribute('class', 'empty');
el[0].setAttribute('class', 'Empty');
el[1].parentElement!.removeChild(el[1]);
}
this.startCells.splice(0);
@@ -59,7 +78,7 @@ class StageButton extends CheckButton {
for (let i = 0; i < numPlayers; i++) {
const space = startSpaces[i];
const cell = this.cells[space.x][space.y]!;
cell.classList.add(`start${i + 1}`);
cell.setAttribute('class', `SpecialInactive${i + 1}`);
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', 'assets/SpecialOverlay.png');

View File

@@ -389,10 +389,14 @@ dialog::backdrop {
box-sizing: border-box;
}
.stageGrid rect.start1 { fill: var(--special-colour-1); }
.stageGrid rect.start2 { fill: var(--special-colour-2); }
.stageGrid rect.start3 { fill: var(--special-colour-3); }
.stageGrid rect.start4 { fill: var(--special-colour-4); }
.stageGrid rect.Ink1 { fill: var(--primary-colour-1); }
.stageGrid rect.Ink2 { fill: var(--primary-colour-2); }
.stageGrid rect.Ink3 { fill: var(--primary-colour-3); }
.stageGrid rect.Ink4 { fill: var(--primary-colour-4); }
.stageGrid rect.SpecialInactive1 { fill: var(--special-colour-1); }
.stageGrid rect.SpecialInactive2 { fill: var(--special-colour-2); }
.stageGrid rect.SpecialInactive3 { fill: var(--special-colour-3); }
.stageGrid rect.SpecialInactive4 { fill: var(--special-colour-4); }
:is(.stage, .stageRandom):is(:hover, :focus-within):not(.checked, .disabled)::before {
content: '';
@@ -632,15 +636,16 @@ svg.card text.cardDisplayName {
transform: scaleX(var(--scale));
}
rect.empty {
rect.Empty, rect.empty {
fill: #00000080;
stroke: #60606080;
stroke-width: 6;
}
.stageGrid rect.empty {
.stageGrid rect.Empty {
stroke: grey;
stroke-width: 12;
}
rect.Wall { fill: grey; }
rect.ink {
fill: var(--player-primary-colour);
@@ -1956,7 +1961,7 @@ button.dragging {
#galleryCardEditorImageFile { display: none; }
#galleryCardEditorImageToolbar2 input {
width: 3em;
width: 3em;
}
#galleryCardEditorColourPresetBox {