Fix overlay

src/lib/Components/Game/Bubble.svelte

@@ -0,0 +1,42 @@
+<script>
+	const col = {
+		blue: '#4263EB',
+		white: 'white',
+		txt_blue: 'white',
+		txt_white: '#999999',
+	}
+	export let background
+</script>
+
+<div class="bubble" style={`background: ${col[background]}; color: ${col[`txt_${background}`]}`}>
+	<slot name="icon" />
+	<span class="text"><slot /></span>
+</div>
+
+<style>
+	.bubble {
+		border-radius: 20px;
+		width: fit-content;
+		height: 38px;
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		padding: 6px 10px;
+		gap: 10px;
+		border: 1px solid #4263eb;
+		font-size: 17px;
+		color: white;
+	}
+	.text {
+		font-family: 'Source Sans Pro';
+		font-style: normal;
+		font-weight: 700;
+		font-size: 20px;
+		line-height: 25px;
+		display: flex;
+		align-items: center;
+		text-align: center;
+	}
+</style>

src/lib/Components/Game/Heading.svelte

@@ -0,0 +1,25 @@
+<script>
+</script>
+
+<div>
+	<h1>
+		<slot />
+	</h1>
+
+	<slot name="bubbles" />
+</div>
+
+<style lang="scss">
+	div {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px;
+	}
+	h1 {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 36px;
+		line-height: 45px;
+		color: #110042;
+	}
+</style>

src/lib/Components/Game/Map/Circle.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { Marker } from '@beyonk/svelte-mapbox'
+	import { createEventDispatcher, getContext } from 'svelte'
+
+	export let lat, lng
+	export let width = 0.004
+	export let user = { lat: 0, lng: 0 }
+
+	const dispatch = createEventDispatcher()
+
+	let Mlat = [lat - width, lat + width]
+	let Mlng = [lng - width, lng + width]
+
+	$: isIn = user ? user.lat > Mlat[0] && user.lat < Mlat[1] && user.lng > Mlng[0] && user.lng < Mlng[1] : null
+
+	$: isIn && dispatch('enter', { lat, lng, user })
+</script>
+
+<Marker popup={false} {lat} {lng}>
+	<div class="w-8 h-8 bg-none rounded-full" />
+</Marker>
+
+<style>
+	div {
+		border: 8px solid red;
+	}
+</style>

src/lib/Components/Game/Map/Map.svelte

@@ -0,0 +1,48 @@
+<script>
+	import { Map, controls } from '@beyonk/svelte-mapbox'
+	import { createEventDispatcher } from 'svelte'
+	const { GeolocateControl } = controls
+	let mapComponent
+	let className = ''
+	export { className as class }
+
+	let user = { lat: 0, lng: 0 }
+
+	const dispatch = createEventDispatcher()
+
+	export let center = { lng: 0, lat: 0 }
+</script>
+
+<div class={className}>
+	<Map
+		class="h-full"
+		accessToken="pk.eyJ1IjoiZXJhbnQ0MiIsImEiOiJjbDdybXo4dmswZ3E5M3FwMnFsazdpb3VoIn0.wXblbreOUt3e8N81CAH0Wg"
+		style="mapbox://styles/mapbox/outdoors-v11"
+		bind:this={mapComponent}
+		on:ready={() => {
+			mapComponent.resize()
+			mapComponent.setCenter([center.lng, center.lat], 14)
+		}}
+		zoom={14}
+	>
+		<slot {user} />
+		<GeolocateControl
+			on:geolocate={(e) => {
+				const { latitude, longitude } = e.detail.coords
+				user = { lat: latitude, lng: longitude }
+				dispatch('move', user)
+			}}
+		/>
+	</Map>
+</div>
+
+<style>
+	div {
+		border-radius: 25px;
+		overflow: hidden;
+	}
+
+	:global(.mapboxgl-marker) {
+		cursor: pointer;
+	}
+</style>

src/lib/Components/Game/Tab.svelte

@@ -0,0 +1,28 @@
+<script>
+	import Sharebutton from '../Sharebutton.svelte'
+	export let shareData
+</script>
+
+<div>
+	<Sharebutton {shareData} />
+</div>
+
+<style lang="scss">
+	div {
+		width: 100%;
+		height: calc(100% - 75%);
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		position: absolute;
+		top: 0;
+		padding: 50px;
+		background: none;
+		clip-path: inset(0);
+		z-index: 6;
+
+		@media (min-width: 768px) {
+			position: absolute;
+		}
+	}
+</style>

src/lib/Components/Overlay.svelte

@@ -2,7 +2,7 @@
 	export let img = null
 	export let shareData = null
 	export let alt = 'background image'
-	import Tab from './game/Tab.svelte'
+	import Tab from './Game/Tab.svelte'
 	import Layout from './Layout.svelte'
 </script>
 
@@ -48,13 +48,7 @@
 			z-index: 4;
 			width: 100%;
 			height: auto;
-			min-height: 35vh;
-			max-height: 100%;
-			position: fixed;
-
-			@media (min-width: 768px) {
-				position: relative;
-			}
+			position: absolute;
 		}
 	}
 </style>

src/lib/Components/game/Tab.svelte

@@ -18,7 +18,6 @@
 		top: 0;
 		padding: 50px;
 		background: none;
-		position: fixed;
 		clip-path: inset(0);
 		z-index: 6;
 

src/routes/error.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Heading from '../lib/Components/game/Heading.svelte'
+	import Heading from '../lib/Components/Game/Heading.svelte'
 	import Overlay from '../lib/Components/Overlay.svelte'
 	import Section from '../lib/Components/Section.svelte'
 	import Button from '../lib/Components/Button.svelte'

src/routes/index.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Heading from '../lib/Components/game/Heading.svelte'
+	import Heading from '../lib/Components/Game/Heading.svelte'
 	import Overlay from '../lib/Components/Overlay.svelte'
 	import Section from '../lib/Components/Section.svelte'
 </script>