Make non-empty (filled-in) fields visually distinct

[mk-fg]

Hi,

Thanks for working on this great tool, it helped me a lot, and seem to be the most intuitive factorio calculator around.

Biggest issue I have with it though is finding where the hell are the typed-in values among rows of pointless zeroes to adjust them or reset when typing-in new ones. Note that it's probably not a big issue for developer or long-time user when you know exactly where every icon is, but for a less long-time/frequent user like me, seem to be pretty significant pain.

I think simple way to make the issue go away completely would be to:

• Do not pre-fill form inputs with 0 values, which are much harder to distinguish from actually-filled values than empty space.
• Add some light background for fields that are filled and are non-zero.

Below is the image illustrating proposed tweaks: EDIT: red is a terribly confusing choice for color there, code below uses green instead.

Did it by adding this snippet to the head of index.html:

<style>
input.count {
  box-sizing: border-box;
  background: white;
  padding: .5em .4em;
  border: 1px gray solid;
  border-radius: 3px;
  margin: 3px .5em 3px 0;
}
input.filled { background: #eeb5b5; }
</style>

<script>
let window_onload = window.onload
window.onload = (ev) => {
  window_onload(ev)
  let obj_to_arr = obj => [].map.call(obj, v=> v)
  let els = (q, node) => {
    if (typeof node === 'undefined' || node === 'null') node = document
    return obj_to_arr(node.querySelectorAll(q)) }
  els('input.count').forEach(e => {
    let input_handler = () => {
      let v = e.value.replace(/\s/, '')
      if ( v.match(/^\d+$/) &&
          Number.parseInt(e.value) === 0 || v === '' )
        e.classList.remove('filled')
      else e.classList.add('filled') }
    e.addEventListener('input', input_handler)
    if (Number.parseInt(e.value) === 0) e.value = ''
    input_handler()
  })
}
</script>

Thought to leave a suggestion, as it seem to be pretty significant issue to me, and rather easy to fix.

Thanks.

[doomeer]

Indeed that is a very good idea.