Давайте начнем кодировать приложение. Пока что я введу некоторые статические предположения, такие как:
- нас не волнует урон от критов
- нам не важен урон стабильности
- 10 патронов на оружие
- 100% тепла компенсируется одиночными радиаторами, так что 1 дополнительная тонна на 3 тепла
Lodash sortBy
В стандартной библиотеке JavaScript досадно не хватает многих базовых функций. У меня не хватает терпения каждый раз писать все это самому, поэтому мы будем использовать lodash для ее функции sortBy. Его API довольно неудобен, но он работает.
App.svelte.
<script>
import data from "./data.json"
import Row from "./Row.svelte"
import {sortBy} from "lodash"
let round100 = (v) => Math.round(v * 100) / 100
for (let row of data) {
row.value = row.shots * row.baseDamage
row.ammoWeight = round100(10 * row.ammoTonnagePerShot)
row.cost = round100(row.tonnage + row.ammoWeight + row.heat/3.0)
row.ratio = round100(row.value / row.cost)
}
let sortedData = sortBy(data, [(x) => -x.ratio, (x) => x.name])
</script>
<h1>BATTLETECH Weapons Data</h1>
<table>
<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>
{#each sortedData as row}
<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>
Вот основной компонент. Здесь мы статически предварительно вычисляем различные производные данные. Эти предположения превратятся в ползунки.
Некоторые другие моменты:
- есть довольно грязный
:global, чтобы заставить четное/нечетное затенение работать с таблицами через границу компонента; это не единственный способ, но он поможет.
Row.svelte.
Этот компонент намного проще. Колонка Damage и колонка Range нуждаются в некотором пользовательском форматировании. Колонка Range могла бы быть намного лучше, если бы вместо нее были цветные полоски.
Округление до двух знаков после запятой, возможно, можно было бы обрабатывать здесь, а не в компоненте App.
<script>
export let data
let {name, heat, shots, baseDamage, tonnage, minRange, maxRange, value, cost, ratio, ammoWeight} = data
let damage
if (shots == 1) {
damage = baseDamage
} else {
damage = `${shots}x${baseDamage}`
}
let range = `${minRange}-${maxRange}`
</script>
<tr>
<td>{name}</td>
<td>{damage}</td>
<td>{heat}</td>
<td>{tonnage}</td>
<td>{ammoWeight}</td>
<td>{range}</td>
<td>{value}</td>
<td>{cost}</td>
<td>{ratio}</td>
</tr>
История на данный момент
Весь код находится на GitHub.
Я развернул его на GitHub Pages, вы можете увидеть его здесь.
Следующий эпизод
В следующем эпизоде я добавлю несколько ползунков для управления сделанными предположениями.