<template>
  <main id="app" class="section">
  <section id="content" class="columns is-desktop">
    <Player></Player>
    <div class="column">
      <Chest :player="0" v-if="state.initiated"></Chest>
    </div>
  </section>
  </main>
</template>

<script>
import Player from './components/Player.vue'
import Chest from './components/Chest.vue'
import { AppStorage } from './AppStorage'

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

export default {
  name: 'app',
  data () {
      return {
  	state: AppStorage.state,
      };
  },
  components: {
    Player,
    Chest
  },
  created () {
    // Initiate with active player set to value found in cookie
    // or as group by default.
    const cookie = getCookie("player_id");
    let playerId;
    if (cookie == "") {
        playerId = 0;
    } else {
        playerId = Number(cookie);
    }
    AppStorage.initStorage(playerId);
  },
}
</script>

<style>
#app {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>
