#5 added Hitgroup-Puppet to DamageSite

src/components/DamageSite.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="damage-site">
+    <div class="total-damage">
+      <h3 class="text-center mt-2">Total Damage</h3>
+      <TotalDamage/>
+    </div>
+    <div class="hitgroup">
+      <h3 class="text-center">Hitgroup-Puppet</h3>
+      <HitgroupPuppet :equipment_map="data.equipment_map" :stats="data.stats" />
+    </div>
+  </div>
+</template>
+
+<script>
+import HitgroupPuppet from '@/components/HitgroupPuppet'
+import TotalDamage from "@/components/TotalDamage"
+import {onMounted, reactive} from "vue";
+import {useStore} from "vuex";
+import {GetWeaponDmg} from "@/utils";
+
+export default {
+  name: "DamageSite.vue",
+  components: {HitgroupPuppet, TotalDamage},
+  setup() {
+    const store = useStore()
+
+    const data = reactive({
+      equipment_map: {},
+      stats: [],
+    })
+
+    const getWeaponDamage = async () => {
+      const resData = await GetWeaponDmg(store.state.matchDetails.match_id)
+      data.equipment_map = resData.equipment_map
+      data.stats = resData.stats
+    }
+
+    onMounted(() => {
+      getWeaponDamage()
+    })
+
+    return {data}
+  }
+}
+</script>
+
+<style scoped>
+.damage-site {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>