vimazing/vim-maze
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
pastilhas
2025-10-14 13:33:51 +01:00
commit c8eb84ce7e
44 changed files with 4222 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/App.tsx
+24
View File
@@ -0,0 +1,24 @@
import { useGame } from "@vimazing/vim-maze";
import { useKeyBindings } from "./useKeyBindings";
import { useMounted } from "./useMounted";
import { useIsMobile } from "./useIsMobile";
import { GameOverlay } from "./GameOverlay";
function App() {
const isMobile = useIsMobile();
const mounted = useMounted();
const cols = isMobile ? 12 : 32;
const rows = isMobile ? 8 : 24;
const gameManager = useGame(cols, rows, useKeyBindings);
const { containerRef, gameStatus, scoreManager } = gameManager;
return (
<div className="relative mx-auto my-4 w-fit" id="maze_container">
<div ref={containerRef} className="relative" />
{mounted && <GameOverlay gameStatus={gameStatus} scoreManager={scoreManager} />}
</div>
);
};
export default App;
example/src/GameOverlay.tsx
+111
View File
@@ -0,0 +1,111 @@
import type { GameStatus } from "@vimazing/vim-maze";
import type { UseScoreType } from "@vimazing/vim-maze";
import { useIsMobile } from "./useIsMobile";
import { MobileGameOverlay } from "./MobileGameOverlay";
type GameOverlayProps = {
gameStatus: GameStatus;
scoreManager: UseScoreType;
};
export const GameOverlay = ({ gameStatus, scoreManager }: GameOverlayProps) => {
const isMobile = useIsMobile();
if (isMobile) return <MobileGameOverlay gameStatus={gameStatus} scoreManager={scoreManager} />
// 🧠 Only show overlay when the game has ended
if (['started', 'hasKey'].includes(gameStatus)) return null;
// console.log('gameStatus:', gameStatus)
return (
<GameOverlayContainer>
{gameStatus === "waiting" && <GameWaitingContent />}
{gameStatus === "game-over" && <GameOverContent />}
{gameStatus === "game-won" && <GameWonContent scoreManager={scoreManager} />}
</GameOverlayContainer>
);
};
export const GameWaitingContent = () => {
return (
<div
className="text-[#c8d3f5] text-[2em] font-mono text-center select-none"
style={{ textShadow: "2px 2px 4px rgba(27, 29, 43, 0.9)" }}
>
<div className="flex flex-col gap-10">
<p className="text-[3rem]">Press <strong className="text-[#ffc777]">i</strong> to play...</p>
<p><strong className="text-[#ffc777]">h</strong>,<strong className="text-[#ffc777]">j</strong>,<strong className="text-[#ffc777]">k</strong>,<strong className="text-[#ffc777]">l</strong> to move around</p>
<p>try other vim motions <br /> you're familiar with</p>
<p>
<strong className="text-[#ffc777]">$</strong>,<strong className="text-[#ffc777]">^</strong>,<strong className="text-[#ffc777]">0</strong>,<strong className="text-[#ffc777]">G</strong>,<strong className="text-[#ffc777]">gg</strong> only valid if <br />
the edges are reachable
</p>
</div>
</div>
);
};
export const GameWonContent = ({ scoreManager }: { scoreManager: UseScoreType }) => {
const finalScore = scoreManager.finalScore ?? 0;
return (
<div
className="text-[#c8d3f5] text-[2em] grid gap-4 font-mono uppercase text-center select-none"
style={{ textShadow: "2px 2px 4px rgba(27, 29, 43, 0.9)" }}
>
<p className="text-[#c3e88d]">Congratulations!</p>
<p>Final Score:</p>
<p className="text-[#82aaff] text-[2.5em]">{finalScore.toLocaleString()}</p>
<p className="text-[#828bb8] text-[0.65em] normal-case">
<span className="text-[#c099ff]">min</span>
<span className="text-[#c8d3f5]">(</span>
<span className="text-[#ff966c]">100000</span>
<span className="text-[#c8d3f5]">, (</span>
<span className="text-[#82aaff]">optimalTime</span>
<span className="text-[#c8d3f5]"> / </span>
<span className="text-[#82aaff]">actualTime</span>
<span className="text-[#c8d3f5]">) * </span>
<span className="text-[#ff966c]">100000</span>
<span className="text-[#c8d3f5]">)</span>
</p>
<p className="text-[#828bb8]">Press <strong className="text-[#ffc777] normal-case">i</strong> to play again</p>
</div>
);
};
export const GameOverContent = () => {
return (
<div
className="text-[#ff757f] font-mono uppercase text-center select-none"
style={{ textShadow: "2px 2px 4px rgba(27, 29, 43, 0.9)" }}
>
<p className="text-[5em]">Game Over</p>
<p className="text-[2em] text-[#828bb8]">Press <strong className="text-[#ffc777] normal-case">i</strong> to play again</p>
</div>
);
};
export const GameOverlayContainer = ({
children,
}: {
children: React.ReactNode;
}) => {
return (
<div
className="
absolute inset-0
flex justify-center items-center
z-40
pointer-events-none
"
style={{
backgroundColor: 'rgba(27, 29, 43, 0.75)',
backdropFilter: 'blur(1px)'
}}
>
{children}
</div>
);
};
example/src/MobileGameOverlay.tsx
+99
View File
@@ -0,0 +1,99 @@
import type { GameStatus } from "@vimazing/vim-maze";
import type { UseScoreType } from "@vimazing/vim-maze";
type MobileGameOverlayProps = {
gameStatus: GameStatus;
scoreManager: UseScoreType;
};
export const MobileGameOverlay = ({ gameStatus, scoreManager }: MobileGameOverlayProps) => {
// 🧠 Only show overlay when the game has ended
if (['started', 'hasKey'].includes(gameStatus)) return null;
// console.log('gameStatus:', gameStatus)
return (
<GameOverlayContainer>
{gameStatus === "waiting" && <GameWaitingContent />}
{gameStatus === "game-over" && <GameOverContent />}
{gameStatus === "game-won" && <GameWonContent scoreManager={scoreManager} />}
</GameOverlayContainer>
);
};
export const GameWaitingContent = () => {
return (
<div
className="text-[#c8d3f5] text-[1em] font-mono text-center select-none"
style={{ textShadow: "2px 2px 4px rgba(27, 29, 43, 0.9)" }}
>
<div className="flex flex-col gap-3">
<p className="text-[1.5rem]">Press here to play</p>
<p>all the vim motions <br /> available on desktop</p>
</div>
</div>
);
};
export const GameWonContent = ({ scoreManager }: { scoreManager: UseScoreType }) => {
const finalScore = scoreManager.finalScore ?? 0;
return (
<div
className="text-[#c8d3f5] text-[1em] grid gap-4 font-mono uppercase text-center select-none"
style={{ textShadow: "2px 2px 4px rgba(27, 29, 43, 0.9)" }}
>
<p className="text-[#c3e88d]">Congratulations!</p>
<p>Final Score:</p>
<p className="text-[#82aaff] text-[2.5em]">{finalScore.toLocaleString()}</p>
<p className="text-[#828bb8] text-[0.65em] normal-case">
<span className="text-[#c099ff]">min</span>
<span className="text-[#c8d3f5]">(</span>
<span className="text-[#ff966c]">100000</span>
<span className="text-[#c8d3f5]">, (</span>
<span className="text-[#82aaff]">optimalTime</span>
<span className="text-[#c8d3f5]"> / </span>
<span className="text-[#82aaff]">actualTime</span>
<span className="text-[#c8d3f5]">) * </span>
<span className="text-[#ff966c]">100000</span>
<span className="text-[#c8d3f5]">)</span>
</p>
<p className="text-[#828bb8]">Press to play again</p>
</div>
);
};
export const GameOverContent = () => {
return (
<div
className="text-[#ff757f] text-[5em] font-mono uppercase text-center select-none"
style={{ textShadow: "2px 2px 4px rgba(27, 29, 43, 0.9)" }}
>
Game Over
</div>
);
};
export const GameOverlayContainer = ({
children,
}: {
children: React.ReactNode;
}) => {
return (
<div
className="
absolute inset-0
flex justify-center items-center
z-40
pointer-events-none
"
style={{
backgroundColor: 'rgba(27, 29, 43, 0.75)',
backdropFilter: 'blur(1px)'
}}
>
{children}
</div>
);
};
example/src/index.css
+1
View File
@@ -0,0 +1 @@
@import "tailwindcss";
example/src/main.tsx
+11
View File
@@ -0,0 +1,11 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
example/src/useIsMobile.ts
+30
View File
@@ -0,0 +1,30 @@
import * as React from "react";
const MOBILE_BREAKPOINT = 768;
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean>(
typeof window !== "undefined"
? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches
: false
);
React.useEffect(() => {
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
const onChange = (event: MediaQueryListEvent) => {
setIsMobile(event.matches);
};
// Set initial value
setIsMobile(mql.matches);
// Add listener
mql.addEventListener("change", onChange);
// Cleanup
return () => mql.removeEventListener("change", onChange);
}, []);
return isMobile;
}
example/src/useKeyBindings.ts
+46
View File
@@ -0,0 +1,46 @@
import { useEffect } from "react";
import type { UseGameType } from "@vimazing/vim-maze";
export const useKeyBindings = (gameManager: UseGameType) => {
const { gameStatus, initGame, stopGame, clearLog, resetCount } = gameManager;
useEffect(() => {
const handler = (e: KeyboardEvent) => {
// start game
if (e.key === "i" || e.key === "I") {
if (["waiting", "game-over", "game-won"].includes(gameStatus)) {
clearLog();
resetCount();
if (gameStatus === "game-over" || gameStatus === "game-won") {
stopGame();
setTimeout(() => initGame(true), 0);
} else {
initGame(true);
}
return;
}
}
// ignore other keys while waiting
if (gameStatus === "waiting") return;
// cancel count or stop game
if (e.key === "Escape") {
stopGame();
resetCount();
return;
}
// quit
if (e.key === "q" || e.key === "Q") {
stopGame();
resetCount();
return;
}
};
window.addEventListener("keydown", handler);
return () => window.removeEventListener("keydown", handler);
}, [gameStatus, initGame, stopGame, clearLog, resetCount]);
};
example/src/useMounted.ts
+11
View File
@@ -0,0 +1,11 @@
import { useState, useEffect } from 'react';
export const useMounted = () => {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return mounted;
};