Feat : remove old netcode

This commit is contained in:
2024-05-26 15:02:04 +02:00
parent dd09ab3c8c
commit 3df2aee04c
13 changed files with 81 additions and 825 deletions
+73 -73
View File
@@ -1,98 +1,98 @@
<script setup lang="ts"> <script setup lang="ts">
import goStore, { setReady, oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode"; // import goStore, { setReady, oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
await setup_websocket() // await setup_websocket()
useHead // useHead
({ // ({
title // title
: 'Héron Realms', // : 'Héron Realms',
}) // })
const heron_session = useCookie('heron_session') // const heron_session = useCookie('heron_session')
const route = useRoute() // const route = useRoute()
onMounted(async () => { // onMounted(async () => {
const code = route.query.code // const code = route.query.code
if (!code) { return } // if (!code) { return }
if (Array.isArray(code)) { return } // if (Array.isArray(code)) { return }
await setup_websocket() // await setup_websocket()
oauth2_register_discord(code) // oauth2_register_discord(code)
history.pushState( // history.pushState(
{}, // {},
'', // '',
'/' // '/'
) // )
}) // })
onMounted(async () => { // onMounted(async () => {
if (!heron_session.value) { return } // if (!heron_session.value) { return }
heron_cookie_login(heron_session.value) // heron_cookie_login(heron_session.value)
}) // })
function keyDownHandler(e: KeyboardEvent) { // function keyDownHandler(e: KeyboardEvent) {
if (e.repeat) { return } // if (e.repeat) { return }
console.log(e.code) // console.log(e.code)
if (e.code != "AltLeft") { return } // if (e.code != "AltLeft") { return }
goStore.zoomKeyPressed = true // goStore.zoomKeyPressed = true
e.preventDefault() // e.preventDefault()
return false // return false
} // }
function keyUpHandler(e: KeyboardEvent) { // function keyUpHandler(e: KeyboardEvent) {
if (e.repeat) { return } // if (e.repeat) { return }
if (e.code != "AltLeft") { return } // if (e.code != "AltLeft") { return }
goStore.zoomKeyPressed = false // goStore.zoomKeyPressed = false
e.preventDefault() // e.preventDefault()
return false // return false
} // }
function contextMenuHandler(e: MouseEvent) { // function contextMenuHandler(e: MouseEvent) {
e.preventDefault() // e.preventDefault()
} // }
function mouseDownHandler(e: MouseEvent) { // function mouseDownHandler(e: MouseEvent) {
if (e.button !== 2) { return } // if (e.button !== 2) { return }
goStore.zoomKeyPressed = true // goStore.zoomKeyPressed = true
e.preventDefault() // e.preventDefault()
return false // return false
} // }
function mouseUpHandler(e: MouseEvent) { // function mouseUpHandler(e: MouseEvent) {
if (e.button !== 2) { return } // if (e.button !== 2) { return }
goStore.zoomKeyPressed = false // goStore.zoomKeyPressed = false
e.preventDefault() // e.preventDefault()
return false // return false
} // }
function follow_mouse(e: MouseEvent) { // function follow_mouse(e: MouseEvent) {
goStore.clientMouseX = e.clientX // goStore.clientMouseX = e.clientX
goStore.clientMouseY = e.clientY // goStore.clientMouseY = e.clientY
} // }
onMounted(() => { // onMounted(() => {
window.addEventListener("contextmenu", contextMenuHandler) // window.addEventListener("contextmenu", contextMenuHandler)
window.addEventListener("mousedown", mouseDownHandler) // window.addEventListener("mousedown", mouseDownHandler)
window.addEventListener("mouseup", mouseUpHandler) // window.addEventListener("mouseup", mouseUpHandler)
document.addEventListener("mousemove", follow_mouse) // document.addEventListener("mousemove", follow_mouse)
}) // })
onUnmounted(() => { // onUnmounted(() => {
window.removeEventListener("contextmenu", contextMenuHandler) // window.removeEventListener("contextmenu", contextMenuHandler)
window.removeEventListener("mousedown", mouseDownHandler) // window.removeEventListener("mousedown", mouseDownHandler)
window.removeEventListener("mouseup", mouseUpHandler) // window.removeEventListener("mouseup", mouseUpHandler)
document.removeEventListener("mousemove", follow_mouse) // document.removeEventListener("mousemove", follow_mouse)
}) // })
onDeactivated // onDeactivated
</script> </script>
<template> <template>
<div class="root_dom_div"> <div class="root_dom_div">
<CardOverlay v-if="goStore.zoomKeyPressed" :card_id="goStore.hoveredCard" /> <!-- <CardOverlay v-if="goStore.zoomKeyPressed" :card_id="goStore.hoveredCard" /> -->
<NuxtPage /> <NuxtPage />
</div> </div>
</template> </template>
-64
View File
@@ -1,64 +0,0 @@
import type { GameObjectRegister } from "."
import type { Effect } from "./Effect"
import type { GameObjectNetcode } from "./GameObject"
import type { Turn } from "./Turn"
enum CardRole {
PERSONAL = "personal",
MARKET = "market",
FIRE_GEM = "fire_gem"
}
export enum CardType {
HERO = "hero",
HERO_ABILITY = "hero_ability",
CURRENCY = "currency",
WEAPON = "weapon",
CHAMPION = "champion",
ACTION = "action",
ITEM = "item"
}
enum CardFaction {
BASE = "base",
BLUE = "blue",
RED = "red",
GREEN = "green",
YELLOW = "yellow"
}
export interface CardNetcode extends GameObjectNetcode {
card_id: number
sprite: string
name: string
cost?: number
role: CardRole
card_type: CardType
faction: CardFaction
effects: Array<string>
defense?: number
guard?: boolean
}
export type Card = Omit<CardNetcode, 'effects'> & {
effects: Array<Effect>
health_as_champion?: number
}
export function create_card(input: CardNetcode, register: GameObjectRegister) {
const card = new Proxy<any>(input, {
get(target: CardNetcode, prop, reciever) {
if (prop == "effects") {
return target.effects.map((e) => register.effects.get(e))
}
if (prop == "health_as_champion") {
return Array.from(register.turns.values()).find(e => e.champions_health.has(card.uuid))?.champions_health.get(card.uuid)
}
return Reflect.get(target, prop, reciever);
},
set(target, prop, val, receiver) {
return Reflect.set(target, prop, val, receiver);
}
}) as Card
return card
}
-95
View File
@@ -1,95 +0,0 @@
import { GameObjectRegister } from "."
import { CardType, type Card } from "./Card"
import type { GameObjectNetcode } from "./GameObject"
export enum CardEffects {
GOLD = "gold",
DAMAGE = "damage",
HEAL = "heal",
PREPARE = "prepare",
STUN = "stun",
SACRIFICE = "sacrifice",
DRAW = "draw",
DRAW_AND_DISCARD = "draw_and_discard",
MAKE_DISCARD = "make_discard",
RESTACK_DISCARDED_CHAMPION = "restack_discarded_champion",
RESTACK_DISCARDED_CARD = "restack_discarded_card",
STACK_NEXT_ACTION_BOUGHT = "stack_next_action_bought",
STACK_NEXT_CARD_BOUGHT = "stack_next_card_bought",
PLAY_NEXT_CARD_BOUGHT = "play_next_card_bought"
}
export enum EffectTimes {
PER_CHAMPION = "per_champion",
PER_OTHER_CHAMPION = "per_other_champion",
PER_OTHER_GUARD = "per_other_guard",
PER_CARD_OF_SAME_FACTION = "per_card_of_same_faction",
PER_OTHER_CARD_OF_SAME_FACTION = "per_other_card_of_same_faction"
}
export enum EffectType {
CHAMPION_ACTION = "champion_action",
SUICIDE = "suicide",
FACTION_COMBO = "faction_combo"
}
export interface EffectNetcode extends GameObjectNetcode {
effect: CardEffects
amount: number
sub_effects: Array<EffectNetcode>
mutex: Array<string>
card: string
effect_type?: EffectType
times?: EffectTimes
}
export type Effect = Omit<EffectNetcode, 'sub_effects' | 'mutex' | 'card'> & {
sub_effects: { [key: string]: Effect }
mutex: { [key: string]: Effect }
card: Card
usable: boolean
}
export function create_effect(input: EffectNetcode, register: GameObjectRegister) {
const effect =
new Proxy<any>(input, {
get(target: EffectNetcode, prop, reciever) {
if (prop == "sub_effects") {
return Object.fromEntries(Object.entries(register.effects).filter(([i, v]) => i in target.sub_effects))
}
if (prop == "mutex") {
return Object.fromEntries(Object.entries(register.effects).filter(([i, v]) => i in target.mutex))
}
if (prop == "usable") {
// ugly bastard
if (!register.self) { return false }
let cardLocked = register.self.value?.turn?.cards_locked
if (!cardLocked) { return false }
let cardList = Object.values(cardLocked)
const card = cardList.find(c => c.effects.map(e => e.uuid).includes(effect.uuid))
if (!card) { return false }
if (target.effect_type === EffectType.FACTION_COMBO) {
if (!cardList.some(c => c !== card && c.faction === card.faction)) { return false }
}
if (target.times === EffectTimes.PER_OTHER_CARD_OF_SAME_FACTION) {
if (!cardList.some(c => c !== card && c.faction === card.faction)) { return false }
} else if (target.times === EffectTimes.PER_OTHER_CHAMPION) {
if (!cardList.some(c => c !== card && c.card_type === CardType.CHAMPION)) { return false }
} else if (target.times === EffectTimes.PER_OTHER_GUARD) {
if (!cardList.some(c => c !== card && c.guard)) { return false }
}
return true
}
if (prop == "card") {
return register.cards.get(target.card)
}
return Reflect.get(target, prop, reciever);
},
set(target, prop, val, receiver) {
return Reflect.set(target, prop, val, receiver);
}
}) as Effect
return effect
}
-52
View File
@@ -1,52 +0,0 @@
import { type GameObjectRegister } from "."
import { type Team } from "./Team"
import { type GameObjectNetcode } from "./GameObject"
import type { Card } from "./Card"
import type { Player } from "./Player"
export interface GameNetcode extends GameObjectNetcode {
market_stack: Array<string>
market: Array<string>
gem_stack: Array<string>
started: boolean
current_turn: string
players: Array<string>
losers: Array<string>
ended: boolean
owner: string
}
export type Game = Omit<GameNetcode, 'market_stack' | 'market' | 'gem_stack' | 'current_turn' | 'players'> & {
market_stack: Array<Card>
market: Array<Card | null>
gem_stack: Array<Card>
current_turn: Team
players: Array<Player>
}
export function create_game(input: GameNetcode, register: GameObjectRegister) {
return new Proxy<any>(input, {
get(target: GameNetcode, prop, reciever) {
if (prop == "market_stack") {
return target.market_stack.map(e => register.cards.get(e))
}
if (prop == "market") {
// console.log(target)
return target.market.map(e => register.cards.get(e))
}
if (prop == "gem_stack") {
return target.gem_stack.map(e => register.cards.get(e))
}
if (prop == "current_turn") {
return register.teams.get(input.current_turn)
}
if (prop == "players") {
return target.players.map(e => register.players.get(e))
}
return Reflect.get(target, prop, reciever);
},
set(target, prop, val, receiver) {
return Reflect.set(target, prop, val, receiver);
}
}) as Game
}
-3
View File
@@ -1,3 +0,0 @@
export type GameObjectNetcode = {
uuid: string
}
-25
View File
@@ -1,25 +0,0 @@
import { type GameObjectRegister } from "."
import { type GameObjectNetcode } from "./GameObject"
import type { Game } from "./Game"
export interface LobbyNetcode extends GameObjectNetcode {
games: Array<string>
}
export type Lobby = Omit<LobbyNetcode, 'games'> & {
games: Array<Game>
}
export function create_lobby(input: LobbyNetcode, register: GameObjectRegister) {
return new Proxy<any>(input, {
get(target: LobbyNetcode, prop, reciever) {
if (prop == "games") {
return target.games.map(e => register.games.get(e))
}
return Reflect.get(target, prop, reciever);
},
set(target, prop, val, receiver) {
return Reflect.set(target, prop, val, receiver);
}
}) as Lobby
}
-55
View File
@@ -1,55 +0,0 @@
import { type GameObjectRegister } from "."
import type { Card } from "./Card"
import type { GameObjectNetcode } from "./GameObject"
import { type Team } from "./Team"
import { type Turn } from "./Turn"
export interface PlayerNetcode extends GameObjectNetcode {
stack_pile: Array<string>
discard_pile: Array<string>
hand: Array<string>
board: Array<string>
team: string
username: string
turn: string
discord_id?: string
image?: string
ready: boolean
}
export type Player = Omit<PlayerNetcode, 'discard_pile' | 'stack_pile' | 'hand' | 'board' | 'team' | 'turn'> & {
stack_pile: Array<Card | null>
discard_pile: Array<Card>
hand: Array<Card | null>
board: Array<Card>
team: Team | undefined
turn: Turn | undefined
}
export function create_player(input: PlayerNetcode, register: GameObjectRegister) {
return new Proxy<any>(input, {
get(target: PlayerNetcode, prop, reciever) {
if (prop == "stack_pile") {
return target.stack_pile.map(e => register.cards.get(e))
}
if (prop == "discard_pile") {
return target.discard_pile.map(e => register.cards.get(e))
}
if (prop == "hand") {
return target.hand.map(e => register.cards.get(e))
}
if (prop == "board") {
return target.board.map(e => register.cards.get(e))
}
if (prop == "team") {
return register.teams.get(target.team)
}
if (prop == "turn") {
return register.turns.get(target.turn)
}
return Reflect.get(target, prop, reciever);
},
set(target, prop, val, receiver) {
return Reflect.set(target, prop, val, receiver);
}
}) as Player
}
-29
View File
@@ -1,29 +0,0 @@
import { type GameObjectRegister } from "."
import type { GameObjectNetcode } from "./GameObject"
import { type Player } from "./Player"
export interface TeamNetcode extends GameObjectNetcode {
health: number
color: string
name: string
}
export type Team = TeamNetcode & {
players: Array<Player>
}
export function create_team(input: TeamNetcode, register: GameObjectRegister) {
const team = new Proxy<any>(input, {
get(target: TeamNetcode, prop, reciever) {
if (prop == "players") {
return Object.values(register.players).filter((p) => p.team == team)
}
return Reflect.get(target, prop, reciever);
},
set(target, prop, val, receiver) {
return Reflect.set(target, prop, val, receiver);
}
}) as Team
return team
}
-50
View File
@@ -1,50 +0,0 @@
import { registerRuntimeCompiler } from "vue"
import { type GameObjectRegister } from "."
import type { Card } from "./Card"
import { type Effect, CardEffects } from "./Effect"
import type { GameObjectNetcode } from "./GameObject"
export interface TurnNetcode extends GameObjectNetcode {
cards_locked: Array<string>
effects_availables: Array<string>
champions_health: { [key: string]: string }
discard_markers: number
discard_marker_card: string
fuck_u_markers: number
damage_reserve: number
gold_reserve: number
}
export type Turn = Omit<TurnNetcode, 'cards_locked' | 'effects_availables' | 'champions_health'|"discard_marker_card"> & {
cards_locked: { [key: string]: Card }
effects_availables: Array<Effect>
champions_health: Map<string, number>
discard_marker_card: Card
}
export function create_turn(input: TurnNetcode, register: GameObjectRegister) {
const turn = new Proxy<any>(input, {
get(target: TurnNetcode, prop, reciever) {
if (prop == "cards_locked") {
return Object.fromEntries(target.cards_locked.map(e => [e, register.cards.get(e)]))
}
if (prop == "effects_availables") {
return target.effects_availables.map(e => register.effects.get(e))
}
if (prop == "champions_health") {
const healths = new Map()
for (const c in target.champions_health) {
healths.set(register.cards.get(c)?.uuid, target.champions_health[c])
}
return healths
}
if(prop == "discard_marker_card"){
return register.cards.get(target.discard_marker_card)
}
return Reflect.get(target, prop, reciever);
},
set(target, prop, val, receiver) {
return Reflect.set(target, prop, val, receiver);
}
}) as Turn
return turn
}
-375
View File
@@ -1,375 +0,0 @@
import { type Card, create_card, type CardNetcode } from "./Card";
import {
type Effect,
create_effect,
type EffectNetcode,
EffectType,
CardEffects,
} from "./Effect";
import { type Game, create_game, type GameNetcode } from "./Game";
import type { GameObjectNetcode } from "./GameObject";
import { type Player, create_player, type PlayerNetcode } from "./Player";
import { type Team, create_team, type TeamNetcode } from "./Team";
import { type Turn, create_turn } from "./Turn";
import { type Lobby, create_lobby, type LobbyNetcode } from "./Lobby";
import { type Ref } from "vue";
let socket: WebSocket;
export class GameObjectRegister {
readonly effects: Map<string, Effect>;
readonly cards: Map<string, Card>;
readonly teams: Map<string, Team>;
readonly players: Map<string, Player>;
readonly turns: Map<string, Turn>;
readonly games: Map<string, Game>;
context: "lobby" | "login" | "pregame" | "game" | "rules" = "login";
private readonly objects: Map<string, GameObjectNetcode>;
current_game: Ref<Game | null>;
lobby: Ref<Lobby | null>;
self: Ref<Player | null>;
zoomKeyPressed: Ref<boolean>
hoveredCard: Ref<number | undefined>
clientMouseX: Ref<number>
clientMouseY: Ref<number>
discordId: Ref<string>
constructor() {
this.effects = reactive(new Map());
this.cards = reactive(new Map());
this.teams = reactive(new Map());
this.players = reactive(new Map());
this.turns = reactive(new Map());
this.games = reactive(new Map());
this.objects = reactive(new Map());
this.current_game = ref(null);
this.lobby = ref(null);
this.self = ref(null);
this.zoomKeyPressed = ref(false);
this.hoveredCard = ref()
this.clientMouseX = ref(0)
this.clientMouseY = ref(0)
this.discordId = ref("")
}
update_object(obj: GameObjectNetcode) {
// console.log(obj);
// console.log(obj.uuid);
// console.log(this.objects.get(obj.uuid));
Object.assign(this.objects.get(obj.uuid) as GameNetcode, obj);
if (unref(this.current_game)?.uuid === obj.uuid) {
triggerRef(this.current_game);
} else if (unref(this.lobby)?.uuid === obj.uuid) {
triggerRef(this.lobby);
} else if (unref(this.self)?.uuid === obj.uuid) {
triggerRef(this.self);
} else if (unref(this.self)?.turn?.uuid === obj.uuid) {
triggerRef(this.self);
}
}
createObject = {
effect: (data: EffectNetcode) => {
const effect = create_effect(data, this);
this.effects.set(data.uuid, effect);
this.objects.set(data.uuid, data);
},
card: (data: CardNetcode) => {
const card = create_card(data, this);
this.cards.set(data.uuid, card);
this.objects.set(data.uuid, card);
},
player: (data: PlayerNetcode) => {
const player = create_player(data, this);
this.players.set(data.uuid, player);
this.objects.set(data.uuid, player);
},
team: (data: TeamNetcode) => {
const team = create_team(data, this);
this.teams.set(data.uuid, team);
this.objects.set(data.uuid, team);
},
game: (data: GameNetcode) => {
const game = create_game(data, this);
this.games.set(data.uuid, game);
this.objects.set(data.uuid, game);
},
turn: (data: any) => {
const turn = create_turn(data, this);
this.turns.set(data.uuid, turn);
this.objects.set(data.uuid, turn);
},
lobby: (data: LobbyNetcode) => {
this.lobby.value = create_lobby(data, this);
this.objects.set(data.uuid, this.lobby.value);
},
} as { [id: string]: (data: any) => any };
setSelf = (uuid: string) => {
this.self.value = this.players.get(uuid) ?? null;
};
setDiscordId = (username: string) => {
this.discordId.value = username
}
setCurrentGame = (uuid: string) => {
this.current_game.value = this.games.get(uuid) ?? null;
};
}
const goStore = reactive(new GameObjectRegister());
export const setup_websocket = () =>
new Promise<void>((resolve, reject) => {
if (socket) {
return resolve();
}
const config = useRuntimeConfig();
const heron_session = useCookie("heron_session");
socket = new WebSocket(config.public.websocketEndpoint);
socket.onopen = function (e) {
if (socket.readyState == 1) {
resolve();
}
console.log("[open] Connection established");
};
socket.onclose = function (event) {
if (event.wasClean) {
console.warn(
`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`
);
} else {
// e.g. server process killed or network down
// event.code is usually 1006 in this case
console.error("[close] Connection died");
}
};
socket.onerror = function (error) {
console.error(error);
};
socket.onmessage = function (event) {
const data = JSON.parse(event.data);
if (data.type == "create" && data.data_type == "object") {
if (!(data.data.object_type in goStore.createObject)) {
throw new Error(
`Object ${data.data.object_type} couldn't be created`
);
}
goStore.createObject[data.data.object_type](data.data);
} else if (data.type == "update" && data.data_type == "object") {
goStore.update_object(data.data);
} else if (data.type === "context") {
goStore.context = data.data;
// console.log(data.data);
} else if (data.type === "set") {
if (data.data_type == "self") {
goStore.setSelf(data.data);
} else if (data.data_type == "current_game") {
goStore.setCurrentGame(data.data);
} else if (data.data_type == "session_cookie") {
heron_session.value = data.data;
} else if (data.data_type == "self_discord_id") {
goStore.setDiscordId(data.data)
}
} else {
// console.log(data.type, data.data_type, data.data);
}
};
});
export async function heron_cookie_login(cookie: string) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "cookie_login",
data_type: "cookie",
data: cookie,
})
);
}
export async function oauth2_register_discord(code: string) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "discord_login",
data_type: "code",
data: code,
})
);
}
export async function register(username: string) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "register",
data_type: "username",
data: username,
})
);
}
export async function login(username: string) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "login",
data_type: "username",
data: username,
})
);
}
export async function setReady(value: boolean) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "ready",
data_type: "ready_state",
data: value,
})
);
}
export async function buy(card: Card) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "action",
data_type: "buy",
data: card.uuid,
})
);
}
export async function endTurn() {
await setup_websocket();
socket.send(
JSON.stringify({
type: "action",
data_type: "end_turn",
data: true,
})
);
}
export function playAllCards(cards: Card[]) {
cards.forEach((c: any) => {
playCard(c);
});
}
export async function playCard(card: Card) {
// console.log(card.uuid);
await setup_websocket();
socket.send(
JSON.stringify({
type: "action",
data_type: "play_card",
data: card.uuid,
})
);
}
export async function lockCard(card: Card) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "action",
data_type: "lock_card",
data: card.uuid,
})
);
}
export async function useEffect(
effect: Effect,
target?: Effect | Card | Player | Team
) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "action",
data_type: "use_effect",
data: { effect_id: effect.uuid, target: target?.uuid },
})
);
}
export async function discard(card: Card) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "action",
data_type: "discard",
data: card.uuid,
})
);
}
h;
export async function heal() {
await setup_websocket();
socket.send(
JSON.stringify({
type: "action",
data_type: "heal",
data: 1,
})
);
}
export async function damage_team(target: Team) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "action",
data_type: "damage_team",
data: target.uuid,
})
);
}
export async function damage_champion(target: Card) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "action",
data_type: "damage_champion",
data: target.uuid,
})
);
}
export async function netcode_create_game() {
await setup_websocket();
socket.send(
JSON.stringify({
type: "create",
data_type: "game",
data: "bite",
})
);
}
export async function join_game(game_uuid: string) {
await setup_websocket();
socket.send(
JSON.stringify({
type: "join",
data_type: "game",
data: game_uuid,
})
);
}
export default goStore;
-1
View File
@@ -5,7 +5,6 @@ export function setupWebsocket(): Promise<WebSocket> {
return resolve(socket); return resolve(socket);
} }
const config = useRuntimeConfig(); const config = useRuntimeConfig();
const heron_session = useCookie("heron_session");
socket = new WebSocket(config.public.websocketEndpoint); socket = new WebSocket(config.public.websocketEndpoint);
socket.onopen = function (e) { socket.onopen = function (e) {
+8 -3
View File
@@ -1,8 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { setupWebsocket } from '~/netcode';
const socket = await setupWebsocket()
socket.onmessage = (e) => {
console.log(JSON.parse(e.data))
}
onUnmounted(() => {
socket.close()
})
</script> </script>
<template> <template>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 129 B