✨ Add Orbits promo

vegeta897 · Aug 1, 2024 · e87dea5 · e87dea5
1 parent 1f295e8
commit e87dea5
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 2 deletions.
diff --git a/src/app.html b/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<title>Word Peaks</title>
 		<meta charset="utf-8" />
-		<meta name="description" content="A word game of highs and lows" />
+		<meta name="description" content="Outsmart the alphabet in a word game of highs and lows" />
 		<meta name="twitter:card" content="summary" />
 		<meta name="twitter:title" content="Word Peaks" />
 		<meta name="twitter:creator" content="@vegeta897" />
@@ -15,7 +15,7 @@
 		<meta property="og:image:height" content="300" />
 		<meta property="og:image:alt" content="Word Peaks logo" />
 		<meta property="og:url" content="https://vegeta897.github.io/word-peaks" />
-		<meta property="og:description" content="A word game of highs and lows" />
+		<meta property="og:description" content="Outsmart the alphabet in a word game of highs and lows" />
 		<meta name="mobile-web-app-capable" content="yes" />
 		<meta name="application-name" content="Word Peaks" />
 		<meta name="apple-mobile-web-app-capable" content="yes" />

diff --git a/src/components/Promo.svelte b/src/components/Promo.svelte
@@ -0,0 +1,97 @@
+<script>
+	import { trackEvent } from '$lib/plausible'
+	import { showEndView, dismissPromo } from '$src/store'
+	import { fly } from 'svelte/transition'
+
+	const CURRENT_PROMO = 1
+</script>
+
+{#if $showEndView && $dismissPromo < CURRENT_PROMO}
+	<section in:fly={{ duration: 400, y: 100 }}>
+		<div>
+			<p class="promo-link">
+				<a
+					href="https://www.playorbits.com"
+					on:auxclick={() => trackEvent('promoLinkFollow')}
+					on:click={() => trackEvent('promoLinkFollow')}
+				>
+					Check out Orbits, the circular word game!
+				</a>
+			</p>
+			<p>Start with any word and make a loop of connected words</p>
+			<button title="Dismiss" on:click={() => dismissPromo.set(CURRENT_PROMO)}>
+				<svg
+					viewBox="0 0 10 10"
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+				>
+					<line x1="2" y1="2" x2="8" y2="8" />
+					<line x1="8" y1="2" x2="2" y2="8" />
+				</svg>
+			</button>
+		</div>
+	</section>
+{/if}
+
+<style>
+	section {
+		display: flex;
+		justify-content: center;
+		padding: 0 0.5rem;
+	}
+
+	div {
+		padding: 0.5rem 2.5rem;
+		text-align: center;
+		background: var(--secondary-color);
+		border-radius: 0.75rem;
+		position: relative;
+	}
+
+	p {
+		margin: 0.25rem 0;
+	}
+
+	.promo-link {
+		font-size: 1.125em;
+	}
+
+	button {
+		position: absolute;
+		right: 4px;
+		top: 4px;
+		margin: 0;
+		border: 0;
+		width: 36px;
+		height: 36px;
+		padding: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: none;
+		opacity: 0.4;
+		border-radius: 100%;
+	}
+
+	svg {
+		stroke-width: 1.75;
+		stroke: var(--text-color);
+		stroke-linecap: round;
+		fill: none;
+	}
+
+	button:hover {
+		background-color: var(--primary-color);
+		opacity: 1;
+	}
+
+	@media (max-width: 480px) {
+		div {
+			max-width: 16rem;
+		}
+		.promo-link {
+			font-size: 1em;
+		}
+	}
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -13,6 +13,7 @@
 	import Footer from '$com/Footer.svelte'
 	import Header from '$com/Header.svelte'
 	import { initGameState } from '$src/store'
+	import Promo from '$com/Promo.svelte'
 
 	const { openScreen, gameMode } = store
 
@@ -45,6 +46,7 @@
 	<section>
 		<Header />
 		<Board />
+		<Promo />
 		<Controls />
 		{#if consoleMode}
 			{#await import('$com/Console.svelte') then c}

diff --git a/src/store/app.ts b/src/store/app.ts
@@ -64,3 +64,5 @@ export const landscapeRedraw: Writable<boolean> = writable(false)
 export const landscapeSVG: Writable<SVGElement | null> = writable(null)
 
 export const newUser: Writable<boolean> = writable(false)
+
+export const dismissPromo: Writable<number> = storageWritable('wp-dismissPromo', 0)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -64,3 +64,5 @@ export const landscapeRedraw: Writable<boolean> = writable(false)
		export const landscapeSVG: Writable<SVGElement \| null> = writable(null)

		export const newUser: Writable<boolean> = writable(false)

		export const dismissPromo: Writable<number> = storageWritable('wp-dismissPromo', 0)