front/src/components/Gallery/item.vue

@@ -3,11 +3,15 @@ import * as d3 from "d3"
 import { onMounted } from "vue"
 
 import { IMAGE_URL } from '../../constants'
+import { getRandomIntInclusive } from "../../helpers";
 
 const props = defineProps(['files'])
+const cover = getRandomIntInclusive(0, props.files.length)
+const coverImg = props.files.length > 1 ? `url(${props.files[cover]})` : 'url(/src/assets/promo/map.png)'
 
 onMounted(async () => {
-    const files = props.files
+    const files = props.files.length > 1 ? props.files.splice(cover, 1) : props.files
+
     // const width = 1920
     // const height = 1080
     const width = window.innerWidth
@@ -90,5 +94,12 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <div id="gallery" style="    width: 100vw;    height: 100vh;"></div>
-</template>
+    <div id="gallery"></div>
+</template>
+<style scoped lang="scss">
+#gallery {
+    width: 100vw;
+    height: 100vh;
+    background-image: v-bind(coverImg);
+}
+</style>