手動 keyin 補資料，剪貼簿圖像色相偏移

App.svelte.html

<script>
  import logo from './assets/svelte.png';
  import data from './data.json';

  let kwd = '變異';
  let tier = 10;
  let filled = false;
  let pastedImgDataUrl;
  // let imgFilter = 'w';

  $: filtered_data = data.filter(i => {
    return i.zh?.includes(kwd) && i.tier === tier/* && Boolean(i.rarity) === filled*/;
  });
  $: {
    filtered_data.forEach(i => {
      if (!i) {
        console.log(123);
      }
    })
  }

  let scoops;

  function download() {
    var blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    // link.download = `data.${+new Date()}.json`;
    link.download = `data.json`;
    link.click();
  }

  function paste(evt) {
    let items = evt.clipboardData.items;
    let blob;
    for (var i = 0; i < items.length; i++) {
      if (items[i].type.indexOf('image') === 0) {
        blob = items[i].getAsFile();
        break;
      }
    }
    if (blob && blob !== null) {
      let reader = new FileReader();
      reader.onload = function(event) {
        pastedImgDataUrl = event.target.result;
        // document.getElementById("pastedImage").src = event.target.result;
      };
      reader.readAsDataURL(blob);
    }
  }

  // document.onpaste = (evt) => {
  //   const dT = evt.clipboardData || window.clipboardData;
  //   const file = dT.files[ 0 ];
  //   console.log(dT,  file );
  // };
  // let promise = getData();
  // async function getData() {
  //   // const raw_Data = await fetchJSON('');
  //   return [123, 45];
  // }

  // async function fetchJSON(url) {
  //   const res = await fetch(url);
  //   if (res.ok) {
  //     const data = await res.json();
  //     if (!data.length) {
  //       throw new Error('empty data');
  //     }
  //     return data;
  //   } else {
  //     throw new Error(data);
  //   }
  // }

</script>

<main>
  <div class="list">
  <aside>
    <input type="number" bind:value={tier} max="10" min="1">
    <input type="search" bind:value={kwd} accesskey="s">
    <input type="checkbox" bind:checked={filled}>
    <button on:click|preventDefault={download}>Download</button>
  </aside>

  <hr>
  <hr>
  <hr>

  {#each filtered_data as item (item.id)}
    <div class="item" data-rariry={item.rarity}>
      <input class="rarity-locker" type="checkbox" checked={item.rarity}>
      <div class="rarity-selector">
        <label>
          <input type="radio" bind:group={item.rarity} value="w">
          <span class="rarity" data-rarity="w">w</span>
        </label>
        <label>
          <input type="radio" bind:group={item.rarity} value="g">
          <span class="rarity" data-rarity="g"></span>
        </label>
        <label>
          <input type="radio" bind:group={item.rarity} value="b">
          <span class="rarity" data-rarity="b"></span>
        </label>
        <label>
          <input type="radio" bind:group={item.rarity} value="p">
          <span class="rarity" data-rarity="p"></span>
        </label>
      </div>
      #{item.id} - T{item.tier} - {item.zh}
    </div>
  {/each}
  </div>

  <div class="paste" on:paste={paste}>
    <div class="img-box">
      <img src={pastedImgDataUrl} alt="" />
    </div>
  </div>
</main>

<style>
.item {
  padding: 0.5em;
  border-bottom: 1px dotted #0002;
  font-size: smaller;
}

.item:not([data-rariry=""]) {
  background-color: #0002;
  opacity: 0.5;
}

.rarity {
  display: inline-flex;
  vertical-align: middle;
  width: 1.25rem;
  height: 1.25rem;
  font-size: smaller;
  align-items: center;
  place-content: center;
  box-shadow: inset 0 0 0 1px #ccc;
}
input:checked + .rarity {
  border-radius: 50%;
  box-shadow: 0 0 0 5px #000;
}

.rarity-locker:checked + .rarity-selector {
  pointer-events: none;
}

.rarity-selector {
  display: inline-flex;
  margin-right: 2em;
}

.rarity-selector input {
  visibility: hidden;
  width: 3px;
}
.rarity[data-rarity="g"] { background-color: #0f0; }
.rarity[data-rarity="b"] { background-color: #00f; color: #fff; }
.rarity[data-rarity="p"] { background-color: #f0f; }
label {
  cursor: pointer;
}

aside {
  text-align: center;
}

aside input {
  font-size: larger;
}

hr {
  border-style: dotted;
  border-color: #ccc;
}

main {
  display: flex;
  gap: 1em;
  margin: 0 auto;
}

.list {
  line-height: 1.5;
  max-width: 30em;
  margin: 0 auto;
}

.paste {
  flex-grow: 1;
}

.img-box img {
  filter: hue-rotate(20deg);
}

:global(body) {
  background-color: #0001;
}

</style>