Add rating stars

frontend/src/lib/components/EditAdventure.svelte

@@ -279,73 +279,126 @@
 						type="number"
 						min="0"
 						max="5"
-						name="rating"
+						hidden
-						id="rating"
 						bind:value={adventureToEdit.rating}
+						id="rating"
+						name="rating"
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
-				</div>
+					<div class="rating -ml-3 mt-1 mb-4">
-				<input
-					type="text"
-					id="latitude"
-					hidden
-					name="latitude"
-					bind:value={adventureToEdit.latitude}
-					class="input input-bordered w-full max-w-xs mt-1"
-				/>
-				<input
-					type="text"
-					id="longitude"
-					hidden
-					name="longitude"
-					bind:value={adventureToEdit.longitude}
-					class="input input-bordered w-full max-w-xs mt-1"
-				/>
-				{#if adventureToEdit.collection === null}
-					<div class="mb-2">
-						<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-						><br />
 						<input
-							type="checkbox"
+							type="radio"
-							class="toggle toggle-primary"
+							name="rating-2"
-							id="is_public"
+							class="rating-hidden"
-							name="is_public"
+							checked={Number.isNaN(adventureToEdit.rating) || adventureToEdit.rating === null}
-							bind:checked={adventureToEdit.is_public}
 						/>
-					</div>
+						<input
-				{/if}
+							type="radio"
-
+							name="rating-2"
-				{#if adventureToEdit.is_public}
+							class="mask mask-star-2 bg-orange-400"
-					<div class="bg-neutral p-4 rounded-md shadow-sm">
+							checked={adventureToEdit.rating === 1}
-						<p class=" font-semibold">Share this Adventure!</p>
+							on:click={() => (adventureToEdit.rating = 1)}
-						<div class="flex items-center justify-between">
+						/>
-							<p class="text-card-foreground font-mono">
+						<input
-								{window.location.origin}/adventures/{adventureToEdit.id}
+							type="radio"
-							</p>
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 2)}
+							checked={adventureToEdit.rating === 2}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 3)}
+							checked={adventureToEdit.rating === 3}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 4)}
+							checked={adventureToEdit.rating === 4}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (adventureToEdit.rating = 5)}
+							checked={adventureToEdit.rating === 5}
+						/>
+						{#if adventureToEdit.rating}
 							<button
 								type="button"
-								on:click={() => {
+								class="btn btn-sm btn-error ml-2"
-									navigator.clipboard.writeText(
+								on:click={() => (adventureToEdit.rating = NaN)}
-										`${window.location.origin}/adventures/${adventureToEdit.id}`
-									);
-								}}
-								class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
 							>
-								Copy Link
+								Remove
 							</button>
-						</div>
+						{/if}
 					</div>
-				{/if}
+					<input
+						type="text"
+						id="latitude"
+						hidden
+						name="latitude"
+						bind:value={adventureToEdit.latitude}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+					<input
+						type="text"
+						id="longitude"
+						hidden
+						name="longitude"
+						bind:value={adventureToEdit.longitude}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+					{#if adventureToEdit.collection === null}
+						<div class="mb-2">
+							<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+							><br />
+							<input
+								type="checkbox"
+								class="toggle toggle-primary"
+								id="is_public"
+								name="is_public"
+								bind:checked={adventureToEdit.is_public}
+							/>
+						</div>
+					{/if}
 
-				<button
+					{#if adventureToEdit.is_public}
-					type="submit"
+						<div class="bg-neutral p-4 rounded-md shadow-sm">
-					id="edit_adventure"
+							<p class=" font-semibold">Share this Adventure!</p>
-					data-umami-event="Edit Adventure"
+							<div class="flex items-center justify-between">
-					class="btn btn-primary mr-4 mt-4"
+								<p class="text-card-foreground font-mono">
-					on:click={submit}>Edit</button
+									{window.location.origin}/adventures/{adventureToEdit.id}
-				>
+								</p>
-				<!-- if there is a button in form, it will close the modal -->
+								<button
-				<button class="btn mt-4" on:click={close}>Close</button>
+									type="button"
+									on:click={() => {
+										navigator.clipboard.writeText(
+											`${window.location.origin}/adventures/${adventureToEdit.id}`
+										);
+									}}
+									class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
+								>
+									Copy Link
+								</button>
+							</div>
+						</div>
+					{/if}
+
+					<button
+						type="submit"
+						id="edit_adventure"
+						data-umami-event="Edit Adventure"
+						class="btn btn-primary mr-4 mt-4"
+						on:click={submit}>Edit</button
+					>
+					<!-- if there is a button in form, it will close the modal -->
+					<button class="btn mt-4" on:click={close}>Close</button>
+				</div>
 			</form>
 			<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
 		</div>

frontend/src/lib/components/NewAdventure.svelte

@@ -326,11 +326,59 @@
 						type="number"
 						min="0"
 						max="5"
+						hidden
 						bind:value={newAdventure.rating}
 						id="rating"
 						name="rating"
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
+					<div class="rating -ml-3 mt-1">
+						<input
+							type="radio"
+							name="rating-2"
+							class="rating-hidden"
+							checked={Number.isNaN(newAdventure.rating)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 1)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 2)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 3)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 4)}
+						/>
+						<input
+							type="radio"
+							name="rating-2"
+							class="mask mask-star-2 bg-orange-400"
+							on:click={() => (newAdventure.rating = 5)}
+						/>
+						{#if newAdventure.rating}
+							<button
+								type="button"
+								class="btn btn-sm btn-error ml-2"
+								on:click={() => (newAdventure.rating = NaN)}
+							>
+								Remove
+							</button>
+						{/if}
+					</div>
 				</div>
 				<div class="mb-2">
 					<label for="link"

frontend/src/routes/adventures/[id]/+page.svelte

@@ -92,10 +92,10 @@
 		<main class="flex-1">
 			<div class="max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
 				<div class="grid gap-8">
-					{#if adventure.image}
+					{#if adventure.images && adventure.images.length > 0}
 						<div>
 							<img
-								src={adventure.image}
+								src={adventure.images[0].image}
 								alt={adventure.name}
 								width="1200"
 								height="600"