Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-03-21 17:34:28 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Reorganise assets and convert images to WebP

Browse Source
This commit is contained in:
Andrio Celos 2024-03-08 12:45:03 +11:00
parent ca287ea8eb
commit 0891a53da1
6 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
TableturfBattleClient/assets/site.webmanifest
View File

@ -2,14 +2,14 @@
"name": "Tableturf Battle",
"icons": [
{
"src": "external/android-chrome-192x192.png",
"src": "external/android-chrome-192x192.webp",
"sizes": "192x192",
"type": "image/png"
"type": "image/webp"
},
{
"src": "external/android-chrome-512x512.png",
"src": "external/android-chrome-512x512.webp",
"sizes": "512x512",
"type": "image/png"
"type": "image/webp"
}
],
"theme_color": "#0c92f2",

6
TableturfBattleClient/index.html
View File

@ -9,8 +9,8 @@
</script>
<title>Tableturf Battle</title>
<link rel="apple-touch-icon" sizes="180x180" href="assets/external/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/external/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/external/favicon-16x16.png">
<link rel="icon" type="image/webp" sizes="32x32" href="assets/external/favicon-32x32.webp">
<link rel="icon" type="image/webp" sizes="16x16" href="assets/external/favicon-16x16.webp">
<link rel="manifest" href="assets/site.webmanifest">
<link rel="stylesheet" href="tableturf.css"/>
<script src="config/config.js"></script>
@ -50,7 +50,7 @@
</defs>
</svg>
<div id="preGamePage" hidden>
<div id="logoBanner"><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.png"></div>
<div id="logoBanner"><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.webp"></div>
<h1>Tableturf Battle</h1>
<form id="preGameForm">
<p><label for="nameBox">Choose a nickname: <input type="text" id="nameBox" required minlength="1" maxlength="20"/></label></p>

8
TableturfBattleClient/src/CardDisplay.ts
View File

@ -66,7 +66,7 @@ class CardDisplay implements ICardElement {
const db = (card.inkColour2.b - card.inkColour1.b) / 255;
svg.insertAdjacentHTML('beforeend', `
<filter id="ink-${this.idNumber}" class="inkFilter" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="${dr} 0 0 0 ${r1} 0 ${dg} 0 0 ${g1} 0 0 ${db} 0 ${b1} 0 0 0 0.88 0"/></filter>
<image href="assets/external/CardInk_00.png" width="100%" height="100%" clip-path="url(#cardBorder)" filter="url(#ink-${this.idNumber})"/>
<image href="assets/external/CardInk_00.webp" width="100%" height="100%" clip-path="url(#cardBorder)" filter="url(#ink-${this.idNumber})"/>
<image href="assets/external/CardFrame_01.webp" width="100%" height="100%" clip-path="url(#cardBorder)"/>
`);
}
@ -141,7 +141,7 @@ class CardDisplay implements ICardElement {
svg.appendChild(text1);
// Size
svg.insertAdjacentHTML('beforeend', `<image class='cardSizeBackground' href='assets/external/Game Assets/CardCost_0${card.rarity}.png' width='74.1' height='74.1' transform='translate(8.4 555) rotate(-45)'/>`);
svg.insertAdjacentHTML('beforeend', `<image class='cardSizeBackground' href='assets/external/CardCost_0${card.rarity}.webp' width='74.1' height='74.1' transform='translate(8.4 555) rotate(-45)'/>`);
svg.insertAdjacentHTML('beforeend', `<text fill='white' stroke='${card.rarity == Rarity.Common ? '#482BB4' : card.rarity == Rarity.Rare ? '#8B7E25' : '#481EF9'}' paint-order='stroke' stroke-width='5' font-size='33.4' x='13.7%' y='92.2%' text-anchor='middle'>${card.size}</text>`);
this.sizeElement = svg.lastElementChild as SVGTextElement;
@ -171,7 +171,7 @@ class CardDisplay implements ICardElement {
rect.classList.add(card.grid[x][y] == Space.SpecialInactive1 ? 'special' : 'ink');
const elements: Element[] = [rect];
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', card.grid[x][y] == Space.SpecialInactive1 ? 'assets/SpecialOverlay.png' : 'assets/InkOverlay.png');
image.setAttribute('href', card.grid[x][y] == Space.SpecialInactive1 ? 'assets/SpecialOverlay.webp' : 'assets/InkOverlay.webp');
elements.push(image);
for (const el of elements) {
@ -191,7 +191,7 @@ class CardDisplay implements ICardElement {
for (let i = 0; i < value; i++) {
let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', 'assets/SpecialOverlay.png');
image.setAttribute('href', 'assets/SpecialOverlay.webp');
for (const el of [ rect, image ]) {
el.setAttribute('x', (110 * (i % 5)).toString());
el.setAttribute('y', (-125 * Math.floor(i / 5)).toString());

2
TableturfBattleClient/src/Pages/GalleryPage.ts
View File

@ -385,7 +385,7 @@ galleryCardEditorRarityBox.addEventListener('change', () => {
display.element.classList.add(Rarity[parseInt(galleryCardEditorRarityBox.value)].toLowerCase());
const sizeImage = <SVGImageElement> display.svg.getElementsByClassName('cardSizeBackground')[0];
sizeImage.setAttribute('href', `assets/external/Game Assets/CardCost_0${galleryCardEditorRarityBox.value}.png`);
sizeImage.setAttribute('href', `assets/external/CardCost_0${galleryCardEditorRarityBox.value}.webp`);
const backgroundImage = <SVGImageElement> display.svg.getElementsByClassName('cardDisplayBackground')[0];
backgroundImage.setAttribute('href', `assets/external/CardBackground-custom-${galleryCardEditorRarityBox.value}-1.webp`);

6
TableturfBattleClient/src/StageButton.ts
View File

@ -37,7 +37,7 @@ class StageButton extends CheckButton {
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('href', 'assets/SpecialOverlay.webp');
image.setAttribute('x', rect.getAttribute('x')!);
image.setAttribute('y', rect.getAttribute('y')!);
image.setAttribute('width', rect.getAttribute('width')!);
@ -45,7 +45,7 @@ class StageButton extends CheckButton {
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('href', 'assets/InkOverlay.webp');
image.setAttribute('x', rect.getAttribute('x')!);
image.setAttribute('y', rect.getAttribute('y')!);
image.setAttribute('width', rect.getAttribute('width')!);
@ -82,7 +82,7 @@ class StageButton extends CheckButton {
cell.setAttribute('class', `SpecialInactive${i + 1}`);
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', 'assets/SpecialOverlay.png');
image.setAttribute('href', 'assets/SpecialOverlay.webp');
image.setAttribute('x', cell.getAttribute('x')!);
image.setAttribute('y', cell.getAttribute('y')!);
image.setAttribute('width', cell.getAttribute('width')!);

48
TableturfBattleClient/tableturf.css
View File

@ -33,7 +33,7 @@ body {
--player-special-accent-colour: var(--special-accent-colour-1);
--theme-colour: #0c92f2;
color: white;
background: url('assets/external/BannerBackground.png') black;
background: url('assets/external/BannerBackground.webp') black;
background-position: 50% -72px;
color-scheme: dark;
}
@ -593,7 +593,7 @@ dialog::backdrop {
.cardSpecialPoint, .playHintSpecial {
display: inline-block;
color: transparent;
background: url('assets/SpecialOverlay.png') center/cover, var(--player-special-colour);
background: url('assets/SpecialOverlay.webp') center/cover, var(--player-special-colour);
width: 1ch;
height: 1ch;
vertical-align: middle;
@ -605,10 +605,10 @@ dialog::backdrop {
width: 1.5ch;
height: 1.5ch;
}
.playHintSpecial:nth-of-type(1):not(:last-of-type) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
.playHintSpecial:nth-of-type(2) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
.playHintSpecial:nth-of-type(3) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
.playHintSpecial:nth-of-type(4) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }
.playHintSpecial:nth-of-type(1):not(:last-of-type) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1); }
.playHintSpecial:nth-of-type(2) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-2); }
.playHintSpecial:nth-of-type(3) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-3); }
.playHintSpecial:nth-of-type(4) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-4); }
.card {
position: relative;
@ -712,19 +712,19 @@ rect.special, g.specialCost rect {
}
#gameBoard td.Empty { background: #000000C0; outline: 1px solid #80808080; outline-offset: -1px; }
#gameBoard td.Wall { background: url('assets/Wall.png') center/cover, grey; }
#gameBoard td.Ink1 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-1); }
#gameBoard td.Ink2 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-2); }
#gameBoard td.Ink3 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-3); }
#gameBoard td.Ink4 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-4); }
#gameBoard td.SpecialInactive1 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
#gameBoard td.SpecialInactive2 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
#gameBoard td.SpecialInactive3 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
#gameBoard td.SpecialInactive4 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }
#gameBoard td.SpecialActive1 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
#gameBoard td.SpecialActive2 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
#gameBoard td.SpecialActive3 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
#gameBoard td.SpecialActive4 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }
#gameBoard td.Wall { background: url('assets/Wall.webp') center/cover, grey; }
#gameBoard td.Ink1 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-1); }
#gameBoard td.Ink2 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-2); }
#gameBoard td.Ink3 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-3); }
#gameBoard td.Ink4 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-4); }
#gameBoard td.SpecialInactive1 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1); }
#gameBoard td.SpecialInactive2 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-2); }
#gameBoard td.SpecialInactive3 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-3); }
#gameBoard td.SpecialInactive4 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-4); }
#gameBoard td.SpecialActive1 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
#gameBoard td.SpecialActive2 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
#gameBoard td.SpecialActive3 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
#gameBoard td.SpecialActive4 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }
#gameBoard.specialAttackVisual td:is(.Ink1, .Ink2, .Ink3, .Ink4) {
opacity: 0.5;
@ -1300,10 +1300,10 @@ rect.special, g.specialCost rect {
.playerBar .specialPoint {
position: relative;
color: transparent;
background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour);
background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour);
}
.playerBar .specialPoint.specialAnimation {
background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour) 25%, var(--special-colour) 75%);
background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour) 25%, var(--special-colour) 75%);
}
.playerBar .specialPoint.specialAnimation > div {
background: color-mix(in srgb, var(--special-colour), var(--special-accent-colour) 75%);
@ -1968,11 +1968,11 @@ button.dragging {
}
#galleryCardEditorGrid button[data-state="4"] {
border: 1px solid grey;
background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-1);
background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-1);
}
#galleryCardEditorGrid button[data-state="8"] {
border: 1px solid grey;
background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1);
background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1);
}
.galleryCardEditorToolbar {
@ -2018,7 +2018,7 @@ button.dragging {
position: relative;
}
#galleryCardEditorSpecialCost button.active {
background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1);
background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1);
}
#galleryCardEditorSpecialCost label {