Add Emotes and Fix Deployment Errors

Author: chuaxc-dev

src/app/create/page.tsx

@@ -16,7 +16,10 @@ import { api } from "~/trpc/react";
 import { IoReload } from "react-icons/io5";
 import { DataTable } from "./data-table";
 import { cards } from "./columns";
-import { type PlayerJoinLeaveEvent } from "~/types/pusherEvents";
+import {
+  PlayerEmoteEvent,
+  type PlayerJoinLeaveEvent,
+} from "~/types/pusherEvents";
 import { Badge } from "~/components/ui/badge";
 
 export default function Create() {
@@ -96,6 +99,10 @@ export default function Create() {
         toast(`Player ${data.username} has left.`);
         setPlayers([...newState]);
       });
+
+      channel.bind("emote", (data: PlayerEmoteEvent) => {
+        toast(`${data.username}: ${data.emote}`);
+      });
     }
   }, [gameId, pusher]);
 

src/app/layout.tsx

@@ -11,7 +11,7 @@ const inter = Inter({
 });
 
 export const metadata = {
-  title: "Create T3 App",
+  title: "Quizoo",
   description: "Generated by create-t3-app",
   icons: [{ rel: "icon", url: "/favicon.svg" }],
 };

src/app/page.tsx

@@ -10,8 +10,10 @@ import RoomIdInput from "~/components/RoomIdInput";
 import { api } from "~/trpc/react";
 import { getPusherEnvVars } from "~/utils/pusherClient";
 import { useSearchParams } from "next/navigation";
+import { Button } from "~/components/ui/button";
 
 export default function Home() {
+  const [username, setUsername] = useState<string>("");
   const router = useRouter();
   const query = useSearchParams();
   const roomId = query.get("roomId");
@@ -20,6 +22,7 @@ export default function Home() {
 
   const leaveMutation = api.sockets.playerLeave.useMutation();
   const joinMutation = api.sockets.playerJoin.useMutation();
+  const emoteMutation = api.sockets.playerEmote.useMutation();
 
   useEffect(() => {
     // Initialise Client Pusher
@@ -35,7 +38,7 @@ export default function Home() {
       // Trigger Leave
       if (initializedPusher) {
         leaveMutation.mutate({
-          username: localStorage.getItem("username")!,
+          username,
           gameId: roomId!,
         });
 
@@ -87,6 +90,15 @@ export default function Home() {
 
       setIsSubscribed(true);
     });
+    setUsername(username);
+  };
+
+  const handleEmote = (emote: string) => {
+    emoteMutation.mutate({
+      gameId: roomId!,
+      username,
+      emote,
+    });
   };
 
   if (!isSubscribed) {
@@ -103,6 +115,7 @@ export default function Home() {
   return (
     <PageLayout className="justify-center" isPusherActive={pusher !== null}>
       <p>Waiting...</p>
+      <Button onClick={() => handleEmote("😄")}>Send Emote 😄</Button>
     </PageLayout>
   );
 }

src/components/RoomIdInput.tsx

@@ -66,7 +66,7 @@ export default function RoomIdInput({ handleSubmit }: RoomIdInputInterface) {
             <FormItem>
               <FormLabel>😇 Username</FormLabel>
               <FormControl>
-                <Input placeholder="eg. Jane Chen" {...field} />
+                <Input placeholder="eg. Jane Cheah" {...field} />
               </FormControl>
             </FormItem>
           )}

src/components/ui/input.tsx

@@ -2,8 +2,7 @@ import * as React from "react"
 
 import { cn } from "~/lib/utils"
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {

src/components/ui/textarea.tsx

@@ -2,8 +2,7 @@ import * as React from "react";
 
 import { cn } from "~/lib/utils";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {

src/server/api/routers/sockets.ts

@@ -1,6 +1,9 @@
 import { createTRPCRouter, publicProcedure } from "../trpc";
 import { z } from "zod";
-import { type PlayerJoinLeaveEvent as PlayerJoinLeftEvent } from "~/types/pusherEvents";
+import {
+  type PlayerEmoteEvent,
+  type PlayerJoinLeaveEvent as PlayerJoinLeftEvent,
+} from "~/types/pusherEvents";
 import { pusherServer } from "~/utils/pusherServer";
 import axios from "axios";
 import { env } from "~/env";
@@ -16,7 +19,7 @@ export const socketsRouter = createTRPCRouter({
     .input(
       z.object({
         username: z.string().min(1),
-        gameId: z.string().min(1),
+        gameId: z.string().length(6),
       }),
     )
     .mutation((opts) => {
@@ -36,7 +39,7 @@ export const socketsRouter = createTRPCRouter({
     .input(
       z.object({
         username: z.string().min(1),
-        gameId: z.string().min(1),
+        gameId: z.string().length(6),
       }),
     )
     .mutation((opts) => {
@@ -47,6 +50,22 @@ export const socketsRouter = createTRPCRouter({
       };
       return pusherServer.trigger(gameId, "player-left", leftEvent);
     }),
+  playerEmote: publicProcedure
+    .input(
+      z.object({
+        emote: z.string().min(1),
+        username: z.string().min(1),
+        gameId: z.string().length(6),
+      }),
+    )
+    .mutation((opts) => {
+      const { emote, username, gameId } = opts.input;
+      const emoteEvent: PlayerEmoteEvent = {
+        username,
+        emote,
+      };
+      return pusherServer.trigger(gameId, "emote", emoteEvent);
+    }),
   getChannelInfo: publicProcedure
     .input(
       z.object({

src/types/pusherEvents.ts

@@ -2,3 +2,8 @@ export interface PlayerJoinLeaveEvent {
   username: string;
   time: Date;
 }
+
+export interface PlayerEmoteEvent {
+  username: string;
+  emote: string;
+}