Пора сделать наше приложение более интерактивным. Я добавил следующие ползунки:
- сколько патронов носить с собой
- сколько тепла нужно компенсировать
- сколько двойных радиаторов у вас есть.
Я также убрал Flamers и Infernos, так как они не очень вписываются в эту модель, и убрал минимальную дальность, так как она не очень актуальна.
Slider.svelte
Он просто скопирован из приложения «Русские потери»:
<script>
export let label, min, max, value, format
let id = Math.random().toString(36).slice(2)
</script>
<label for={id}>{label}:</label>
<input type="range" {min} {max} bind:value id={id} />
<span>{format(value)}</span>
Form.svelte
Возможно, мне понадобится добавить сюда другие типы элементов управления, такие как флажки или радио, пока что здесь только ползунки.
<script>
import Slider from "./Slider.svelte"
export let ammoRounds
export let heatPercentage
export let doubleHeatSinksPercentage
</script>
<form>
<Slider label="Ammo for how many rounds" bind:value={ammoRounds} min={1} max={30} format={(v) => `${v}`}/>
<Slider label="Heat to compensate for" bind:value={heatPercentage} min={0} max={100} format={(v) => `${v}%`}/>
<Slider label="How many double heat sinks" bind:value={doubleHeatSinksPercentage} min={0} max={100} format={(v) => `${v}%`}/>
</form>
<style>
form {
display: grid;
grid-template-columns: auto auto auto;
margin-bottom: 1em;
}
</style>
Headers.svelte
Чтобы сохранить App небольшим, я переместил часть статического содержимого в компонент Headers:
<tr>
<th>Name</th>
<th>Damage</th>
<th>Heat</th>
<th>Weight</th>
<th>Ammo Weight</th>
<th>Range</th>
<th>Value</th>
<th>Cost</th>
<th>Ratio</th>
</tr>
App.svelte
Мне нужно сделать некоторые хитрости с row.id, чтобы реактивность работала так, как я хочу. То, что я делаю здесь, не является особенно элегантным решением.
<script>
import {sortBy} from "lodash"
import data from "./data.json"
import Form from "./Form.svelte"
import Headers from "./Headers.svelte"
import Row from "./Row.svelte"
let ammoRounds = 10
let heatPercentage = 80
let doubleHeatSinksPercentage = 0
let round100 = (v) => Math.round(v * 100) / 100
$: heatSinkingPerTon = 3.0 + 3.0 * doubleHeatSinksPercentage / 100
$: costPerHeat = (heatPercentage / 100) / heatSinkingPerTon
let sortedData
$: {
for(let row of data) {
row.value = row.shots * row.baseDamage
row.ammoWeight = round100(ammoRounds * row.ammoTonnagePerShot)
row.cost = round100(row.tonnage + row.ammoWeight + row.heat * costPerHeat)
row.ratio = round100(row.value / row.cost)
row.id = Math.random().toString(36).slice(2)
}
sortedData = sortBy(data, [(x) => -x.ratio, (x) => x.name])
}
</script>
<h1>BATTLETECH Weapons Data</h1>
<Form bind:ammoRounds bind:heatPercentage bind:doubleHeatSinksPercentage />
<table>
<Headers />
{#each sortedData as row (row.id)}
<Row data={row} />
{/each}
</table>
<style>
:global(body) {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
table :global(tr):nth-child(even) {
background-color: #f2f2f2;
}
table :global(tr):nth-child(odd) {
background-color: #e0e0e0;
}
</style>
История на данный момент
Весь код находится на GitHub.
Я развернул его на GitHub Pages, вы можете увидеть его здесь.
Дальше
В следующих сериях я продолжу улучшать приложение.