player cast

<script>
  import firebase from './stores/DB.js'
  // console.log('DB', DB);

  let playercast = [0,0,50,0,0]

  let players = firebase.database().ref('Fight/');
  console.log('players', players);
    let playerlist = []
    players.on('value', function(snapshot) {
    playerlist = Object.values(snapshot.val())
    console.log('playerlist', playerlist);
    for (let i of playerlist) {
        console.log('cast', i.cast)
    }
  });

  firebase.database().ref('Fight/' + 'player1/health').set({
    hp : 57,
  });

  const countdown = async () => {
      if (playercast[1] > 0) setTimeout(castdown, 20)
      else firebase.database()
      .ref('Fight')
      .child('Dor')
      .child('health')
      .child('hp')
      .set(firebase.database.ServerValue.increment(-1))
      return
  }

  const castdown = async () => {
    playercast[1]--
    countdown()
  }

  const resetDor = async () => {
    firebase.database().ref('Fight/' + 'Dor/health').set({
      hp : 100,
    });
  }

</script>

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<main>
 hello from app.svelte

  <!-- {$DB} -->
  {#each playerlist as player, i}
    <div class="health-background">
      <div class="health-bar" style="width: {player.health.hp}%">
        {player.name}
        {player.health.hp}
      </div>
    </div>
    <div class="cast-background">
      <div class="cast-bar" style="width: {playercast[i]}%">
        {player.spell}
      </div>
    </div>
    <div class="target-position">
        <i class="fa fa-user target-icon playericon1"></i>
    </div>
  {/each}

 <button on:click={countdown}>☄️Frost Bolt</button>
 <button on:click={resetDor}>🔄Reset Dor</button>

</main>

<style>

.playericon1 {
  color: red;

}

.target-icon {
    margin-left: 515px;
    margin-top: -73px;
    position: absolute;
    font-size: 38px;
}

.cast-bar {
  /* width: 30%; */
  background-color:#e0d774;
  color: white;
  text-shadow: 1px 1px #202020;
  height: 30px;
}

.cast-background {
  width: 50%;
  background-color:#cacaca;
  margin-bottom: 20px;
}

.health-bar {
  background-color: rgb(60, 80, 255);
  color: white;
  text-shadow: 1px 1px #202020;
  height: 40px;
}

.health-background {
  width: 50%;
  background-color:#cecece;
}

</style>