thepaperpilot/Super-Auto-Coots
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Super-Auto-Coots.git synced 2024-11-24 17:31:52 +00:00
Code Issues Releases Activity Actions

Implemented new stats displays

Browse source
This commit is contained in:
thepaperpilot 2023-02-21 22:32:58 -06:00
parent d4955a14b3
commit b1245df06e
6 changed files with 36 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -37,6 +37,9 @@
<link rel="prefetch" href="Shadow.png" />
<link rel="prefetch" href="shop window.png" />
<link rel="prefetch" href="shop cat.png" />
<link rel="prefetch" href="health bar.png" />
<link rel="prefetch" href="win bar.png" />
<link rel="prefetch" href="money bar.png" />
<title>Profectus</title>
<meta name="description" content="A project made in Profectus"/>

BIN
public/health bar.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
public/money bar.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

BIN
public/win bar.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.3 KiB

42
src/data/common.css
View file

@ -75,28 +75,34 @@
}
.resource-box {
display: flex;
border: solid 2px var(--bought);
padding: 0 4px;
border-radius: 4px;
font-size: 2em;
font-size: 3vmin;
align-items: center;
image-rendering: pixelated;
border-style: solid;
height: 3vmin;
display: flex;
}
.resource-box.wins {
border-image: url("../../public/win bar.png");
border-image-slice: 12 12 18 96 fill;
border-width: 0.5vmin 0.5vmin 0.75vmin 4vmin;
}
.resource-box.lives {
border-image: url("../../public/health bar.png");
border-image-slice: 12 12 18 84 fill;
border-width: 0.5vmin 0.5vmin 0.75vmin 3.5vmin;
}
.resource-box.moguls {
border-image: url("../../public/money bar.png");
border-image-slice: 12 12 18 84 fill;
border-width: 0.5vmin 0.5vmin 0.75vmin 3.5vmin;
}
.resource-box:not(:last-child) {
margin-right: 20px !important;
}
.resource-box .material-icons {
margin-right: 6px;
font-size: 1em;
}
.resource-box img {
margin-right: 6px;
width: 1em;
transform: scale(2);
image-rendering: pixelated;
margin-right: 1vmin !important;
}
.shop {

35
src/data/projEntry.tsx
View file

@ -489,14 +489,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
<div class="stream-details" style="left: 1vmin">
<span style="margin-left: 0">{nickname.value} (YOU)</span>
<div class="stats" style="margin-left: 0">
<div class="resource-box">
<img src={heart} />
<span>{lives.value}</span>
</div>
<div class="resource-box">
<span class="material-icons">emoji_events</span>
<span>{wins.value}/5</span>
</div>
<div class="resource-box lives">{lives.value}</div>
<div class="resource-box wins">{wins.value}/5</div>
</div>
</div>
<div class="view-counter" style="right: 1vmin">
@ -549,13 +543,11 @@ export const main = createLayer("main", function (this: BaseLayer) {
{battle.value.enemyNickname}
</span>
<div class="stats" style="margin-right: 0">
<div class="resource-box">
<img src={heart} />
<span>{battle.value.enemyLives}</span>
<div class="resource-box lives">
{battle.value.enemyLives}
</div>
<div class="resource-box">
<span class="material-icons">emoji_events</span>
<span>{battle.value.enemyWins}/5</span>
<div class="resource-box wins">
{battle.value.enemyWins}/5
</div>
</div>
</div>
@ -625,18 +617,9 @@ export const main = createLayer("main", function (this: BaseLayer) {
>
<h2 class="team-nickname">{nickname.value}</h2>
<Row class="manager-header">
<div class="resource-box">
<span class="material-icons">credit_card</span>
{gold.value}
</div>
<div class="resource-box">
<img src={heart} />
{lives.value}
</div>
<div class="resource-box">
<span class="material-icons">emoji_events</span>
{wins.value}/5
</div>
<div class="resource-box moguls">{gold.value}</div>
<div class="resource-box lives">{lives.value}</div>
<div class="resource-box wins">{wins.value}/5</div>
<div style="flex-grow: 1" />
{findingMatch.value ? (
<div class="waiting">Finding opposing team...</div>