úprava game.svelte/try.svelte=volá komponentu

src/App.svelte

@@ -3,12 +3,13 @@
 	import './main.scss'
 
 	import Game from './routes/game.svelte'
+	import Try from './routes/try.svelte'
 </script>
 
 <main>
 	<Router>
 		<Route path="/">
-			<Game />
+			<Try />
 		</Route>
 	</Router>
 </main>
@@ -16,6 +17,8 @@
 <style lang="scss">
 	main {
 		height: 100%;
+		display: flex;
+		justify-content: center;
 		width: 100%;
 	}
 </style>

src/lib/Image.svelte

@@ -13,5 +13,6 @@
 		background-size: cover;
 		height: 94px;
 		width: 94px;
+		min-width: 94px;
 	}
 </style>

src/lib/Ota/Bubble.svelte

@@ -0,0 +1,42 @@
+<script>
+	const col = {
+		blue: '#4263EB',
+		white: 'white',
+		txt_blue: 'white',
+		txt_white: '#999999',
+	}
+	export let background
+</script>
+
+<bubble style={`background: ${col[background]}; color: ${col[`txt_${background}`]}`}>
+	<slot name="icon" />
+	<span class="text"><slot /></span>
+</bubble>
+
+<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/Ota/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/Ota/Icons/Point.svelte

@@ -0,0 +1,8 @@
+<svg width="20" height="26" viewBox="0 0 20 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M0.479126 9.35335C0.479126 4.19335 4.65246 0.0200195 9.8125 0.0200195C14.9725 0.0200195 19.1458 4.19335 19.1458 9.35335C19.1458 14.9133 13.2525 22.58 10.8391 25.5C10.3058 26.14 9.33246 26.14 8.79913 25.5C6.37246 22.58 0.479126 14.9133 0.479126 9.35335ZM6.47913 9.35335C6.47913 11.1933 7.97246 12.6867 9.8125 12.6867C11.6525 12.6867 13.1458 11.1933 13.1458 9.35335C13.1458 7.51335 11.6525 6.02002 9.8125 6.02002C7.97246 6.02002 6.47913 7.51335 6.47913 9.35335Z"
+		fill="#4263EB"
+	/>
+</svg>

src/lib/Ota/Icons/Share.svelte

@@ -0,0 +1,26 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g filter="url(#filter0_i_956_444)">
+		<rect width="42" height="42" fill="url(#share_svelteSvgPictureid)" />
+	</g>
+	<defs>
+		<filter id="filter0_i_956_444" x="0" y="0" width="42" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix" />
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+			<feOffset dx="436" dy="4" />
+			<feGaussianBlur stdDeviation="2" />
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+			<feColorMatrix type="matrix" values="0 0 0 0 0.258824 0 0 0 0 0.388235 0 0 0 0 0.921569 0 0 0 1 0" />
+			<feBlend mode="normal" in2="shape" result="effect1_innerShadow_956_444" />
+		</filter>
+		<pattern id="share_svelteSvgPictureid" patternContentUnits="objectBoundingBox" width="1" height="1">
+			<use xlink:href="#image0_956_444" transform="scale(0.00520833)" />
+		</pattern>
+		<image
+			id="image0_956_444"
+			width="192"
+			height="192"
+			xlink:href="data:image/png;base64,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"
+		/>
+	</defs>
+</svg>

src/lib/Ota/Icons/Star.svelte

@@ -0,0 +1,6 @@
+<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M13.5 21.2792L19.725 25.0442C20.865 25.7342 22.26 24.7142 21.96 23.4242L20.31 16.3442L25.815 11.5742C26.82 10.7042 26.28 9.05416 24.96 8.94916L17.715 8.33416L14.88 1.64416C14.37 0.42916 12.63 0.42916 12.12 1.64416L9.28499 8.31916L2.03999 8.93416C0.719987 9.03916 0.179987 10.6892 1.18499 11.5592L6.68999 16.3292L5.03999 23.4092C4.73999 24.6992 6.13499 25.7192 7.27499 25.0292L13.5 21.2792Z"
+		fill="#FFBF00"
+	/>
+</svg>

src/lib/Ota/ImageSlider.svelte

@@ -0,0 +1,48 @@
+<script>
+	import Image from '../Image.svelte'
+
+	export let images
+	let windowsize
+	let overflow = 'hidden'
+	const nextImages = () => {
+		overflow = 'auto'
+		images = images
+		windowsize = Infinity
+	}
+</script>
+
+<div style={`overflow-y: ${overflow}`} bind:offsetWidth={windowsize} class="imageSlider">
+	{#each images as image, i}
+		{#if Math.floor(windowsize / (94 + 10)) >= i + 1}
+			<div>
+				<Image src={image} />
+				{#if Math.floor(windowsize / (94 + 10)) === i + 1 && images.length !== i + 1}
+					<span on:click={nextImages} class="imageCounter">{`+${images.length - Math.floor(windowsize / (94 + 10))}`}</span>
+				{/if}
+			</div>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.imageSlider {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		gap: 10px;
+		position: relative;
+	}
+	.imageCounter {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 125%;
+		color: white;
+		height: 94px;
+		width: 94px;
+		min-width: 94px;
+		position: absolute;
+		top: 0;
+		cursor: pointer;
+	}
+</style>

src/lib/Ota/Sharebutton.svelte

@@ -0,0 +1,32 @@
+<script>
+	import IconShare from './Icons/Share.svelte'
+	export let shareData
+
+	const share = async () => {
+		if (navigator.canShare(shareData)) {
+			await navigator.share(shareData)
+		} else {
+			navigator.clipboard.writeText(shareData.url)
+		}
+	}
+</script>
+
+<div on:click={share}>
+	<span>
+		<IconShare />
+	</span>
+</div>
+
+<style>
+	div {
+		height: 62px;
+		width: 62px;
+		cursor: pointer;
+		background: #e8e8e8;
+		border-radius: 16px;
+		z-index: 6;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

src/lib/Ota/Tab.svelte

@@ -0,0 +1,22 @@
+<script>
+	import Sharebutton from './Sharebutton.svelte'
+	export let shareData
+</script>
+
+<div>
+	<Sharebutton {shareData} />
+</div>
+
+<style>
+	div {
+		width: 100%;
+		height: calc(100% - 75%);
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		position: absolute;
+		top: 0;
+		padding: 50px;
+		background: none;
+	}
+</style>

src/lib/Overlay.svelte

@@ -1,10 +1,13 @@
 <script>
 	export let img
+	export let shareData
 	export let alt = 'background image'
+	import Tab from './Ota/Tab.svelte'
 </script>
 
 <section class="container">
 	<img src={img} {alt} />
+	<Tab {shareData} />
 	<section class="overlay">
 		<slot />
 	</section>
@@ -15,16 +18,18 @@
 		position: relative;
 		height: 100%;
 		width: 100%;
+		max-width: 768px;
 
 		.overlay {
-			height: 75%;
+			height: max-content;
 			width: 100%;
 			position: absolute;
-			bottom: 0;
+			top: 25%;
 			border-radius: 70px 70px 0 0;
-			padding-left: 52px;
+			/*padding-left: 52px;
 			padding-right: 52px;
-			padding-top: 52px;
+			padding-top: 52px;*/
+			padding: 52px; /*provedena změna-OtaProkopec*/
 			display: flex;
 			flex-direction: column;
 			row-gap: 35px;

src/routes/game.svelte

@@ -1,24 +1,50 @@
 <script>
-	import Image from '../lib/Image.svelte'
-	import Heading from '../lib/Heading.svelte'
+	import Heading from '../lib/Ota/Heading.svelte'
 	import Overlay from '../lib/Overlay.svelte'
 	import Section from '../lib/Section.svelte'
 	import Button from '../lib/Button.svelte'
+	import Bubble from '../lib/Ota/Bubble.svelte'
+	import IconStar from '../lib/Ota/Icons/Star.svelte'
+	import IconPoint from '../lib/Ota/Icons/Point.svelte'
+	import Map from '../lib/Ota/Map.svelte'
+	import ImageSlider from '../lib/Ota/ImageSlider.svelte'
 
-	let assets = Array.from(Array(4).keys()).map((_, i) => `/assets/temp/kar${i + 1}.png`)
+	export let assets
+	export let shareData
 </script>
 
-<Overlay img="/assets/temp/kar1.png">
-	<Heading>Tůra po Karláku</Heading>
-
-	<Section title="Popis">Vydejte se na napínavou pouť po zajímavostech největšího náměstí v Česku.</Section>
-	<Section title="Fotky">
-		<div style="display: flex; justify-content: space-between; width: 100%;">
-			{#each assets as asset}
-				<Image src={asset} />
-			{/each}
+<Overlay {shareData} img="/assets/temp/kar1.png">
+	<Heading>
+		<slot name="title" />
+		<div class="bubbles" slot="bubbles">
+			<Bubble background="blue">
+				<span slot="icon"><IconStar /></span>
+				<span><slot name="stars" /></span>
+			</Bubble>
+			<Bubble background="white">
+				<span slot="icon"><IconPoint /></span>
+				<span><slot name="point" /></span>
+			</Bubble>
 		</div>
-	</Section>
+	</Heading>
 
-	<Button primary>Play</Button>
+	<Section title="Popis"><slot name="description" /></Section>
+	<Section title="Fotky">
+		<ImageSlider images={assets} />
+	</Section>
+	<Map />
+
+	<Button primary>Hrát</Button>
 </Overlay>
+
+<!---->
+<style>
+	.bubbles {
+		display: flex;
+		height: fit-content;
+		width: 100%;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 15px;
+	}
+</style>

src/routes/try.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Overlay from './game.svelte'
+	let assets = Array.from(Array(6).keys()).map((_, i) => `/assets/temp/kar${i + 1}.png`)
+	const shareData = {
+		title: 'Geohry',
+		text: 'Naše geohry',
+		url: location.origin,
+	}
+</script>
+
+<Overlay {shareData} {assets}>
+	<span slot="title">Tůra po Karláku</span>
+	<span slot="description">Vydejte se na napínavou pouť po zajímavostech největšího náměstí v Česku.</span>
+	<span slot="stars">4.5</span>
+	<span slot="point">Praha</span>
+</Overlay>