Merge pull request #2 from NMSCD/dev

Add freighter base detection

package.json

@@ -21,7 +21,6 @@
     "@vitejs/plugin-vue": "^5.0.2",
     "bulma": "^0.9.4",
     "chart.js": "^4.4.1",
-    "pinia": "^2.1.7",
     "vue-chartjs": "^5.3.0",
     "vue-tsc": "^1.8.27"
   }

src/App.vue

@@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
 import BaseList from './components/BaseList.vue';
 import type { Base } from '@/types/Base';
 import PartChart from './components/PartChart.vue';
+import { maxObjects } from './constants/base';
 
 const isJsonInvalid = ref(false);
 const baseJson = ref<Base[]>([]);
@@ -14,6 +15,8 @@ const totalPartsUsed = computed(() => {
   return objectCounts.reduce((prev, cur) => prev + cur, 0);
 });
 
+const totalPartsUnused = computed(() => maxObjects - totalPartsUsed.value);
+
 function parseOnInput(e: Event) {
   if (!(e.target instanceof HTMLTextAreaElement)) return;
   parseJson(e.target.value);
@@ -23,7 +26,12 @@ function parseJson(rawJson: string) {
   try {
     const parsedJson: Base[] = JSON.parse(rawJson);
     isJsonInvalid.value = false;
-    const sortedJson = parsedJson.toSorted((a, b) => b.Objects.length - a.Objects.length);
+    const playerBases = parsedJson.filter((item) =>
+      ['HomePlanetBase', 'FreighterBase'].includes(item.BaseType.PersistentBaseTypes)
+    );
+    const freighter = playerBases.find((item) => item.BaseType.PersistentBaseTypes === 'FreighterBase');
+    if (freighter) freighter.Name = 'Freighter';
+    const sortedJson = playerBases.toSorted((a, b) => b.Objects.length - a.Objects.length);
     baseJson.value = sortedJson;
   } catch (error) {
     isJsonInvalid.value = true;
@@ -60,12 +68,21 @@ function parseJson(rawJson: string) {
     v-if="baseJson.length"
     class="my-4"
   >
+  <div class="stats is-flex is-flex-wrap-wrap">
     <p>Total Number of Bases: {{ totalBases }}</p>
     <p>Total Parts Used: {{ totalPartsUsed }}</p>
+    <p>Unused Parts: {{ totalPartsUnused }}</p>
+  </div>
     <BaseList :bases="baseJson" />
     <PartChart
       :bases="baseJson"
       :total-parts="totalPartsUsed"
     />
   </div>
 </template>
+
+<style scoped lang="scss">
+.stats {
+  gap: 2rem;
+}
+</style>

src/components/BaseItem.vue

@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import type { Base } from '@/types/Base';
 import { computed } from 'vue';
+import { uploadLimit } from '@/constants/base';
 
 const props = defineProps<{
   base: Base;
 }>();
 
-const uploadLimit = 3000;
+const isFreighterBase = props.base.BaseType.PersistentBaseTypes === 'FreighterBase';
 
 const isNotUploadable = computed(() => props.base.Objects.length >= uploadLimit);
 </script>
 
 <template>
   <div class="card p-4">
-    <div>Name: {{ base.Name }}</div>
+    <div>
+      Name: <span :class="{ 'is-italic': isFreighterBase }">{{ base.Name }}</span>
+    </div>
     <div>
       Parts:
       <span

src/components/PartChart.vue

@@ -3,6 +3,8 @@ import type { Base } from '@/types/Base';
 import { computed, reactive } from 'vue';
 import { Pie } from 'vue-chartjs';
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
+import { minColourValue, maxColourValue } from '@/constants/colours';
+import { maxObjects } from '@/constants/base';
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
@@ -16,17 +18,12 @@ function getRndInteger(min: number, max: number) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-const minColourValue = 50;
-const maxColourValue = 255;
-
 function getRandomColour() {
   const rgb = Array.from({ length: 3 }).map(() => getRndInteger(minColourValue, maxColourValue));
   const hexCode = rgb.map((colour) => colour.toString(16)).join('');
   return `#${hexCode}`;
 }
 
-const maxObjects = 16000;
-
 const labels = computed(() => props.bases.map((base) => base.Name));
 const objectCounts = computed(() => props.bases.map((base) => base.Objects.length));
 const colours = computed(() => props.bases.map(getRandomColour));

src/constants/base.ts

@@ -0,0 +1,2 @@
+export const maxObjects = 16000;
+export const uploadLimit = 3000;

src/constants/colours.ts

@@ -0,0 +1,2 @@
+export const minColourValue = 50;
+export const maxColourValue = 255;

src/main.ts

@@ -2,13 +2,8 @@ import 'bulma';
 import '@/styles/styles.scss';
 import App from './App.vue';
 import { createApp } from 'vue';
-import { createPinia } from 'pinia';
 
 const app = createApp(App);
 
-// state management, if required
-const pinia = createPinia();
-app.use(pinia);
-
 // css selector where the app should be mounted
 app.mount('#app');

src/styles/styles.scss

@@ -0,0 +1,5 @@
+html,
+body {
+  scrollbar-gutter: stable;
+  font-family: sans-serif;
+}