add content warning

frontend/package.json

@@ -47,6 +47,7 @@
 		"d3-drag": "^3.0.0",
 		"d3-selection": "^3.0.0",
 		"d3-zoom": "^3.0.0",
+		"js-cookie": "^3.0.1",
 		"nanoid": "^4.0.0"
 	}
 }

frontend/src/lib/ContentWarningModal.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	let okButton: HTMLButtonElement;
+
+	onMount(() => {
+		okButton.focus();
+	});
+</script>
+
+<form
+	class="fixed w-screen top-0 left-0 bottom-0 right-0 h-screen z-50 flex items-center justify-center bg-black bg-opacity-80"
+>
+	<div
+		class="text-center p-3 m-3 bg-white overflow-hidden rounded-2xl w-full max-w-lg 2xl:max-w-xl"
+	>
+		<h3
+			class="font-semibold text-black text-base 2xl:text-2xl spacing tracking-wide hover:saturate-150 mb-3"
+		>
+			Since the project is an open interactive art canvas, you may encounter some disturbing and
+			potentially NSFW content in the rooms.
+		</h3>
+
+		<button
+			bind:this={okButton}
+			on:click={() => dispatch('contentModal')}
+			class="font-semibold bg-blue-700 text-white rounded-lg px-5 text-xl 2xl:text-2xl spacing tracking-wide hover:saturate-150"
+			title="Input prompt to generate image and  negative prompt inside brackets <NEGATIVE PROMPT>"
+			>OK
+		</button>
+	</div>
+</form>

frontend/src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import type { Client } from '@liveblocks/client';
 	import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
 	import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
+	import ContentWarningModal from '$lib/ContentWarningModal.svelte';
 	import App from '$lib/App.svelte';
 	import About from '$lib/About.svelte';
 	import { PUBLIC_API_BASE } from '$env/static/public';
@@ -11,9 +12,11 @@
 	import type { RoomResponse } from '$lib/types';
 	import { MAX_CAPACITY, FRAME_SIZE } from '$lib/constants';
 	import { Status } from '$lib/types';
+	import Cookies from 'js-cookie';
 
 	let loading = true;
 	let client: Client;
+	let hideContentModal = true;
 
 	$: roomId = $selectedRoomID;
 
@@ -33,8 +36,19 @@
 		});
 
 		updateRooms();
+
+		const accepted = Cookies.get('acceptedContentWarning');
+		hideContentModal = false;
+		if (accepted) {
+			hideContentModal = true;
+		}
 	});
 
+	function contentModal() {
+		hideContentModal = true;
+		Cookies.set('acceptedContentWarning', 'true', { expires: 10 });
+	}
+
 	async function updateRooms() {
 		loading = true;
 		const roomidParam = new URLSearchParams(window.location.search).get('roomid');
@@ -79,6 +93,9 @@
 	};
 </script>
 
+{#if !hideContentModal}
+	<ContentWarningModal on:contentModal={() => contentModal()} />
+{/if}
 <About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
 
 {#if loading}