66 lines
1.3 KiB
JavaScript
66 lines
1.3 KiB
JavaScript
|
import render from "./modules/langton-renderer-canvas2d";
|
||
|
|
import Ant from "./modules/Ant.js";
|
||
|
|
|
||
|
|
|
||
|
|
const options = {
|
||
|
|
antStateColors : ['red','yellow'],
|
||
|
|
tileStateColors : ['white','black'],
|
||
|
|
tileSize : 10
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// For the view
|
||
|
|
|
||
|
|
const STEP_INTERVAL = 5;
|
||
|
|
const BTN_AUTOPLAY_ID = 'autoplay';
|
||
|
|
const BTN_NEXT_MOVE_ID = 'next-move';
|
||
|
|
const MOVE_VAL_ID = 'move-value';
|
||
|
|
const BTN_PLUS_100_ID = 'plus-100';
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
let autoplayInterval;
|
||
|
|
let canvas = document.querySelector("canvas");
|
||
|
|
|
||
|
|
|
||
|
|
canvas.width = window.innerWidth ;
|
||
|
|
canvas.height = window.innerHeight;
|
||
|
|
|
||
|
|
let ant = new Ant(Math.floor(canvas.width / options.tileSize),Math.floor(canvas.height/options.tileSize));
|
||
|
|
|
||
|
|
document.getElementById(BTN_AUTOPLAY_ID).addEventListener('click', () => {
|
||
|
|
if (autoplayInterval) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
// TODO
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
document.getElementById(BTN_PLUS_100_ID).addEventListener('click', () => {
|
||
|
|
if (autoplayInterval) {
|
||
|
|
clearInterval(autoplayInterval);
|
||
|
|
autoplayInterval = null;
|
||
|
|
}
|
||
|
|
// TODO
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById(BTN_NEXT_MOVE_ID).addEventListener('click', () => {
|
||
|
|
if (autoplayInterval) {
|
||
|
|
clearInterval(autoplayInterval);
|
||
|
|
autoplayInterval = null;
|
||
|
|
}
|
||
|
|
ant.moveForward();
|
||
|
|
updateView(ant,canvas,options)
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
function updateView(ant,canvas,options)
|
||
|
|
{
|
||
|
|
document.getElementById(MOVE_VAL_ID).textContent = `${ant.move}`;
|
||
|
|
render(ant,canvas,options);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
updateView(ant,canvas,options,nbMove)
|