294 lines
7.6 KiB
Svelte
294 lines
7.6 KiB
Svelte
<script lang="ts">
|
|
import { invoke } from "@tauri-apps/api/tauri";
|
|
import AutoComplete from "simple-svelte-autocomplete";
|
|
import DisplayData from "./DisplayData.svelte";
|
|
import type { PokemonStatus } from "../model/PokemonStatus";
|
|
import type { PokemonDBData, PokemonData } from "src/model/PokemonData";
|
|
import type { ItemData } from "../model/ItemData";
|
|
$: {
|
|
if (myValue > 0) {
|
|
invoke("search", { index: myValue }).then((r: PokemonDBData) => {
|
|
pokemonData = {
|
|
id: r.id,
|
|
name: r.name,
|
|
types: r.types,
|
|
thumbnail: r.thumbnail,
|
|
abilities: r.abilities,
|
|
hp: r.hp,
|
|
attack: r.attack,
|
|
defense: r.defense,
|
|
special_attack: r.special_attack,
|
|
special_defense: r.special_defense,
|
|
speed: r.speed,
|
|
hp_v: 31,
|
|
attack_v: 31,
|
|
defense_v: 31,
|
|
special_attack_v: 31,
|
|
special_defense_v: 31,
|
|
speed_v: 31,
|
|
hp_d: 0,
|
|
attack_d: 0,
|
|
defense_d: 0,
|
|
special_attack_d: 0,
|
|
special_defense_d: 0,
|
|
speed_d: 0,
|
|
learnset: r.learnset,
|
|
item: 0,
|
|
terastype: [0],
|
|
attack_plus: false,
|
|
attack_minus: false,
|
|
defense_plus: false,
|
|
defense_minus: false,
|
|
special_attack_plus: false,
|
|
special_attack_minus: false,
|
|
special_defense_plus: false,
|
|
special_defense_minus: false,
|
|
speed_plus: false,
|
|
speed_minus: false,
|
|
attack_buff: 0,
|
|
defense_buff: 0,
|
|
special_attack_buff: 0,
|
|
special_defense_buff: 0,
|
|
speed_buff: 0,
|
|
};
|
|
pokemonDataArray[index] = pokemonData;
|
|
myValue = undefined;
|
|
});
|
|
}
|
|
pokemonStatus = {
|
|
types: pokemonData ? pokemonData.types : [],
|
|
terastype: pokemonData ? pokemonData.terastype : [0],
|
|
hp: hp_final,
|
|
attack: attack_final,
|
|
defense: defense_final,
|
|
special_attack: special_attack_final,
|
|
special_defense: special_defense_final,
|
|
speed: speed_final,
|
|
attack_buff: pokemonData ? pokemonData.attack_buff : 0,
|
|
defense_buff: pokemonData ? pokemonData.defense_buff : 0,
|
|
special_attack_buff: pokemonData ? pokemonData.special_attack_buff : 0,
|
|
special_defense_buff: pokemonData ? pokemonData.special_defense_buff : 0,
|
|
speed_buff: pokemonData ? pokemonData.speed_buff : 0,
|
|
item: pokemonData ? pokemonData.item : 0,
|
|
};
|
|
}
|
|
export let attackId: number | undefined;
|
|
export let items: ItemData[];
|
|
let myValue;
|
|
let index = 0;
|
|
let pokemonData: PokemonData | undefined;
|
|
let pokemonDataArray: PokemonData[] = [];
|
|
let hp_final = 0;
|
|
let attack_final = 0;
|
|
let defense_final = 0;
|
|
let special_attack_final = 0;
|
|
let special_defense_final = 0;
|
|
let speed_final = 0;
|
|
export let pokemonStatus: PokemonStatus = {
|
|
types: [],
|
|
terastype: [0],
|
|
hp: 0,
|
|
attack: 0,
|
|
defense: 0,
|
|
special_attack: 0,
|
|
special_defense: 0,
|
|
speed: 0,
|
|
attack_buff: 0,
|
|
defense_buff: 0,
|
|
special_attack_buff: 0,
|
|
special_defense_buff: 0,
|
|
speed_buff: 0,
|
|
item: 0,
|
|
};
|
|
async function getItems(keyword) {
|
|
try {
|
|
let result = await invoke("autosearch", { keyword });
|
|
return result;
|
|
} catch (e) {
|
|
console.log(e);
|
|
return [];
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<div class="row">
|
|
<AutoComplete
|
|
showClear={true}
|
|
searchFunction={getItems}
|
|
delay="200"
|
|
localFiltering={false}
|
|
labelFieldName="name"
|
|
valueFieldName="id"
|
|
bind:value={myValue}
|
|
/>
|
|
</div>
|
|
<div class="row-display">
|
|
<div class="pokemon-button-div">
|
|
<table class="button-table">
|
|
{#each [0, 1, 2, 3, 4, 5] as i}
|
|
<tr>
|
|
<td>
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div
|
|
class="pokemon-button {i == index
|
|
? 'active'
|
|
: i % 2 === 0
|
|
? 'odd'
|
|
: 'even'}"
|
|
on:click={() => {
|
|
index = i;
|
|
pokemonData = pokemonDataArray[i];
|
|
}}
|
|
>
|
|
<span class="active-arrow">➤</span>
|
|
{#if pokemonDataArray[i]}
|
|
<img
|
|
src={`data:image/png;base64,${pokemonDataArray[i].thumbnail}`}
|
|
alt={pokemonDataArray[i].name}
|
|
width="15%"
|
|
/>
|
|
{pokemonDataArray[i].name}
|
|
{:else}
|
|
No Pokemon
|
|
{/if}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</table>
|
|
<div class="save-load-clear-group">
|
|
<button
|
|
on:click={() => {
|
|
invoke("save_json", { jsonContent: pokemonDataArray})
|
|
.then(() => {})
|
|
.catch((err) => console.log(err));
|
|
}}
|
|
>
|
|
Save
|
|
</button>
|
|
<button
|
|
on:click={() => {
|
|
invoke("load_json").then((d) => {
|
|
// fix this type issue
|
|
pokemonDataArray = d;
|
|
pokemonData = pokemonDataArray[index];
|
|
})
|
|
.catch((e) => console.log(e));
|
|
}}
|
|
>
|
|
Load
|
|
</button><br />
|
|
<button
|
|
on:click={() => {
|
|
pokemonDataArray.forEach((pd) => {
|
|
pd.attack_buff = 0;
|
|
pd.defense_buff = 0;
|
|
pd.special_attack_buff = 0;
|
|
pd.special_defense_buff = 0;
|
|
pd.speed_buff = 0;
|
|
pd.terastype = [0];
|
|
});
|
|
pokemonData = pokemonDataArray[index];
|
|
}}
|
|
>
|
|
Reset Battle Status
|
|
</button><br />
|
|
<button
|
|
on:click={() => {
|
|
pokemonData = undefined;
|
|
pokemonDataArray = [];
|
|
index = 0;
|
|
myValue = undefined;
|
|
}}
|
|
>
|
|
Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="display-data">
|
|
<DisplayData
|
|
{pokemonData}
|
|
bind:hp_final
|
|
bind:attack_final
|
|
bind:defense_final
|
|
bind:special_attack_final
|
|
bind:special_defense_final
|
|
bind:speed_final
|
|
bind:attackId
|
|
{items}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.save-load-clear-group {
|
|
margin: 15px 0;
|
|
line-height: 40px;
|
|
}
|
|
.row-display {
|
|
height: 759px;
|
|
display: flex;
|
|
}
|
|
.button-table {
|
|
width: 200px;
|
|
}
|
|
.pokemon-button-div {
|
|
width: 200px;
|
|
border-right: 2px solid white;
|
|
}
|
|
.active-arrow {
|
|
display: none;
|
|
}
|
|
.active > .active-arrow {
|
|
display: block;
|
|
margin-right: 5px;
|
|
}
|
|
.display-data {
|
|
width: 800px;
|
|
height: 759px;
|
|
overflow-y: scroll;
|
|
}
|
|
.pokemon-button {
|
|
padding: 10px;
|
|
border-top-left-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 50px;
|
|
-webkit-user-select: none; /* Safari */
|
|
-ms-user-select: none; /* IE 10 and IE 11 */
|
|
user-select: none; /* Standard syntax */
|
|
border-right: 2px solid white;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
.active {
|
|
background-color: #d1be01;
|
|
cursor: unset;
|
|
color: black;
|
|
font-weight: bold;
|
|
text-shadow: 1px 1px 1px white;
|
|
}
|
|
.odd {
|
|
color: white;
|
|
background-color: #f7bbb8;
|
|
}
|
|
.odd:hover {
|
|
color: white;
|
|
background-color: #f5453d;
|
|
transition: background-color 0.5s ease;
|
|
cursor: pointer;
|
|
}
|
|
.even {
|
|
color: white;
|
|
background-color: #b6b4ff;
|
|
}
|
|
.even:hover {
|
|
color: white;
|
|
background-color: #3d3094;
|
|
transition: background-color 0.5s ease;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|