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

Visual update

Browse Source
This commit is contained in:
Andrio Celos 2023-02-24 23:28:05 +11:00
parent 7c33ceba94
commit 154d223d17
7 changed files with 47 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,4 +1,4 @@
assets/
external/
build/
config/

BIN
TableturfBattleClient/assets/InkOverlay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
TableturfBattleClient/assets/SpecialOverlay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
TableturfBattleClient/assets/Wall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 B

17
TableturfBattleClient/assets/site.webmanifest Normal file
View File

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

8
TableturfBattleClient/index.html
View File

@ -8,9 +8,9 @@
document.getElementsByTagName('base')[0].href = baseUrl;
</script>
<title>Tableturf Battle</title>
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<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="manifest" href="assets/site.webmanifest">
<link rel="stylesheet" href="tableturf.css"/>
<script src="config/config.js"></script>
@ -25,7 +25,7 @@
<body>
<div id="noJSPage">This application requires JavaScript.</div>
<div id="preGamePage" hidden>
<p><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/logo.png"></p>
<p><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.png"></p>
<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>

37
TableturfBattleClient/tableturf.css
View File

@ -1,11 +1,11 @@
@font-face {
font-family: 'Splatoon 1';
src: url('assets/splatoon1.woff2') format('woff2');
src: url('assets/external/splatoon1.woff2') format('woff2');
}
@font-face {
font-family: 'Splatoon 2';
src: url('assets/splatoon2.woff2') format('woff2');
src: url('assets/external/splatoon2.woff2') format('woff2');
}
body, dialog {
@ -375,23 +375,24 @@ dialog::backdrop {
margin: auto;
}
#gameBoard td { border: 1px solid grey; }
#gameBoard td.OutOfBounds { border-color: transparent; }
#gameBoard td.Wall { background: grey; }
#gameBoard td.Ink1 { background: var(--primary-colour-1); }
#gameBoard td.Ink2 { background: var(--primary-colour-2); }
#gameBoard td.Ink3 { background: var(--primary-colour-3); }
#gameBoard td.Ink4 { background: var(--primary-colour-4); }
#gameBoard td.SpecialInactive1 { background: var(--special-colour-1); }
#gameBoard td.SpecialInactive2 { background: var(--special-colour-2); }
#gameBoard td.SpecialInactive3 { background: var(--special-colour-3); }
#gameBoard td.SpecialInactive4 { background: var(--special-colour-4); }
#gameBoard td.SpecialActive1 { background: radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
#gameBoard td.SpecialActive2 { background: radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
#gameBoard td.SpecialActive3 { background: radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
#gameBoard td.SpecialActive4 { background: radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }
/* #gameBoard td { border: 1px solid rgba(0, 0, 0, 25%); } */
#gameBoard td { border: 1px solid transparent; }
#gameBoard td.Empty { border-color: #80808080; }
#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/contain, 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.hover {
#gameBoard td {
position: relative;
}