<h1>日用品残りHP</h1>
<itemlist></itemlist>
<script type="riot/tag">
  <itemlist>
    <div class="add_item">
      <input type="text" name="add_item_name" placeholder="アイテム名を入力" /><button onclick={addItem}><i class="fas fa-plus"></i></button>
    </div>
    <!-- この中にコーデイングした内容を入れる -->
      <div>
        <div class="item" each={item, i in items}>
          <button class="trash" onclick={removeItem}><i class="fas fa-trash"></i></button>
          <div class="progres">
            <p class="bar" style="width:{item.hp}%; background-color:{item.bk};"></p>
            <p style="color:{item.clr}">{item.name}</p>
            <p class="max-min-btn">
              <button onclick={minHp}></button>
              <button onclick={maxHp}></button>
            </p>
          </div>
          <button class="plus" onclick={addHp}><i class="fas fa-plus"></i></button>
          <button class="minus" onclick={defHp}><i class="fas fa-minus"></i></button>
        </div>
      </div>
    
    //ここからスクリプトかく
    this.items = [
    /*  {
        'name':'洗濯洗剤',
        'hp':50,
        'bk':'#4072B3',
        'clr':'#333',
      },
      {
        'name':'台所洗剤',
        'hp':30,
        'bk':'#4072B3',
        'clr':'#333',
      },
    */
    ];
    
    this.hp_max = 100;
    this.hp_min = 1;
    this.hp_spn = 5;
    
    //読み込み時にスタイルを変更する
    this.on("mount", function() {
      this.readItems();
      for(var i = 0; i < this.items.length; i++){
        this.changeHpStyle(i);
      }
    });
    
    addHp(e){
      key = e.item.i;
      v = this.hp_spn;
      
      this.items[key]['hp'] += v;
      this.changeHpStyle(key);
    }
    
    defHp(e){
      key = e.item.i;
      v = this.hp_spn * -1;
      
      this.items[key]['hp'] += v;
      this.changeHpStyle(key);
    }
    
    maxHp(e){
      key = e.item.i;
      this.items[key]['hp'] = this.hp_max;
      this.changeHpStyle(key);
    }
    
    minHp(e){
      key = e.item.i;
      this.items[key]['hp'] = this.hp_min;
      this.changeHpStyle(key);
    }
    changeHpStyle(key){
      //max値の調整
      if(this.items[key]['hp'] > this.hp_max){
        this.items[key]['hp'] = this.hp_max;
      } else if(this.items[key]['hp'] < this.hp_min) {
        this.items[key]['hp'] = this.hp_min;
      }
      
      this.items[key]['bk'] = '#4072B3'; //デフォルト色
      this.items[key]['clr'] = '#fff';
      if(this.items[key]['hp'] <= 1){
        this.items[key]['bk'] = '#EB8686';
        this.items[key]['clr'] = '#CE2937';
      } else if(this.items[key]['hp'] < 30) {
        this.items[key]['bk'] = '#EB8686';
      } else if(this.items[key]['hp'] < 50){
        this.items[key]['bk'] = '#6088C6';
      }
      
      this.update();
      this.saveItems();
    }
    
    addItem(e){
      push_key = this.items.push({
        'name':this.add_item_name.value,
        'hp':100,
        'bk':'#6088C6',
        'clr':'#333',
      });
      this.add_item_name.value = '';
      this.changeHpStyle((push_key - 1));
    }
    
    removeItem(e){
      this.items.splice(e.item.i, 1);
      this.saveItems();
    }
    
    saveItems(){
      localStorage.setItem('items', JSON.stringify(this.items));
    }
    
    readItems(){
      items = localStorage.getItem('items', this.items);
      if(items){
        this.items = JSON.parse(items);
      }
    }
    
  </itemlist>
</script>