Updated reroll button, made it also freeze and sell

This commit is contained in:
thepaperpilot 2023-02-23 23:17:35 -06:00
parent 47274edea0
commit 8c86fd42fb
5 changed files with 84 additions and 47 deletions

View file

@ -32,6 +32,8 @@
<link rel="prefetch" href="Vespa Coots.png" /> <link rel="prefetch" href="Vespa Coots.png" />
<link rel="prefetch" href="shop1.png" /> <link rel="prefetch" href="shop1.png" />
<link rel="prefetch" href="shop.gif" /> <link rel="prefetch" href="shop.gif" />
<link rel="prefetch" href="shop_Sell1.png" />
<link rel="prefetch" href="Freeze shop.png" />
<link rel="prefetch" href="Kitchen BG.png" /> <link rel="prefetch" href="Kitchen BG.png" />
<link rel="prefetch" href="game window.png" /> <link rel="prefetch" href="game window.png" />
<link rel="prefetch" href="cat.png" /> <link rel="prefetch" href="cat.png" />

BIN
public/Freeze shop.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
public/shop_Sell1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -107,7 +107,6 @@
} }
.shop { .shop {
margin-top: 10vh !important;
position: relative; position: relative;
filter: drop-shadow(2px 4px 6px black); filter: drop-shadow(2px 4px 6px black);
} }
@ -117,7 +116,7 @@
border-image-slice: 106 53 53 424 fill; border-image-slice: 106 53 53 424 fill;
border-style: solid; border-style: solid;
border-width: 5vmin 2.5vmin 2.5vmin 20vmin; border-width: 5vmin 2.5vmin 2.5vmin 20vmin;
width: 72.5vmin; width: 54vmin;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
@ -136,9 +135,12 @@
pointer-events: none; pointer-events: none;
} }
.shop > .row > *:first-child {
margin-left: -18vmin;
}
.reroll { .reroll {
margin-left: -19vmin !important; margin: auto -2vmin;
margin-top: -1vmin !important;
height: 18vmin; height: 18vmin;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;

View file

@ -3,6 +3,7 @@ import Row from "components/layout/Row.vue";
import { jsx } from "features/feature"; import { jsx } from "features/feature";
import { createParticles } from "features/particles/particles"; import { createParticles } from "features/particles/particles";
import { createReset } from "features/reset"; import { createReset } from "features/reset";
import Tooltip from "features/tooltips/Tooltip.vue";
import { globalBus } from "game/events"; import { globalBus } from "game/events";
import type { BaseLayer, GenericLayer } from "game/layers"; import type { BaseLayer, GenericLayer } from "game/layers";
import { createLayer } from "game/layers"; import { createLayer } from "game/layers";
@ -18,13 +19,15 @@ 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 star_small from "../../public/presence_small.png";
import qt from "../../public/QT Coots.png"; import qt from "../../public/QT Coots.png";
import shopGif from "../../public/shop.gif"; import shopGif from "../../public/shop.gif";
import shopStill from "../../public/shop1.png"; import shopStill from "../../public/shop1.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 star_small from "../../public/presence_small.png";
import vespa from "../../public/Vespa Coots.png"; import vespa from "../../public/Vespa Coots.png";
import sellShop from "../../public/shop_Sell1.png";
import freezeShop from "../../public/Freeze shop.png";
import CharacterSlot from "./CharacterSlot.vue"; import CharacterSlot from "./CharacterSlot.vue";
import "./common.css"; import "./common.css";
import "./socket"; import "./socket";
@ -700,11 +703,37 @@ export const main = createLayer("main", function (this: BaseLayer) {
/> />
))} ))}
</Row> </Row>
<Row class="shop"> <Row style="margin-top: 10vh;">
{selectedCharacter.value != null ? (
<Tooltip display="Sell Coots">
<div
class="reroll"
onDragover={e => e.preventDefault()}
onClick={() => emit("sell", selectedCharacter.value!)}
onDrop={() => emit("sell", selectedCharacter.value!)}
>
<img src={sellShop} />
</div>
</Tooltip>
) : selectedShopItem.value != null ? (
<Tooltip display="Freeze Coots">
<div
class="reroll"
onDragover={e => e.preventDefault()}
onClick={() => emit("freeze", selectedShopItem.value!)}
onDrop={() => emit("freeze", selectedShopItem.value!)}
>
<img src={freezeShop} />
</div>
</Tooltip>
) : (
<Tooltip display="Re-roll store">
<div <div
class="reroll" class="reroll"
style={ style={
gold.value > 0 ? "" : "color: var(--locked); cursor: not-allowed" gold.value > 0
? ""
: "color: var(--locked); cursor: not-allowed"
} }
onClick={() => { onClick={() => {
if (gold.value > 0) { if (gold.value > 0) {
@ -714,6 +743,9 @@ export const main = createLayer("main", function (this: BaseLayer) {
> >
<img src={showRefreshAnim.value ? shopGif : shopStill} /> <img src={showRefreshAnim.value ? shopGif : shopStill} />
</div> </div>
</Tooltip>
)}
<Row class="shop">
{shop.value.map((item, i) => ( {shop.value.map((item, i) => (
<CharacterSlot <CharacterSlot
id={`shop-char-${i}`} id={`shop-char-${i}`}
@ -744,6 +776,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
/> />
))} ))}
</Row> </Row>
</Row>
{render(particles)} {render(particles)}
</div> </div>
); );