mirror of
https://github.com/thepaperpilot/Super-Auto-Coots.git
synced 2024-11-25 18:00:20 +00:00
Implemented buying characters
This commit is contained in:
parent
15b7d6adbc
commit
0b76059df1
5 changed files with 125 additions and 19 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="character">
|
||||
<div class="character" :class="{ selected }">
|
||||
<span class="character-display">{{ character?.type }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -9,7 +9,8 @@ const props = defineProps<{
|
|||
character?: {
|
||||
type: string;
|
||||
relevancy: number;
|
||||
};
|
||||
} | null;
|
||||
selected?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
|
|
@ -20,6 +21,8 @@ const props = defineProps<{
|
|||
position: relative;
|
||||
margin: 50px;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.character-display {
|
||||
|
|
@ -37,4 +40,14 @@ const props = defineProps<{
|
|||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.character.selected::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%2388C0D0' stroke-width='8' stroke-dasharray='10%25%2c90%25' stroke-dashoffset='5' stroke-linecap='square'/%3e%3c/svg%3e");
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,3 +7,15 @@
|
|||
.modifier-toggle.collapsed {
|
||||
transform: translate(-5px, -5px) rotate(-90deg);
|
||||
}
|
||||
|
||||
.resource-box {
|
||||
margin-right: 20px !important;
|
||||
font-size: large;
|
||||
border: solid 2px var(--bought);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.resource-box .material-icons {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ import type { Player } from "game/player";
|
|||
import { computed, ref } from "vue";
|
||||
import CharacterSlot from "./CharacterSlot.vue";
|
||||
import "./socket";
|
||||
import { nickname } from "./socket";
|
||||
import "./common.css";
|
||||
import { emit, nickname } from "./socket";
|
||||
|
||||
export const characters: Record<string, CharacterInfo> = {
|
||||
coots: {
|
||||
|
|
@ -41,6 +42,10 @@ export const characters: Record<string, CharacterInfo> = {
|
|||
car: {
|
||||
nickname: "Red Car",
|
||||
initialRelevancy: 1
|
||||
},
|
||||
hasan: {
|
||||
nickname: "Hasanabi",
|
||||
initialRelevancy: 1
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -51,31 +56,71 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
const lives = ref<number>(3);
|
||||
const wins = ref<number>(0);
|
||||
const turn = ref<number>(0);
|
||||
const team = ref<Character[]>([]);
|
||||
const shop = ref<string[]>([]);
|
||||
const gold = ref<number>(0);
|
||||
const team = ref<(Character | null)[]>([null, null, null]);
|
||||
const shop = ref<(string | null)[]>([]);
|
||||
const selectedCharacter = ref<number | null>(null);
|
||||
const selectedShopItem = ref<number | null>(null);
|
||||
|
||||
return {
|
||||
name: "Game",
|
||||
minimizable: false,
|
||||
display: jsx(() => (
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<div
|
||||
style="display: flex; flex-direction: column"
|
||||
onClick={() => {
|
||||
selectedCharacter.value = null;
|
||||
selectedShopItem.value = null;
|
||||
}}
|
||||
>
|
||||
<Row style="position: absolute; top: 20px">
|
||||
<div class="resource-box">
|
||||
<span class="material-icons">credit_card</span>
|
||||
{gold.value}
|
||||
</div>
|
||||
<div class="resource-box">
|
||||
<span class="material-icons">favorite</span>
|
||||
{lives.value}
|
||||
</div>
|
||||
<div class="resource-box">
|
||||
<span class="material-icons">emoji_events</span>
|
||||
{wins.value}/5
|
||||
</div>
|
||||
</Row>
|
||||
<h2>{nickname.value}</h2>
|
||||
<Spacer height="10vh" />
|
||||
<Row>
|
||||
<CharacterSlot character={team.value[0]} />
|
||||
<CharacterSlot character={team.value[1]} />
|
||||
<CharacterSlot character={team.value[2]} />
|
||||
<CharacterSlot
|
||||
character={team.value[0]}
|
||||
selected={selectedCharacter.value === 0}
|
||||
onClick={clickCharacter(0)}
|
||||
/>
|
||||
<CharacterSlot
|
||||
character={team.value[1]}
|
||||
selected={selectedCharacter.value === 1}
|
||||
onClick={clickCharacter(1)}
|
||||
/>
|
||||
<CharacterSlot
|
||||
character={team.value[2]}
|
||||
selected={selectedCharacter.value === 2}
|
||||
onClick={clickCharacter(2)}
|
||||
/>
|
||||
</Row>
|
||||
<Spacer height="10vh" />
|
||||
<Row>
|
||||
{shop.value.map(item => (
|
||||
{shop.value.map((item, i) => (
|
||||
<CharacterSlot
|
||||
character={
|
||||
item
|
||||
? { type: item, relevancy: characters[item].initialRelevancy }
|
||||
: undefined
|
||||
item == null
|
||||
? undefined
|
||||
: { type: item, relevancy: characters[item].initialRelevancy }
|
||||
}
|
||||
onClick={() => console.log(item)}
|
||||
selected={selectedShopItem.value === i}
|
||||
onClick={(e: MouseEvent) => {
|
||||
selectedShopItem.value = selectedShopItem.value === i ? null : i;
|
||||
selectedCharacter.value = null;
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Row>
|
||||
|
|
@ -86,11 +131,34 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
lives,
|
||||
wins,
|
||||
turn,
|
||||
gold,
|
||||
team,
|
||||
shop
|
||||
shop,
|
||||
selectedCharacter,
|
||||
selectedShopItem
|
||||
};
|
||||
});
|
||||
|
||||
function clickCharacter(index: number) {
|
||||
return () => {
|
||||
if (main.selectedCharacter.value != null && main.selectedCharacter.value !== index) {
|
||||
const temp = main.team.value[index];
|
||||
main.team.value[index] = main.team.value[main.selectedCharacter.value];
|
||||
main.team.value[main.selectedCharacter.value] = temp;
|
||||
main.selectedCharacter.value = null;
|
||||
} else if (main.selectedCharacter.value === index) {
|
||||
main.selectedCharacter.value = null;
|
||||
} else if (main.selectedShopItem.value !== null && main.team.value[index] == null) {
|
||||
if (main.gold.value >= 3) {
|
||||
emit("buy", main.selectedShopItem.value, index);
|
||||
}
|
||||
main.selectedShopItem.value = null;
|
||||
} else {
|
||||
main.selectedCharacter.value = index;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a player save data object being loaded, return a list of layers that should currently be enabled.
|
||||
* If your project does not use dynamic layers, this should just return all layers.
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import satisfies from "semver/functions/satisfies";
|
|||
import { io, Socket } from "socket.io-client";
|
||||
import { ref, watch } from "vue";
|
||||
import { useToast } from "vue-toastification";
|
||||
import { main } from "./projEntry";
|
||||
import { characters, main } from "./projEntry";
|
||||
|
||||
export const connected = ref<boolean>(false);
|
||||
export const nickname = ref<string>("");
|
||||
|
|
@ -98,9 +98,18 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
|
|||
nickname.value = nick;
|
||||
});
|
||||
|
||||
socket.on("shop", shop => {
|
||||
socket.on("newTurn", shop => {
|
||||
main.gold.value = 10;
|
||||
main.shop.value = shop;
|
||||
});
|
||||
socket.on("reroll", shop => {
|
||||
main.shop.value = shop;
|
||||
});
|
||||
socket.on("buy", (shopIndex, teamIndex, char) => {
|
||||
main.team.value[teamIndex] = char;
|
||||
main.shop.value[shopIndex] = null;
|
||||
main.gold.value -= 3;
|
||||
});
|
||||
}
|
||||
|
||||
declare module "game/settings" {
|
||||
|
|
|
|||
8
src/data/types.d.ts
vendored
8
src/data/types.d.ts
vendored
|
|
@ -12,7 +12,11 @@ interface ServerToClientEvents {
|
|||
"server version": (semver: string) => void;
|
||||
nickname: (nickname: string) => void;
|
||||
info: (message: string) => void;
|
||||
shop: (shop: string[]) => void;
|
||||
newTurn: (shop: string[]) => void;
|
||||
reroll: (shop: string[]) => void;
|
||||
buy: (shopIndex: number, teamIndex: number, char: Character) => void;
|
||||
}
|
||||
|
||||
interface ClientToServerEvents {}
|
||||
interface ClientToServerEvents {
|
||||
buy: (shopIndex: number, teamIndex: number) => void;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue