dungeons!

img/frames/dungeon/regular/frame.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M1130,1933C1218.3,1932.75 1427.22,1918.35 1440,1765L1440,85C1437.14,71.038 1428.74,62.781 1415,60L85,60C71.263,62.781 62.855,71.038 60,85L60,1765C72.783,1918.35 281.698,1932.75 370,1933L1130,1933ZM86,1833L86,265L1414,265L1414,1833L86,1833ZM105.672,232.739C91.785,221.58 78.477,193.794 78,161C78.481,127.948 91.996,99.984 106,89L1394,89C1408,99.984 1421.52,127.948 1422,161C1421.52,194.052 1408,222.016 1394,233L106,233L105.672,232.739Z" style="fill:rgb(0,123,67);"/>
+</svg>

img/frames/dungeon/regular/pinline.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect id="Card" x="0" y="0" width="1500" height="2100" style="fill:none;"/>
+    <g id="Card1" serif:id="Card">
+        <path id="Dungeon-Outline" serif:id="Dungeon Outline" d="M86,1833L86,265L1414,265L1414,1833L86,1833ZM1390,289L110,289L110,1809L1390,1809L1390,289ZM105.672,232.739C91.785,221.58 78.477,193.794 78,161C78.481,127.948 91.996,99.984 106,89L1394,89C1408,99.984 1421.52,127.948 1422,161C1421.52,194.052 1408,222.016 1394,233L106,233L105.672,232.739ZM112,100L1388,100C1389.29,100 1390.51,100.626 1391.26,101.68C1405.33,121.453 1410.29,141.227 1410.29,161C1410.29,180.773 1405.33,200.547 1391.26,220.32C1390.51,221.374 1389.29,222 1388,222L112,222C110.706,222 109.492,221.374 108.741,220.32C94.667,200.547 89.714,180.773 89.714,161C89.714,141.227 94.667,121.453 108.741,101.68C109.492,100.626 110.706,100 112,100Z" style="fill:rgb(239,56,39);"/>
+    </g>
+</svg>

js/creator-20.js

@@ -1392,6 +1392,9 @@ function drawCard() {
 	if (card.version.includes('saga') && typeof sagaCanvas !== "undefined") {
 		cardContext.drawImage(sagaCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
 	}
+	if (card.version.includes('dungeon') && typeof dungeonCanvas !== "undefined") {
+		cardContext.drawImage(dungeonCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
+	}
 	cardContext.drawImage(textCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
 	cardContext.drawImage(setSymbol, scaleX(card.setSymbolX), scaleY(card.setSymbolY), setSymbol.width * card.setSymbolZoom, setSymbol.height * card.setSymbolZoom)
 	cardContext.drawImage(bottomInfoCanvas, 0, 0, cardCanvas.width, cardCanvas.height);

js/frames/groupMisc-1.js

@@ -1,4 +1,5 @@
 loadFramePacks([
+	{name:'Dungeon (AFR)', value:'Dungeon'},
 	{name:'Future Shifted', value:'FutureRegular'},
 	{name:'Seventh Edition', value:'Seventh'},
 	{name:'Fifth Edition', value:'SeventhButFifth'},

js/frames/packDungeon.js

@@ -1,20 +1,21 @@
 //Create objects for common properties across available frames
-// var masks = [{src:'/img/frames/saga/sagaMaskPinline.png', name:'Pinline'}, {src:'/img/frames/m15/regular/m15MaskTitle.png', name:'Title'}, {src:'/img/frames/saga/sagaMaskType.png', name:'Type'}, {src:'/img/frames/saga/sagaMaskFrame.png', name:'Frame'}, {src:'/img/frames/saga/sagaMaskBanner.png', name:'Banner'}, {src:'/img/frames/saga/sagaMaskBannerRight.png', name:'Banner (Right)'}, {src:'/img/frames/saga/sagaMaskText.png', name:'Text'}, {src:'/img/frames/saga/sagaMaskTextRight.png', name:'Text (Right)'}, {src:'/img/frames/saga/sagaMaskBorder.png', name:'Border'}];
+var masks = [{src:'/img/frames/dungeon/regular/pinline.svg', name:'Pinline'}, {src:'/img/frames/m15/regular/m15MaskTitle.png', name:'Title'}, {src:'/img/frames/dungeon/regular/frame.svg', name:'Frame'}];
 //defines available frames
 availableFrames = [
-	{name:'White Frame', src:'/img/frames/dungeon/regular/b.png', complementary:7},
-	{name:'Blue Frame', src:'/img/frames/dungeon/regular/b.png', complementary:7},
-	{name:'Black Frame', src:'/img/frames/dungeon/regular/b.png', complementary:7},
-	{name:'Red Frame', src:'/img/frames/dungeon/regular/b.png', complementary:7},
-	{name:'Green Frame', src:'/img/frames/dungeon/regular/b.png', complementary:7},
-	{name:'Multicolored Frame', src:'/img/frames/dungeon/regular/b.png', complementary:7},
-	{name:'Land Frame', src:'/img/frames/dungeon/regular/b.png', complementary:7},
+	{name:'White Frame', src:'/img/frames/dungeon/regular/w.png', complementary:6, masks:masks},
+	{name:'Blue Frame', src:'/img/frames/dungeon/regular/u.png', complementary:6, masks:masks},
+	{name:'Black Frame', src:'/img/frames/dungeon/regular/b.png', complementary:6, masks:masks},
+	{name:'Red Frame', src:'/img/frames/dungeon/regular/r.png', complementary:6, masks:masks},
+	{name:'Green Frame', src:'/img/frames/dungeon/regular/g.png', complementary:6, masks:masks},
+	{name:'Colorless Frame', src:'/img/frames/dungeon/regular/c.png', complementary:6, masks:masks},
 	{name:'Floor', src:'/img/frames/dungeon/regular/floor.png'}
 ];
 //disables/enables the "Load Frame Version" button
 document.querySelector('#loadFrameVersion').disabled = false;
 //defines process for loading this version, if applicable
 document.querySelector('#loadFrameVersion').onclick = async function() {
+	// message
+	notify('Dungeons should now be fully functional, though the interface can be difficult. See the "Dungeon" tab to adjust rooms, and for more information.', 15);
 	//resets things so that every frame doesn't have to
 	await resetCardIrregularities();
 	//sets card version
@@ -25,15 +26,14 @@ document.querySelector('#loadFrameVersion').onclick = async function() {
 	card.artBounds = {x:0, y:0, width:1, height:1};
 	autoFitArt();
 	//set symbol bounds
-	card.setSymbolBounds = {x:0.9227, y:0.8739, width:0.12, height:0.0381, vertical:'center', horizontal: 'right'};
+	card.setSymbolBounds = {x:0.5, y:0.8967, width:0.12, height:0.0410, vertical:'center', horizontal: 'center'};
 	resetSetSymbol();
 	//watermark bounds
 	card.watermarkBounds = {x:0.3027, y:0.4748, width:0.3547, height:0.6767};
 	resetWatermark();
 	//text
 	loadTextOptions({
-		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'},
-		room1: {name:'Ability 1', text:'', x:0.1334, y:0.2896, width:0.35, height:0.1786, size:0.0305},
+		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'}
 	});
 }
 //loads available frames

js/frames/versionDungeon.js

@@ -2,38 +2,66 @@
 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'>Adjust the height (first input) and chapter count (second input) of each Dungeon ability</h5>
-		<textarea id='dungeon-input' type='number' class='input margin-bottom' onchange='dungeonEdited();'>0,0,16,2\n0,2,16,17</textarea>
+		<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 dungeonFX1 = new Image();
-	dungeonFX1.src = '/img/frames/dungeon/walls/fx/straight.png';
-	var dungeonFX2 = new Image();
-	dungeonFX2.src = '/img/frames/dungeon/walls/fx/corner.png';
-	var dungeonFX3 = new Image();
-	dungeonFX3.src = '/img/frames/dungeon/walls/fx/t.png';
-	var dungeonFX4 = new Image();
-	dungeonFX4.src = '/img/frames/dungeon/walls/fx/cross.png';
-	var dungeonShape1 = new Image();
-	dungeonShape1.src = '/img/frames/dungeon/walls/shape/straight.png';
-	var dungeonShape2 = new Image();
-	dungeonShape2.src = '/img/frames/dungeon/walls/shape/corner.png';
-	var dungeonShape3 = new Image();
-	dungeonShape3.src = '/img/frames/dungeon/walls/shape/t.png';
-	var dungeonShape4 = new Image();
-	dungeonShape4.src = '/img/frames/dungeon/walls/shape/cross.png';
-	// var dungeonTexture = new Image();
-	// dungeonTexture.src = '/img/frames/dungeon/dungeonTexture.png';
-	dungeonShape4.onload = dungeonEdited;
+	var dungeonFXtop = new Image(); dungeonFXtop.src = '/img/frames/dungeon/walls/fx/top.png';
+	var dungeonFXleft = new Image(); dungeonFXleft.src = '/img/frames/dungeon/walls/fx/left.png';
+	var dungeonFXbottom = new Image(); dungeonFXbottom.src = '/img/frames/dungeon/walls/fx/bottom.png';
+	var dungeonFXright = new Image(); dungeonFXright.src = '/img/frames/dungeon/walls/fx/right.png';
+	var dungeonFXtopright = new Image(); dungeonFXtopright.src = '/img/frames/dungeon/walls/fx/topright.png';
+	var dungeonFXtopleft = new Image(); dungeonFXtopleft.src = '/img/frames/dungeon/walls/fx/topleft.png';
+	var dungeonFXbottomright = new Image(); dungeonFXbottomright.src = '/img/frames/dungeon/walls/fx/bottomright.png';
+	var dungeonFXbottomleft = new Image(); dungeonFXbottomleft.src = '/img/frames/dungeon/walls/fx/bottomleft.png';
+	var dungeonShapetop = new Image(); dungeonShapetop.src = '/img/frames/dungeon/walls/shape/top.png';
+	var dungeonShapeleft = new Image(); dungeonShapeleft.src = '/img/frames/dungeon/walls/shape/left.png';
+	var dungeonShapebottom = new Image(); dungeonShapebottom.src = '/img/frames/dungeon/walls/shape/bottom.png';
+	var dungeonShaperight = new Image(); dungeonShaperight.src = '/img/frames/dungeon/walls/shape/right.png';
+	var dungeonShapetopright = new Image(); dungeonShapetopright.src = '/img/frames/dungeon/walls/shape/topright.png';
+	var dungeonShapetopleft = new Image(); dungeonShapetopleft.src = '/img/frames/dungeon/walls/shape/topleft.png';
+	var dungeonShapebottomright = new Image(); dungeonShapebottomright.src = '/img/frames/dungeon/walls/shape/bottomright.png';
+	var dungeonShapebottomleft = new Image(); dungeonShapebottomleft.src = '/img/frames/dungeon/walls/shape/bottomleft.png';
+	var dungeonDoorwayShape = new Image(); dungeonDoorwayShape.src = '/img/frames/dungeon/walls/shape/doorway.png';
+	var dungeonDoorwayFX = new Image(); dungeonDoorwayFX.src = '/img/frames/dungeon/walls/fx/doorway.png';
+	var dungeonDoorwayArrow = new Image(); dungeonDoorwayArrow.src = '/img/frames/dungeon/walls/arrow.png';
+	var dungeonDoorwayCutout = new Image(); dungeonDoorwayCutout.src = '/img/frames/dungeon/walls/doorway.png';
+	var dungeonOuterShape = new Image(); dungeonOuterShape.src = '/img/frames/dungeon/walls/shape/outer.png';
+	var dungeonOuterFX = new Image(); dungeonOuterFX.src = '/img/frames/dungeon/walls/fx/outer.png';
+	var dungeonTextureW = new Image(); dungeonTextureW.src = '/img/frames/dungeon/walls/textures/w.png';
+	var dungeonTextureU = new Image(); dungeonTextureU.src = '/img/frames/dungeon/walls/textures/u.png';
+	var dungeonTextureB = new Image(); dungeonTextureB.src = '/img/frames/dungeon/walls/textures/b.png';
+	var dungeonTextureR = new Image(); dungeonTextureR.src = '/img/frames/dungeon/walls/textures/r.png';
+	var dungeonTextureG = new Image(); dungeonTextureG.src = '/img/frames/dungeon/walls/textures/g.png';
+	var dungeonTextureC = new Image(); dungeonTextureC.src = '/img/frames/dungeon/walls/textures/c.png';
+	dungeonTextureC.onload = dungeonEditedBuffer;
+}
+
+var drawingDungeon;
+function dungeonEditedBuffer() {
+	clearTimeout(drawingDungeon);
+	drawingDungeon = setTimeout(dungeonEdited, 500);
 }
 
 function dungeonEdited() {
@@ -43,48 +71,103 @@ function dungeonEdited() {
 	data.replace(/ /g, '').split('\n').forEach(room => {
 		newRoom = room.split(',');
 		for (i = 0; i < newRoom.length; i++) {
-			newRoom[i] = parseInt(newRoom[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);
-	
-	//draw to dungeon canvas
+	// 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();
-	drawCard();
 }
-
-//Data structures...
-
-class Vertex {
-	constructor(x = 0, y = 0, up = false, down = false, left = false, right = false) {
-		this.x = x;
-		this.y = y;
-		this.up = up;
-		this.down = down;
-		this.left = left;
-		this.right = right;
-	}
-}
-
-class Graph {
-    // defining vertex array and
-    // adjacent list
-    constructor(noOfVertices)
-    {
-        this.noOfVertices = noOfVertices;
-        this.AdjList = new Map();
-    }
-  
-    // functions to be implemented
-  
-    // addVertex(v)
-    // addEdge(v, w)
-    // printGraph()
-  
-    // bfs(v)
-    // dfs(v)
-}