mirror of
https://github.com/thepaperpilot/Super-Auto-Coots.git
synced 2024-11-22 00:21:33 +00:00
Implemented new stats displays
This commit is contained in:
parent
d4955a14b3
commit
b1245df06e
6 changed files with 36 additions and 44 deletions
|
|
@ -37,6 +37,9 @@
|
||||||
<link rel="prefetch" href="Shadow.png" />
|
<link rel="prefetch" href="Shadow.png" />
|
||||||
<link rel="prefetch" href="shop window.png" />
|
<link rel="prefetch" href="shop window.png" />
|
||||||
<link rel="prefetch" href="shop cat.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>
|
<title>Profectus</title>
|
||||||
<meta name="description" content="A project made in Profectus"/>
|
<meta name="description" content="A project made in Profectus"/>
|
||||||
|
|
|
||||||
BIN
public/health bar.png
Normal file
BIN
public/health bar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
public/money bar.png
Normal file
BIN
public/money bar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
BIN
public/win bar.png
Normal file
BIN
public/win bar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -75,28 +75,34 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-box {
|
.resource-box {
|
||||||
display: flex;
|
font-size: 3vmin;
|
||||||
border: solid 2px var(--bought);
|
|
||||||
padding: 0 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 2em;
|
|
||||||
align-items: center;
|
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) {
|
.resource-box:not(:last-child) {
|
||||||
margin-right: 20px !important;
|
margin-right: 1vmin !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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop {
|
.shop {
|
||||||
|
|
|
||||||
|
|
@ -489,14 +489,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
||||||
<div class="stream-details" style="left: 1vmin">
|
<div class="stream-details" style="left: 1vmin">
|
||||||
<span style="margin-left: 0">{nickname.value} (YOU)</span>
|
<span style="margin-left: 0">{nickname.value} (YOU)</span>
|
||||||
<div class="stats" style="margin-left: 0">
|
<div class="stats" style="margin-left: 0">
|
||||||
<div class="resource-box">
|
<div class="resource-box lives">{lives.value}</div>
|
||||||
<img src={heart} />
|
<div class="resource-box wins">{wins.value}/5</div>
|
||||||
<span>{lives.value}</span>
|
|
||||||
</div>
|
|
||||||
<div class="resource-box">
|
|
||||||
<span class="material-icons">emoji_events</span>
|
|
||||||
<span>{wins.value}/5</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="view-counter" style="right: 1vmin">
|
<div class="view-counter" style="right: 1vmin">
|
||||||
|
|
@ -549,13 +543,11 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
||||||
{battle.value.enemyNickname}
|
{battle.value.enemyNickname}
|
||||||
</span>
|
</span>
|
||||||
<div class="stats" style="margin-right: 0">
|
<div class="stats" style="margin-right: 0">
|
||||||
<div class="resource-box">
|
<div class="resource-box lives">
|
||||||
<img src={heart} />
|
{battle.value.enemyLives}
|
||||||
<span>{battle.value.enemyLives}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="resource-box">
|
<div class="resource-box wins">
|
||||||
<span class="material-icons">emoji_events</span>
|
{battle.value.enemyWins}/5
|
||||||
<span>{battle.value.enemyWins}/5</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -625,18 +617,9 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
||||||
>
|
>
|
||||||
<h2 class="team-nickname">{nickname.value}</h2>
|
<h2 class="team-nickname">{nickname.value}</h2>
|
||||||
<Row class="manager-header">
|
<Row class="manager-header">
|
||||||
<div class="resource-box">
|
<div class="resource-box moguls">{gold.value}</div>
|
||||||
<span class="material-icons">credit_card</span>
|
<div class="resource-box lives">{lives.value}</div>
|
||||||
{gold.value}
|
<div class="resource-box wins">{wins.value}/5</div>
|
||||||
</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 style="flex-grow: 1" />
|
<div style="flex-grow: 1" />
|
||||||
{findingMatch.value ? (
|
{findingMatch.value ? (
|
||||||
<div class="waiting">Finding opposing team...</div>
|
<div class="waiting">Finding opposing team...</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue