mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 05:14:53 -05:00
174 lines
11 KiB
JavaScript
174 lines
11 KiB
JavaScript
//checks to see if it needs to run
|
|
if (!loadedVersions.includes('/js/frames/versionDungeon.js')) {
|
|
loadedVersions.push('/js/frames/versionDungeon.js');
|
|
sizeCanvas('dungeon');
|
|
sizeCanvas('dungeonFX');
|
|
document.querySelector('#creator-menu-tabs').innerHTML += '<h3 class="selectable readable-background" onclick="toggleCreatorTabs(event, `dungeon`)">Dungeon</h3>';
|
|
var newHTML = document.createElement('div');
|
|
newHTML.id = 'creator-menu-dungeon';
|
|
newHTML.classList.add('hidden');
|
|
newHTML.innerHTML = `
|
|
<div class='readable-background padding margin-bottom'>
|
|
<h5 class='padding margin-bottom input-description'>Use the following textbox to specify your room locations and sizes.<br><br>Each room must be separated by a new line, and may only include numeric characters.<br><br>Each number must be seperated by a comma, and ordered as follows:<br>X,Y,Width,Height,Door-1,Door-2,...<br>(doors are optional).<br><br>Apologies for the difficult interface; I hope to implement an improved UI in the future.</h5>
|
|
<textarea id='dungeon-input' type='number' class='input margin-bottom' oninput='dungeonEditedBuffer();'>0,0,16,2,3,11\n0,2,8,4,1.5,5.5\n8,2,8,4,0.5,4.5\n0,6,5,5,1.5\n5,6,6,5,0.5,3.5\n11,6,5,5,1.5\n0,11,8,4,3\n8,11,8,4,3\n0,15,16,4,7</textarea>
|
|
</div>
|
|
<div class='readable-background padding'>
|
|
<h5 class='padding margin-bottom input-description'>Select the dungeon wall color:</h5>
|
|
<select id='dungeon-color' class='input' onchange='dungeonEditedBuffer();'>
|
|
<option value="W">White</option>
|
|
<option value="U">Blue</option>
|
|
<option value="B" selected="selected">Black</option>
|
|
<option value="R">Red</option>
|
|
<option value="G">Green</option>
|
|
<option value="C">Colorless</option>
|
|
</select>
|
|
</div>`;
|
|
if (!card.dungeon) {
|
|
card.dungeon = {abilities:[1, 1, 1, 0], count:3, x:0.1, width:0.3947};
|
|
}
|
|
document.querySelector('#creator-menu-sections').appendChild(newHTML);
|
|
var dungeonFXtop = new Image(); dungeonFXtop.src = fixUri('/img/frames/dungeon/walls/fx/top.png');
|
|
var dungeonFXleft = new Image(); dungeonFXleft.src = fixUri('/img/frames/dungeon/walls/fx/left.png');
|
|
var dungeonFXbottom = new Image(); dungeonFXbottom.src = fixUri('/img/frames/dungeon/walls/fx/bottom.png');
|
|
var dungeonFXright = new Image(); dungeonFXright.src = fixUri('/img/frames/dungeon/walls/fx/right.png');
|
|
var dungeonFXtopright = new Image(); dungeonFXtopright.src = fixUri('/img/frames/dungeon/walls/fx/topright.png');
|
|
var dungeonFXtopleft = new Image(); dungeonFXtopleft.src = fixUri('/img/frames/dungeon/walls/fx/topleft.png');
|
|
var dungeonFXbottomright = new Image(); dungeonFXbottomright.src = fixUri('/img/frames/dungeon/walls/fx/bottomright.png');
|
|
var dungeonFXbottomleft = new Image(); dungeonFXbottomleft.src = fixUri('/img/frames/dungeon/walls/fx/bottomleft.png');
|
|
var dungeonShapetop = new Image(); dungeonShapetop.src = fixUri('/img/frames/dungeon/walls/shape/top.png');
|
|
var dungeonShapeleft = new Image(); dungeonShapeleft.src = fixUri('/img/frames/dungeon/walls/shape/left.png');
|
|
var dungeonShapebottom = new Image(); dungeonShapebottom.src = fixUri('/img/frames/dungeon/walls/shape/bottom.png');
|
|
var dungeonShaperight = new Image(); dungeonShaperight.src = fixUri('/img/frames/dungeon/walls/shape/right.png');
|
|
var dungeonShapetopright = new Image(); dungeonShapetopright.src = fixUri('/img/frames/dungeon/walls/shape/topright.png');
|
|
var dungeonShapetopleft = new Image(); dungeonShapetopleft.src = fixUri('/img/frames/dungeon/walls/shape/topleft.png');
|
|
var dungeonShapebottomright = new Image(); dungeonShapebottomright.src = fixUri('/img/frames/dungeon/walls/shape/bottomright.png');
|
|
var dungeonShapebottomleft = new Image(); dungeonShapebottomleft.src = fixUri('/img/frames/dungeon/walls/shape/bottomleft.png');
|
|
var dungeonDoorwayShape = new Image(); dungeonDoorwayShape.src = fixUri('/img/frames/dungeon/walls/shape/doorway.png');
|
|
var dungeonDoorwayFX = new Image(); dungeonDoorwayFX.src = fixUri('/img/frames/dungeon/walls/fx/doorway.png');
|
|
var dungeonDoorwayArrow = new Image(); dungeonDoorwayArrow.src = fixUri('/img/frames/dungeon/walls/arrow.png');
|
|
var dungeonDoorwayCutout = new Image(); dungeonDoorwayCutout.src = fixUri('/img/frames/dungeon/walls/doorway.png');
|
|
var dungeonOuterShape = new Image(); dungeonOuterShape.src = fixUri('/img/frames/dungeon/walls/shape/outer.png');
|
|
var dungeonOuterFX = new Image(); dungeonOuterFX.src = fixUri('/img/frames/dungeon/walls/fx/outer.png');
|
|
var dungeonTextureW = new Image(); dungeonTextureW.src = fixUri('/img/frames/dungeon/walls/textures/w.png');
|
|
var dungeonTextureU = new Image(); dungeonTextureU.src = fixUri('/img/frames/dungeon/walls/textures/u.png');
|
|
var dungeonTextureB = new Image(); dungeonTextureB.src = fixUri('/img/frames/dungeon/walls/textures/b.png');
|
|
var dungeonTextureR = new Image(); dungeonTextureR.src = fixUri('/img/frames/dungeon/walls/textures/r.png');
|
|
var dungeonTextureG = new Image(); dungeonTextureG.src = fixUri('/img/frames/dungeon/walls/textures/g.png');
|
|
var dungeonTextureC = new Image(); dungeonTextureC.src = fixUri('/img/frames/dungeon/walls/textures/c.png');
|
|
dungeonTextureC.onload = dungeonEditedBuffer;
|
|
}
|
|
|
|
var drawingDungeon;
|
|
function dungeonEditedBuffer() {
|
|
clearTimeout(drawingDungeon);
|
|
drawingDungeon = setTimeout(dungeonEdited, 500);
|
|
}
|
|
|
|
function dungeonEdited() {
|
|
//gather data
|
|
data = document.querySelector('#dungeon-input').value;
|
|
rooms = [];
|
|
data.replace(/ /g, '').split('\n').forEach(room => {
|
|
newRoom = room.split(',');
|
|
for (i = 0; i < newRoom.length; i++) {
|
|
if (i >= 4) {
|
|
newRoom[i] = parseFloat(newRoom[i]);
|
|
} else {
|
|
newRoom[i] = parseInt(newRoom[i]);
|
|
}
|
|
if (1 < i && i < 4) {
|
|
newRoom[i] -= 1;
|
|
}
|
|
}
|
|
while (room.length < 4) {
|
|
try {
|
|
room.push(1);
|
|
} catch {
|
|
room = [0, 0, 1, 1];
|
|
}
|
|
}
|
|
rooms.push(newRoom);
|
|
});
|
|
console.log(rooms);
|
|
// init variables
|
|
const cellSize = scaleHeight(0.0381);
|
|
const origX = scaleX(0.0734);
|
|
const origY = scaleY(0.1377);
|
|
// walls
|
|
dungeonContext.clearRect(0, 0, dungeonCanvas.width, dungeonCanvas.height);
|
|
dungeonFXContext.clearRect(0, 0, dungeonFXCanvas.width, dungeonFXCanvas.height);
|
|
rooms.forEach(room => {
|
|
//top left corner
|
|
dungeonContext.drawImage(dungeonShapetopleft, origX + cellSize * room[0], origY + cellSize * room[1], cellSize, cellSize);
|
|
dungeonFXContext.drawImage(dungeonFXtopleft, origX + cellSize * room[0], origY + cellSize * room[1], cellSize, cellSize);
|
|
//top right corner
|
|
dungeonContext.drawImage(dungeonShapetopright, origX + cellSize * (room[0] + room[2]), origY + cellSize * room[1], cellSize, cellSize);
|
|
dungeonFXContext.drawImage(dungeonFXtopright, origX + cellSize * (room[0] + room[2]), origY + cellSize * room[1], cellSize, cellSize);
|
|
//bottom left corner
|
|
dungeonContext.drawImage(dungeonShapebottomleft, origX + cellSize * room[0], origY + cellSize * (room[1] + room[3]), cellSize, cellSize);
|
|
dungeonFXContext.drawImage(dungeonFXbottomleft, origX + cellSize * room[0], origY + cellSize * (room[1] + room[3]), cellSize, cellSize);
|
|
//bottom right corner
|
|
dungeonContext.drawImage(dungeonShapebottomright, origX + cellSize * (room[0] + room[2]), origY + cellSize * (room[1] + room[3]), cellSize, cellSize);
|
|
dungeonFXContext.drawImage(dungeonFXbottomright, origX + cellSize * (room[0] + room[2]), origY + cellSize * (room[1] + room[3]), cellSize, cellSize);
|
|
// horizontal walls
|
|
for (var i = 1; i < room[2]; i++) {
|
|
//top walls
|
|
dungeonContext.drawImage(dungeonShapetop, origX + cellSize * (room[0] + i), origY + cellSize * room[1], cellSize, cellSize);
|
|
dungeonFXContext.drawImage(dungeonFXtop, origX + cellSize * (room[0] + i), origY + cellSize * room[1], cellSize, cellSize);
|
|
//bottom walls
|
|
dungeonContext.drawImage(dungeonShapebottom, origX + cellSize * (room[0] + i), origY + cellSize * (room[1] + room[3]), cellSize, cellSize);
|
|
dungeonFXContext.drawImage(dungeonFXbottom, origX + cellSize * (room[0] + i), origY + cellSize * (room[1] + room[3]), cellSize, cellSize);
|
|
}
|
|
// vertical walls
|
|
for (var i = 1; i < room[3]; i++) {
|
|
// left walls
|
|
dungeonContext.drawImage(dungeonShapeleft, origX + cellSize * room[0], origY + cellSize * (room[1] + i), cellSize, cellSize);
|
|
dungeonFXContext.drawImage(dungeonFXleft, origX + cellSize * room[0], origY + cellSize * (room[1] + i), cellSize, cellSize);
|
|
// right walls
|
|
dungeonContext.drawImage(dungeonShaperight, origX + cellSize * (room[0] + room[2]), origY + cellSize * (room[1] + i), cellSize, cellSize);
|
|
dungeonFXContext.drawImage(dungeonFXright, origX + cellSize * (room[0] + room[2]), origY + cellSize * (room[1] + i), cellSize, cellSize);
|
|
}
|
|
});
|
|
dungeonContext.drawImage(dungeonOuterShape, 0, 0, dungeonCanvas.width, dungeonCanvas.height);
|
|
dungeonFXContext.drawImage(dungeonOuterFX, 0, 0, dungeonFXCanvas.width, dungeonFXCanvas.height);
|
|
// text
|
|
var textObjects = {};
|
|
textObjects.title = {name:'Title', text:'', x:0.0854, y:0.0522, width:0.8292, height:0.0543, oneLine:true, font:'belerenbsc', size:0.0381, color:'white', align:'center'};
|
|
roomNumber = 1;
|
|
rooms.forEach(room => {
|
|
var textbox = {name:`Dungeon Room ${roomNumber}`, text:`Room ${roomNumber}{lns}{fontmplantin}{fontsize-8}Effect.`, x:(origX + cellSize * (room[0] + 0.5)) / card.width, y:(origY + cellSize * (room[1] + 0.5)) / card.height, width:(cellSize * room[2]) / card.width, height:(cellSize * room[3]) / card.height, font:'belerenb', size:0.0324, align:'center'};
|
|
if (room[3] < 3) {
|
|
textbox.text = textbox.text.replace('{lns}', ' ');
|
|
}
|
|
textObjects[`dungeonRoom${roomNumber}`] = textbox;
|
|
roomNumber ++;
|
|
})
|
|
// doorways
|
|
rooms.push([0,-2,16,1,7]);
|
|
rooms.forEach(room => {
|
|
doorways = room.slice(4);
|
|
doorways.forEach(doorway => {
|
|
dungeonContext.globalCompositeOperation = 'destination-out';
|
|
dungeonFXContext.globalCompositeOperation = 'destination-out';
|
|
dungeonContext.drawImage(dungeonDoorwayCutout, origX + cellSize * (room[0] + doorway - 0.5), origY + cellSize * (room[1] + room[3]));
|
|
dungeonFXContext.drawImage(dungeonDoorwayCutout, origX + cellSize * (room[0] + doorway - 0.5), origY + cellSize * (room[1] + room[3]));
|
|
dungeonContext.globalCompositeOperation = 'source-over';
|
|
dungeonFXContext.globalCompositeOperation = 'source-over';
|
|
dungeonContext.drawImage(dungeonDoorwayShape, origX + cellSize * (room[0] + doorway - 0.5), origY + cellSize * (room[1] + room[3]));
|
|
dungeonFXContext.drawImage(dungeonDoorwayFX, origX + cellSize * (room[0] + doorway - 0.5), origY + cellSize * (room[1] + room[3]));
|
|
if (room[1] != -2 && room[1] + room[3] != 18) {
|
|
dungeonFXContext.drawImage(dungeonDoorwayArrow, origX + cellSize * (room[0] + doorway + 0.5), origY + cellSize * (room[1] + room[3] + 0.5));
|
|
}
|
|
});
|
|
});
|
|
// apply textures and FX
|
|
dungeonContext.globalCompositeOperation = 'source-in';
|
|
texture = window[`dungeonTexture${document.querySelector('#dungeon-color').value}`];
|
|
dungeonContext.drawImage(texture, 0, 0, dungeonCanvas.width, dungeonCanvas.height);
|
|
dungeonContext.globalCompositeOperation = 'source-over';
|
|
dungeonContext.drawImage(dungeonFXCanvas, 0, 0, dungeonCanvas.width, dungeonCanvas.height)
|
|
// finish
|
|
loadTextOptions(textObjects);
|
|
drawTextBuffer();
|
|
}
|