index-01.ts

import { Maze } from "./maze";

const Main = document.createElement("main");
Object.assign(Main.style, {
  backgroundColor: "#602F6B",
  width: "600px",
  height: "600px",
  position: "relative"
});

Maze.forEach(row => {
  row.forEach(tile => {
    const el = document.createElement("div");
    Object.assign(el.style, {
      backgroundColor: tile === "wall" ? "#D399E6" : "",
      width: "30px",
      height: "30px",
      float: "left"
    });
    Main.appendChild(el);
  });
});

const state = {
  x: 1,
  y: 1
};

const hamster = document.createElement("div");
Object.assign(hamster.style, {
  width: "30px",
  height: "30px",
  backgroundColor: "#FFFFFF",
  borderRadius: "15px",
  position: "absolute",
  boxShadow: "1px 1px 5px black"
});
Main.appendChild(hamster);

function updateHamster() {
  Object.assign(hamster.style, {
    left: `${state.x * 30}px`,
    top: `${state.y * 30}px`,
    transitionDuration: "0.5s"
  });
}

updateHamster();

document.getElementById("app").appendChild(Main);

setInterval(() => {
  // movement loop
}, 1000)