Initial commit

src/App.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import {RouterLink, RouterView} from 'vue-router'
+</script>
+
+<template>
+  <header>
+    <nav>
+      <RouterLink to="/">Guild</RouterLink>
+      <RouterLink to="/quests">Quests</RouterLink>
+    </nav>
+  </header>
+
+  <RouterView :guild="guild" :adventurers="adventurers" :quests="quests"/>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {Adventurer} from "@/classes/Adventurer";
+import {Quest} from "@/classes/Quest";
+import {Guild} from "@/classes/Guild";
+
+export default defineComponent({
+  name: "GuildView",
+  watch: {
+    adventurers: {
+      deep: true,
+      handler(newAdventurers) {
+        for (const adventurerId in newAdventurers) {
+          const adventurer = newAdventurers[adventurerId] as Adventurer;
+          if (adventurer.canLevelUp()) {
+            adventurer.levelUp();
+          }
+        }
+      }
+    }
+  },
+  data: () => ({
+    guild: new Guild(1, 500),
+    adventurers: {
+      "1": new Adventurer("1", "Rincewind", "/img/adventurers/rincewind.png", 2, 2),
+      "2": new Adventurer("2", "Fran", "/img/adventurers/fran.png", 3, 1.5),
+
+    } as { [key: string]: Adventurer },
+    quests: {
+      F: {
+        "1": new Quest("1", "Frog Frenzy", "Kill 10 demon frogs.", 30, 1),
+        "2": new Quest("2", "Rats!", "Get rid of the rats in someone's basement.", 21, 1),
+        "3": new Quest("3", "Herb gethering", "Colect medicinal herbs.", 25, 1),
+
+      } as { [key: string]: Quest },
+    } as { [key: string]: { [key: string]: Quest } },
+  }),
+})
+</script>
+
+<style lang="scss" scoped>
+header {
+  line-height: 1;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+nav {
+  width: max-content;
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem;
+  background-size: 200px;
+  background-blend-mode: darken;
+  background-color: rgba(0, 0, 0, 0.65);
+
+  a {
+    font-size: 2rem;
+    color: #fff;
+  }
+
+  &.router-link-exact-active {
+
+  }
+}
+
+</style>

src/classes/Adventurer.ts

@@ -0,0 +1,31 @@
+export class Adventurer {
+    id: string;
+    name: string;
+    portrait: string;
+    level: number;
+    exp: number;
+    attackPerLevel: number;
+    defensePerLevel: number;
+    busy: boolean;
+
+    constructor(id: string, name: string, portrait: string, attackPerLevel: number, defensePerLevel: number) {
+        this.id = id;
+        this.name = name;
+        this.portrait = portrait;
+        this.attackPerLevel = attackPerLevel;
+        this.defensePerLevel = defensePerLevel;
+        this.level = 1;
+        this.exp = 0;
+        this.busy = false;
+    }
+
+    levelUp(): void {
+        this.exp = 0;
+        this.level += 1;
+    }
+
+    canLevelUp(): boolean {
+        const requirement = this.level * 3;
+        return this.exp >= requirement;
+    }
+}

src/classes/Guild.ts

@@ -0,0 +1,9 @@
+export class Guild {
+    gold: number;
+    level: number;
+
+    constructor(level: number, gold: number) {
+        this.gold = gold;
+        this.level = level;
+    }
+}

src/classes/Quest.ts

@@ -0,0 +1,26 @@
+import type {Adventurer} from "@/classes/Adventurer";
+
+export class Quest {
+    id: string;
+    title:  string;
+    text: string;
+    adventurers: Array<Adventurer>;
+    progressPoints: number;
+    maxProgress: number;
+    expReward: number;
+
+    constructor(id: string, title: string, text: string, maxProgress: number, expReward: number) {
+        this.id = id;
+        this.title = title;
+        this.text = text;
+        this.maxProgress = maxProgress;
+        this.expReward = expReward;
+        this.progressPoints = 0;
+        this.adventurers = [];
+    }
+
+}
+
+export function createRandomQuest(budget: number) {
+
+}

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>

src/main.ts

@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+import './assets/main.css'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'guild',
+      component: HomeView
+    },
+    {
+      path: '/quests',
+      name: 'quests',
+      component: () => import('../views/QuestView.vue')
+    }
+  ]
+})
+
+export default router

src/views/HomeView.vue

@@ -0,0 +1,72 @@
+<template>
+  <main>
+    <section class="title">
+      <h1>Guild Master</h1>
+      <h3>Adventurer's guild management game</h3>
+    </section>
+    <section class="coffer">
+      <p>Coffer: {{guild.gold}} gold</p>
+    </section>
+    <section class="upgrade">
+      <p>Guild level: {{ guild.level }}</p>
+      <button :disabled="guild.gold < 1000">
+        <span>Upgrade guild level</span><br>
+        <span>(1000 gold)</span>
+      </button>
+    </section>
+  </main>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import type {PropType} from "vue";
+import type {Guild} from "@/classes/Guild";
+
+export default defineComponent({
+  name: "GuildView",
+  props: {
+    guild: {
+      type: Object as PropType<Guild>,
+    },
+  }
+});
+</script>
+
+<style lang="scss">
+.title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2.5rem;
+  text-align: center;
+
+  gap: 0.5rem;
+  h1 {
+    font-size: 4rem;
+    line-height: 0.75;
+
+    margin: 0;
+  }
+  h3 {
+    margin: 0;
+    line-height: 0.9;
+  }
+}
+.coffer {
+  text-align: center;
+  p {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+}
+.upgrade {
+  text-align: center;
+  p {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+}
+
+</style>

src/views/QuestView.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="guild">
+    <h1>Rank F Quests</h1>
+    <section class="missives">
+      <div
+          class="missive"
+          :class="{done: missive.maxProgress <= missive.progressPoints}"
+          v-for="missive in missives.F"
+          :key="missive.id"
+          @click="() => {
+            if (missive.progressPoints < missive.maxProgress) return;
+            finalizeQuest(missive, 'F');
+          }"
+      >
+        <h2>{{missive.title}}</h2>
+        <p>{{missive.text}}</p>
+        <div class="slots">
+          <button class="slot">
+            <AdventurerComponent
+              :adventurer="missive.adventurers[0]"
+              :all-adventurers="adventurers"
+              @hire-adventurer="(id) => {
+                adventurers[id].busy = true;
+                missive.adventurers[0] = adventurers[id];
+              }"
+              @free-adventurer="(id) => {
+                if (missive.progressPoints >= missive.maxProgress) return;
+                adventurers[id].busy = false;
+                missive.adventurers.splice(0, 1);
+                if (missive.adventurers.length <= 0) {
+                  missive.progressPoints = 0;
+                }
+              }"
+            />
+          </button>
+        </div>
+        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
+      </div>
+    </section>
+  </div>
+  <div class="guild" v-if="guild.level >= 2">
+    <h1>Rank E Quests</h1>
+    <section class="missives">
+      <div
+          class="missive"
+          :class="{done: missive.maxProgress <= missive.progressPoints}"
+          v-for="missive in missives.E"
+          :key="missive.id"
+          @click="() => {
+            if (missive.progressPoints < missive.maxProgress) return;
+            finalizeQuest(missive, 'E');
+          }"
+      >
+        <h2>{{missive.title}}</h2>
+        <p>{{missive.text}}</p>
+        <div class="slots">
+          <button class="slot">
+            <AdventurerComponent
+                :adventurer="missive.adventurers[0]"
+                :all-adventurers="adventurers"
+                @hire-adventurer="(id) => {
+                adventurers[id].busy = true;
+                missive.adventurers[0] = adventurers[id];
+              }"
+                @free-adventurer="(id) => {
+                if (missive.progressPoints >= missive.maxProgress) return;
+                adventurers[id].busy = false;
+                missive.adventurers.splice(0, 1);
+                if (missive.adventurers.length <= 0) {
+                  missive.progressPoints = 0;
+                }
+              }"
+            />
+          </button>
+        </div>
+        <progress :max="missive.maxProgress" :value="missive.progressPoints"></progress>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, type PropType} from "vue";
+import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
+import type {Adventurer} from "@/classes/Adventurer";
+import type { Quest } from "@/classes/Quest";
+
+export default defineComponent({
+  name: "GuildView",
+  components: {AdventurerComponent},
+  props: {
+    guild: {
+      type: Object,
+    },
+    adventurers: {
+      type: Object as PropType<{[key: string]: Adventurer}>,
+      default() {
+        return {};
+      },
+    },
+    quests: {
+      type: Object as PropType<{[key: string]: Quest}>,
+      default() {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      missiveUpdateTask: null as null|number,
+      newMissiveTask: null as null|number,
+      missives: {
+        F: {} as { [key: string]: Quest },
+        E: {} as { [key: string]: Quest },
+        D: {} as { [key: string]: Quest },
+        C: {} as { [key: string]: Quest },
+        B: {} as { [key: string]: Quest },
+        A: {} as { [key: string]: Quest },
+        S: {} as { [key: string]: Quest },
+      } ,
+    }
+  },
+  methods: {
+    updateMissives() {
+      for (const missiveId in this.missives.F) {
+        const missive = this.missives.F[missiveId];
+        if (missive.adventurers.length <= 0) {
+          missive.progressPoints = 0;
+          continue;
+        }
+        for (const adventurerId in missive.adventurers) {
+          const adventurer = missive.adventurers[adventurerId];
+          const attack = adventurer.attackPerLevel * adventurer.level;
+          missive.progressPoints = Math.min(missive.progressPoints + attack, missive.maxProgress);
+        }
+      }
+    },
+    finalizeQuest(missive: Quest, rank: "F"|"E"|"D"|"C"|"B"|"A"|"S") {
+      missive.progressPoints = 0;
+      for (const adventurerId in missive.adventurers) {
+        const adventurer = missive.adventurers[adventurerId];
+        adventurer.exp += (missive.expReward / missive.adventurers.length);
+        adventurer.busy = false;
+      }
+      missive.adventurers = [];
+      delete this.missives[rank][missive.id];
+    },
+    getRandomQuest(rank: "F"|"E"|"D"|"C"|"B"|"A"|"S"): Quest|null {
+      const keys = Object.keys(this.quests[rank]);
+      if (keys.length <= 0) return null;
+      const questsForRank = this.quests[rank] as unknown as { [key: string]: Quest };
+      const randomId = keys.length * Math.random() << 0;
+      const randomIdString = keys[randomId] as string;
+      return questsForRank[randomIdString];
+    },
+    createMissive(questToAdd: Quest, rank: "F"|"E"|"D"|"C"|"B"|"A"|"S") {
+      const quest = JSON.parse(JSON.stringify(questToAdd));
+      const newId = Math.random().toString(16).slice(2).toString();
+      quest.id = newId;
+      this.missives[rank][newId] = quest;
+    }
+  },
+  mounted() {
+    const quest = this.getRandomQuest("F");
+    if (quest !== null) {
+      this.createMissive(quest, "F");
+    }
+    this.missiveUpdateTask = setInterval(() => {
+      this.updateMissives();
+    }, 1000)
+    this.newMissiveTask = setInterval(() => {
+      const keys = Object.keys(this.missives["F"]);
+      if (keys.length >= 5) return;
+      const quest = this.getRandomQuest("F");
+      if (quest !== null) {
+        this.createMissive(quest, "F");
+      }
+    }, 10000)
+  },
+  beforeUnmount() {
+    if (this.missiveUpdateTask) clearInterval(this.missiveUpdateTask);
+    if (this.newMissiveTask) clearInterval(this.newMissiveTask);
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+  .guild  {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    h1 {
+      font-size: 3rem;
+    }
+    .missives {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      width: calc(100% - 2rem);
+      justify-content: center;
+      align-items: center;
+      padding-inline: 1rem;
+      gap: 1rem;
+      .missive {
+        width: min(100%, 14rem);
+        text-align: center;
+        border: 2px solid #000;
+        padding: 0.5rem;
+        position: relative;
+        background-color: rgba(255,255,255, 0.2);
+        &.done {
+          cursor: pointer;
+          &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            content: "✔";
+            font-size: 5rem;
+            color: green;
+            transform: translate(45%, -40%);
+          }
+        }
+        .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;
+            position: relative;
+          }
+        }
+      }
+    }
+  }
+</style>