Fix overlay
This commit is contained in:
parent
b3a4c98ec3
commit
b0ec1dde57
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -2,7 +2,7 @@
|
||||||
export let img = null
|
export let img = null
|
||||||
export let shareData = null
|
export let shareData = null
|
||||||
export let alt = 'background image'
|
export let alt = 'background image'
|
||||||
import Tab from './game/Tab.svelte'
|
import Tab from './Game/Tab.svelte'
|
||||||
import Layout from './Layout.svelte'
|
import Layout from './Layout.svelte'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -48,13 +48,7 @@
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 35vh;
|
position: absolute;
|
||||||
max-height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -18,7 +18,6 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
background: none;
|
background: none;
|
||||||
position: fixed;
|
|
||||||
clip-path: inset(0);
|
clip-path: inset(0);
|
||||||
z-index: 6;
|
z-index: 6;
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<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 Overlay from '../lib/Components/Overlay.svelte'
|
||||||
import Section from '../lib/Components/Section.svelte'
|
import Section from '../lib/Components/Section.svelte'
|
||||||
import Button from '../lib/Components/Button.svelte'
|
import Button from '../lib/Components/Button.svelte'
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<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 Overlay from '../lib/Components/Overlay.svelte'
|
||||||
import Section from '../lib/Components/Section.svelte'
|
import Section from '../lib/Components/Section.svelte'
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue