import Canvas from './Canvas.js';
import { Mat3, Vec3, Point, Shape, RandomNormal } from './Geometry.js';
import { MapGrid, MapView } from './MapView.js';
import { RandomPoints, Plate, PlateManager } from './Terrain.js';

const $ = id => document.getElementById(id)

window.onload = () => {
	const canvas = new Canvas($('root'));

	const xaxis = new Vec3(1, 0, 0);
	const yaxis = new Vec3(0, 1, 0);
	const zaxis = new Vec3(0, 0, 1);

	const grid = new MapGrid(30, 30);
	const map = new MapView(canvas);

	const points = [];
	for (let i=0; i<100; i++) {
		points.push(
			new Point(Math.random() * 0.2 * Math.PI, Math.random() * 0.2 * Math.PI).normal()
		);
	}
	const plate = new Plate(points);

//	const points = RandomPoints(100);
//	const mgr = new PlateManager(points, 10);

	map.onDraw = (ct, view) => {
		ct.fillStyle = "#01162B"
		ct.fillRect(-10,-10, 100, 100);
		ct.lineWidth = 0.005;
		ct.strokeStyle = "#E7305D";
		ct.fillStyle = "blue";

		grid.render(ct, view);

		//mgr.render(ct, view);
		plate.render(ct, view);
		ct.fillStyle = "blue";
		plate.hull.normals[0].render(ct, view);
	};
	canvas.draw();

//	setInterval(() => {
//		mgr.update();
//		canvas.draw();
//	}, 100);
}