designtopack/src/components/project/cards/VirtualSample.vue

<template>
  <Images
    v-if="step.files.dynamic || step.files.static"
    :step="step"
    :images="images"
    :uri="uri"
  />
</template>
<script setup>
import Images from './Images.vue';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useVirtualSampleStore } from '../../../stores/virtualSample';

const { step } = defineProps({ step: Object });

const { allVariations } = storeToRefs(useVirtualSampleStore());

const images = computed(() => {
  if (!step.files.dynamic) {
    return [
      {
        url: step.files.static.rawGlass.cover,
      },
    ];
  }
  return allVariations.value.map((variation) => getFrontView(variation)) ?? [];
});

const uri = '/' + step.uri;

function getFrontView(variation) {
  if (variation.files.length === 1) return variation.files[0];
  const xMax = parseInt(
    variation.files[variation.files.length - 1].name.split('_')[1].split('.')[0]
  );
  const xFrontView = (xMax + 1) / 2;
  const extension = variation.files[0].name.split('.')[1];
  const frontViewName = '0_' + xFrontView + '.' + extension;
  const frontView = variation.files.find((file) => file.name === frontViewName);
  return frontView;
}
</script>