---
import ProjectPage from "../../components/ProjectPage.astro";
import Demo from "../../components/Demo.astro";

export const metadata = {
    title: "factor-e",
    description:
        "Isometric factory sandbox prototype in C++/raylib with procedural worlds, tile building, inventory & tools.",
    date: "August 2025",
    slug: "factor-e",
    image: "/factor-e-icon.svg",
    github: "https://github.com/hex248/factor-e",
    hidden: false,
    tags: ["game", "cpp", "opengl", "cmake", "pixel-art"],
};
---

<style>
    .green {
        color: var(--ayu-green-500);
    }

    a {
        text-decoration: none;
        border-bottom: 1px solid var(--ayu-blue-500);
        color: var(--ayu-blue-500);
        transition:
            color 0.1s,
            border-color 0.1s;
        margin-bottom: 16px;
    }
    a:hover {
        color: var(--ayu-blue-600);
        border-color: var(--ayu-blue-600);
    }
</style>

<ProjectPage metadata={metadata}>
    <p>
        "factor-e" is an isometric factory sandbox prototype I built to learn
        C++ and <a
            href="https://www.raylib.com/"
            target="_blank"
            rel="noopener noreferrer">raylib</a
        >. Inspired by Minecraft and <a
            href="https://store.steampowered.com/app/3433610/Terrafactor/"
            target="_blank"
            rel="noopener noreferrer">Terrafactor</a
        >, it explores tile-based building, inventory management and procedural
        world generation.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-ayu-highlight p-4 rounded mt-4">
            <h2 class="text-lg text-ayu-green-500 mb-2">Key features</h2>
            <ul class="list-disc list-inside space-y-1">
                <li>Isometric rendering with my own pixel art</li>
                <li>Procedural world generation using Perlin noise</li>
                <li>Simple tile place/destroy loop</li>
                <li>Basic inventory and tool system</li>
                <li>Dev/debug overlay</li>
                <li>Cross-platform builds (Windows + Linux)</li>
                <li><span class="green">Status:</span> active prototype</li>
            </ul>
        </div>

        <div class="bg-ayu-highlight p-4 rounded mt-4">
            <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
            <ul class="list-disc list-inside space-y-1">
                <li>C++</li>
                <li>raylib (OpenGL)</li>
                <li>CMake</li>
                <li>Perlin noise generation</li>
                <li>Aseprite</li>
                <li>Engine-less game development</li>
            </ul>
        </div>
    </div>

    <div class="mt-4">
        <h2 class="text-2xl text-ayu-accent mb-3">Demo</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Demo
                image="/images/factor-e/world-gen.gif"
                title="World generation"
                type="boxed"
            />
            <Demo
                image="/images/factor-e/pixel-art.png"
                title="Pixel art"
                type="boxed"
            />
            <Demo
                image="/images/factor-e/place-destroy.gif"
                title="Place/destroy loop"
                type="boxed"
            />
            <Demo
                image="/images/factor-e/debug-overlay.gif"
                title="Dev/debug overlay"
                type="boxed"
            />
        </div>
    </div>
</ProjectPage>