mirror of
https://github.com/thepaperpilot/Super-Auto-Coots.git
synced 2024-11-24 17:31:52 +00:00
Updated reroll button, made it also freeze and sell
This commit is contained in:
parent
47274edea0
commit
8c86fd42fb
5 changed files with 84 additions and 47 deletions
|
|
@ -32,6 +32,8 @@
|
|||
<link rel="prefetch" href="Vespa Coots.png" />
|
||||
<link rel="prefetch" href="shop1.png" />
|
||||
<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="game window.png" />
|
||||
<link rel="prefetch" href="cat.png" />
|
||||
|
|
|
|||
BIN
public/Freeze shop.png
Normal file
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
BIN
public/shop_Sell1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -107,7 +107,6 @@
|
|||
}
|
||||
|
||||
.shop {
|
||||
margin-top: 10vh !important;
|
||||
position: relative;
|
||||
filter: drop-shadow(2px 4px 6px black);
|
||||
}
|
||||
|
|
@ -117,7 +116,7 @@
|
|||
border-image-slice: 106 53 53 424 fill;
|
||||
border-style: solid;
|
||||
border-width: 5vmin 2.5vmin 2.5vmin 20vmin;
|
||||
width: 72.5vmin;
|
||||
width: 54vmin;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -136,9 +135,12 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.shop > .row > *:first-child {
|
||||
margin-left: -18vmin;
|
||||
}
|
||||
|
||||
.reroll {
|
||||
margin-left: -19vmin !important;
|
||||
margin-top: -1vmin !important;
|
||||
margin: auto -2vmin;
|
||||
height: 18vmin;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import Row from "components/layout/Row.vue";
|
|||
import { jsx } from "features/feature";
|
||||
import { createParticles } from "features/particles/particles";
|
||||
import { createReset } from "features/reset";
|
||||
import Tooltip from "features/tooltips/Tooltip.vue";
|
||||
import { globalBus } from "game/events";
|
||||
import type { BaseLayer, GenericLayer } 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_small from "../../public/money_small.png";
|
||||
import coots from "../../public/Normal Coots.png";
|
||||
import star_small from "../../public/presence_small.png";
|
||||
import qt from "../../public/QT Coots.png";
|
||||
import shopGif from "../../public/shop.gif";
|
||||
import shopStill from "../../public/shop1.png";
|
||||
import stanz from "../../public/Stanz Coots.png";
|
||||
import startStream from "../../public/start stream.png";
|
||||
import star_small from "../../public/presence_small.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 "./common.css";
|
||||
import "./socket";
|
||||
|
|
@ -700,49 +703,79 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
/>
|
||||
))}
|
||||
</Row>
|
||||
<Row class="shop">
|
||||
<div
|
||||
class="reroll"
|
||||
style={
|
||||
gold.value > 0 ? "" : "color: var(--locked); cursor: not-allowed"
|
||||
}
|
||||
onClick={() => {
|
||||
if (gold.value > 0) {
|
||||
emit("reroll");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img src={showRefreshAnim.value ? shopGif : shopStill} />
|
||||
</div>
|
||||
{shop.value.map((item, i) => (
|
||||
<CharacterSlot
|
||||
id={`shop-char-${i}`}
|
||||
frozen={frozen.value.includes(i)}
|
||||
character={item == null ? undefined : item}
|
||||
isSelected={selectedShopItem.value === i}
|
||||
isShop={true}
|
||||
isDragging={isDragging.value}
|
||||
onClick={(e: MouseEvent) => {
|
||||
if (item == null) {
|
||||
return;
|
||||
<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
|
||||
class="reroll"
|
||||
style={
|
||||
gold.value > 0
|
||||
? ""
|
||||
: "color: var(--locked); cursor: not-allowed"
|
||||
}
|
||||
selectedShopItem.value =
|
||||
selectedShopItem.value === i ? null : i;
|
||||
selectedCharacter.value = null;
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onDragstart={() => {
|
||||
isDragging.value = true;
|
||||
selectedCharacter.value = null;
|
||||
selectedShopItem.value = i;
|
||||
}}
|
||||
onDragend={() => {
|
||||
isDragging.value = false;
|
||||
selectedCharacter.value = null;
|
||||
selectedShopItem.value = null;
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
onClick={() => {
|
||||
if (gold.value > 0) {
|
||||
emit("reroll");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img src={showRefreshAnim.value ? shopGif : shopStill} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Row class="shop">
|
||||
{shop.value.map((item, i) => (
|
||||
<CharacterSlot
|
||||
id={`shop-char-${i}`}
|
||||
frozen={frozen.value.includes(i)}
|
||||
character={item == null ? undefined : item}
|
||||
isSelected={selectedShopItem.value === i}
|
||||
isShop={true}
|
||||
isDragging={isDragging.value}
|
||||
onClick={(e: MouseEvent) => {
|
||||
if (item == null) {
|
||||
return;
|
||||
}
|
||||
selectedShopItem.value =
|
||||
selectedShopItem.value === i ? null : i;
|
||||
selectedCharacter.value = null;
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onDragstart={() => {
|
||||
isDragging.value = true;
|
||||
selectedCharacter.value = null;
|
||||
selectedShopItem.value = i;
|
||||
}}
|
||||
onDragend={() => {
|
||||
isDragging.value = false;
|
||||
selectedCharacter.value = null;
|
||||
selectedShopItem.value = null;
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Row>
|
||||
</Row>
|
||||
{render(particles)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue