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';
const { step } = defineProps({ step: Object });

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

  return (
    step.files?.dynamic?.map(
      (track) => (getFrontView(track)['dynamic'] = true)
    ) ?? []
  );
});

const uri = '/' + step.uri;

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