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 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>
|
||||
|
|
|
@ -18,7 +18,6 @@
|
|||
top: 0;
|
||||
padding: 50px;
|
||||
background: none;
|
||||
position: fixed;
|
||||
clip-path: inset(0);
|
||||
z-index: 6;
|
||||
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue