new homepage

pixselve-school · Jan 30, 2024 · 5ce3e6b · 5ce3e6b
1 parent b744c98
commit 5ce3e6b
Show file tree

Hide file tree

Showing 6 changed files with 507 additions and 63 deletions.
diff --git a/packages/client/src/app/layout.tsx b/packages/client/src/app/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({
   return (
     <SharedStateProvider>
       <html lang="en" className='h-full'>
-        <body className={`h-full bg-red-50 font-sans ${inter.variable}`}>{children}</body>
+        <body className={`h-full font-sans ${inter.variable}`}>{children}</body>
       </html>
     </SharedStateProvider>
   );

diff --git a/packages/client/src/app/page.tsx b/packages/client/src/app/page.tsx
@@ -2,38 +2,31 @@
 
 import { useApi } from "@/hooks/useApi";
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import background from "../assets/background.png";
 import logo from "../assets/logo.png";
 import { Canvas } from "./canvas";
-
+import { getRandomUsername } from '@viper-vortex/shared';
 export default function HomePage() {
   const [serverUrl, setServerUrl] = useState<string>("http://localhost:4000");
-  const [isCentered, setIsCentered] = useState<boolean>(true);
   const [username, setUsername] = useState("");
   const api = useApi();
 
+
+  useEffect(() => {
+    setUsername(getRandomUsername())
+  }, [])
+
+
+  if (!api.isConnected) return <Login
+    setServerUrl={setServerUrl}
+    serverUrl={serverUrl}
+    api={api}
+    setUsername={setUsername}
+    username={username}
+  />
   return (
     <main className="flex h-full select-none flex-col items-center justify-center">
-      {!api.isConnected && (
-        <LoginComponent
-          setServerUrl={setServerUrl}
-          serverUrl={serverUrl}
-          api={api}
-          setUsername={setUsername}
-          username={username}
-        ></LoginComponent>
-      )}
-      <div className="absolute bottom-4 left-4 flex items-center gap-2">
-        <input
-          type="checkbox"
-          id="centered"
-          className="h-6 w-6"
-          checked={isCentered}
-          onChange={(e) => setIsCentered(e.target.checked)}
-        />
-        <label htmlFor="centered">centered</label>
-      </div>
-
       <div className="absolute right-0 bg-gray-400 p-4">
         <div className="font-bold">Score</div>
         <ul>
@@ -44,55 +37,72 @@ export default function HomePage() {
           ))}
         </ul>
       </div>
-      {api.isConnected && api.scene && <Canvas centered={isCentered} />}
+      {api.scene && <Canvas centered />}
     </main>
   );
 }
 
-function LoginComponent(props: {
+function Login(props: {
   serverUrl: string;
   setServerUrl: (url: string) => void;
   api: ReturnType<typeof useApi>;
   username: string;
   setUsername: (username: string) => void;
 }) {
   return (
-    <form
-      className="flex flex-col items-center gap-8"
-      onSubmit={(e) => {
-        e.preventDefault();
-        props.api.connect(props.serverUrl, props.username);
-      }}
-    >
-      <Image className="w-1/2" src={logo} alt="Viper Vortex"></Image>
-
-      <h1 className="text-xl font-bold text-red-500">
-        Play together with your friends
-      </h1>
-
-      <input
-        onChange={(e) => props.setUsername(e.target.value)}
-        value={props.username}
-        required
-        className="w-full rounded-full border-2 border-gray-500 bg-gray-200 py-2 text-center text-black"
-        type="text"
-        placeholder="Name"
-      />
-
-      <input
-        value={props.serverUrl}
-        onChange={(e) => props.setServerUrl(e.target.value)}
-        className="w-full rounded-full border-2 border-gray-500 bg-gray-200 py-2 text-center text-black"
-        type="text"
-        placeholder="Server URL"
-      />
-
-      <button
-        disabled={!props.username || !props.serverUrl}
-        className="w-full rounded-full bg-red-500 py-2 text-2xl font-bold ring-4 ring-red-500/50 ring-offset-8 ring-offset-red-950 transition-transform hover:scale-105 disabled:bg-gray-500 disabled:ring-gray-500/50"
+    <main className='flex h-full flex-col items-center relative justify-center'>
+      <Image src={background} alt="Viper Vortex" layout="fill" objectFit="cover" className='fixed brightness-50 inset-0' />
+      <form
+        className="flex flex-col max-w-80 items-center gap-4 z-10"
+        onSubmit={(e) => {
+          e.preventDefault();
+          props.api.connect(props.serverUrl, props.username);
+        }}
       >
-        Play
-      </button>
-    </form>
+        <Image className="w-96" src={logo} alt="Viper Vortex"></Image>
+        <h1 className="text-2xl font-bold text-white w-full">
+          Viper Vortex
+        </h1>
+        <p className="text-white/70">
+          Collect points by eating food and other players. If your head touches another player, you will explode and die.
+        </p>
+        <div className='relative h-14 w-full bg-white/10 backdrop-blur-md rounded-lg text-white'>
+          <label
+            htmlFor="username"
+            className='absolute top-0 left-0 px-4 py-2 pointer-events-none text-sm text-white/50 transition-all'
+          >Username</label>
+          <input
+            required
+            id="username"
+            value={props.username}
+            onChange={(e) => props.setUsername(e.target.value)}
+            className="px-4 pb-2 pt-6 bg-transparent w-full rounded-lg"
+            type="text"
+            placeholder="Your username"
+          />
+        </div>
+        <div className='relative h-14 w-full bg-white/10 backdrop-blur-md rounded-lg text-white'>
+          <label
+            htmlFor="serverUrl"
+            className='absolute top-0 left-0 px-4 py-2 pointer-events-none text-sm text-white/50 transition-all'
+          >Server</label>
+          <input
+            required
+            id="serverUrl"
+            value={props.serverUrl}
+            onChange={(e) => props.setServerUrl(e.target.value)}
+            className="px-4 pb-2 pt-6 bg-transparent w-full rounded-lg"
+            type="text"
+            placeholder="Server URL"
+          />
+        </div>
+        <button
+          disabled={!props.username || !props.serverUrl}
+          className="bg-white/30 backdrop-blur-md rounded-lg p-4 text-white w-full disabled:text-red-500 disabled:cursor-not-allowed disabled:bg-red-500/10 border-4 border-white/5 transition-all hover:bg-white/20 hover:border-white/20"
+        >
+          Play
+        </button>
+      </form>
+    </main>
   );
 }
diff --git a/packages/client/src/assets/background.png b/packages/client/src/assets/background.png
diff --git a/packages/client/src/assets/logo.png b/packages/client/src/assets/logo.png
diff --git a/packages/client/src/lib/Player.ts b/packages/client/src/lib/Player.ts
@@ -73,7 +73,7 @@ export class Player extends Entity {
     c.font = "20px Arial";
     c.fillStyle = "white";
     c.textAlign = "center";
-    c.fillText(this.name + this.body.length, screenHead.x, screenHead.y - 20);
+    c.fillText(this.name, screenHead.x, screenHead.y - 20);
   }
 
   interpolate() {