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="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
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 {
|
.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;
|
||||||
|
|
|
||||||
|
|
@ -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,49 +703,79 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Row>
|
</Row>
|
||||||
<Row class="shop">
|
<Row style="margin-top: 10vh;">
|
||||||
<div
|
{selectedCharacter.value != null ? (
|
||||||
class="reroll"
|
<Tooltip display="Sell Coots">
|
||||||
style={
|
<div
|
||||||
gold.value > 0 ? "" : "color: var(--locked); cursor: not-allowed"
|
class="reroll"
|
||||||
}
|
onDragover={e => e.preventDefault()}
|
||||||
onClick={() => {
|
onClick={() => emit("sell", selectedCharacter.value!)}
|
||||||
if (gold.value > 0) {
|
onDrop={() => emit("sell", selectedCharacter.value!)}
|
||||||
emit("reroll");
|
>
|
||||||
}
|
<img src={sellShop} />
|
||||||
}}
|
</div>
|
||||||
>
|
</Tooltip>
|
||||||
<img src={showRefreshAnim.value ? shopGif : shopStill} />
|
) : selectedShopItem.value != null ? (
|
||||||
</div>
|
<Tooltip display="Freeze Coots">
|
||||||
{shop.value.map((item, i) => (
|
<div
|
||||||
<CharacterSlot
|
class="reroll"
|
||||||
id={`shop-char-${i}`}
|
onDragover={e => e.preventDefault()}
|
||||||
frozen={frozen.value.includes(i)}
|
onClick={() => emit("freeze", selectedShopItem.value!)}
|
||||||
character={item == null ? undefined : item}
|
onDrop={() => emit("freeze", selectedShopItem.value!)}
|
||||||
isSelected={selectedShopItem.value === i}
|
>
|
||||||
isShop={true}
|
<img src={freezeShop} />
|
||||||
isDragging={isDragging.value}
|
</div>
|
||||||
onClick={(e: MouseEvent) => {
|
</Tooltip>
|
||||||
if (item == null) {
|
) : (
|
||||||
return;
|
<Tooltip display="Re-roll store">
|
||||||
|
<div
|
||||||
|
class="reroll"
|
||||||
|
style={
|
||||||
|
gold.value > 0
|
||||||
|
? ""
|
||||||
|
: "color: var(--locked); cursor: not-allowed"
|
||||||
}
|
}
|
||||||
selectedShopItem.value =
|
onClick={() => {
|
||||||
selectedShopItem.value === i ? null : i;
|
if (gold.value > 0) {
|
||||||
selectedCharacter.value = null;
|
emit("reroll");
|
||||||
e.stopPropagation();
|
}
|
||||||
}}
|
}}
|
||||||
onDragstart={() => {
|
>
|
||||||
isDragging.value = true;
|
<img src={showRefreshAnim.value ? shopGif : shopStill} />
|
||||||
selectedCharacter.value = null;
|
</div>
|
||||||
selectedShopItem.value = i;
|
</Tooltip>
|
||||||
}}
|
)}
|
||||||
onDragend={() => {
|
<Row class="shop">
|
||||||
isDragging.value = false;
|
{shop.value.map((item, i) => (
|
||||||
selectedCharacter.value = null;
|
<CharacterSlot
|
||||||
selectedShopItem.value = null;
|
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>
|
</Row>
|
||||||
{render(particles)}
|
{render(particles)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue