diff --git a/src/client/graphics/layers/WinModal.ts b/src/client/graphics/layers/WinModal.ts index 884900ac9..9e8e8d795 100644 --- a/src/client/graphics/layers/WinModal.ts +++ b/src/client/graphics/layers/WinModal.ts @@ -9,7 +9,6 @@ import "../../components/PatternButton"; import { fetchPatterns, handlePurchase } from "../../Cosmetics"; import { getUserMe } from "../../jwt"; import { SendWinnerEvent } from "../../Transport"; -import { GutterAdModalEvent } from "./GutterAdModal"; import { Layer } from "./Layer"; @customElement("win-modal") @@ -43,7 +42,7 @@ export class WinModal extends LitElement implements Layer { return html`

@@ -120,14 +119,27 @@ export class WinModal extends LitElement implements Layer { return; } - const pattern = purchasable[Math.floor(Math.random() * purchasable.length)]; + // Shuffle the array and take patterns based on screen size + const shuffled = [...purchasable].sort(() => Math.random() - 0.5); + const isMobile = window.innerWidth < 768; // md breakpoint + const maxPatterns = isMobile ? 1 : 3; + const selectedPatterns = shuffled.slice( + 0, + Math.min(maxPatterns, shuffled.length), + ); this.patternContent = html` - {}} - .onPurchase=${(p: Pattern) => handlePurchase(p)} - > +
+ ${selectedPatterns.map( + (pattern) => html` + {}} + .onPurchase=${(p: Pattern) => handlePurchase(p)} + > + `, + )} +
`; } @@ -146,11 +158,8 @@ export class WinModal extends LitElement implements Layer { async show() { await this.loadPatternContent(); - this.eventBus.emit(new GutterAdModalEvent(true)); - setTimeout(() => { - this.isVisible = true; - this.requestUpdate(); - }, 1500); + this.isVisible = true; + this.requestUpdate(); setTimeout(() => { this.showButtons = true; this.requestUpdate(); @@ -158,7 +167,6 @@ export class WinModal extends LitElement implements Layer { } hide() { - this.eventBus.emit(new GutterAdModalEvent(false)); this.isVisible = false; this.showButtons = false; this.requestUpdate();