<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>