Develop

README.md

@@ -54,7 +54,7 @@ We are a group of placement students currently being "wonderful" in the real wor
 - **[Charis Drain]** - Head of Corporate Yap
 - **[Himani Patney]** - Jira Ticket Architect
 - **[Vidhi Jalan]** - Boss Baby Handler
-- **[Lemar Tokham]** - Professional Email Ignorer 
+- **[Lemar Tokham]** - Professional Email Ignorer
 
 ---
 

src/components/game/BossBaby.tsx

@@ -9,7 +9,13 @@ interface BossBabyProps {
   dismissLabel?: string;
 }
 
-export const BossBaby: React.FC<BossBabyProps> = ({ message, onDismiss, autoAdvanceDelay, altButton, dismissLabel }) => {
+export const BossBaby: React.FC<BossBabyProps> = ({
+  message,
+  onDismiss,
+  autoAdvanceDelay,
+  altButton,
+  dismissLabel,
+}) => {
   const [displayedText, setDisplayedText] = useState("");
   const [index, setIndex] = useState(0);
 
@@ -26,7 +32,11 @@ export const BossBaby: React.FC<BossBabyProps> = ({ message, onDismiss, autoAdva
 
   // Auto-advance after typing completes
   useEffect(() => {
-    if (autoAdvanceDelay !== undefined && displayedText === message && message.length > 0) {
+    if (
+      autoAdvanceDelay !== undefined &&
+      displayedText === message &&
+      message.length > 0
+    ) {
       const t = setTimeout(onDismiss, autoAdvanceDelay);
       return () => clearTimeout(t);
     }
@@ -97,7 +107,9 @@ export const BossBaby: React.FC<BossBabyProps> = ({ message, onDismiss, autoAdva
               </div>
 
               {/* Name Tag */}
-              <span className="text-sm font-bold text-card-foreground mt-2">Boss Baby</span>
+              <span className="text-sm font-bold text-card-foreground mt-2">
+                Boss Baby
+              </span>
             </div>
           </div>
         </div>

src/components/game/DesktopIcons.tsx

@@ -9,12 +9,16 @@ import {
 } from "lucide-react";
 
 const icons = [
-  { icon: <Monitor size={26} />,       label: "My Computer",        bg: "#1a6db5" },
-  { icon: <Trash2 size={26} />,        label: "Recycle Bin",        bg: "#6b7280" },
-  { icon: <FolderOpen size={26} />,    label: "My Documents",       bg: "#d97706" },
-  { icon: <FileSpreadsheet size={26}/>, label: "Sprint_FINAL_v3.xls", bg: "#16a34a" },
-  { icon: <MessageSquare size={26} />, label: "Slack",              bg: "#7c3aed" },
-  { icon: <Calendar size={26} />,      label: "Standup.exe",        bg: "#dc2626" },
+  { icon: <Monitor size={26} />, label: "My Computer", bg: "#1a6db5" },
+  { icon: <Trash2 size={26} />, label: "Recycle Bin", bg: "#6b7280" },
+  { icon: <FolderOpen size={26} />, label: "My Documents", bg: "#d97706" },
+  {
+    icon: <FileSpreadsheet size={26} />,
+    label: "Sprint_FINAL_v3.xls",
+    bg: "#16a34a",
+  },
+  { icon: <MessageSquare size={26} />, label: "Slack", bg: "#7c3aed" },
+  { icon: <Calendar size={26} />, label: "Standup.exe", bg: "#dc2626" },
 ];
 
 export const DesktopIcons: React.FC = () => (

src/components/game/EndScreen.tsx

@@ -38,9 +38,7 @@ export const EndScreen: React.FC<EndScreenProps> = ({ type, onRestart }) => {
 
   if (type === "fired") {
     return (
-      <div
-        className="fixed inset-0 z-[100] flex items-center justify-center bg-background"
-      >
+      <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background">
         {confetti.map((c) => (
           <div
             key={c.id}
@@ -86,9 +84,7 @@ export const EndScreen: React.FC<EndScreenProps> = ({ type, onRestart }) => {
   }
 
   return (
-    <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-background"
-    >
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background">
       <div className="xp-window w-[min(95vw,680px)] z-10">
         <div className="xp-title-bar-inactive">
           <span>Human Resources</span>

src/components/game/IntroScreen.tsx

@@ -50,17 +50,15 @@ export const IntroScreen: React.FC<IntroScreenProps> = ({
             <div className="xp-window w-full max-w-[535px]">
               <div className="xp-title-bar">
                 <div className="flex items-center gap-1.5">
-                  <span className="text-xs font-bold">
-                    BOSS MESSAGE
-                  </span>
+                  <span className="text-xs font-bold">BOSS MESSAGE</span>
                 </div>
               </div>
               <div className="xp-window-body flex flex-col gap-6 p-5">
                 <div className="flex items-center gap-4">
                   <div className="flex flex-col gap-14 flex-1 justify-center">
                     <p className="text-base font-bold leading-relaxed text-left whitespace-pre-wrap">
-                      "I hate liars and cheaters. Why are you hired if you don't do
-                      your job?{" "}
+                      "I hate liars and cheaters. Why are you hired if you don't
+                      do your job?{" "}
                       <span className="text-destructive">Focus on work!</span>"
                     </p>
                     <div className="flex justify-start">
@@ -81,7 +79,9 @@ export const IntroScreen: React.FC<IntroScreenProps> = ({
                         className="w-full h-full object-cover rounded-full border-2 border-primary"
                       />
                     </div>
-                    <span className="text-sm font-bold text-card-foreground mt-2">Boss Baby</span>
+                    <span className="text-sm font-bold text-card-foreground mt-2">
+                      Boss Baby
+                    </span>
                   </div>
                 </div>
               </div>
@@ -94,14 +94,16 @@ export const IntroScreen: React.FC<IntroScreenProps> = ({
         <div
           className="w-full max-w-[900px] flex items-center justify-between gap-3 px-3 py-2"
           style={{
-            background: "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
+            background:
+              "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
             border: "2px solid",
-            borderColor: "hsl(0,0%,100%) hsl(220,10%,55%) hsl(220,10%,55%) hsl(0,0%,100%)",
+            borderColor:
+              "hsl(0,0%,100%) hsl(220,10%,55%) hsl(220,10%,55%) hsl(0,0%,100%)",
           }}
         >
           <div className="text-xs text-foreground/80">
-            (Disclaimer: This is not representative of us developers; we are very,
-            very, very good employees.)
+            (Disclaimer: This is not representative of us developers; we are
+            very, very, very good employees.)
           </div>
 
           <div className="flex items-center">
@@ -119,9 +121,11 @@ export const IntroScreen: React.FC<IntroScreenProps> = ({
                   display: "inline-flex",
                   alignItems: "center",
                   justifyContent: "space-between",
-                  background: "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
+                  background:
+                    "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
                   border: "2px solid",
-                  borderColor: "hsl(0,0%,100%) transparent hsl(220,10%,55%) hsl(0,0%,100%)",
+                  borderColor:
+                    "hsl(0,0%,100%) transparent hsl(220,10%,55%) hsl(0,0%,100%)",
                   padding: "0 10px",
                   height: 40,
                   boxSizing: "border-box",
@@ -145,9 +149,11 @@ export const IntroScreen: React.FC<IntroScreenProps> = ({
               style={{
                 width: 40,
                 height: 40,
-                background: "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
+                background:
+                  "linear-gradient(180deg, hsl(0,0%,100%) 0%, hsl(0,0%,85%) 100%)",
                 border: "2px solid",
-                borderColor: "hsl(0,0%,100%) hsl(220,10%,55%) hsl(220,10%,55%) hsl(0,0%,100%)",
+                borderColor:
+                  "hsl(0,0%,100%) hsl(220,10%,55%) hsl(220,10%,55%) hsl(0,0%,100%)",
                 borderRadius: 0,
                 display: "flex",
                 alignItems: "center",

src/components/game/OutlookMockup.tsx

@@ -70,8 +70,7 @@ export const OutlookMockup: React.FC<OutlookMockupProps> = ({
 
     const withDates = UNREAD_EMAILS.map((email) => {
       const randomOffset =
-        minOffsetMs +
-        Math.floor(Math.random() * (oneDayMs - minOffsetMs + 1));
+        minOffsetMs + Math.floor(Math.random() * (oneDayMs - minOffsetMs + 1));
       const timestamp = new Date(now - randomOffset);
       return { ...email, timestamp };
     }).sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
@@ -247,10 +246,7 @@ export const OutlookMockup: React.FC<OutlookMockupProps> = ({
         }}
       >
         <span>12 Items, 7 Unread</span>
-        <button
-          onClick={onPlayAgain}
-          className="xp-button text-xs px-3 py-0.5"
-        >
+        <button onClick={onPlayAgain} className="xp-button text-xs px-3 py-0.5">
           Close Inbox
         </button>
         <span>Connected to Exchange Server</span>

src/components/game/ProcrastinationDesktop.tsx

@@ -178,7 +178,11 @@ export const ProcrastinationDesktop: React.FC<ProcrastinationDesktopProps> = ({
     >
       <div
         className="bg-[#ECE9D8] border-2 border-[#003c74] shadow-2xl flex flex-col"
-        style={{ width: "700px", fontFamily: "Tahoma, sans-serif", maxHeight: "500px" }}
+        style={{
+          width: "700px",
+          fontFamily: "Tahoma, sans-serif",
+          maxHeight: "500px",
+        }}
       >
         {/* Title Bar — drag handle */}
         <div
@@ -193,9 +197,15 @@ export const ProcrastinationDesktop: React.FC<ProcrastinationDesktopProps> = ({
             </span>
           </div>
           <div className="flex gap-1">
-            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">_</div>
-            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">□</div>
-            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">✕</div>
+            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">
+              _
+            </div>
+            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">
+              □
+            </div>
+            <div className="w-5 h-5 bg-[#d4d0c8] text-black text-[10px] flex items-center justify-center border border-black">
+              ✕
+            </div>
           </div>
         </div>
 
@@ -214,30 +224,33 @@ export const ProcrastinationDesktop: React.FC<ProcrastinationDesktopProps> = ({
           <button
             type="button"
             onClick={() => setActiveTab("cricket")}
-            className={`${activeTab === "cricket"
-              ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
-              : "bg-[#c0c0c0] border border-[#808080]"
-              } px-3 py-1 text-[11px] flex items-center gap-1`}
+            className={`${
+              activeTab === "cricket"
+                ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
+                : "bg-[#c0c0c0] border border-[#808080]"
+            } px-3 py-1 text-[11px] flex items-center gap-1`}
           >
             🏏 Cricket Live
           </button>
           <button
             type="button"
             onClick={() => setActiveTab("cat")}
-            className={`${activeTab === "cat"
-              ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
-              : "bg-[#c0c0c0] border border-[#808080]"
-              } px-3 py-1 text-[11px] flex items-center gap-1`}
+            className={`${
+              activeTab === "cat"
+                ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
+                : "bg-[#c0c0c0] border border-[#808080]"
+            } px-3 py-1 text-[11px] flex items-center gap-1`}
           >
             🐱 Cat Videos
           </button>
           <button
             type="button"
             onClick={() => setActiveTab("youtube")}
-            className={`${activeTab === "youtube"
-              ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
-              : "bg-[#c0c0c0] border border-[#808080]"
-              } px-3 py-1 text-[11px] flex items-center gap-1`}
+            className={`${
+              activeTab === "youtube"
+                ? "bg-[#ECE9D8] border-t border-l border-r border-white border-b-0 font-bold"
+                : "bg-[#c0c0c0] border border-[#808080]"
+            } px-3 py-1 text-[11px] flex items-center gap-1`}
           >
             ▶️ YouTube
           </button>
@@ -279,7 +292,9 @@ export const ProcrastinationDesktop: React.FC<ProcrastinationDesktopProps> = ({
                 </div>
               </div>
               <div className="flex justify-center gap-6 text-xs mt-6">
-                <span className="underline cursor-pointer">Live Chat (2.4k)</span>
+                <span className="underline cursor-pointer">
+                  Live Chat (2.4k)
+                </span>
                 <span className="underline cursor-pointer">Scorecard</span>
                 <span className="underline cursor-pointer">Commentary</span>
               </div>
@@ -288,7 +303,9 @@ export const ProcrastinationDesktop: React.FC<ProcrastinationDesktopProps> = ({
 
           {activeTab === "cat" && (
             <div className="h-full flex flex-col items-center justify-center gap-4">
-              <h2 className="text-lg font-bold text-center">🐱 Cat Videos - LIVE</h2>
+              <h2 className="text-lg font-bold text-center">
+                🐱 Cat Videos - LIVE
+              </h2>
               <img
                 src="/cats.gif"
                 alt="Funny cat video"

src/components/game/PunishmentScreen.tsx

@@ -140,9 +140,7 @@ export const PunishmentScreen: React.FC<PunishmentScreenProps> = ({
           {punishmentType === "email" ? (
             <OutlookMockup onPlayAgain={onComplete} />
           ) : (
-            <>
-              {punishment.content}
-            </>
+            <>{punishment.content}</>
           )}
         </div>
       </div>

src/components/game/TetrisGame.tsx

@@ -9,11 +9,30 @@ const TIMER_SECONDS = 15;
 const DANGER_ROW = 7; // triggers when 10 of 15 rows are stacked
 
 const SHAPES = [
-  [[1, 1, 1, 1], [1, 1, 1, 1]],      // I: 2×4 slab
-  [[1, 1, 1], [1, 1, 1], [1, 1, 1]],  // O: 3×3 square
-  [[0, 1, 0], [1, 1, 1], [0, 1, 0]],  // T: 3×3 cross
-  [[1, 1, 0], [1, 1, 1], [1, 1, 1]],  // L: 3×3 chunky L
-  [[0, 1, 1], [0, 1, 1], [1, 1, 1]],  // J: 3×3 chunky J
+  [
+    [1, 1, 1, 1],
+    [1, 1, 1, 1],
+  ], // I: 2×4 slab
+  [
+    [1, 1, 1],
+    [1, 1, 1],
+    [1, 1, 1],
+  ], // O: 3×3 square
+  [
+    [0, 1, 0],
+    [1, 1, 1],
+    [0, 1, 0],
+  ], // T: 3×3 cross
+  [
+    [1, 1, 0],
+    [1, 1, 1],
+    [1, 1, 1],
+  ], // L: 3×3 chunky L
+  [
+    [0, 1, 1],
+    [0, 1, 1],
+    [1, 1, 1],
+  ], // J: 3×3 chunky J
 ];
 
 const PRIORITIES = ["CRIT", "HIGH", "MED", "LOW"];
@@ -280,7 +299,9 @@ export const TetrisGame: React.FC<TetrisGameProps> = ({
     <div className="flex flex-col items-center gap-2">
       <p className="text-[12px] font-semibold text-center text-card-foreground leading-snug w-full">
         Clear rows to reassign Jiras &mdash; let them stack and{" "}
-        <span className="text-destructive font-bold">they&apos;re all yours</span>
+        <span className="text-destructive font-bold">
+          they&apos;re all yours
+        </span>
       </p>
       <div className="flex justify-between w-full px-1">
         <span className="text-[10px] text-muted-foreground flex items-center gap-1">