From 875418a84f0d7ccd1599adc9df876651dc591961 Mon Sep 17 00:00:00 2001
From: pskfyi <patrick.keenan.fyi@gmail.com>
Date: Mon, 10 Jan 2022 02:14:44 -0800
Subject: [PATCH] feat: appretices tab draft 2

---
 components/ApprenticeButton.vue | 46 +++++++++++++++++++++++++++++++++
 pages/Apprentices.vue           | 34 +++++-------------------
 2 files changed, 52 insertions(+), 28 deletions(-)
 create mode 100644 components/ApprenticeButton.vue

diff --git a/components/ApprenticeButton.vue b/components/ApprenticeButton.vue
new file mode 100644
index 0000000..8dd8c6b
--- /dev/null
+++ b/components/ApprenticeButton.vue
@@ -0,0 +1,46 @@
+<template>
+  <progress-button
+    :label="label"
+    :description="description"
+    :max="process.nextWorkerCost"
+    :value="$store.state.currency"
+    :current="current"
+    :next="next"
+    @click="levelUp"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    process: { type: Object, required: true },
+  },
+  computed: {
+    label() {
+      return this.process.workerLevel > 0
+        ? `L${this.process.workerLevel} ${this.process.worker}`
+        : `Hire ${this.process.worker}`
+    },
+    description() {
+      return this.process.workerLevel > 0
+        ? `Multiplies spare time gained from ${this.process.instrument}s.`
+        : `Use your spare time to hire an apprentice ${this.process.worker} who can help you with ${this.process.instrument}s.`
+    },
+    current() {
+      return this.process.workerLevel > 0
+        ? `${1 + this.process.workerLevel}x`
+        : null
+    },
+    next() {
+      return this.process.workerLevel > 0
+        ? `${2 + this.process.workerLevel}x`
+        : null
+    },
+  },
+  methods: {
+    levelUp() {
+      this.$store.commit('levelUpApprentice', this.process)
+    },
+  },
+}
+</script>
diff --git a/pages/Apprentices.vue b/pages/Apprentices.vue
index 427fe3e..42cab74 100644
--- a/pages/Apprentices.vue
+++ b/pages/Apprentices.vue
@@ -1,31 +1,9 @@
 <template>
-  <div class="tab-content grid flex-col">
-    <div
+  <responsive-grid>
+    <apprentice-button
       v-for="(process, index) in $store.state.processes"
-      :key="index"
-      class="flex flex-col mb-4 p-4 rounded border"
-      :class="`border-${$store.getters.activeTab.darkColor}`"
-      @click="$store.commit('purchaseWorker', index)"
-    >
-      <span class="text-center font-bold pb-2 text-xl">
-        {{ process.workerCount }} {{ process.worker }}
-        <template v-if="process.workerCount != 1">s</template>
-      </span>
-      <span class="text-left font-semibold">
-        Each <b>{{ process.worker }}</b> makes your
-        <b>{{ process.device }}s</b> produce <b>spare time</b> at an increased
-        rate.
-      </span>
-      <span class="text-center text-md pt-2">
-        Cost for next {{ process.worker }}: {{ process.nextWorkerCost }}
-        {{ process.buyWorkersWith }}
-      </span>
-    </div>
-  </div>
+      :key="`${index}-${process.workerLevel}`"
+      :process="process"
+    />
+  </responsive-grid>
 </template>
-
-<style>
-.tab-content {
-  grid-template-columns: 1fr;
-}
-</style>