Update categories, preferences, and experience, indentation, and other minor changes

Changes to be committed:
	modified:   package-lock.json
	modified:   package.json
	modified:   src/__routes.svelte
	renamed:    src/lib/components/Interests/category.svelte -> src/lib/components/Categories/category.svelte
	new file:   src/lib/components/Categories/category2InRow.svelte
	new file:   src/lib/components/Categories/category3InRow.svelte
	renamed:    src/lib/components/Interests/Interests.svelte -> src/lib/components/Categories/interests.svelte
	modified:   src/lib/router/Router.svelte
	renamed:    src/lib/stores/game.js -> src/lib/stores/stores.js
	modified:   src/lib/utils/IdGenerator.js
	modified:   src/lib/utils/api.js
	renamed:    src/lib/utils/database/game.ts -> src/lib/utils/database/experience.ts
	new file:   src/lib/utils/database/preferences.ts
	modified:   src/lib/utils/stores.js
	new file:   src/locales/cz.json
	new file:   src/locales/en.json
	new file:   src/locales/i18n.ts
	new file:   src/locales/languages.ts
	modified:   src/routes/authorization/register/register.svelte
	modified:   src/routes/explore/explore.svelte
	modified:   src/routes/game/Forms/MultiChoiceForm.svelte
	modified:   src/routes/game/Forms/NumberForm.svelte
	modified:   src/routes/game/Forms/Renderer.svelte
	modified:   src/routes/game/Forms/SingleChoiceForm.svelte
	modified:   src/routes/game/Forms/TextForm.svelte
	renamed:    src/routes/game/game.svelte -> src/routes/game/experience.svelte
	modified:   src/routes/homepage/homepage.svelte
	modified:   src/routes/map/map.svelte
	modified:   src/routes/onboarding/interestsPage.svelte
	modified:   src/routes/profile/functions/Interests-Update.svelte

 Changes not staged for commit:
	modified:   src/lib/utils/parseQuestion.js

package-lock.json

@@ -39,9 +39,10 @@
 				"eslint-plugin-promise": "^6.1.1",
 				"flowbite-svelte": "^0.28.11",
 				"postcss": "^8.4.19",
-				"sass": "^1.56.1",
+				"sass": "^1.59.3",
 				"svelte": "^3.52.0",
 				"svelte-preprocess": "^4.10.7",
+				"svelte-preprocess-sass": "^2.0.1",
 				"tailwindcss": "^3.2.4",
 				"typescript": "^4.9.5",
 				"vite": "^3.2.3"
@@ -5823,6 +5824,24 @@
 				}
 			}
 		},
+		"node_modules/svelte-preprocess-filter": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/svelte-preprocess-filter/-/svelte-preprocess-filter-1.0.0.tgz",
+			"integrity": "sha512-92innv59nyEx24xbfcSurB5ocwC8qFdDtGli/JVMHzJsxyvV2yjQKIcbUqU9VIV5mKUWO2PoY93nncS2yF4ULQ==",
+			"dev": true
+		},
+		"node_modules/svelte-preprocess-sass": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/svelte-preprocess-sass/-/svelte-preprocess-sass-2.0.1.tgz",
+			"integrity": "sha512-0y4FjRsRWcN7rJeNJnSfZ7LVAz6S7/j9Dg24XFRelr/rjMMjXORdEvXy4r38fUYmyk9Y7yjwlHCiqyGxMHhEbg==",
+			"dev": true,
+			"dependencies": {
+				"svelte-preprocess-filter": "^1.0.0"
+			},
+			"peerDependencies": {
+				"sass": "^1.35.2"
+			}
+		},
 		"node_modules/svelte-preprocess/node_modules/magic-string": {
 			"version": "0.25.9",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -10417,6 +10436,21 @@
 				}
 			}
 		},
+		"svelte-preprocess-filter": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/svelte-preprocess-filter/-/svelte-preprocess-filter-1.0.0.tgz",
+			"integrity": "sha512-92innv59nyEx24xbfcSurB5ocwC8qFdDtGli/JVMHzJsxyvV2yjQKIcbUqU9VIV5mKUWO2PoY93nncS2yF4ULQ==",
+			"dev": true
+		},
+		"svelte-preprocess-sass": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/svelte-preprocess-sass/-/svelte-preprocess-sass-2.0.1.tgz",
+			"integrity": "sha512-0y4FjRsRWcN7rJeNJnSfZ7LVAz6S7/j9Dg24XFRelr/rjMMjXORdEvXy4r38fUYmyk9Y7yjwlHCiqyGxMHhEbg==",
+			"dev": true,
+			"requires": {
+				"svelte-preprocess-filter": "^1.0.0"
+			}
+		},
 		"svelte-routing": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.6.0.tgz",

package.json

@@ -22,9 +22,10 @@
 		"eslint-plugin-promise": "^6.1.1",
 		"flowbite-svelte": "^0.28.11",
 		"postcss": "^8.4.19",
-		"sass": "^1.56.1",
+		"sass": "^1.59.3",
 		"svelte": "^3.52.0",
 		"svelte-preprocess": "^4.10.7",
+		"svelte-preprocess-sass": "^2.0.1",
 		"tailwindcss": "^3.2.4",
 		"typescript": "^4.9.5",
 		"vite": "^3.2.3"

src/__routes.svelte

@@ -76,7 +76,7 @@
 		},
 		{
 			path: '/:gameurl',
-			component: () => import('$routes/game/game.svelte'),
+			component: () => import('$root/src/routes/game/experience.svelte'),
 		},
 		{
 			path: '/terms-and-conditions',

src/lib/components/Categories/interests.svelte

@@ -3,7 +3,7 @@
 	import collections from '$lib/collections'
 	import { Query } from 'appwrite'
 	import { navigate } from 'svelte-routing'
-	import Category from "$lib/components/Interests/category.svelte";
+	import Category from "$lib/components/Categories/category.svelte";
 
 	export let current_state = 1
 

src/lib/router/Router.svelte

@@ -33,3 +33,4 @@
 		{/if}
 	{/each}
 </Router>
+

src/lib/utils/IdGenerator.js

@@ -1,3 +1,3 @@
 export const idGenerator = () => {
-	return JSON.stringify(Date.now() * Math.floor(Math.random() * 100000))
+  return JSON.stringify(Date.now() * Math.floor(Math.random() * 100000))
 }

src/lib/utils/api.js

@@ -1,55 +1,55 @@
-async function send({ method, path, body, token, headers }) {
-	const opts = { method, headers: new Headers(), mode: 'cors' }
-	opts.headers.append('Content-Type', 'application/json')
-	opts.headers.append('Access-Control-Allow-Origin', '*')
+async function send ({ method, path, body, token, headers }) {
+  const opts = { method, headers: new Headers(), mode: 'cors' }
+  opts.headers.append('Content-Type', 'application/json')
+  opts.headers.append('Access-Control-Allow-Origin', '*')
 
-	if (body) {
-		opts.body = JSON.stringify(body)
-	}
+  if (body) {
+    opts.body = JSON.stringify(body)
+  }
 
-	if (headers) {
-		for (const [k, v] of Object.entries(headers)) {
-			opts.headers.append(k, v)
-		}
-	}
+  if (headers) {
+    for (const [k, v] of Object.entries(headers)) {
+      opts.headers.append(k, v)
+    }
+  }
 
-	if (token) {
-		opts.headers['Authorization'] = `Bearer ${token}`
-	}
+  if (token) {
+    opts.headers.Authorization = `Bearer ${token}`
+  }
 
-	const res = fetch(path, opts)
-		.then(async (r) => {
-			if (r.status >= 200 && r.status < 400) {
-				return await r.text()
-			} else {
-				return await r.text()
-			}
-		})
-		.then((str) => {
-			try {
-				return JSON.parse(str)
-			} catch (err) {
-				return str
-			}
-		})
+  const res = fetch(path, opts)
+    .then(async (r) => {
+      if (r.status >= 200 && r.status < 400) {
+        return await r.text()
+      } else {
+        return await r.text()
+      }
+    })
+    .then((str) => {
+      try {
+        return JSON.parse(str)
+      } catch (err) {
+        return str
+      }
+    })
 
-	return res
+  return res
 }
 
-export function get(path, token = null) {
-	return send({ method: 'GET', path, body: null, token })
+export function get (path, token = null) {
+  return send({ method: 'GET', path, body: null, token })
 }
 
-export function del(path, token = null) {
-	return send({ method: 'DELETE', path, body: null, token })
+export function del (path, token = null) {
+  return send({ method: 'DELETE', path, body: null, token })
 }
 
-export function post(path, body, token = null) {
-	return send({ method: 'POST', path, body, token })
+export function post (path, body, token = null) {
+  return send({ method: 'POST', path, body, token })
 }
 
-export function put(path, body, token = null, headers = []) {
-	return send({ method: 'PUT', path, body, token, headers })
+export function put (path, body, token = null, headers = []) {
+  return send({ method: 'PUT', path, body, token, headers })
 }
 
 export const hostName = 'https://erant.cz/api'

src/lib/utils/database/experience.ts

@@ -5,6 +5,7 @@ import { getLocationDataFromLatAndLong } from '../locations'
 import { writable } from 'svelte/store'
 import { CheckPoint, Experience } from '$lib/TStypes/experiences'
 
+//Loading of checkpoints and rating is done in the same function to prevent multiple requests to the database
 export const load = async (pathName: string, previewQuestionsCount?: number, preview?: Function) => {
 	const checkPoints: Array<CheckPoint> = []
 	// @ts-ignore
@@ -30,13 +31,13 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
 
 	return experience
 }
-
+//Fetch of Rating 
 const getRating = async (expId: string) => {
 	const { documents, total } = await databases.listDocuments('63cef30d6da945dd4250', '63ee6353ebb174cf815d', [Query.equal('ExpID', expId)])
 	const sum = documents.reduce((accumulator, rating) => accumulator + rating.ExpUserRating, 0)
 	return sum / total || 0
 }
-
+// Fetch of answers to the checkpoints
 export const answer = async (checkPointId: string, answer: any) => {
 	const checkPoint = await databases.getDocument('63cef30d6da945dd4250', '63cef84d908acf805758', checkPointId)
 	console.log({ checkPoint })
@@ -46,29 +47,29 @@ export const answer = async (checkPointId: string, answer: any) => {
 	if (CPType === 'CHECKBOX') return JSON.stringify(answer) === JSON.stringify(correctAnswer)
 	if (CPType === 'RADIO' || CPType === 'NUMBER' || CPType === 'TEXT') return answer === correctAnswer[0]
 }
-
-export const getExpiriences = async () => {
-	const expiriences = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpApproved', true)])).documents
+// Fetch of all experiences
+export const getExperiences = async () => {
+	const experiences = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpApproved', true)])).documents
 	let items = []
-	for (const expirience of expiriences) {
+	for (const experience of experiences) {
 		items.push({
-			city: (await getLocationDataFromLatAndLong(expirience.ExpLocation[0], expirience.ExpLocation[1])).city,
-			...expirience,
+			city: (await getLocationDataFromLatAndLong(experience.ExpLocation[0], experience.ExpLocation[1])).city,
+			...experience,
 		})
 	}
 
 	return items
 }
-
-export const getExpiriencesAsStore = () => {
+// Fetch of all experiences as store
+export const getExperiencesAsStore = () => {
 	const store = writable([])
 	const loading = writable<boolean>(true)
 	databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpApproved', true)]).then(async ({ documents }) => {
 		let items: Array<any> = []
-		for (const expirience of documents) {
+		for (const experience of documents) {
 			items.push({
-				city: (await getLocationDataFromLatAndLong(expirience.ExpLocation[0], expirience.ExpLocation[1])).city,
-				...expirience,
+				city: (await getLocationDataFromLatAndLong(experience.ExpLocation[0], experience.ExpLocation[1])).city,
+				...experience,
 			})
 		}
 		loading.set(false)
@@ -77,3 +78,10 @@ export const getExpiriencesAsStore = () => {
 
 	return [store, loading] as const
 }
+
+// !pridat trideni podle kategorie! export const getExperiencesByCategory = async (category: string) => {}
+
+
+
+
+

src/lib/utils/database/preferences.ts

@@ -0,0 +1,25 @@
+import { databases } from '$lib/appwrite';
+import { Query } from 'appwrite';
+
+export const getPreferences = async () => {
+  const { documents } = await databases.listDocuments('6417cf1de159d094b370', '6417cf29f2118829b3b4', [
+    Query.orderAsc('Name')
+  ]);
+
+  const preferences = documents.map(({ Name, Image }) => ({ name: Name, img: Image }));
+
+  return preferences;
+};
+
+export const addSelectedPreferences = async (userId, preferences) => {
+  const { document: user } = await databases.getDocument('63ded6c18e8493bffc83', 'Users', userId);
+
+  const updatedUser = {
+    ...user,
+    userPreferences: preferences
+  };
+
+  await databases.updateDocument('6417cf1de159d094b370', 'user-collection', user.$id, updatedUser);
+
+  return updatedUser;
+};

src/lib/utils/stores.js

@@ -2,82 +2,82 @@ import { writable } from 'svelte/store'
 import * as api from './api'
 
 class FetchArray extends Array {
-	constructor(items, caller = () => null) {
-		super()
-		this.push(...items)
-		this.caller = caller
-	}
+  constructor (items, caller = () => null) {
+    super()
+    this.push(...items)
+    this.caller = caller
+  }
 
-	setFetch(caller) {
-		this.caller = caller
-		return this
-	}
+  setFetch (caller) {
+    this.caller = caller
+    return this
+  }
 
-	fetch(fetchBody = {}, then = () => null) {
-		return this.caller(fetchBody, then)
-	}
+  fetch (fetchBody = {}, then = () => null) {
+    return this.caller(fetchBody, then)
+  }
 }
 
-export function fetchable(path, initBody = {}) {
-	const { subscribe, set } = writable(null)
+export function fetchable (path, initBody = {}) {
+  const { subscribe, set } = writable(null)
 
-	return {
-		subscribe,
-		fetch(fetchBody = {}, then = () => null) {
-			const body = Object.assign(initBody, fetchBody)
+  return {
+    subscribe,
+    fetch (fetchBody = {}, then = () => null) {
+      const body = Object.assign(initBody, fetchBody)
 
-			api.post(path, body).then((result) => {
-				set(result)
-				then(result)
-			})
+      api.post(path, body).then((result) => {
+        set(result)
+        then(result)
+      })
 
-			return this
-		}
-	}
+      return this
+    }
+  }
 }
 
-export function loadable(path, initBody = {}) {
-	const fetcher = fetchable(path, initBody)
-	const fetchCaller = fetcher.fetch
+export function loadable (path, initBody = {}) {
+  const fetcher = fetchable(path, initBody)
+  const fetchCaller = fetcher.fetch
 
-	const isFetching = writable(false)
+  const isFetching = writable(false)
 
-	fetcher.fetch = (fetchBody = {}, then = () => null) => {
-		isFetching.set(true)
+  fetcher.fetch = (fetchBody = {}, then = () => null) => {
+    isFetching.set(true)
 
-		fetchCaller(fetchBody, (result) => {
-			isFetching.set(false)
-			then(result)
-		})
+    fetchCaller(fetchBody, (result) => {
+      isFetching.set(false)
+      then(result)
+    })
 
-		return new FetchArray([fetcher, isFetching], fetcher.fetch)
-	}
+    return new FetchArray([fetcher, isFetching], fetcher.fetch)
+  }
 
-	return new FetchArray([fetcher, isFetching], fetcher.fetch)
+  return new FetchArray([fetcher, isFetching], fetcher.fetch)
 }
 
-export function mutable(path, callback = () => null) {
-	const isFetching = writable(false)
-	const { subscribe, set } = writable(null)
+export function mutable (path, callback = () => null) {
+  const isFetching = writable(false)
+  const { subscribe, set } = writable(null)
 
-	const mutateCall = async (fetchBody = {}) => {
-		isFetching.set(true)
+  const mutateCall = async (fetchBody = {}) => {
+    isFetching.set(true)
 
-		const result = await api.post(path, fetchBody)
-		set(result)
-		isFetching.set(false)
+    const result = await api.post(path, fetchBody)
+    set(result)
+    isFetching.set(false)
 
-		return result
-	}
+    return result
+  }
 
-	return [
-		{
-			subscribe,
-			mutate(fetchBody = {}) {
-				callback(mutateCall, fetchBody)
-				return this
-			}
-		},
-		isFetching
-	]
+  return [
+    {
+      subscribe,
+      mutate (fetchBody = {}) {
+        callback(mutateCall, fetchBody)
+        return this
+      }
+    },
+    isFetching
+  ]
 }

src/locales/en.json

@@ -0,0 +1,13 @@
+{
+	"page": {
+		"home": {
+			"title": "Discover the best Travel Experiences"
+		},
+        "Map": {
+			"title": "Map the best Travel Experiences"
+		},
+        "register": {
+			"title": "Register to the best Travel Experiences"
+		}
+	}
+}

src/locales/i18n.ts

@@ -0,0 +1,11 @@
+import { register, init, getLocaleFromNavigator, isLoading, locale, locales } from 'svelte-i18n'
+import registers from './languages'
+
+Object.entries(registers).forEach(([key, file]) => register(key, file))
+
+export const i18n = () => init({
+	fallbackLocale: 'en',
+	initialLocale: getLocaleFromNavigator(),
+})
+
+export { isLoading, locale, locales }

src/locales/languages.ts

@@ -0,0 +1,4 @@
+export default {
+	'en': () => import('./en.json'),
+    'cz': () => import('./cz.json')
+}

src/routes/authorization/register/register.svelte

@@ -10,11 +10,11 @@
 	import { Helper } from 'flowbite-svelte'
 	import Button from '$lib/components/Buttons/Button.svelte'
 
-	let email = 'dfsafads'
-	let password = 'aaaaaaaaa'
-	let repeatPassword = 'aaaaaaaaa'
-	let name = 'fdsafsda'
-	let erantId = 'dfsafdsa'
+	let email = ''
+	let password = ''
+	let repeatPassword = ''
+	let name = ''
+	let erantId = ''
 
 	let state: 'email-sent' | 'register' | 'loading' = 'register'
 	let error: string | null = null
@@ -26,7 +26,7 @@
 			state = 'loading'
 			error = null
 			if (await getUserByErantId(erantId)) {
-				const err = new Error('fdjsaůl')
+				const err = new Error('Erant ID is already taken')
 				err['code'] = 1001
 				throw err
 			}
@@ -54,8 +54,8 @@
 				<Helper class="ml-4" color="red">{error}</Helper>
 			{/if}
 			<div class="inform">
-				<input bind:value={name} type="text" placeholder="Name" autocomplete="full-name" required />
-				<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
+				<input bind:value={name} type="text" placeholder="Your name" autocomplete="full-name" required />
+				<input bind:value={email} type="text" placeholder="Your e-mail" autocomplete="email" required />
 				<input bind:value={erantId} type="text" placeholder="@your_nickname" autocomplete="email" required />
 				<HiddenInput bind:value={password} placeholder="Password" />
 				<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />

src/routes/explore/explore.svelte

@@ -2,7 +2,7 @@
 	import NavigationBarLayout from '../../lib/components/Layouts/NavigationBarLayout.svelte'
 	import Result from './Components/Result.svelte'
 	import Top from './Components/Top.svelte'
-	import { getExpiriences } from '$lib/utils/database/game'
+	import { getExperiences } from '$lib/utils/database/experience'
 	import Loading from '$lib/components/Common/Loading.svelte'
 
 	let Search: string
@@ -12,7 +12,7 @@
 	<Top bind:search_value={Search} />
 
 	<div class="results">
-		{#await getExpiriences()}
+		{#await getExperiences()}
 			<div class="w-full h-24 flex items-center justify-center">
 				<Loading />
 			</div>

src/routes/game/Forms/MultiChoiceForm.svelte

@@ -2,7 +2,7 @@
 	import Layout from '../Components/Layout.svelte'
 	import CheckBox from '../../../lib/components/Inputs/Checkbox.svelte'
 	import { CheckPoint } from '$lib/TStypes/experiences'
-	import { answer } from '$lib/utils/database/game'
+	import { answer } from '$lib/utils/database/experience'
 
 	export let data: { name: string; checkPoint: CheckPoint }
 	const { checkPoint, name } = data

src/routes/game/Forms/NumberForm.svelte

@@ -2,7 +2,7 @@
 	import Layout from '../Components/Layout.svelte'
 	import Input from '../../../lib/components/Inputs/Input.svelte'
 	import { CheckPoint } from '$lib/TStypes/experiences'
-	import { answer } from '$lib/utils/database/game'
+	import { answer } from '$lib/utils/database/experience'
 
 	export let data: { name: string; checkPoint: CheckPoint }
 	const { checkPoint, name } = data

src/routes/game/Forms/Renderer.svelte

@@ -8,7 +8,7 @@
 	import IntervalForm from './IntervalForm.svelte'
 	import QrCode from './QrCode.svelte'
 	import Finish from './Finish.svelte'
-	import { data } from '$lib/stores/game'
+	import { data } from '$lib/stores/stores'
 	import Erantmap from '$lib/components/Map/Erantmap.svelte'
 	import Info from './Info.svelte'
 

src/routes/game/Forms/SingleChoiceForm.svelte

@@ -2,7 +2,7 @@
 	import Radio from '../../../lib/components/Inputs/Radio.svelte'
 	import Layout from '../Components/Layout.svelte'
 	import { CheckPoint } from '$lib/TStypes/experiences'
-	import { answer } from '$lib/utils/database/game'
+	import { answer } from '$lib/utils/database/experience'
 
 	export let data: { name: string; checkPoint: CheckPoint }
 	const { checkPoint, name } = data

src/routes/game/Forms/TextForm.svelte

@@ -2,7 +2,7 @@
 	import Layout from '../Components/Layout.svelte'
 	import Input from '../../../lib/components/Inputs/Input.svelte'
 	import { CheckPoint } from '$lib/TStypes/experiences'
-	import { answer } from '$lib/utils/database/game'
+	import { answer } from '$lib/utils/database/experience'
 
 	export let data: { name: string; checkPoint: CheckPoint }
 	const { checkPoint, name } = data

src/routes/game/experience.svelte

@@ -6,7 +6,7 @@
 	import IconStar from '../../lib/svg/Star.svelte'
 	import IconPoint from '../../lib/svg/Point.svelte'
 	import Loading from '../../lib/components/Common/Loading.svelte'
-	import { data } from '../../lib/stores/game'
+	import { data } from '../../lib/stores/stores'
 	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
 	import Map from '../../lib/components/Map/Map.svelte'
 	import Renderer from './Forms/Renderer.svelte'
@@ -16,7 +16,7 @@
 	import collections from '$lib/collections'
 	import { Query } from 'appwrite'
 	import { onMount } from 'svelte'
-	import { load } from '$lib/utils/database/game'
+	import { load } from '$lib/utils/database/experience'
 	import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
 	import { navigate } from '$lib/router'
 
@@ -26,9 +26,9 @@
 		try {
 			$data = await load(params.gameurl, 5, (preview) => {
 				$data = preview
-				view = 'game-preview'
+				view = 'experience-preview'
 			})
-			view = 'game-preview'
+			view = 'experience-preview'
 		} catch (error) {
 			navigate('/error')
 		}
@@ -39,19 +39,19 @@
 		?.slice(0, 8)
 		?.map((q) => q.thumbnail)*/
 
-	let view: 'game-play' | 'game-loading' | 'game-preview' = 'game-loading'
+	let view: 'experience-play' | 'experience-loading' | 'experience-preview' = 'experience-loading'
 
 	//is user already in game
 	//const userInGame = JSON.parse(localStorage.getItem(location.pathname))
 	//$: if ($data && userInGame) view = 'game-play'
 </script>
 
-{#if view === 'game-loading'}
+{#if view === 'experience-loading'}
 	<h1 class="flex items-center justify-center flex-col">
 		<span>Experience is loading...</span>
 		<Loading />
 	</h1>
-{:else if view === 'game-preview'}
+{:else if view === 'experience-preview'}
 	<Overlay shareData={{ url: window.location.href }} img={$data.ExpImage}>
 		<div>
 			<span class="text-[36px]">{$data.ExpName}</span>
@@ -99,7 +99,7 @@
 			<Button on:click={() => (view = 'game-play')} primary>Hrát</Button>
 		{/if}
 	</Overlay>
-{:else if view === 'game-play'}
+{:else if view === 'experience-play'}
 	<Renderer gameData={$data} />
 {/if}
 

src/routes/homepage/homepage.svelte

@@ -6,7 +6,7 @@
 	import Comparment from './Components/Comparment.svelte' //do budoucna bych to udělal pomocí komponent
 	import { onMount } from 'svelte'
 	import Animation from './Components/Animation.svelte'
-	import { getExpiriences } from '$lib/utils/database/game'
+	import { getExperiences } from '$lib/utils/database/experience'
 	import Loading from '$lib/components/Common/Loading.svelte'
 
 	let fitstTime = false
@@ -45,12 +45,12 @@
 
 	<Categories />
 
-	{#await getExpiriences()}
+	{#await getExperiences()}
 		<div class="w-full h-24 flex items-center justify-center">
 			<Loading />
 		</div>
-	{:then expiriences}
-		<Comparment items={expiriences} />
+	{:then experiences}
+		<Comparment items={experiences} />
 	{/await}
 {:else}
 	<div class="content">

src/routes/map/map.svelte

@@ -4,7 +4,7 @@
 	import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
 	import Marker from '$lib/components/Map/Marker.svelte'
 	import { navigate } from '$lib/router'
-	import { getExpiriencesAsStore } from '$lib/utils/database/game'
+	import { getExpiriencesAsStore } from '$lib/utils/database/experience'
 	import { onMount } from 'svelte'
 
 	let user: { lat: number; lng: number } = { lat: 0, lng: 0 }

src/routes/onboarding/interestsPage.svelte

@@ -1,61 +1,59 @@
-<!-- The InterestsPage component is responsible for displaying a list of categories that a user can select from -->
-
 <script lang="ts">
-    // Import necessary modules and components
-    import { user } from '$lib/appwrite';
-    import collections from '$lib/collections';
-    import { Query } from 'appwrite';
-    import { navigate } from 'svelte-routing';
-    import  Category  from "$lib/components/Interests/category.svelte";
-  
-    // Define reactive variables using Svelte's $ syntax
-    $: [userInfo] = collections.users.getDocument([Query.equal('userId', $user?.$id || '')]);
-    $: console.log($user);
-  
-    // Define a writable store to keep track of selected categories
-    import { writable } from 'svelte/store';
-    const selectedCategories = writable([]);
-  
-    // Define a function to toggle the selected state of a category
-    const toggleSelected = (categoryName) => {
-      selectedCategories.update((categories) => {
-        if (categories.includes(categoryName)) {
-          return categories.filter((name) => name !== categoryName);
-        } else {
-          return [...categories, categoryName];
-        }
-      });
-    };
-  
-    // Define a function to handle the form submission
-    const handleSubmit = async () => {
-      const { $id } = await collections.users.updateDocument(userInfo.$id, {
-        preferences: {
-          categories: $selectedCategories,
-        },
-      });
-  
-      navigate(`/profile/${$id}`);
-    };
-  </script>
-  
-  <!-- Render each category as a Category component and pass its name, image, and selected state as props to the Category component. -->
-  {#await collections.categories.listDocuments()}
-    <p>Loading...</p>
-  {:then categories}
-    {#each categories.data as category}
-      <Category 
-        name={category.name}
-        image={category.image}
-        selected={$selectedCategories.includes(category.name)}
-        onToggle={() => toggleSelected(category.name)}
-      />
-    {/each}
-  
-    <!-- Display a form with a button to submit the selected categories -->
-    <form on:submit|preventDefault={handleSubmit}>
-      <button type="submit">Save Preferences</button>
-    </form>
-  {:catch error}
-    <p>Error: {error.message}</p>
-  {/await}
+	import Loading from './../../lib/components/Common/Loading.svelte';
+  // Import necessary modules and components
+  import { user } from '$lib/appwrite';
+  import collections from '$lib/collections';
+  import Loading from '$lib/components/Common/Loading.svelte';
+  import Category2InRow from '$lib/components/categories/Category2InRow.svelte';
+  import Category3InRow from '$lib/components/categories/Category3InRow.svelte';
+  import { getPreferences, addSelectedPreferences } from '$lib/utils/database/preferences';
+  import { navigate } from '$lib/router'
+  import { onMount } from 'svelte';
+
+
+  // Define a variable to store the preferences
+  let preferences = [];
+  // Define a variable to store the selected preferences
+  let selectedPreferences = [];
+
+  onMount(async () => {
+    preferences = await getPreferences();
+  });
+
+  function updateSelectedPreferences(preference) {
+    if (selectedPreferences.includes(preference)) {
+      selectedPreferences = selectedPreferences.filter((item) => item !== preference);
+    } else {
+      selectedPreferences = [...selectedPreferences, preference];
+    }
+  }
+// Define a function to handle the form submission
+  async function submitPreferences() {
+    await addSelectedPreferences(user, selectedPreferences);
+    selectedPreferences = [];
+  }
+</script>
+
+{#if preferences.length > 0}
+  <div class="preferences-page">
+    <div class="progress-bar"></div>
+    <h2>What are your interests?</h2>
+    <Category3InRow
+      preferences={preferences.slice(0, 3)}
+      on:preferenceSelect={updateSelectedPreferences}
+    />
+    <h2>Who do you like to travel with?</h2>
+    <Category2InRow
+      preferences={preferences.slice(3, 5)}
+      on:preferenceSelect={updateSelectedPreferences}
+    />
+    <h2>What brought you to our app?</h2>
+    <Category3InRow
+      preferences={preferences.slice(5)}
+      on:preferenceSelect={updateSelectedPreferences}
+    />
+    <button on:click={submitPreferences}>Submit Preferences</button>
+  </div>
+{:else}
+  <Loading>
+{/if}

src/routes/profile/functions/Interests-Update.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Interests from "$lib/components/Interests/interests.svelte"
+	import Interests from "$lib/components/Categories/interests.svelte"
 
     let current_state = 1
 </script>