Added dedicated Arch Angel scraper.

assets/components/releases/releases.vue

@@ -12,18 +12,34 @@
 			:key="sfw"
 			class="nolist tiles"
 		>
-			<li
-				v-for="(release, index) in releases"
-				:key="`release-${release.id}`"
-			>
-				<SceneTile
-					:release="release"
-					:referer="referer"
-					:index="index"
-					:stash="stash"
-					@stash="isStashed => $emit('stash', isStashed)"
-				/>
-			</li>
+			<template v-for="(item, index) in items">
+				<li
+					v-if="item === 'campaign'"
+					:key="`campaign-${index}`"
+					class="campaign"
+				>
+					<Campaign
+						v-if="item === 'campaign'"
+						:entity="entity"
+						:min-ratio="0.75"
+						:max-ratio="1.25"
+						:allow-generic="true"
+					/>
+				</li>
+
+				<li
+					v-else
+					:key="`release-${item.id}`"
+				>
+					<SceneTile
+						:release="item"
+						:referer="referer"
+						:index="index"
+						:stash="stash"
+						@stash="isStashed => $emit('stash', isStashed)"
+					/>
+				</li>
+			</template>
 		</ul>
 
 		<span
@@ -38,51 +54,53 @@
 	</div>
 </template>
 
-<script>
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+
+import Campaign from '../campaigns/campaign.vue';
 import Ellipsis from '../loading/ellipsis.vue';
 import SceneTile from './scene-tile.vue';
 
-function range() {
-	return this.$route.params.range;
-}
+const router = useRouter();
+const store = useStore();
 
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
+defineEmits(['stash']);
 
-export default {
-	components: {
-		Ellipsis,
-		SceneTile,
+const props = defineProps({
+	releases: {
+		type: Array,
+		default: () => [],
 	},
-	props: {
-		releases: {
-			type: Array,
-			default: () => [],
-		},
-		context: {
-			type: String,
-			default: null,
-		},
-		done: {
-			type: Boolean,
-			default: true,
-		},
-		referer: {
-			type: String,
-			default: null,
-		},
-		stash: {
-			type: Object,
-			default: null,
-		},
+	entity: {
+		type: Object,
+		default: null,
 	},
-	emits: ['stash'],
-	computed: {
-		range,
-		sfw,
+	context: {
+		type: String,
+		default: null,
 	},
-};
+	done: {
+		type: Boolean,
+		default: true,
+	},
+	referer: {
+		type: String,
+		default: null,
+	},
+	stash: {
+		type: Object,
+		default: null,
+	},
+});
+
+const campaignIndex = computed(() => Math.floor(Math.random() * props.releases.length - 5) + 5);
+
+const items = computed(() => props.releases.flatMap((release, index) => (props.releases.length > 10 && index === campaignIndex.value ? ['campaign', release] : release)));
+
+const range = computed(() => router.route?.params.range);
+const sfw = computed(() => store.state.ui.sfw);
 </script>
 
 <style lang="scss" scoped>
@@ -126,6 +144,12 @@ export default {
     font-weight: bold;
 }
 
+.campaign {
+	display: flex;
+	align-items: flex-start;
+	justify-content: center;
+}
+
 @media(max-width: $breakpoint-mega) {
     .tiles {
 		grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));