Routing and Lobby

Author: PatatoBit

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "typescript.preferences.quoteStyle": "single",
   "editor.formatOnSave": true,
-  "files.eol": "\n"
+  "files.eol": "\n",
+  "nuxt.isNuxtApp": false
 }

src/components/Ring.tsx

@@ -8,15 +8,15 @@ export default function Ring() {
 	if (isHovered) {
 		return (
 			<div
-				className="my-10 border-4 rounded-full w-80 h-80 shadow-yellow-200 shadow-2xl bg-yellow-200 border-yellow-200 transition-all"
+				className="mt-2 mb-5 border-4 rounded-full w-80 h-80 shadow-yellow-200 shadow-2xl bg-yellow-200 border-yellow-200 transition-all"
 				onMouseEnter={onMouseEnter}
 				onMouseLeave={onMouseLeave}
 			></div>
 		);
 	} else
 		return (
 			<div
-				className="my-10 border-4 border-yellow-300 rounded-full w-80 h-80 transition-all"
+				className="mt-2 mb-5 border-4 border-yellow-300 rounded-full w-80 h-80 transition-all"
 				onMouseEnter={onMouseEnter}
 				onMouseLeave={onMouseLeave}
 			></div>

src/components/Room.tsx renamed to src/components/RoomForm.tsx

@@ -9,7 +9,7 @@ function createRoom(){
 }
 
 
-function Room() {
+function RoomForm() {
 
   return (
     <>
@@ -22,4 +22,4 @@ function Room() {
   )
 }
 
-export default Room
+export default RoomForm

src/pages/[keycode].tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+
+import Ring from '../components/Ring'
+
+function Lobby() {
+	const router = useRouter();
+	const { keycode } = router.query;
+
+	return (
+		<>
+			<div className="flex flex-col w-full h-screen items-center justify-center bg-slate-800">
+				<h1 className="text-5xl text-yellow-300">Light Touch</h1>
+				<div className="text-2xl text-yellow-300">{ keycode }</div>
+
+				<Ring />
+				<Link href="/"><a className="button">Leave</a></Link>
+			</div>
+		</>
+	)
+}
+
+export default Lobby

src/pages/index.tsx

@@ -1,12 +1,12 @@
 import Ring from "../components/Ring";
-import Room from '../components/Room'
+import RoomForm from '../components/RoomForm'
 
 export default function Home() {
 	return (
 		<div className="flex flex-col w-full h-screen items-center justify-center bg-slate-800">
 			<h1 className="text-5xl text-yellow-300">Light Touch</h1>
 			<Ring />
-			<Room />
+			<RoomForm />
 		</div>
 	);
 }