SandpointsEditPage/src/SpHasTiers.svelte

<script>
 import { createEventDispatcher } from 'svelte';
 export let hastiers;
 export let tiers;
 const dispatch = createEventDispatcher();
 
 function removeTier(tier) {
   dispatch("addToCandidatesRemoveFromTiers", tier)
 }

 function swapTier(tier, n) {
   tiers.some((t, i)=> {
     if (t==tier) {
       tiers[i] = tiers[i+n]
       tiers[i+n] = tier
       return true
     }
   })
 }

</script>

<label for="hastiers">Has {hastiers}:</label>
<div class="tierbox">
  {#each tiers as tier, i (tier.file)}
    <div class="tierline">
      <div class="filetitle">
        <input type="text" name="has_{hastiers}[]" class="hasinput" value="{tier.file}" disabled><span class="tiertitle">({tier.title})</span>
      </div>
      <div class="buttons">
        <button type="button" class="buttondown" on:click="{swapTier(tier, 1)}" disabled={i+1 == tiers.length ? true:false}>⇓</button>
        <button type="button" class="buttonup" on:click="{swapTier(tier, -1)}" disabled={i == 0  ? true:false}>⇑</button>
        <button type="button" on:click="{removeTier(tier)}">×</button>
      </div>
    </div>
  {/each}
</div>