48 lines
1.2 KiB
Svelte
48 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { invoke } from "@tauri-apps/api/tauri";
|
|
import MainWrapper from "./lib/MainWrapper.svelte";
|
|
import DamageCalculator from "./lib/DamageCalculator.svelte";
|
|
import "carbon-components-svelte/css/g80.css";
|
|
import type { ItemData } from "./model/ItemData";
|
|
import type { PokemonStatus } from "./model/PokemonStatus";
|
|
let items: ItemData[] = [];
|
|
let player1Data: PokemonStatus | undefined;
|
|
let player2Data: PokemonStatus | undefined;
|
|
let attackId: number | undefined;
|
|
invoke("get_items").then((r: ItemData[]) => {
|
|
items = r;
|
|
});
|
|
</script>
|
|
|
|
<main class="container">
|
|
<div class="main-row">
|
|
<div class="column-1">
|
|
<MainWrapper bind:pokemonStatus={player1Data} bind:attackId {items} />
|
|
</div>
|
|
<div class="column-2">
|
|
<MainWrapper bind:pokemonStatus={player2Data} bind:attackId {items} />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<DamageCalculator bind:player1Data bind:player2Data bind:attackId />
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
.column-1 {
|
|
padding-top: 10px;
|
|
width: 50%;
|
|
border-right: 1px solid white;
|
|
}
|
|
.column-2 {
|
|
padding-top: 10px;
|
|
width: 50%;
|
|
border-left: 1px solid white;
|
|
}
|
|
.main-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 800px;
|
|
}
|
|
</style>
|