import Canvas from './Canvas.js';
import { Mat3, Vec3, Point, Shape } from './Geometry.js';
import { MapGrid } from './MapView.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, 90);

	let view = new Mat3();
	let angle = 0;

	canvas.onDraw = ct => {
		ct.fillStyle = "#01162B"
		ct.fillRect(-10,-10, 100, 100);
		ct.lineWidth = 0.005;
		ct.strokeStyle = "#E7305D";
		ct.fillStyle = "blue";
		ct.arc(0, 0, 1, 0, 2*Math.PI);
		ct.stroke();

		grid.render(ct, view);
	};
	canvas.draw();

	setInterval(() => {
		angle = angle + 0.01*Math.PI;
		view.rotation(xaxis, angle);
		canvas.draw();
	}, 50);
}