<script setup lang="ts">
import { ref } from 'vue'
export interface Props {
  player: Player
  shown: boolean
}

defineProps<Props>();

// inventory size is 12, and it is so empty
const slots = ref([
  { name: 'Shovel', type: 'tool', icon: 'shovel', quality: 'bronze' },
  { name: 'Sword', type: 'weapon', icon: 'sword', quality: 'bronze' },
  { name: 'Pick Axe', type: 'tool', icon: 'pick', quality: 'bronze' },
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
])
</script>

<template>
  <section id="inventory" class="screen" :class="{ shown }">
    <header>
      <h1>Inventory</h1>
    </header>

    <ol>
      <li v-for="item in slots"
        :class="[item?.type, item?.icon, item?.quality]"
      >
        <i v-if="item === null">(empty)</i>
        <template v-else>
          <b>{{ item.name }}</b>
        </template>
      </li>
    </ol>
  </section>

</template>

<style scoped>
#inventory {
  width: 346px;
  transition: transform .3s ease-out;
  transform: translate(-50vw);
}
#inventory.shown {
  transform: translate(0px);
}
ol {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  margin: 0;
  padding: 0;
}
li {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 2px solid white;
  border-radius: 6px;
  background: transparent center no-repeat;
  background-size: contain;
}
li > i, li > b {
  position: absolute;
  bottom: 0;
  right: 1px;
  padding: .25em .5em;
  background: black;
  font-size: .8em;
}
.tool.shovel.bronze {
  background-image: url("/Items/shovel_bronze.png");
}
.weapon.sword.bronze {
  background-image: url("/Items/sword_bronze.png");
}
.tool.pick.bronze {
  background-image: url("/Items/pick_bronze.png");
}
</style>
