Skip to content

feat: enhance mobile responsiveness across various game components an… #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Arman511 merged 2 commits into from
Mar 10, 2026
Merged

feat: enhance mobile responsiveness across various game components an… #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8da7d9f
feat: enhance mobile responsiveness across various game components an…
Arman511 Mar 10, 2026
44bb7a8
feat: enhance SEO and metadata in index.html, improve mobile responsi…
Arman511 Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 92 additions & 74 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,99 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>Liar, Cheater, Fired | Office Chaos Browser Game</title>
<meta
name="description"
content="Play Liar, Cheater, Fired — a fast browser game where you survive office chaos through mini-games like Tetris, Wordle, Pacman, and Pong."
/>
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#111827" />
<meta
name="keywords"
content="Liar Cheater Fired, RGUHack, browser game, React game, office parody game, corporate satire, mini games, Wordle, Tetris, Pacman, Teams, anti productivity"
/>
<meta
name="author"
content="Arman Shaikh, Charis Drain, Himani Patney, Vidhi Jalan, Lemar Tokham"
/>
<link rel="canonical" href="https://liar.armandev.co.uk/" />

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>Liar, Cheater, Fired | Office Chaos Browser Game</title>
<meta
name="description"
content="Play Liar, Cheater, Fired — a fast browser game where you survive office chaos through mini-games like Tetris, Wordle, Pacman, and Pong."
/>
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#111827" />
<meta name="keywords"
content="Liar Cheater Fired, RGUHack, browser game, React game, office parody game, corporate satire, mini games, Wordle, Tetris, Pacman, Teams, anti productivity" />
<meta name="author" content="Arman Shaikh, Charis Drain, Himani Patney, Vidhi Jalan, Lemar Tokham" />
<link rel="canonical" href="https://liar.armandev.co.uk/" />
<meta property="og:site_name" content="Liar, Cheater, Fired" />
<meta
property="og:title"
content="Liar, Cheater, Fired | Office Chaos Browser Game"
/>
<meta
property="og:description"
content="Survive office mayhem in this satirical mini-game collection featuring Jira Tetris, Corporate Wordle, Pacman, and Pong."
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://liar.armandev.co.uk/" />
<meta
property="og:image"
content="https://liar.armandev.co.uk/favicon.png"
/>
<meta
property="og:image:alt"
content="Boss Baby manager portrait from Liar, Cheater, Fired"
/>

<meta property="og:site_name" content="Liar, Cheater, Fired" />
<meta property="og:title" content="Liar, Cheater, Fired | Office Chaos Browser Game" />
<meta
property="og:description"
content="Survive office mayhem in this satirical mini-game collection featuring Jira Tetris, Corporate Wordle, Pacman, and Pong."
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://liar.armandev.co.uk/" />
<meta property="og:image" content="https://liar.armandev.co.uk/boss-baby.jpeg" />
<meta property="og:image:alt" content="Boss Baby manager portrait from Liar, Cheater, Fired" />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Liar, Cheater, Fired | Office Chaos Browser Game"
/>
<meta
name="twitter:description"
content="A satirical browser game where being productive gets you promoted — and that means you lose."
/>
<meta
name="twitter:image"
content="https://liar.armandev.co.uk/favicon.png"
/>

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Liar, Cheater, Fired | Office Chaos Browser Game" />
<meta
name="twitter:description"
content="A satirical browser game where being productive gets you promoted — and that means you lose."
/>
<meta name="twitter:image" content="https://liar.armandev.co.uk/boss-baby.jpeg" />

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoGame",
"name": "Liar, Cheater, Fired",
"description": "A satirical office browser game with mini-games like Tetris, Wordle, Pacman, and Pong.",
"url": "https://liar.armandev.co.uk/",
"applicationCategory": "Game",
"gamePlatform": "Web Browser",
"inLanguage": "en",
"image": "https://liar.armandev.co.uk/boss-baby.jpeg",
"author": [
{
"@type": "Person",
"name": "Arman Shaikh"
},
{
"@type": "Person",
"name": "Charis Drain"
},
{
"@type": "Person",
"name": "Himani Patney"
},
{
"@type": "Person",
"name": "Vidhi Jalan"
},
{
"@type": "Person",
"name": "Lemar Tokham"
}
]
}
</script>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoGame",
"name": "Liar, Cheater, Fired",
"description": "A satirical office browser game with mini-games like Tetris, Wordle, Pacman, and Pong.",
"url": "https://liar.armandev.co.uk/",
"applicationCategory": "Game",
"gamePlatform": "Web Browser",
"inLanguage": "en",
"image": "https://liar.armandev.co.uk/favicon.png",
"author": [
{
"@type": "Person",
"name": "Arman Shaikh"
},
{
"@type": "Person",
"name": "Charis Drain"
},
{
"@type": "Person",
"name": "Himani Patney"
},
{
"@type": "Person",
"name": "Vidhi Jalan"
},
{
"@type": "Person",
"name": "Lemar Tokham"
}
]
}
</script>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Binary file added public/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/game/BossBaby.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const BossBaby: React.FC<BossBabyProps> = ({
animation: "bossEnter 0.4s ease-out",
}}
>
<div className="xp-window w-[520px]">
<div className="xp-window w-[min(520px,95vw)]">
{/* XP Title Bar */}
<div className="xp-title-bar">
<div className="flex items-center gap-1.5">
Expand Down
44 changes: 24 additions & 20 deletions src/components/game/DesktopIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,30 @@ const icons = [
{ icon: <Calendar size={26} />, label: "Standup.exe", bg: "#dc2626" },
];

export const DesktopIcons: React.FC = () => (
<div className="absolute top-4 left-4 flex flex-col gap-4">
{icons.map((item) => (
<div
key={item.label}
className="flex flex-col items-center gap-1 w-16 cursor-pointer group"
>
export const DesktopIcons: React.FC = () => {
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
if (isMobile) return null;
return (
<div className="absolute top-4 left-4 flex flex-col gap-4">
{icons.map((item) => (
<div
className="w-10 h-10 flex items-center justify-center rounded shadow-md group-hover:brightness-110 transition-[filter]"
style={{ background: item.bg, color: "white" }}
key={item.label}
className="flex flex-col items-center gap-1 w-16 cursor-pointer group"
>
{item.icon}
<div
className="w-10 h-10 flex items-center justify-center rounded shadow-md group-hover:brightness-110 transition-[filter]"
style={{ background: item.bg, color: "white" }}
>
{item.icon}
</div>
<span
className="text-[10px] text-white text-center leading-tight px-0.5"
style={{ textShadow: "1px 1px 2px rgba(0,0,0,0.8)" }}
>
{item.label}
</span>
</div>
<span
className="text-[10px] text-white text-center leading-tight px-0.5"
style={{ textShadow: "1px 1px 2px rgba(0,0,0,0.8)" }}
>
{item.label}
</span>
</div>
))}
</div>
);
))}
</div>
);
};
29 changes: 20 additions & 9 deletions src/components/game/DraggableWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,30 @@ export const DraggableWindow: React.FC<DraggableWindowProps> = ({
closable = true,
bodyStyle,
}) => {
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
const effectiveWidth = isMobile
? Math.min(width, window.innerWidth - 16)
: width;

const [pos, setPos] = useState({
x:
initialX ??
Math.max(50, (window.innerWidth - width) / 2 + Math.random() * 60 - 30),
y:
initialY ??
Math.max(30, window.innerHeight / 2 - 200 + Math.random() * 60 - 30),
x: isMobile
? Math.max(8, (window.innerWidth - effectiveWidth) / 2)
: (initialX ??
Math.max(
50,
(window.innerWidth - width) / 2 + Math.random() * 60 - 30,
)),
y: isMobile
? 155
: (initialY ??
Math.max(30, window.innerHeight / 2 - 200 + Math.random() * 60 - 30)),
});
const dragging = useRef(false);
const offset = useRef({ x: 0, y: 0 });

const onMouseDown = useCallback(
(e: React.MouseEvent) => {
if (isMobile) return;
dragging.current = true;
offset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };

Expand All @@ -60,18 +71,18 @@ export const DraggableWindow: React.FC<DraggableWindowProps> = ({
window.addEventListener("mousemove", onMove);
window.addEventListener("mouseup", onUp);
},
[pos],
[pos, isMobile],
);

return (
<div
className="xp-window fixed z-40"
style={{ left: pos.x, top: pos.y, width }}
style={{ left: pos.x, top: pos.y, width: effectiveWidth }}
>
<div
className={active ? "xp-title-bar" : "xp-title-bar-inactive"}
onMouseDown={onMouseDown}
style={{ cursor: "grab" }}
style={{ cursor: isMobile ? "default" : "grab" }}
>
<div className="flex items-center gap-1.5">
{icon}
Expand Down
6 changes: 5 additions & 1 deletion src/components/game/FailMeter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ export const FailMeter: React.FC<FailMeterProps> = ({ value }) => {
const needleY = cy - r * 0.82 * Math.sin(radians);

const status =
value <= -STAGE_METER_POINT_CUTOF ? "CRITICAL" : value <= STAGE_METER_POINT_CUTOF ? "NEUTRAL" : "EXCELLENT";
value <= -STAGE_METER_POINT_CUTOF
? "CRITICAL"
: value <= STAGE_METER_POINT_CUTOF
? "NEUTRAL"
: "EXCELLENT";

const statusColor =
value <= -STAGE_METER_POINT_CUTOF
Expand Down
Loading