diff --git a/static/debug.js b/static/debug.js
new file mode 100644
index 0000000..f4af848
--- /dev/null
+++ b/static/debug.js
@@ -0,0 +1,9 @@
+const ptr = document.querySelectorAll ("#pointer") [0];
+const toggler = document.querySelectorAll("#toggle-engine")[0];
+const toggleEngine = () => engine("state") == "running"
+      ? engine("halt")
+      : engine("start");
+toggler.addEventListener("click", () => {
+    toggleEngine();
+    toggler.dataset.state=engine("state");
+});
diff --git a/static/engine.js b/static/engine.js
index b6ed952..c39c086 100644
--- a/static/engine.js
+++ b/static/engine.js
@@ -24,6 +24,7 @@ const initEvent = () => {
 const engine = (() => {
     let queue = [];
     let timer;
+    let state;
     let time = Date.now();
     let entities = {};
     let components = {};
@@ -42,6 +43,7 @@ const engine = (() => {
     };
     const halt = () => {
         console.log("halted");
+        state="halted";
         clearTimeout(timer);
     };
     return (message, ...messageArgs) => {
@@ -68,15 +70,15 @@ const engine = (() => {
         }
         case "registerEntity": {
             let node = messageArgs[0];
-            entities[node] = [];
+            entities[node.id] = [];
             break;
         }
         case "removeEntity": {
             let node = messageArgs[0];
-            entities[node].forEach(([componentType, component]) => {
+            entities[node.id].forEach(([componentType, component]) => {
                 delete components[componentType].instances[component];
             });
-            delete entities[node];
+            delete entities[node.id];
             queue.push((_) => node.remove());
             break;
         }
@@ -88,14 +90,14 @@ const engine = (() => {
             };
             break;
         }
-        case "getComponentContructor": {
+        case "getComponentConstructor": {
             let [componentType] = messageArgs;
-            return components [componentType].constructor;
+            return components [componentType].constructor(engine);
         }
         case "addComponent": {
             let [entity, componentType, component] = messageArgs;
-            entities[entity].push([componentType, component]);
-            components[componentType].instances[entity] = component;
+            entities[entity.id].push([componentType, component]);
+            components[componentType].instances[entity.id] = component;
             break;
         }
         case "registerEvent": {
@@ -110,9 +112,13 @@ const engine = (() => {
             break;
         }
         case 'start': {
+            state="running";
             tick();
             break;
         }
+        case 'state': {
+            return state;
+        }
         case 'halt': {
             halt();
             break;
@@ -121,8 +127,10 @@ const engine = (() => {
     };
 })();
 
+initCollisionSystem (engine);
 initTransformSystem(engine);
 inputSystem(engine);
 playerSystem(engine);
+initEnvironmentSystem (engine);
 
 engine("start");
diff --git a/static/environment.js b/static/environment.js
new file mode 100644
index 0000000..3de24b3
--- /dev/null
+++ b/static/environment.js
@@ -0,0 +1,22 @@
+console.log("loading environment system");
+
+const initEnvironmentSystem = (engine) => {
+    document.querySelectorAll(".environment")
+        .forEach(entity => {
+            console.log(entity);
+            if (!entity.id) {
+                entity.id = Date.now().toString(16);
+            }
+            engine("registerEntity", entity);
+            console.log(entity.dataset);
+            let collider = engine("getComponentConstructor", "collision")(
+                entity, {
+                    layers: new Set(entity.dataset.collisionLayers.split(",")),
+                    mask: new Set(entity.dataset.collisionMask.split(",")),
+                    collsionShape: {}
+                });
+            engine("addComponent", entity, "collision", collider);
+        });
+
+
+}
diff --git a/static/index.html b/static/index.html
index b5a0830..8887805 100644
--- a/static/index.html
+++ b/static/index.html
@@ -2,35 +2,89 @@
 <html>
     <head>
         <script src="transform.js" defer></script>
+        <script src="collision.js" defer></script>
         <script src="input.js" defer></script>
         <script src="player.js" defer></script>
+        <script src="environment.js" defer></script>
+        <script src="debug.js" defer></script>
         <script src="engine.js" defer></script>
+        <style>
+         .debug[data-state="running"] {
+             background-color: rgb(30,200,30);
+         }
+         .debug[data-state="halted"] {
+             background-color: rgb(200,30,30);
+         }
+        </style>
     </head>
     <body
         style="margin:0;"
     >
-        <div class="player"
-             data-sprite="player.png"
-             data-transform="[1,0,0,1,0,0]"
-             data-collision="player"
-             id="player"
-             style="position:absolute;width:50px;height:50px;
-                    background-color:rgba(50,0,127,0.7);"
+
+        <!-- DEBUG TOOLS -->
+        <div class="debug"
+             id="toggle-engine-container"
+             style="display:flex;border: 2px solid rgb(200,0,0);padding:2px;"
+             >
+        <label for="toggle-engine"
+               class="debug">
+            the engine's going to keep processing as long as this window is open,
+            unless you toggle it here. warning: the engine gets weird when woken
+            from complete halt.
+        </label>
+        <button class="debug"
+                id="toggle-engine"
+                data-description="the actual button that toggles the engine"
+                data-state="running"
+                type="button"
+        >toggle engine</button>
+        </div>
+
+        <div class="debug"
+             id="pointer"
+             data-description="pointer used for debugging positioning things"
+             style="position:absolute;width:5px;height:5px;top:50vh;left:50vw;
+                    border: 5px solid rgb(127,0,0);
+                    background-color:rgb(255,255,255);"
         ></div>
-        <article class="level" id="test">
+        <!-- /DEBUG TOOLS -->
+
+        <div class="player"
+            data-description="this is the player character"
+            data-transform="[1,0,0,1,0,0]"
+            data-collision-layers="player"
+            data-collision-mask="environment"
+            id="player"
+            style="position:absolute;width:50px;height:50px;
+                   background-color:rgba(50,0,127,0.7);"
+        ></div>
+        <article
+            class="level"
+            id="test"
+            data-description="a test level for developing the engine"
+        >
             <!-- testing collision -->
-            <div class="environment"
-                 data-collision="environment"
-                 style="width:500px;height:25px;transform:matrix(1,0,0,1,0,300);background-color:rgba(127,100,0,0.7);"
-            >
+            <div class="environment wall"
+                 data-description="a wall"
+                 data-collision-layers="environment"
+                 data-collision-mask="player"
+                 style="width:500px;height:25px;transform:matrix(1,0,0,1,0,300);
+                        background-color:rgba(127,100,0,0.7);"
+            >~~this is a wall~~ (no collision handling yet)
             </div>
 
-            <!-- testing radio button -->
+            <!-- testing radio button: collision handling not implemented yet -->
             <form
+                class=""
+                id="test-form"
+                data-description="testing using radio input to move around"
                 style="transform:matrix(1,0,0,1,10,600);max-width:80vw;"
             >
                 <fieldset>
-                    <legend>try selecting a radio button to teleport</legend>
+                    <legend>
+                        try selecting a radio button to teleport
+                        (not implemented yet)
+                    </legend>
                     <div
                         style="display:flex;flex-direction:column;"
                     >
diff --git a/static/transform.js b/static/transform.js
index f05f14f..4a719c6 100644
--- a/static/transform.js
+++ b/static/transform.js
@@ -1,43 +1,43 @@
 console.log("loading transform system");
 
-const transform =
-      (entity,
-       transformData = { x: {x: 1, y:0}, y: {x:0, y:1}, o: {x:0,y:0}}
-      ) => {
-          let {x, y, o} = transformData;
-          let transform = [x.x, x.y, y.x, y.y, o.x, o.y];
-          const updateEntity = () => {
-              entity.dataset.transform = JSON.stringify (transform);
-          };
+const transform = (engine) => (
+    entity,
+    transformData = { x: {x: 1, y:0}, y: {x:0, y:1}, o: {x:0,y:0}}
+) => {
+    let {x, y, o} = transformData;
+    let transform = [x.x, x.y, y.x, y.y, o.x, o.y];
+    const updateEntity = () => {
+        entity.dataset.transform = JSON.stringify (transform);
+    };
 
-          // these may be pulled out in the future into a separate renderer
-          const setEntityStyleFromTransform = (entity) => {
-              entity.style.transform =
-                  `matrix(${entity.dataset.transform.replace(/\[|\]/g,'')})`;
-          };
-          const renderEntity = () => setEntityStyleFromTransform (entity);
+    // these may be pulled out in the future into a separate renderer
+    const setEntityStyleFromTransform = (entity) => {
+        entity.style.transform =
+            `matrix(${entity.dataset.transform.replace(/\[|\]/g,'')})`;
+    };
+    const renderEntity = () => setEntityStyleFromTransform (entity);
 
-          return (message, ...messageArgs) => {
-              switch (message) {
-              case "origin": {
-                  return [transform[4], transform[5]];
-              }
-              case "x": {
-                  return [transform[0], transform[1]];
-              }
-              case "y": {
-                  return [transform[2], transform [3]];
-              }
-              case "translate": {
-                  let [xTranslation, yTranslation] = messageArgs [0];
-                  transform [4] += xTranslation;
-                  transform [5] += yTranslation;
-                  break;
-              }
-              }
-              updateEntity ();
-              renderEntity ();
-          };
+    return (message, ...messageArgs) => {
+        switch (message) {
+        case "origin": {
+            return [transform[4], transform[5]];
+        }
+        case "x": {
+            return [transform[0], transform[1]];
+        }
+        case "y": {
+            return [transform[2], transform [3]];
+        }
+        case "translate": {
+            let [xTranslation, yTranslation] = messageArgs [0];
+            transform [4] += xTranslation;
+            transform [5] += yTranslation;
+            break;
+        }
+        }
+        updateEntity ();
+        renderEntity ();
+    };
 };
 
 const initTransformSystem = (engine) => {