储物仓过滤器展示

huww98 · Dec 30, 2023 · 1a1d86c · 1a1d86c
1 parent be0e8b5
commit 1a1d86c
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 26 deletions.
diff --git a/src/blueprint/parser.ts b/src/blueprint/parser.ts
@@ -425,20 +425,48 @@ const tankParamParser: ParamParser<TankParameters> = {
     },
 }
 
+export enum StorageType {
+    DEFAULT = 0,
+    FILTERED = 9,
+}
+export interface StorageGrid {
+    filter: number;
+}
 export interface StorageParameters {
-    automationLimit: number
+    automationLimit: number;
+    type: StorageType;
+    grids: StorageGrid[];
 }
 
-const storageParamParser: ParamParser<StorageParameters> = {
-    encodedSize() { return 1; },
-    encode(p, a) {
-        setParam(a, 0, p.automationLimit);
-    },
-    decode(a) {
-        return {
-            automationLimit: getParam(a, 0),
-        };
-    },
+function storageParamParser(size: number): ParamParser<StorageParameters>{
+    return {
+        encodedSize() {
+            const s = 10 + size;
+            if (s < 110)
+                return 110;
+            return s;
+        },
+        encode(p, a) {
+            setParam(a, 0, p.automationLimit);
+            setParam(a, 1, p.type);
+            for (let i = 0; i < size; i++) {
+                setParam(a, 10 + i, p.grids[i].filter);
+            }
+        },
+        decode(a) {
+            const grids: StorageGrid[] = [];
+            for (let i = 0; i < size; i++) {
+                grids.push({
+                    filter: getParam(a, 10 + i, 0),
+                });
+            }
+            return {
+                automationLimit: getParam(a, 0),
+                type: getParam(a, 1, StorageType.DEFAULT),
+                grids,
+            };
+        },
+    }
 }
 
 export interface EjectorParameters {
@@ -631,8 +659,8 @@ const parameterParsers = new Map<number, ParamParser<AllParameters>>([
     [2011, inserterParamParser],
     [2012, inserterParamParser],
     [2013, inserterParamParser],
-    [2101, storageParamParser],
-    [2102, storageParamParser],
+    [2101, storageParamParser(30)],
+    [2102, storageParamParser(60)],
     [2106, tankParamParser],
     [2311, ejectorParamParser],
     [2208, powerGeneratorParamParser],

diff --git a/src/components/BuildingIcon.vue b/src/components/BuildingIcon.vue
@@ -26,16 +26,15 @@ watchEffect(async () => {
 .icon {
     display: inline-block;
     position: relative;
-    height: 2.5rem;
     width: 2.5rem;
 
     &.has-count {
         padding-bottom: .4em;
     }
 
     img {
-        height: 100%;
         width: 100%;
+        display: block;
     }
 
     .count {

diff --git a/src/components/BuildingInfoPanel.vue b/src/components/BuildingInfoPanel.vue
@@ -5,6 +5,7 @@
     <SplitterInfo v-if="isSplitter(building.itemId)" :building="building" />
     <StationInfo v-if="isStation(building.itemId)" :building="building" />
     <MonitorInfo v-if="isMonitor(building.itemId)" :building="building" />
+    <StorageInfo v-if="isStorage(building.itemId)" :building="building" />
     <div class="building-params">
         <div v-if="filterItem">
             <label>{{ t('过滤器') }}</label>
@@ -22,10 +23,6 @@
             <label>{{ t('分拣长度') }}</label>
             <span class="v">{{ (bParams as InserterParameters).length }}</span>
         </div>
-        <div v-if="isStorage(building.itemId)">
-            <label>{{ t('自动化容量限制') }}</label>
-            <span class="v">{{ capacityForAutomation }}</span>
-        </div>
         <template v-if="isEjector(building.itemId)">
             <div>
                 <label>{{ t('送入轨道') }}</label>
@@ -86,7 +83,7 @@ import { useI18n } from 'vue-i18n';
 import { truth } from '@/utils';
 import {
     LabParamerters, AssembleParamerters, TankParameters, BlueprintBuilding,
-    BeltParameters, InserterParameters, StorageParameters, EjectorParameters,
+    BeltParameters, InserterParameters, EjectorParameters,
     EnergyExchangerParameters, PowerGeneratorParameters, ArtifacialStarParameters,
 } from '@/blueprint/parser';
 import { itemIconId } from '@/data/icons';
@@ -100,6 +97,7 @@ import BuildingRecipe from './BuildingRecipe.vue';
 import BuildingIcon from './BuildingIcon.vue';
 import StationInfo from './StationInfo.vue';
 import MonitorInfo from './MonitorInfo.vue';
+import StorageInfo from './StorageInfo.vue';
 import SwitchDSP from './SwitchDSP.vue';
 const SplitterInfo = defineAsyncComponent(() => import(/* webpackChunkName: "renderer" */'./SpitterInfo.vue'));
 
@@ -157,12 +155,6 @@ const energyExchangerMode = computed(() => {
     const mode = (props.building.parameters as EnergyExchangerParameters).mode;
     return t(energyExchangerModeTexts.get(mode)!);
 });
-const capacityForAutomation = computed(() => {
-    const itemId = props.building.itemId;
-    const capacity = itemId === 2101 ? 30 : 60;
-    const limit = (props.building.parameters as StorageParameters).automationLimit;
-    return capacity - limit;
-});
 </script>
 
 <style lang="scss">

diff --git a/src/components/StorageInfo.vue b/src/components/StorageInfo.vue
@@ -0,0 +1,64 @@
+<template>
+    <div v-if="p.type === StorageType.FILTERED" class="storage-grid" :class="'capacity-' + capacity">
+        <template v-for="(g, i) in p.grids" :key="i" >
+            <div :class="{ban: i >= capacityForAutomation}">
+                <BuildingIcon v-if="g.filter > 0" :icon-id="itemIconId(g.filter)" />
+            </div>
+        </template>
+    </div>
+    <div class="building-params">
+        <div>
+            <label>{{ t('自动化容量限制') }}</label>
+            <span class="v">{{ capacityForAutomation }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BlueprintBuilding, StorageParameters, StorageType } from '@/blueprint/parser';
+import BuildingIcon from './BuildingIcon.vue';
+import { itemIconId } from '@/data/icons';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+    building: BlueprintBuilding,
+}>();
+
+const capacity = computed(() => {
+    const itemId = props.building.itemId;
+    return itemId === 2101 ? 30 : 60;
+});
+const p = computed(() => props.building.parameters as StorageParameters);
+const capacityForAutomation = computed(() => {
+    const limit = p.value.automationLimit;
+    return capacity.value - limit;
+});
+</script>
+
+<style lang="scss">
+.storage-grid {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    width: 100%;
+    background: #FFFFFF40;
+
+    &.capacity-30 {
+        grid-template-rows: repeat(3, 1fr);
+    }
+    &.capacity-60 {
+        grid-template-rows: repeat(6, 1fr);
+    }
+
+    .ban {
+        background: #80000080;
+    }
+    .icon {
+        display: block;
+        width: 100%;
+
+    }
+}
+</style>