Implement battle outcome images

This commit is contained in:
thepaperpilot 2023-02-25 12:02:08 -06:00
parent ef1df8aa7c
commit 375143c00b
6 changed files with 17 additions and 17 deletions

View file

@ -54,6 +54,9 @@
<link rel="prefetch" href="defeat face.png" /> <link rel="prefetch" href="defeat face.png" />
<link rel="prefetch" href="win face.png" /> <link rel="prefetch" href="win face.png" />
<link rel="prefetch" href="Play Again.png" /> <link rel="prefetch" href="Play Again.png" />
<link rel="prefetch" href="Victory Button.png" />
<link rel="prefetch" href="Defeat Button.png" />
<link rel="prefetch" href="Tie Button.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/Defeat Button.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

BIN
public/Tie Button.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/Victory Button.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -276,20 +276,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: 2vmin 4vmin;
background: var(--tooltip-background);
border-radius: 4vmin;
font-size: 6vmin;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer; cursor: pointer;
color: var(--feature-foreground);
}
.outcome span {
margin: 1vmin;
} }
.character-transition-enter-from { .character-transition-enter-from {

View file

@ -13,6 +13,8 @@ import { formatWhole } from "util/bignum";
import { render } from "util/vue"; import { render } from "util/vue";
import { computed, ref, TransitionGroup } from "vue"; import { computed, ref, TransitionGroup } from "vue";
import autoplay from "../../public/autoplay.png"; import autoplay from "../../public/autoplay.png";
import defeatButton from "../../public/Defeat Button.png";
import defeatFace from "../../public/defeat face.png";
import fast from "../../public/fast forward.png"; import fast from "../../public/fast forward.png";
import freezeShop from "../../public/Freeze shop.png"; import freezeShop from "../../public/Freeze shop.png";
import heart_small from "../../public/heart_small.png"; import heart_small from "../../public/heart_small.png";
@ -22,6 +24,7 @@ import mail from "../../public/Mogul Mail Coots.png";
import money from "../../public/Mogul Money Coots.png"; import money from "../../public/Mogul Money Coots.png";
import money_small from "../../public/money_small.png"; import money_small from "../../public/money_small.png";
import coots from "../../public/Normal Coots.png"; import coots from "../../public/Normal Coots.png";
import playAgain from "../../public/Play Again.png";
import play from "../../public/play.png"; import play from "../../public/play.png";
import star_small from "../../public/presence_small.png"; import star_small from "../../public/presence_small.png";
import qt from "../../public/QT Coots.png"; import qt from "../../public/QT Coots.png";
@ -30,10 +33,10 @@ import shopStill from "../../public/shop1.png";
import sellShop from "../../public/shop_Sell1.png"; import sellShop from "../../public/shop_Sell1.png";
import stanz from "../../public/Stanz Coots.png"; import stanz from "../../public/Stanz Coots.png";
import startStream from "../../public/start stream.png"; import startStream from "../../public/start stream.png";
import tieButton from "../../public/Tie Button.png";
import vespa from "../../public/Vespa Coots.png"; import vespa from "../../public/Vespa Coots.png";
import victoryButton from "../../public/Victory Button.png";
import victoryFace from "../../public/win face.png"; import victoryFace from "../../public/win face.png";
import defeatFace from "../../public/defeat face.png";
import playAgain from "../../public/Play Again.png";
import CharacterSlot from "./CharacterSlot.vue"; import CharacterSlot from "./CharacterSlot.vue";
import "./common.css"; import "./common.css";
import "./socket"; import "./socket";
@ -607,8 +610,15 @@ export const main = createLayer("main", function (this: BaseLayer) {
</div> </div>
{showingOutcome.value ? ( {showingOutcome.value ? (
<div class="outcome" onClick={() => emit("newTurn")}> <div class="outcome" onClick={() => emit("newTurn")}>
<span>{outcome.value}</span> <img
<span style="font-size: 2vmin">Next Turn</span> src={
outcome.value === "Victory"
? victoryButton
: outcome.value === "Defeat"
? defeatButton
: tieButton
}
/>
</div> </div>
) : null} ) : null}
</div> </div>