Celestial/viewer.js

448 lines
11 KiB
JavaScript
Raw Normal View History

// Demo https://codepen.io/deltabouche/full/WJPbaQ/
// Requires p5.js and lodash
const MapBase = "http://localhost:3000/";
const Maps = [
"0-Intro",
"1-ForsakenCity",
"1H-ForsakenCity",
"1X-ForsakenCity",
"2-OldSite",
"2H-OldSite",
"2X-OldSite",
"3-CelestialResort",
"3H-CelestialResort",
"3X-CelestialResort",
"4-GoldenRidge",
"4H-GoldenRidge",
"4X-GoldenRidge",
"5-MirrorTemple",
"5H-MirrorTemple",
"5X-MirrorTemple",
"6-Reflection",
"6H-Reflection",
"6X-Reflection",
"7-Summit",
"7H-Summit",
"7X-Summit",
"8-Epilogue",
"9-Core",
"9H-Core",
"9X-Core"
]
let state = {
mapPath: "0-Intro",
dataReady: false,
camera: {
x: 200,
y: 200,
scale: 1
},
levelCamera: {
x: 5,
y: 5
},
screen: {
width: 1280,
height: 720
},
map: null,
thumbnails: [],
levelIndex: -1,
hoverLevel: -1
};
const SolidColors = {
"0": "#000000", //0
"1": "#FF0000", //1
"2": "#00FF00", //2
"3": "#0000FF", //3
"4": "#FF00FF", //4
"5": "#FFFF00", //5
"6": "#00FFFF", //6
"7": "#888888", //7
"g": "#FF00FF"
};
function setupThumbnails() {
const levels = childByName(state.map.root, 'levels');
let visIndex = 0;
_.each(levels.children, (lvl, lvlIndex) => {
let pg = createGraphics(lvl.attributes.width, lvl.attributes.height);
const solids = childrenByName(lvl, 'solids');
_.each(solids, solid => {
let tx = 0;
let ty = 0;
_.each(solid.attributes.innerText, v => {
if (v == 10) {
ty++;
tx=0;
return;
}
const tRect = {
x: solid.attributes.offsetX + tx * 8 + 1,
y: solid.attributes.offsetY + ty * 8 + 1,
width: 7,
height: 7
}
pg.noStroke();
const color = SolidColors[String.fromCharCode(v)] || 200;
pg.fill(color);
pg.rect(tRect.x / 2, tRect.y/ 2, tRect.width/ 2, tRect.height/ 2);
tx++;
});
});
state.thumbnails.push(pg)
});
}
function resetCamera() {
state.camera = { x: 200, y: 200, scale: 0.5 };
}
function resetLevelCamera() {
state.levelCamera = { x: 5, y: 5 };
}
function loadMap(path) {
state.dataReady = false;
state.thumbnails = [];
state.map = null;
state.mapPath = path;
state.levelIndex = -1;
fetch(`${MapBase}/${state.mapPath}.json`).then(res => res.json()).then(json => {
state.map = json;
setupThumbnails();
state.dataReady = true;
addLevelSelect();
resetCamera();
})
}
function loadLevel(idx) {
if (idx >= 0) resetLevelCamera();
state.levelIndex = parseInt(idx, 10);
}
function setup() {
addMapSelect();
let canvasElement = createCanvas(state.screen.width, state.screen.height).elt;
canvasElement.addEventListener('contextmenu', event => { event.preventDefault(); });
let context = canvasElement.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
loadMap(state.mapPath);
}
function childrenByName(el, name) {
return _.filter(el.children, { name });
}
function childByName(el, name) {
return _.find(el.children, { name });
}
function drawAxes() {
stroke("#0000FF");
line(state.camera.x, 0, state.camera.x, state.screen.height);
line(0, state.camera.y, state.screen.width, state.camera.y);
}
function drawHeadings() {
text(state.map.root.package, 20, 20);
}
function screenTransformRect(rect) {
return {
x: rect.x * state.camera.scale + state.camera.x,
y: rect.y * state.camera.scale + state.camera.y,
width: rect.width * state.camera.scale,
height: rect.height * state.camera.scale
}
}
function screenLevelTransformRect(rect) {
return {
x: (rect.x + state.levelCamera.x * 8) * 2,
y: (rect.y + state.levelCamera.y * 8) * 2,
width: rect.width * 2,
height: rect.height * 2
}
}
function pointInRect(x, y, rect) {
return x > rect.x && x < rect.x + rect.width && y > rect.y && y < rect.y + rect.height;
}
function rectIsVisible(rect) {
return rect.x + rect.width > 0 && rect.y + rect.height > 0 && rect.x < state.screen.width && rect.y < state.screen.height
}
function drawFillers() {
const fillers = childByName(state.map.root, 'Filler');
_.each(fillers.children, (fillRect) => {
const drawRect = screenTransformRect({
x: fillRect.attributes.x * 8,
y: fillRect.attributes.y * 8,
width: fillRect.attributes.w * 8,
height: fillRect.attributes.h * 8
});
if (!rectIsVisible(drawRect)) return;
stroke("#FF0000");
fill("#330000");
rect(drawRect.x, drawRect.y, drawRect.width, drawRect.height);
});
}
function drawLevels() {
const levels = childByName(state.map.root, 'levels');
let visIndex = 0;
_.each(levels.children, (lvl, lvlIndex) => {
fill(255);
stroke(255);
const drawRect = screenTransformRect(lvl.attributes);
if (!rectIsVisible(drawRect)) return;
// text(`${drawRect.x}, ${drawRect.y}, ${drawRect.width}, ${drawRect.height}`, 10, 80 + 20 * visIndex);
visIndex++;
image(state.thumbnails[lvlIndex], drawRect.x, drawRect.y, drawRect.width, drawRect.height);
noFill();
if (pointInRect(mouseX, mouseY, screenTransformRect(lvl.attributes))) {
text(lvl.attributes.name, 10, 80);
stroke(255);
state.hoverLevel = lvlIndex;
} else {
stroke(64);
}
rect(drawRect.x, drawRect.y, drawRect.width, drawRect.height);
});
}
function processInput() {
if (state.levelIndex === -1) {
if (keyIsDown(LEFT_ARROW)) {
state.camera.x += 8;
}
if (keyIsDown(RIGHT_ARROW)) {
state.camera.x -= 8;
}
if (keyIsDown(UP_ARROW)) {
state.camera.y += 8;
}
if (keyIsDown(DOWN_ARROW)) {
state.camera.y -= 8;
}
} else {
if (keyIsDown(LEFT_ARROW)) {
state.levelCamera.x += 1;
}
if (keyIsDown(RIGHT_ARROW)) {
state.levelCamera.x -= 1;
}
if (keyIsDown(UP_ARROW)) {
state.levelCamera.y += 1;
}
if (keyIsDown(DOWN_ARROW)) {
state.levelCamera.y -= 1;
}
}
}
function keyPressed() {
if (keyCode === 81) {
state.camera.x *= 1.5;
state.camera.y *= 1.5;
state.camera.scale *= 1.5;
}
if (keyCode === 65) {
state.camera.x /= 1.5;
state.camera.y /= 1.5;
state.camera.scale /= 1.5;
}
if (keyCode === 27) {
let select = document.getElementById('level-select');
select.value = -1;
loadLevel(-1);
}
}
function mousePressed() {
if (mouseButton === RIGHT) {
if (state.hoverLevel >= 0) {
let idx = state.hoverLevel;
state.hoverLevel = -1;
let select = document.getElementById('level-select');
select.value = idx;
loadLevel(idx);
}
}
}
function drawHud() {
text(`${mouseX}, ${mouseY}`, 10, 50);
}
function drawLoading() {
text("Loading...", state.screen.width / 2, state.screen.height / 2);
}
function drawOverview() {
drawAxes();
drawHud();
drawHeadings();
drawFillers();
drawLevels();
}
function drawLevel() {
const levels = childByName(state.map.root, 'levels');
const level = levels.children[state.levelIndex];
// draw surrounding levels
_.each(levels.children, (sLevel, i) => {
if (i == state.levelIndex) return;
const drawRect = screenLevelTransformRect({
x: sLevel.attributes.x - level.attributes.x,
y: sLevel.attributes.y - level.attributes.y,
width: sLevel.attributes.width,
height: sLevel.attributes.height
});
if (!rectIsVisible(drawRect)) return;
if (pointInRect(mouseX, mouseY, drawRect)) {
stroke(128, 128, 128, 255);
tint(255, 192);
state.hoverLevel = i;
} else {
stroke(128, 128, 128, 128);
tint(255, 128);
}
image(state.thumbnails[i], drawRect.x, drawRect.y, drawRect.width, drawRect.height);
noFill();
rect(drawRect.x, drawRect.y, drawRect.width, drawRect.height);
tint(255, 255);
});
// noFill(64);
// rect((state.levelCamera.x * 16) + 16, (state.levelCamera.y * 16) + 16, level.attributes.width * 2, level.attributes.height * 2);
const solids = childByName(level, 'solids');
const solidMap = solids.attributes.innerText;
let tx = 0;
let ty = 0;
const levelDrawRect = screenLevelTransformRect({
x: 0,
y: 0,
width: level.attributes.width,
height: level.attributes.height
})
image(state.thumbnails[state.levelIndex], levelDrawRect.x, levelDrawRect.y, levelDrawRect.width, levelDrawRect.height);
// _.each(solidMap, (v, i) => {
// if (v === 10) {
// ty++;
// tx=0;
// return;
// }
// const drawRect = screenLevelTransformRect({
// x: tx * 8,
// y: ty * 8,
// width: 8,
// height: 8
// })
// tx++;
// if (!rectIsVisible(drawRect)) return;
// stroke(32);
// // const color = SolidColors[String.fromCharCode(v)] || 200;
// // fill(color);
// // rect(drawRect.x, drawRect.y, drawRect.width, drawRect.height);
// fill(0);
// text(String.fromCharCode(v), drawRect.x + 6, drawRect.y + 12);
// });
const entities = childByName(level, 'entities');
_.each(entities.children, entity => {
const drawRect = screenLevelTransformRect({
x: entity.attributes.x - (entity.attributes.originX || 0),
y: entity.attributes.y - (entity.attributes.originY || 0),
width: entity.attributes.width || 8,
height: entity.attributes.height || 8
})
if (!rectIsVisible(drawRect)) return;
stroke(255, 255, 255, 128);
fill(255, 255, 255, 128);
text(entity.name, drawRect.x, drawRect.y);
stroke(255, 64, 64, 128);
fill(64, 0, 0, 128);
rect(drawRect.x, drawRect.y, drawRect.width, drawRect.height);
})
stroke(128);
noFill();
rect(levelDrawRect.x, levelDrawRect.y, levelDrawRect.width, levelDrawRect.height);
}
function draw() {
processInput();
background(0);
stroke(255);
fill(255);
if (state.dataReady) {
if (state.levelIndex === -1) {
drawOverview();
} else {
drawLevel();
}
} else {
drawLoading();
}
}
function addMapSelect() {
let mapSelectContainer = document.getElementById("map-select-container");
let selectList = document.createElement("select");
selectList.id = "map-select";
mapSelectContainer.appendChild(selectList);
_.each(Maps, mapName => {
let option = document.createElement("option");
option.value = mapName;
option.text = mapName;
selectList.appendChild(option);
})
selectList.addEventListener('change', function(){
loadMap(this.value);
});
}
function addLevelSelect() {
let levelSelectContainer = document.getElementById("level-select-container");
levelSelectContainer.innerHTML = "";
let selectList = document.createElement("select");
selectList.id = "level-select";
levelSelectContainer.appendChild(selectList);
let defOption = document.createElement("option");
defOption.value = -1;
defOption.text = "Overview";
selectList.appendChild(defOption);
const levels = childByName(state.map.root, 'levels');
_.each(levels.children, (lvl, idx) => {
let option = document.createElement("option");
option.value = idx;
option.text = lvl.attributes.name;
selectList.appendChild(option);
})
selectList.addEventListener('change', function(){
loadLevel(this.value);
});
}