Migrate Tír na nÓg landing page to Next.js
Summary of changes: - Created the 'feature/migration-nextjs' branch. - Initialized a Next.js project with React components and App Router structure. - Created reusable UI components: Viewport, World, Room, and Door in 'app/components/'. - Implemented spatial navigation logic (WASD/Arrows and clicks) using React 'useState' and 'useEffect' in 'app/page.js'. - Migrated the Tír na nÓg pixel-art aesthetic and layout transitions into 'app/globals.css'. - Configured a Gitea Runner CI/CD workflow in '.gitea/workflows/deploy.yml' for automated builds and linting. - Added a '.gitignore' file to manage project artifacts. Co-authored-by: micmug <185775013+micmug@users.noreply.github.com>
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
export default function Door({ direction, target, label, onNavigate }) {
|
||||
return (
|
||||
<button className={`door door-${direction}`} data-target={target} onClick={() => onNavigate(target)}>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default function Room({ id, isActive, children }) {
|
||||
return (
|
||||
<section id={id} className={`room ${isActive ? 'active' : ''}`}>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export default function Viewport({ children }) {
|
||||
return <div id="viewport">{children}</div>;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
export default function World({ children, currentPos }) {
|
||||
const translateX = -currentPos.x * 100;
|
||||
const translateY = -currentPos.y * 100;
|
||||
return (
|
||||
<div id="world" style={{ transform: `translate(${translateX}vw, ${translateY}vh)` }}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user