A* Pathfinding Visualization

An interactive visualization of the A* pathfinding algorithm in action. It features a hexagonal tile grid with various types of terrain to observe how the shortest route between two points changes.

Usage

First, install the package:

$ npm install @d10f/a-star-viz

This contains nothing but the Web Component that you can embed directly into your code. Just import, and use it.

import '@d10f/a-star-viz';

<a-star-viz />

If you're using Next.js, you're going to need to declare the component you're using this as a Client Component. In addition, the import of the package needs to happen asynchronously:

"use client";

import { useEffect } from "react";

export default function SomePage() {
    useEffect(() => {
        import("@d10f/a-star-viz");
    }, []);

    return (
        <a-star-viz />
    );
}

In addition, to please the TypeScript compiler you will need to declare the custom element, as well as the module:

declare namespace JSX {
    interface IntrinsicElements {
        "a-star-viz": any;
    }
}

declare module "@d10f/a-star-viz";

To Dos

• Make it into a web component for ease of use.
• Publish as an https://www.npmjs.com/package/@d10f/a-star-viz[NPM package].
• Add bundler to include make all web component self-contained.
• Customize terrain tiles.
• Better support for various screen sizes.
• Better customization options through attributes passed in at runtime.
• Improve TypeScript support.