Added campaign retrieval function, added banner to homepage.

assets/components/campaigns/campaign.vue

@@ -50,9 +50,9 @@ function ratioFilter(banner) {
 
 function entityCampaign() {
 	const bannerCampaigns = this.entity.campaigns
-		.concat(this.entity.children?.flatMap(child => child.campaigns))
+		.concat(this.entity.children?.flatMap((child) => child.campaigns))
 		.concat(this.entity.parent?.campaigns)
-		.filter(campaignX => campaignX && this.ratioFilter(campaignX.banner));
+		.filter((campaignX) => campaignX && this.ratioFilter(campaignX.banner));
 
 	if (bannerCampaigns.length > 0) {
 		const randomCampaign = bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
@@ -66,7 +66,7 @@ function entityCampaign() {
 }
 
 function tagCampaign() {
-	const campaignBanners = this.tag.banners.filter(banner => banner.campaigns.length > 0 && this.ratioFilter(banner));
+	const campaignBanners = this.tag.banners.filter((banner) => banner.campaigns.length > 0 && this.ratioFilter(banner));
 	const banner = campaignBanners[Math.floor(Math.random() * campaignBanners.length)];
 
 	if (banner?.campaigns.length > 0) {
@@ -83,17 +83,25 @@ function tagCampaign() {
 	return null;
 }
 
-function campaign() {
+async function genericCampaign() {
+	const randomCampaign = await this.$store.dispatch('fetchRandomCampaign', { minRatio: this.minRatio, maxRatio: this.maxRatio });
+
+	this.campaign = randomCampaign;
+	this.$emit('campaign', randomCampaign);
+
+	return randomCampaign;
+}
+
+async function mounted() {
 	if (this.entity) {
-		return this.entityCampaign();
+		await this.entityCampaign();
 	}
 
 	if (this.tag) {
-		return this.tagCampaign();
+		await this.tagCampaign();
 	}
 
-	this.$emit('campaign', null); // allow parent to toggle campaigns depending on availability
-	return null;
+	await this.genericCampaign();
 }
 
 export default {
@@ -124,11 +132,15 @@ export default {
 		},
 	},
 	emits: ['campaign'],
-	computed: {
-		campaign,
+	data() {
+		return {
+			campaign: null,
+		};
 	},
+	mounted,
 	methods: {
 		entityCampaign,
+		genericCampaign,
 		ratioFilter,
 		tagCampaign,
 	},
@@ -139,7 +151,6 @@ export default {
 .campaign {
 	height: 100%;
 	display: inline-flex;
-	flex-grow: 1;
 	align-items: center;
 	justify-content: center;
 }

assets/components/home/home.vue

@@ -1,6 +1,12 @@
 <template>
 	<div class="home">
 		<div class="content-inner">
+			<div class="campaign-container">
+				<Campaign
+					:min-ratio="6"
+				/>
+			</div>
+
 			<FilterBar
 				ref="filter"
 				:fetch-releases="fetchReleases"
@@ -32,6 +38,7 @@
 import FilterBar from '../filters/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 import Pagination from '../pagination/pagination.vue';
+import Campaign from '../campaigns/campaign.vue';
 
 async function fetchReleases(scroll = true) {
 	this.done = false;
@@ -59,6 +66,7 @@ async function mounted() {
 
 export default {
 	components: {
+		Campaign,
 		FilterBar,
 		Releases,
 		Pagination,
@@ -91,4 +99,12 @@ export default {
 	flex-direction: column;
 	flex-grow: 1;
 }
+
+.campaign-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: .75rem 1rem .25rem 1rem;
+	background: var(--background-dim);
+}
 </style>