<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="style.css">
<link href="fontawesome/5.3.1/css/all.css" rel="stylesheet">
</head>
<div id='iconpicker' style='width:200px;'>
</div>
<script>
const iconpicker = document.getElementById('iconpicker');
const icon = [0,0,0];
const icons = [['buche','eiche','fichte'],['gesund','krank','tot'],['portaledge','kuppel','haus']];
iconpicker.innerHTML=`
<div class='w3-container w3-row'>
<div class='w3-col s2 m2 l2'>
<div class='w3-row'><button id='species_left' onclick='rotate(0,-1)'><i class="fa fa-caret-left"></i></button></div>
<div class='w3-row'><button id='state_left' onclick='rotate(1,-1)'><i class="fa fa-caret-left"></i></button></div>
<div class='w3-row'><button id='plattform_left' onclick='rotate(2,-1)'><i class="fa fa-caret-left"></i></button></div>
</div>
<div class='w3-col s8 m8 l8'>
<img id='icon' src='images/${icons[0][0]}_${icons[1][0]}_${icons[2][0]}.png' width='90%'/>
</div>
<div class='w3-col s2 m2 l2'>
<div class='w3-row'><button id='species_right' onclick='rotate(0,1)'><i class="fa fa-caret-right"></i></button></div>
<div class='w3-row'><button id='state_right' onclick='rotate(1,1)'><i class="fa fa-caret-right"></i></button></div>
<div class='w3-row'><button id='plattform_right' onclick='rotate(2,1)'><i class="fa fa-caret-right"></i></button></div>
</div>
</div>`;
const icon_elem = document.getElementById('icon');
function rotate(pos,dir){
icon[pos] += dir;
if (icon[pos]<0) icon[pos]=icons[pos].length-1;
if (icon[pos]>=icons[pos].length) icon[pos]=0;
const image = 'images/'+icons[0][icon[0]]+'_'+icons[1][icon[1]]+'_'+icons[2][icon[2]]+'.png';
icon_elem.src=image;
}
</script>
</html>