+
+
+
+
+
+
+
+ Mods (Alpha!)
+
+
+
+
+ uploaded mods go here
+
+
+
+
+
+
+ 
+
+
+
+
+
+ Sample Mod
+ This mod has a 16x16 icon. It's just a sample mod, this menu isn't finished yet.
+
+
+ N/A
+
+
+
-
-
-
-
diff --git a/js/core.js b/js/core.js
index 62b964e..e3be1dc 100644
--- a/js/core.js
+++ b/js/core.js
@@ -35,10 +35,17 @@ function Canvas(width, height, upscale) {
that.pageX = e.pageX;
that.pageY = e.pageY;
})
+ this.elem.addEventListener('mouseover', function (e) {
+ that.isMouseOver = true;
+ })
+ this.elem.addEventListener('mouseout', function (e) {
+ that.isMouseOver = false;
+ })
this.elem.addEventListener('wheel', function (e) {
that.radius += Math.sign(e.deltaY);
if (that.radius < 0) that.radius = 0;
+ e.preventDefault();
})
this.elem.addEventListener('mouseup', function (e) {
@@ -72,10 +79,16 @@ Canvas.prototype.setBlock = function (x, y, block, doTemp) {
Canvas.prototype.resize = function () {
this.elem.style.width = this.width * this.upscale + 'px';
this.elem.style.height = this.height * this.upscale + 'px';
-
+
this.elem.width = this.width;
this.elem.height = this.height;
-
+
+ if(document.querySelector("#game") !== null)
+ document.querySelector("#game").setAttribute("style", `
+ width: ${this.width * this.upscale}px;
+ height: ${this.height * this.upscale}px;
+ `);
+
this.render();
}
@@ -130,16 +143,21 @@ Canvas.prototype.render = function () {
document.querySelector('body').id = 'no-overflow';
return;
}
-
- let x = (this.pageX - this.elem.getBoundingClientRect().x - scrollX + this.x) - 0.5 - this.radius * this.upscale;
- let y = (this.pageY - this.elem.getBoundingClientRect().y - scrollY + this.y) - 0.5 - this.radius * this.upscale;
-
+
+ if(this.forceShowTilePlacement == true) {
+ var x = (this.width / 2 - this.radius) * this.upscale;
+ var y = (this.height / 2 - this.radius) * this.upscale;
+ } else {
+ var x = (this.pageX - this.elem.getBoundingClientRect().x - scrollX + this.x) - 0.5 - this.radius * this.upscale;
+ var y = (this.pageY - this.elem.getBoundingClientRect().y - scrollY + this.y) - 0.5 - this.radius * this.upscale;
+ }
this.ctx.globalAlpha = 1;
this.ctx.strokeStyle = 'rgb(255,255,255)';
this.ctx.lineWidth = 2;
- this.ctx.strokeRect(x / this.upscale, y / this.upscale, this.radius * 2 + 2, this.radius * 2 + 2);
+ if(this.isMouseOver || this.forceShowTilePlacement)
+ this.ctx.strokeRect(x / this.upscale, y / this.upscale, this.radius * 2 + 2, this.radius * 2 + 2);
let theX = Math.floor(x/this.upscale + this.radius + 1);
let theY = Math.floor(y/this.upscale + this.radius + 1);
@@ -149,10 +167,11 @@ Canvas.prototype.render = function () {
let blok = mainTiles.tiles[this.getBlock(theX, theY)];
let temp = this.getBlock(theX,theY, true);
- if (blok) {
- document.querySelector('.info').textContent = `${blok.namespace}; ${blok.id}; ${Math.round(temp+23)}deg Celsius`
+ if (blok && this.isMouseOver) {
+ document.querySelector('.info').textContent = `
+ Looking at ${blok.id} from ${blok.namespace}. Temperature at tile: ${Math.round(temp+23)}deg Celsius`
} else {
- document.querySelector('.info').textContent = `Unknown`
+ document.querySelector('.info').textContent = ``
}
}
diff --git a/js/loader.js b/js/loader.js
index bf0c679..e4e16cf 100644
--- a/js/loader.js
+++ b/js/loader.js
@@ -13,6 +13,8 @@
decent basis for modding in the future.
*/
+mods = [];
+
legalFuncs = [
"gravity",
"cohesion",
@@ -47,9 +49,53 @@ function loadMod(stuff) {
)
}
}
-
+/*
async function openMods(stuff) {
// TODO: don't use prompt
let url = prompt('Type in the URL to the JSON of the mod you want to load.');
loadMod(await (await fetch(url)).json())
+}*/
+
+function openMods() {
+
+ document.querySelector("#mod-loader-modal").classList.add("opened")
+
}
+function closeMods() {
+
+ document.querySelector("#mod-loader-modal").classList.remove("opened")
+
+}
+
+
+
+async function loadModFromForm() {
+
+ document.querySelector("#mod-form input").disabled = true;
+ let url = document.querySelector("#mod-form input").value;
+ try {
+ var mod = await fetch(url).then(e => e.json());
+ // do stuff here, check if mod is ok, etc...
+ alert("Mod loaded!")
+
+ mods.push(mod)
+ } catch(err) {
+ alert("That mod isn't valid. Check the mod, and try again.")
+ }
+ document.querySelector("#mod-form input").disabled = false;
+
+
+}
+
+
+document.querySelectorAll(".mod-loader-tab").forEach(function(element, index){
+
+ element.onclick = function() {
+
+ document.querySelectorAll("#mod-loader-modal .selected-group").forEach(function(e) {e.classList.remove("selected-group")})
+ element.classList.add("selected-group");
+ document.querySelector(".mod-loader-tab-content:nth-child("+(index+1)+")").classList.add("selected-group");
+
+ }
+
+})
diff --git a/js/save_load.js b/js/save_load.js
index 00a2c48..b68307a 100644
--- a/js/save_load.js
+++ b/js/save_load.js
@@ -4,6 +4,47 @@
Features a somewhat efficient compression algorithm.
*/
+function download_file(data, filename) {
+ // ONLY works with ascii/latin1 characters. if you'd like to be able to download UTF-16 data (for compression, etc), please find a base64-encoding library for UTF-16, and replace "btoa".
+
+ let a = document.createElement("a");
+ a.href = "data:text/plain;base64,"+(btoa(data));
+ a.setAttribute("download", filename);
+ a.click();
+ a.remove();
+
+}
+
+function upload_file(options = {}) {
+ base64_output = Boolean(options.useBase64);
+ textEncoding = options.textEncoding ? options.textEncoding : "UTF-8";
+
+ return new Promise(function(res) {
+ var input = document.createElement('input');
+ input.type = 'file';
+
+ input.onchange = e => {
+ var file = e.target.files[0];
+ var reader = new FileReader();
+ reader.onload = readerEvent => {
+
+ res(readerEvent.target.result); // this is the content!
+ input.remove();
+
+ }
+
+ if(base64_output)
+ reader.readAsDataURL(file);
+ else
+ reader.readAsText(file, textEncoding);
+
+
+ }
+
+ input.click();
+ });
+}
+
function save() {
let jason = {
'pal': [],
@@ -48,53 +89,59 @@ function save() {
'dat': otherArray ? new TextDecoder('ascii').decode(otherArray) : undefined
};
}
-
- document.querySelector('#code').value = JSON.stringify(jason);
+
+ download_file(JSON.stringify(jason), "game-data.json");
}
function load() {
- let jason = JSON.parse(document.querySelector('#code').value);
+ upload_file().then((text_data) => {
+ try {
+ let jason = JSON.parse(text_data);
- let json = jason.data;
+ let json = jason.data;
- canvas.width = jason.width;
- canvas.height = jason.height;
- canvas.resize();
-
- let mainPal = jason.pal.map(x => mainTiles.resolveID(x[0],x[1]));
-
- console.log(mainPal);
-
- for (let i in json) {
- let data = json[i];
- let pal = data.pal;
- let dat = new TextEncoder('ascii').encode(data.dat);
-
- let otherArray = new Uint16Array(128);
-
- if (pal.length < 2) {
- for (let i in otherArray) {
- otherArray[i] = mainPal[(pal[0])];
- }
+ canvas.width = jason.width;
+ canvas.height = jason.height;
+ canvas.resize();
- } else if (pal.length < 9) {
- for (let i in dat) {
- otherArray[i*2] = mainPal[pal[((dat[i] - 'A'.charCodeAt()) & 0x38) / 8]];
- otherArray[i*2+1] = mainPal[pal[(dat[i] - 'A'.charCodeAt()) & 0x7]];
+ let mainPal = jason.pal.map(x => mainTiles.resolveID(x[0],x[1]));
+
+ console.log(mainPal);
+
+ for (let i in json) {
+ let data = json[i];
+ let pal = data.pal;
+ let dat = new TextEncoder('ascii').encode(data.dat);
+
+ let otherArray = new Uint16Array(128);
+
+ if (pal.length < 2) {
+ for (let i in otherArray) {
+ otherArray[i] = mainPal[(pal[0])];
+ }
+
+ } else if (pal.length < 9) {
+ for (let i in dat) {
+ otherArray[i*2] = mainPal[pal[((dat[i] - 'A'.charCodeAt()) & 0x38) / 8]];
+ otherArray[i*2+1] = mainPal[pal[(dat[i] - 'A'.charCodeAt()) & 0x7]];
+ }
+
+ } else {
+ for (let i in dat) {
+ otherArray[i] = mainPal[pal[(dat[i] - 'A'.charCodeAt()) & 0x7F]];
+ }
+ }
+
+ canvas.blocks.set(otherArray,Math.min(i*128,canvas.blocks.length - 128));
}
-
- } else {
- for (let i in dat) {
- otherArray[i] = mainPal[pal[(dat[i] - 'A'.charCodeAt()) & 0x7F]];
+
+ for (let i in canvas.temp) {
+ canvas.temp[i] = mainTiles.tiles[canvas.blocks[i]].attributes.temperature;
}
+ } catch(err) {
+ alert("This save file is invalid! Please provide a JSON file, with Altboxels save data.")
}
-
- canvas.blocks.set(otherArray,Math.min(i*128,canvas.blocks.length - 128));
- }
-
- for (let i in canvas.temp) {
- canvas.temp[i] = mainTiles.tiles[canvas.blocks[i]].attributes.temperature;
- }
+ })
}
var loc3 = new URL(window.location).searchParams;
diff --git a/js/tile.js b/js/tile.js
index c8eed45..1d10a0d 100644
--- a/js/tile.js
+++ b/js/tile.js
@@ -55,13 +55,23 @@ TileManager.prototype.loadSet = function (namespace, tiles) {
let elem = document.createElement('a');
elem.textContent = namespace;
- elem.href = `#${namespace}`
+ //elem.href = `#${namespace}`
+ //elem.id = namespace
+
this.row.appendChild(elem);
let elem2 = document.createElement('section');
elem2.id = namespace
this.row2.appendChild(elem2);
-
+
+ elem.onclick = function(e) {
+
+ document.querySelectorAll("#game .selected-group").forEach(function(e) {e.classList.remove("selected-group")})
+ e.target.classList.add("selected-group");
+ elem2.classList.add("selected-group");
+
+ }
+
for (let tile of tiles) {
tile.namespace = namespace;