A library to use a virtual tabletop
npm i virtual-tabletop-library
document.addEventListener("DOMContentLoaded", function () {
const mapCanvas = new MapCanvas("game-board", {
mapUrl: "your_map_image_url_here",
});
});
import React, { useEffect, useRef } from 'react';
import { MapCanvas as MapCanvasLibrary } from './MapCanvas'; // Adjust the import path as necessary
const MapCanvas = ({ canvasId, mapUrl, maxWidth, maxHeight }) => {
const canvasRef = useRef(null);
useEffect(() => {
if (canvasRef.current) {
const mapCanvas = new MapCanvasLibrary(canvasId, { mapUrl, maxWidth, maxHeight });
// Additional setup or methods can be called on mapCanvas if needed
return () => {
// Perform any cleanup if necessary
};
}
}, [canvasId, mapUrl, maxWidth, maxHeight]);
return <div id={canvasId} ref={canvasRef}></div>;
};const App = () => {
return (
<div>
<MapCanvas
canvasId="mapCanvas"
mapUrl="your-map-url.jpg"
maxWidth={800}
maxHeight={600}
/>
</div>
);
};