first commit
This commit is contained in:
25
src/App.svelte
Normal file
25
src/App.svelte
Normal file
@@ -0,0 +1,25 @@
|
||||
<script lang="ts">
|
||||
import MainWrapper from './lib/MainWrapper.svelte'
|
||||
</script>
|
||||
|
||||
<main class="container">
|
||||
<div class="column-1">
|
||||
<MainWrapper />
|
||||
</div>
|
||||
<div class="column-2">
|
||||
<MainWrapper />
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
165
src/lib/DisplayData.svelte
Normal file
165
src/lib/DisplayData.svelte
Normal file
@@ -0,0 +1,165 @@
|
||||
<script lang="ts">
|
||||
export let pokemonData
|
||||
$: {
|
||||
|
||||
console.log("TestInsideDisplay")
|
||||
console.log(pokemonData)
|
||||
}
|
||||
function generate_type(types) {
|
||||
let parsed_types = JSON.parse(types);
|
||||
let result = []
|
||||
parsed_types.forEach(type => {
|
||||
switch (type) {
|
||||
case 0: {
|
||||
result.push(`<div class="normal type">ノーマル</div>`)
|
||||
break;
|
||||
}
|
||||
case 1: {
|
||||
result.push(`<div class="fighting type">かくとう</div>`)
|
||||
break;
|
||||
}
|
||||
case 2: {
|
||||
result.push(`<div class="flying type">ひこう</div>`)
|
||||
break;
|
||||
}
|
||||
case 3: {
|
||||
result.push(`<div class="poison type">どく</div>`)
|
||||
break;
|
||||
}
|
||||
case 4: {
|
||||
result.push(`<div class="ground type">じめん</div>`)
|
||||
break;
|
||||
}
|
||||
case 5: {
|
||||
result.push(`<div class="rock type">いわ</div>`)
|
||||
break;
|
||||
}
|
||||
case 6: {
|
||||
result.push(`<div class="bug type">むし</div>`)
|
||||
break;
|
||||
}
|
||||
case 7: {
|
||||
result.push(`<div class="ghost type">ゴースト</div>`)
|
||||
break;
|
||||
}
|
||||
case 8: {
|
||||
result.push(`<div class="steel type">はがね</div>`)
|
||||
break;
|
||||
}
|
||||
case 9: {
|
||||
result.push(`<div class="fire type">ほのお</div>`)
|
||||
break;
|
||||
}
|
||||
case 10: {
|
||||
result.push(`<div class="water type">みず</div>`)
|
||||
break;
|
||||
}
|
||||
case 11: {
|
||||
result.push(`<div class="grass type">くさ</div>`)
|
||||
break;
|
||||
}
|
||||
case 12: {
|
||||
result.push(`<div class="electric type">でんき</div>`)
|
||||
break;
|
||||
}
|
||||
case 13: {
|
||||
result.push(`<div class="psychic type">エスパー</div>`)
|
||||
break;
|
||||
}
|
||||
case 14: {
|
||||
result.push(`<div class="ice type">こおり</div>`)
|
||||
break;
|
||||
}
|
||||
case 15: {
|
||||
result.push(`<div class="dragon type">ドラゴン</div>`)
|
||||
break;
|
||||
}
|
||||
case 16: {
|
||||
result.push(`<div class="dark type">あく</div>`)
|
||||
break;
|
||||
}
|
||||
case 17: {
|
||||
result.push(`<div class="fairy type">フェアリー</div>`)
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
return result.join(' ')
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="data-container">
|
||||
{#if pokemonData && pokemonData.id && pokemonData.id > 0}
|
||||
<div class="row">
|
||||
<img src={`data:image/png;base64,${pokemonData.thumb_big}`} alt={pokemonData.jap_name}/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<table>
|
||||
<tr>
|
||||
<td><b>{pokemonData.jap_name}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>{pokemonData.eng_name}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="display: flex;">{@html generate_type(pokemonData.types)}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row">
|
||||
<table class="data-table">
|
||||
<tr>
|
||||
<td class="value-column"><b>HP</b></td>
|
||||
<td class="atai-column"><b>{pokemonData.hp}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-column"><b>ATK</b></td>
|
||||
<td class="atai-column"><b>{pokemonData.attack}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-column"><b>DEF</b></td>
|
||||
<td class="atai-column"><b>{pokemonData.defense}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-column"><b>S.ATK</b></td>
|
||||
<td class="atai-column"><b>{pokemonData.special_attack}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-column"><b>S.DEF</b></td>
|
||||
<td class="atai-column"><b>{pokemonData.special_defense}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-column"><b>SPD</b></td>
|
||||
<td class="atai-column"><b>{pokemonData.speed}</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="value-column"><b>TOTAL</b></td>
|
||||
<td class="atai-column"><b>{pokemonData.hp + pokemonData.attack + pokemonData.defense + pokemonData.special_attack + pokemonData.special_defense + pokemonData.speed}</b></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="row">
|
||||
No data
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.data-container {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.data-table {
|
||||
width: 200px;
|
||||
}
|
||||
.value-column {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
width: 50%;
|
||||
}
|
||||
.atai-column {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
47
src/lib/MainWrapper.svelte
Normal file
47
src/lib/MainWrapper.svelte
Normal file
@@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/tauri";
|
||||
import AutoComplete from "simple-svelte-autocomplete";
|
||||
import DisplayData from "./DisplayData.svelte";
|
||||
|
||||
let myValue;
|
||||
let currentValue = 0;
|
||||
let pokemonData;
|
||||
async function getItems(keyword) {
|
||||
try {
|
||||
let result = await invoke("autosearch", { keyword });
|
||||
console.log(result);
|
||||
return result;
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
$: {
|
||||
if (myValue > 0 && myValue !== currentValue) {
|
||||
invoke("search", { index: myValue }).then((r) => {
|
||||
currentValue = myValue;
|
||||
pokemonData = r;
|
||||
console.log(pokemonData);
|
||||
});
|
||||
}
|
||||
}
|
||||
</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">
|
||||
<DisplayData
|
||||
pokemonData={pokemonData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
8
src/main.ts
Normal file
8
src/main.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import "./style.css";
|
||||
import App from "./App.svelte";
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById("app"),
|
||||
});
|
||||
|
||||
export default app;
|
||||
186
src/style.css
Normal file
186
src/style.css
Normal file
@@ -0,0 +1,186 @@
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color: #0f0f0f;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
#app {
|
||||
height: 100vh;
|
||||
}
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: 0.75s;
|
||||
}
|
||||
|
||||
.logo.tauri:hover {
|
||||
filter: drop-shadow(0 0 2em #24c8db);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #0f0f0f;
|
||||
background-color: #ffffff;
|
||||
transition: border-color 0.25s;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #396cd8;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#greet-input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
width: 75px;
|
||||
height: 23px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.normal {
|
||||
background-color: #A8A878;
|
||||
border-color: #6D6D4E;
|
||||
}
|
||||
.fighting {
|
||||
background-color: #C03028;
|
||||
border-color: #7D1F1A;
|
||||
}
|
||||
.flying {
|
||||
background-color: #A890F0;
|
||||
border-color: #6D5E9C;
|
||||
}
|
||||
.poison {
|
||||
background-color: #A040A0;
|
||||
border-color: #682A68;
|
||||
}
|
||||
.ground {
|
||||
background-color: #E0C068;
|
||||
border-color: #927D44;
|
||||
}
|
||||
.rock {
|
||||
background-color: #B8A038;
|
||||
border-color: #786824;
|
||||
}
|
||||
.bug {
|
||||
background-color: #A8B820;
|
||||
border-color: #6D7815;
|
||||
}
|
||||
.ghost {
|
||||
background-color: #705898;
|
||||
border-color: #493963;
|
||||
}
|
||||
.steel {
|
||||
background-color: #B8B8D0;
|
||||
border-color: #787887;
|
||||
}
|
||||
.fire {
|
||||
background-color: #F08030;
|
||||
border-color: #9C531F;
|
||||
}
|
||||
.water {
|
||||
background-color: #6890F0;
|
||||
border-color: #445E9C;
|
||||
}
|
||||
.grass {
|
||||
background-color: #78C850;
|
||||
border-color: #A7DB8D;
|
||||
}
|
||||
.electric {
|
||||
background-color: #F8D030;
|
||||
border-color: #A1871F;
|
||||
}
|
||||
.psychic {
|
||||
background-color: #F85888;
|
||||
border-color: #A13959;
|
||||
}
|
||||
.ice {
|
||||
background-color: #98D8D8;
|
||||
border-color: #638D8D;
|
||||
}
|
||||
.dragon {
|
||||
background-color: #7038F8;
|
||||
border-color: #4924A1;
|
||||
}
|
||||
.dark {
|
||||
background-color: #705848;
|
||||
border-color: #49392F;
|
||||
}
|
||||
.fairy {
|
||||
background-color: #EE99AC;
|
||||
border-color: #9B6470;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #24c8db;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #0f0f0f98;
|
||||
}
|
||||
}
|
||||
2
src/vite-env.d.ts
vendored
Normal file
2
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user