Fix bug with no random + prevent user from starting game + ENV vars

app/page.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect, useRef } from 'react'
 import { IconPencilMinus, IconDice6 } from "@tabler/icons-react"
 import { defaultAvatarImage } from './avatarImage'
 import { getUsername } from './usernameGenerate'
+import { redirect, useRouter } from 'next/navigation'
 import { resizeBase64Image, getBase64OfImage } from './utils'
 import WebcamPhoto from '@/components/webcamPhoto' 
 
@@ -17,6 +18,7 @@ export default function Home() {
   const modal = useRef<any>()
   const inputName = useRef<any>()
   const inputProfilePicRef = useRef<any>()
+  const { push } = useRouter()
 
   function setUsername() {
     setName(inputName.current!.value)
@@ -43,6 +45,16 @@ export default function Home() {
     setShowWebcam(false)
   }
 
+  function moveToRandomRoom(){
+    let roomNumber = ""
+    for(let i = 0; i < 6; i++) {
+      roomNumber += Math.floor(Math.random() * 9.99)
+    }
+    console.log("Hello")
+    push('/' + roomNumber.toString())
+    //redirect('/' + roomNumber.toString())
+  }
+
   useEffect(() => {
     let localName = localStorage.getItem("name")
     let localAvatar = localStorage.getItem("avatar")
@@ -119,7 +131,7 @@ export default function Home() {
         </div>
       </div>
       <div className="flex flex-col space-y-4 items-center">
-        <a href="/random" className="btn btn-primary">Create a room</a>
+        <button onClick={moveToRandomRoom} className="btn btn-primary">Create a room</button>
         <div className="divider"></div>
         <form action={navigate} className="flex flex-col space-y-4">
           <input type="text" name="id" placeholder="Room pin" className="input input-bordered w-full max-w-xs" />