Initial commit

src/components/AdventurerList.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="slots">
+    <button class="slot" v-for="adventurer in adventurers" :key="adventurer.id">
+      <AdventurerMiniComponent
+          :adventurer="currentAdventurer"
+          :all-adventurers="adventurers"
+      />
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import AdventurerMiniComponent from "@/components/AdventurerMiniComponent.vue";
+import type {Adventurer} from "@/classes/Adventurer";
+
+export default defineComponent({
+  name: "AdventurerList",
+  components: {AdventurerMiniComponent},
+  data: () => ({
+    currentAdventurer: null as Adventurer|null
+  }),
+  props: {
+    adventurers: {
+      type: Array<Adventurer>
+    },
+  },
+  methods: {
+    print(a: string) {
+      console.log(a);
+    }
+  }
+
+})
+</script>
+
+<style lang="scss" scoped>
+.slots {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  .slot {
+    padding: 0;
+    width: 5rem;
+    height: 5rem;
+    border: 2px solid #000;
+    background-color: rgba(0,0,0, 0.2);
+    cursor: pointer;
+    border-radius: 0.2rem;
+  }
+}
+</style>

src/components/AdventurerMiniComponent.vue

@@ -0,0 +1,114 @@
+<template>
+  <AdventurerTile
+    v-if="adventurer"
+    :adventurer="adventurer"
+    @click="() => {
+      $emit('freeAdventurer', adventurer.id)
+    }"
+  />
+  <article
+      class="select"
+      v-else
+      @click="selection = !selection"
+  >
+    <span>+</span>
+  </article>
+  <div class="selection" v-if="selection">
+    <button
+        class="slot"
+        v-for="adventurer in allAdventurers"
+        :key="adventurer.id"
+        :class="{busy: adventurer.busy}"
+        @click="() => {
+          if (adventurer.busy) return;
+          $emit('hireAdventurer', adventurer.id);
+          selection = false;
+        }"
+    >
+      <AdventurerTile
+        :adventurer="adventurer"
+      />
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, type PropType} from "vue";
+import type {Adventurer} from "@/classes/Adventurer";
+import AdventurerTile from "@/components/AdventurerTile.vue";
+
+export default defineComponent({
+  name: "AdventurerMiniComponent",
+  components: {AdventurerTile},
+  emits: [ "freeAdventurer", "hireAdventurer" ],
+  data() {
+    return {
+      selection: false,
+    }
+  },
+  props: {
+    adventurer: {
+      type: Object as PropType<Adventurer>,
+    },
+    allAdventurers: {
+      type: Object as PropType<{[key: string]: Adventurer}>,
+    }
+  },
+  methods: {
+    print(a:string) {
+      console.log(a);
+    },
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+
+.selection {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: max-content;
+  transform: translateX(-50%) translateY(104%);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background-color: rgba(0,0,0, 0.2);
+  .slot {
+    width: 5rem;
+    height: 5rem;
+    cursor: pointer;
+    padding: 0;
+    border-color: #000;
+    background-color: transparent;
+    background-blend-mode: darken;
+    transition: background-color 0.25s linear, filter 0.25s linear;
+    &.busy {
+      filter: grayscale(1);
+      background-color: rgba(0,0,0, 0.6);
+      &:hover {
+        cursor: not-allowed;
+        border-color: #000;
+      }
+    }
+    &:hover {
+      border-color: #fff;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.select {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 4.5rem;
+}
+</style>

src/components/AdventurerTile.vue

@@ -0,0 +1,50 @@
+<template>
+  <article
+      class="adventurer"
+      :title="adventurer.name + (adventurer.busy ? ' (busy)' : '')"
+  >
+    <img :src="adventurer.portrait" :alt="adventurer.name" draggable="false">
+    <div class="level">{{adventurer.level}}</div>
+  </article>
+</template>
+
+<script lang="ts">
+
+import type {Adventurer} from "@/classes/Adventurer";
+import {defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+  name: "AdventurerTile",
+  props: {
+    adventurer: {
+      type: Object as PropType<Adventurer>,
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.adventurer {
+  width: 100%;
+  height: 100%;
+  overflow: clip;
+  font-size: 5rem;
+  line-height: 1;
+  color: rgba(0,0,0, 0.75);
+  position: relative;
+  .level {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 1rem;
+    background-color: rgba(0,0,0, 0.75);
+    border-bottom-right-radius: 0.2rem;
+    padding: 0.1rem;
+    color: #fff;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>