diff --git a/game.css b/game.css
index 2328f59..7d70b20 100644
--- a/game.css
+++ b/game.css
@@ -1,5 +1,6 @@
.message {
position: relative;
+ margin-bottom: -800px;
bottom: 800px;
width: 800px;
height: 800px;
@@ -20,6 +21,11 @@
font-size: 50px;
}
+.ui-text {
+ white-space: pre-wrap;
+ font-weight: bold;
+ padding: 10px;
+}
#canvas {
width: 800px;
height: 800px;
diff --git a/index.html b/index.html
index 0bfa1f5..527aa7a 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,13 @@
Fractal Hell
-
- You died in the Void...
+
+
+
You died in the Void...
+
+ placeholder
+
diff --git a/js/index.js b/js/index.js
index dc2f1dc..84d056e 100644
--- a/js/index.js
+++ b/js/index.js
@@ -52,6 +52,32 @@ function Game(inSize, exp, cs) {
this.dead = false;
}
+Game.prototype.player = function () {
+ let { ctx, fac, base, exp, inSize, camera, cs } = this;
+ ctx.fillStyle = 'red';
+ ctx.rect(cs / 2 - 2, cs / 2 - 2, 4, 4);
+ ctx.fill();
+
+ if (toPoint(camera[0], camera[1], base, fac, exp, inSize) == 0) {
+ this.dead = true;
+ }
+
+ let cx = Math.floor(camera[0]) / tileSize;
+ let cy = Math.floor(camera[1]) / tileSize;
+
+ let sum = 0;
+
+ for (let i in base) {
+ sum += base[i]
+ }
+
+ sum *= fac;
+
+ let dim = Math.log(sum) / (Math.log(base.length) / 2);
+
+ document.querySelector('.ui-text').textContent = `Coordinates: ${cx},${cy}\nDimensionality: ${dim}`
+}
+
Game.prototype.main = function () {
var { base, inSize, ctx, cs, frames, exp, camera, dat } = this;
if (this.dead) {
@@ -82,13 +108,7 @@ Game.prototype.main = function () {
ctx.putImageData(dat, 0, 0, 0, 0, cs, cs);
- ctx.fillStyle = 'red';
- ctx.rect(cs / 2 - 2, cs / 2 - 2,4,4);
- ctx.fill();
-
- if (toPoint(camera[0], camera[1], base, this.fac, exp, inSize) == 0 ){
- this.dead = true;
- }
+ this.player();
}
Game.prototype.map = function () {
diff --git a/motion.js b/motion.js
new file mode 100644
index 0000000..7dc752c
--- /dev/null
+++ b/motion.js
@@ -0,0 +1,92 @@
+
+let area2 = document.querySelector('#area-out');
+
+
+let pos = [];
+let mpos = [0, 0];
+let keys = [];
+let vel = [0, 0];
+let translate = '';
+let width = 0;
+let height = 0;
+let center = [0, 0];
+let lastPos = [0, 0];
+let isMouse = false;
+let zoom = 0.8;
+
+let id = '';
+
+let gen = (async () => {
+ pos = await genTree(id);
+});
+
+if (area) {
+ gen();
+}
+
+function down(e) {
+ keys[e.key.toLowerCase()] = true;
+};
+
+function up(e) {
+ keys[e.key.toLowerCase()] = false;
+};
+
+function mouseMove(e) {
+ lastPos = [e.clientX, e.clientY];
+ if (!isMouse) return;
+ mpos[0] += e.clientX - center[0];
+ mpos[1] += e.clientY - center[1];
+ center = lastPos;
+}
+
+function mouseUp(e) {
+ isMouse = false;
+}
+
+function mouseDown(e) {
+ if (e.button == '2') return;
+ isMouse = true;
+ center = [e.clientX, e.clientY];
+}
+
+function wheel(e) {
+ mpos[0] -= lastPos[0];
+ mpos[1] -= lastPos[1];
+
+ mpos[0] *= (1.005 ** -e.deltaY)
+ mpos[1] *= (1.005 ** -e.deltaY)
+
+ mpos[0] += lastPos[0];
+ mpos[1] += lastPos[1];
+
+ zoom *= (1.005 ** -e.deltaY)
+}
+
+function move() {
+ width = area2.clientWidth;
+ height = area.clientHeight;
+
+ var isShift = keys['q'];
+ vel[0] += ((keys['a'] ? 1 : 0) - (keys['d'] ? 1 : 0)) * (isShift ? 5 : 1);
+ vel[1] += ((keys['w'] ? 1 : 0) - (keys['s'] ? 1 : 0)) * (isShift ? 5 : 1);
+
+ vel[0] *= 0.9;
+ vel[1] *= 0.9;
+
+ mpos[0] += vel[0];
+ mpos[1] += vel[1];
+
+ translate = `translate(${mpos[0]}px,${mpos[1]}px) scale(${zoom},${zoom})`;
+
+ area.style.transform = translate;
+}
+
+setInterval(move, 10);
+
+window.addEventListener('keydown', down);
+window.addEventListener('keyup', up);
+window.addEventListener('wheel', wheel);
+window.addEventListener('mousemove', mouseMove);
+window.addEventListener('mousedown', mouseDown);
+window.addEventListener('mouseup', mouseUp);
\ No newline at end of file