Add polish to the game
I added polish to the game. Hooray.
This commit is contained in:
zeno
parent
6bbfbd60d0
commit
e4584d0669
18 changed files with 651 additions and 86 deletions
39
js/core.js
39
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 = ``
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
48
js/loader.js
48
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");
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
|
|
|||
123
js/save_load.js
123
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;
|
||||
|
|
|
|||
14
js/tile.js
14
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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue