오픈 소스 모험: 에피소드 54: BATTLETECH 무기 순위 앱

앱 코딩을 시작하겠습니다. 지금은 다음과 같은 몇 가지 정적 가정을 하드코딩하겠습니다.

치명타 피해는 신경 쓰지 않습니다

.

안정성 손상은 신경 쓰지 않습니다

.

무기당 탄약 10개

단일 방열판으로 열을 100% 보상하므로 열 3개당 1톤 추가

Lodash 정렬 기준

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. 이것이 유일한 방법은 아니지만 그렇게 할 것입니다

let sortedData = sortBy(data, [(x) => -x.ratio, (x) => x.name])는 정말 어색한 API

입니다.

행.svelte

이 구성 요소는 훨씬 쉽습니다. 손상 및 범위 열에는 일부 사용자 지정 형식이 필요합니다. 범위 열은 색상 막대를 대신 사용하면 훨씬 더 나을 수 있습니다.

소수점 이하 2자리로 반올림하는 것은 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>

지금까지의 이야기

All the code is on GitHub .

저는 이것을 GitHub Pagesyou can see it here에 배포했습니다.

다음에 온다

다음 에피소드에서는 가정을 제어하기 위해 몇 가지 슬라이더를 추가하겠습니다.