DEV Community

Tomasz Wegrzanowski
Tomasz Wegrzanowski

Posted on


Open Source Adventures: Episode 55: Sliders for BATTLETECH Weapon Ranking App

Time to make our app a little more interactive. I added the following sliders:

  • how much ammo to carry
  • how much heat to compensate for
  • how many double heat sinks you have

I also removed Flamers and Infernos as they don't really fit in this model, and removed minimum range, as not very relevant.


It's just copied from Russian losses app:

export let label, min, max, value, format
let id = Math.random().toString(36).slice(2)

<label for={id}>{label}:</label>
<input type="range" {min} {max} bind:value id={id} />
Enter fullscreen mode Exit fullscreen mode


I might need to add some other control types like checkboxes or radios here, for now it's just all sliders.

import Slider from "./Slider.svelte"

export let ammoRounds
export let heatPercentage
export let doubleHeatSinksPercentage

  <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 {
  display: grid;
  grid-template-columns: auto auto auto;
  margin-bottom: 1em;
Enter fullscreen mode Exit fullscreen mode


Just to keep App small, I moved some static content to Headers component:

  <th>Ammo Weight</th>
Enter fullscreen mode Exit fullscreen mode


I need to do some trickery with to make reactivity work the way I want. What I'm doing here isn't a particularly elegant solution.

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) = Math.random().toString(36).slice(2)
  sortedData = sortBy(data, [(x) => -x.ratio, (x) =>])

<h1>BATTLETECH Weapons Data</h1>

<Form bind:ammoRounds bind:heatPercentage bind:doubleHeatSinksPercentage />

  <Headers />
  {#each sortedData as row (}
    <Row data={row} />

: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;
Enter fullscreen mode Exit fullscreen mode

Story so far

All the code is on GitHub.

I deployed this on GitHub Pages, you can see it here.

Coming next

Over the next few episodes I'll continue to improve the app.

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!