<div id="header" class="header"><a href="#"><h3>ZEPHYRUS SHADOWSHADE </h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Empire-Fable-Characters->Empire-Fable-Characters]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> ZEPHYRUS SHADOWSHADE DESCRIPTION </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>ADALYNN MECHMASTER</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Empire-Fable-Characters->Empire-Fable-Characters]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.midjourney.com/300ea1af-51b3-486b-a777-5608ccb15a3e/grid_0.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> ADALYNN MECHMASTER DESCRIPTION -- Grew up in the rough and tumble Wharf Slums of Ocean Deep -- Mechanic on the Cloud Strider. -- Motivations: Wants to get her parents out of the Wharf Slums and of course she wants fortune and glory. </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>AIRSHIP PORT</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Ocean Deep->Ocean Deep]]</div> <div id="linkContainer" class="linkContainer">[[Cloud Strider->Cloud Strider]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.midjourney.com/0e88e1d4-e700-4d12-96be-77e22b3fbcb6/grid_0.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> As visitors approach the airship port, a sense of wonder and excitement takes hold of them. The port, situated in the heart of a bustling city, is surrounded by towering buildings made of brass and steel. As they draw closer, they begin to see the magnificent airships moored to the port's giant docking towers. The airships are massive and awe-inspiring, their gleaming hulls crafted from a combination of brass, steel, and glass. The airship port itself is a marvel of engineering, sprawling across several city blocks with towering hangars and towering docks that can accommodate dozens of airships at once. The port's entrance is marked by a massive wrought iron gate, flanked by two towering clock towers. The gate is adorned with intricate brass filigree, and a pair of brass automatons stand guard on either side. Upon entering the gate, visitors find themselves in a wide, bustling plaza that serves as the heart of the airship port. The plaza is surrounded by towering hangars and warehouses, each adorned with ornate brass and steel architecture. The ground is paved with a mosaic of brass and stone, and dozens of airship crews can be seen scurrying about, loading and unloading cargo from the various vessels. In the center of the plaza stands a towering statue of a legendary airship captain, his hand outstretched as if greeting visitors to the port. The statue is made of brass and bronze, gleaming in the sunlight as a testament to the port's proud history. The sheer scale of the port is staggering, with towering docks, massive hangars, and bustling warehouses at every turn. The airship crews bustle about, loading and unloading cargo, while merchants and travelers bustle about, eager to get a glimpse of the wondrous vessels moored at the port. The airships themselves are a sight to behold, crafted from a combination of brass, steel, and glass, with intricate engines that hum and glow with otherworldly power. The ships come in all shapes and sizes, from sleek, fast-moving vessels designed for speed and agility to massive, lumbering behemoths built to haul massive amounts of cargo across vast distances. Visitors can't help but feel a sense of wonder and awe as they explore the bustling port, where fantasy and steam punk collide in a glorious explosion of technology and imagination. The airship port is a place where anything is possible, whether travelers are looking to explore the world or merchants are seeking to trade goods across the continent. </p> </marquee> </div><div id="header" class="header"><a href="#"><h3>ARABELLA BRASSFORD</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Empire-Fable-Characters->Empire-Fable-Characters]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.midjourney.com/2961ed58-b296-40b0-88f2-9452c945df65/grid_0.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> ARABELLA BRASSFORD DESCRIPTION -- Has the need to "measure up" against the other scientists in the science guild of Ocean Deep and her brother Count Brassford, who was always her cherished dads favirite not her. She feels liek the black sheep of the family -- Motivations include showing up her brother and making a name for her self by scientific and global discoverery. </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>ARIA SHADOWSHADE </h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Empire-Fable-Characters->Empire-Fable-Characters]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> ARIA SHADOWSHADE DESCRIPTION </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>ARMOR SHOP</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Merchant District->Merchant District]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> ARMOR SHOP </p> </marquee> </div> </div>Turns: 1: First Episode Gwaldor Character Arc -- Has been drinking heavily latly due to financial difficulties and the realization he has not done enough in his life -- Motivations include exploration and the need to map the entire known world Arabella Brassford Character Arc -- Has the need to "measure up" against the other scientists in the science guild of Ocean Deep and her brother Count Brassford, who was always her cherished dads favirite not her. She feels liek the black sheep of the family -- Motivations include showing up her brother and making a name for her self by scientific and global discoverery. Adalyn Mechmaster Character Arc -- Grew up in the rough and tumble Wharf Slums of Ocean Deep -- Mechanic on the Cloud Strider. -- Motivations: Wants to get her parents out of the Wharf Slums and of course she wants fortune and glory. Thralgar IronGear Character Arc -- Orc from Wahg Morbash having settled in to the Merchant district of Ocean deep. -- Motivations Wants to import Orcish Hardened Ceramics into Ocean deep. -- Wants to be accepted by the merchants guild. Zephyrus Shadowshade -- -- Aria Shadow Shade -- -- First Episode Scene-1 Gwaldor and crew are piloting the Cloud Strider over the Sea of Storms They see an embatled drow Light air skiff with Zephyrus and Aria Shadowshade. The Brother and sister have been attacked by a pirate airship. Gwaldor and the crew of the cloud strider swoop in and fend off the air pirates. -Gwaldor barks orders -Thralgar mans the main gun -Adalyn jumps on the multi fire air cannon -Arabella Watches through a telescope and reports to Gwaldor Causing the air pirates to retreat after exchanging cannon fire with the cloud strider and the burning drow light air skiff. The Cloud Strider docks with the burning drow light air skiff and evacuates Aria and Zephyrus. The drow siblings explain of thier escape from the Drow main city of Yhed Nasad. They explain that they are seeking asylum and bring information regarding a great evil arising from the lands of the South. The Drow are divided and the Royal brother and sister seek the help of the Humans and Dwarves. They are thank full and apeal to Gwaldor for his influence in both the human and dwarven factions. The party makes it way to ocean deep aboard the cloud strider. They land in the great airship Port of Ocean Deep. AI Scene 1 Dialogue Scene 1: Gwaldor and crew are piloting the Cloud Strider over the Sea of Storms Gwaldor: Keep your eyes peeled, everyone. This is the Sea of Storms, and we never know what kind of trouble we might run into. Thralgar: Aye, Captain. I've got the main gun ready and waiting. Adalyn: And I've got the multi-fire air cannon primed and ready to go. Arabella: (looking through her telescope) Captain, I see something on the horizon. It looks like an airship in distress. Gwaldor: (nodding) Alright, crew. Let's move in and assess the situation. As they approach the distressed airship, they see it being attacked by a group of air pirates. Gwaldor: Battle stations, everyone! Thralgar, open fire on those pirates! Thralgar: (grinning) My pleasure, Captain! Adalyn: (jumping on the multi-fire air cannon) Let's show them what the Cloud Strider is made of! Arabella: (reporting to Gwaldor) Captain, the air pirates are trying to flank us from the left. Gwaldor: (barking orders) Adalyn, focus your fire on the left flank! Thralgar, keep them pinned down with the main gun! We'll take them on head-on! The Cloud Strider and the air pirates exchange cannon fire, with Adalyn's multi-fire air cannon providing cover fire. Eventually, the pirates retreat after taking heavy damage. Gwaldor: (smiling) Great work, crew! That was some top-notch flying and shooting. Thralgar: (laughing) Aye, we showed those pirates who's boss! Adalyn: (proudly) The Cloud Strider can take on anyone and come out on top! Arabella: (intrigued) I wonder who those drow siblings are and what they were doing on that airship. Gwaldor: (nodding) Let's find out. We'll dock with the burning airship and evacuate them to safety. Then we'll get to the bottom of this. SCENE 1 BETTER Scene 1: The Cloud Strider Comes to the Rescue As Gwaldor and his crew flew over the Sea of Storms, they saw an air pirate ship attacking a light drow air skiff. Gwaldor: "By the gods, that air skiff is in trouble! We have to help them!" Thralgar: "Aye, Captain! Let's show these pirates what we're made of!" Adalyn: "I'll man the multi-fire air cannon, Captain. Let's take them out!" Arabella: "Captain, I can see the air pirate ship closing in. We have to move quickly!" As they approached the air pirate ship, Thralgar manned the main gun, and Adalyn took control of the multi-fire air cannon. The air pirates had the drow siblings outnumbered, but the Cloud Strider crew was determined to even the odds. Thralgar: "Captain, I've got a clear shot. Shall I take it?" Gwaldor: "Do it, Thralgar! Take out that air pirate ship!" The main gun fired, hitting the air pirate ship with a deafening explosion. Adalyn's multi-fire air cannon followed up, unleashing a barrage of fire onto the air pirates. Adalyn: "Ha! Take that, you scurvy dogs!" Arabella: "Captain, the air pirate ship is retreating. I think we did it!" Gwaldor: "Great work, crew! Let's go check on those drow siblings and see what we can do to help." As they landed the Cloud Strider and approached the drow siblings, Zephyrus and Aria, Gwaldor spoke to them. Gwaldor: "Are you two okay? What were you doing out here alone?" Zephyrus: "We were fleeing the Drow city of Yhed Nasad. It's not safe for us there anymore." Aria: "We were attacked by those air pirates, and we thought we were done for until you showed up." Gwaldor: "Well, you're safe now. We'll take you to Ocean Deep and figure out a way to help you." AI Scene 2 Dialogue Scene 2: On board the Cloud Strider, after the rescue Gwaldor: Are you both alright? You were lucky we happened to be flying by. Zephyrus: Thank you so much for rescuing us. We owe you our lives. Aria: We've been on the run for days, ever since we discovered the plans of the evil sorceress who is trying to take over our city. Arabella: (intrigued) Tell us more about this sorceress. What kind of power does she possess? Aria: She's been studying ancient texts and has uncovered a way to tap into dark magic that has not been seen for centuries. She's already taken over several of the city's major factions and has a large army at her disposal. Thralgar: (gruffly) Sounds like we should be prepared for a tough fight. Adalyn: (determined) We can take on anything with the Cloud Strider on our side. Gwaldor: (soberly) Let's not get ahead of ourselves. We need to gather more information and come up with a plan. But first, we need to make sure these two are safe and secure. Zephyrus: (smiling) We appreciate your concern, but we can take care of ourselves. We are skilled in the art of evasion and stealth. Aria: (nodding) Yes, we have survived this long by being careful and resourceful. Arabella: (impressed) I can see you are both very capable. Perhaps we can work together to uncover more information about this sorceress and her plans. Gwaldor: (grinning) That's the spirit, Arabella. We'll need all the help we can get to stop this evil from spreading. Let's head to Ocean Deep and regroup with the rest of our crew.<style> tw-sidebar { display: none; } tw-story { position: absolute; width:100% height:100%; margin:10px; margin-right: auto; margin-left: auto; padding:0px } tw-passage { position: absolute; width:100% height:100%; margin:10px; margin-right: auto; margin-left: auto; padding:0px; } .canvas-container { background-size:contain; position:relative; width: 800px; height: 800px; z-index:0; background-image:url('https://empirefable.magwebdesigns.net/wp/Ocean_Deep_Map_2-22-23.webp'); } #canvas { background-size:contain; position: relative; width: 800px; height: 800px; opacity: 1; /* set the opacity to 50% */ z-index:1; } #text-container { position: absolute; min-width: 800px; min-height: 800px; opacity: 1; /* set the opacity to 50% */ z-index:1; } #text { position: absolute; min-width: 800px; min-heightheight: 800px; opacity: 1; /* set the opacity to 50% */ z-index:1; } </style> <div id="canvas-container" class="canvas-container"> <div id="status" class="status"> STATUS </div> <div id="text" class="text"> <marquee behavior="scroll" direction="up" scrollamount="2"> <p> TEXT GOES HERE TEXY GOES HERE </p> </marquee> </div> <canvas id="canvas" class="canvas" ontouchstart="handleTouchStart(event)" ontouchmove="handleTouchMove(event)" ontouchend="handleTouchEnd(event)"></canvas> </div> <script> //// MOUSE / TOUCH POINTER //////////////////////////////////// class Pointer { constructor(xPos, yPos, xSize, ySize, color, imgSrc) { this.xPos = xPos; this.yPos = yPos; this.xSize = xSize; this.ySize = ySize; this.color = color; this.imgSrc = imgSrc; this.collision = false; } updatePosition(xPos, yPos) { this.xPos = xPos; this.yPos = yPos; } draw(ctx) { ctx.beginPath(); ctx.arc( this.xPos + this.xSize / 2, this.yPos + this.ySize / 2, this.xSize / 2, 0, 2 * Math.PI ); ctx.fillStyle = this.color; ctx.fill(); } } ////// IMAGE CONTAINER ////////////////////////////////////////////////////// class ImageContainer { constructor(imageUrl, x, y, width, height,) { this.image = new Image(); this.image.src = imageUrl; this.image.onload = () => { this.isLoaded = true; }; this.x = x; this.y = y; this.width = width; this.height = height; } draw(ctx) { if (this.isLoaded) { ctx.drawImage(this.image, this.x, this.y, this.width, this.height); } } } ///// CLICKABLE HOT SPOT ////////////////////////////////////////////// class HotSpot { constructor(id, xPos, yPos, text, imgSrc, xSize, ySize, color) { this.id = id; this.xPos = xPos; this.yPos = yPos; this.text = text; this.imgSrc = imgSrc; this.xSize = xSize; this.ySize = ySize; this.color = color; } checkCollision(pointer) { if ( pointer.xPos < this.xPos + this.xSize && pointer.xPos + pointer.xSize > this.xPos && pointer.yPos < this.yPos + this.ySize && pointer.yPos + pointer.ySize > this.yPos ) { console.log("COLLISION:" + this.id ); document.getElementById("status").innerHTML = "COLLISION WITH " + this.id; } } draw(ctx) { ctx.globalAlpha = 0.25; // set global alpha to 50% transparency ctx.beginPath(); ctx.rect(this.xPos, this.yPos, this.xSize, this.ySize); ctx.fillStyle = this.color; ctx.fill(); ctx.globalAlpha = 1; // reset global alpha back to default (fully opaque) } } //// MOVEVABLE NODE /////////////////////////////////////////////////////////////////// class MovableNode { constructor(title, xPos, yPos, width, height) { this.title = title; this.xPos = xPos; this.yPos = yPos; this.width = width; this.height = height; this.isDragging = false; this.offsetX = 0; this.offsetY = 0; } draw(context) { // Draw the node on the canvas context.beginPath(); context.rect(this.xPos, this.yPos, this.width, this.height); context.fillStyle = "#e3e3e3"; context.fill(); context.lineWidth = 2; context.strokeStyle = "#000000"; context.stroke(); context.closePath(); // Draw the title inside the node context.font = "bold 12px Arial"; context.fillStyle = "#000000"; context.textAlign = "center"; context.fillText( this.title, this.xPos + this.width / 2, this.yPos + this.height / 2 ); } isMouseOver(x, y) { // Check if the mouse is over the node return ( x >= this.xPos && x <= this.xPos + this.width && y >= this.yPos && y <= this.yPos + this.height ); } onTouchStart(event) { const touch = event.touches[0]; if (touch.clientX >= this.xPos && touch.clientX <= this.xPos + this.width && touch.clientY >= this.yPos && touch.clientY <= this.yPos + this.height) { this.isDragging = true; this.offsetX = touch.clientX - this.xPos; this.offsetY = touch.clientY - this.yPos; } } startDragging(x, y) { // Start dragging the node this.isDragging = true; this.offsetX = x - this.xPos; this.offsetY = y - this.yPos; } onTouchMove(event) { if (this.isDragging) { const touch = event.touches[0]; this.xPos = touch.clientX - this.offsetX; this.yPos = touch.clientY - this.offsetY; } } stopDragging() { // Stop dragging the node this.isDragging = false; } onTouchEnd(event) { this.isDragging = false; } updatePosition(x, y) { // Update the node's position while dragging this.xPos = x - this.offsetX; this.yPos = y - this.offsetY; } addEventListeners(canvas) { // Add event listeners to the canvas to handle dragging canvas.addEventListener("mousedown", (event) => { if (this.isMouseOver(event.offsetX, event.offsetY)) { this.startDragging(event.offsetX, event.offsetY); } }); canvas.addEventListener("mousemove", (event) => { if (this.isDragging) { this.updatePosition(event.offsetX, event.offsetY); } }); canvas.addEventListener("mouseup", () => { this.stopDragging(); }); canvas.addEventListener("mouseleave", () => { this.stopDragging(); }); // event handlers function handleTouchStart(event) { movableNode.onTouchStart(event); } function handleTouchMove(event) { movableNode.onTouchMove(event); } function handleTouchEnd(event) { movableNode.onTouchEnd(event); } } } //// INSTANTIATE CANVAS AND GET CONTEXT //////////////////////////////// const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 800; ///// INSTANTIATE HOT SPOTS //////////////////////////////////////////////////////////////// const hotSpot1 = new HotSpot("hotspot1", 150, 0, "Click me", null, 100, 100, "white"); const hotSpot2 = new HotSpot("hotspot2", 250, 250, "HOT SPOT 2", null, 100, 100, "white"); //// INSTANCE IMAGE CONTAINERS //////////////////////////////////////////////////////// const imageContainerOne = new ImageContainer("https://empirefable.magwebdesigns.net/images/Female-Human-Explorer-1-Front.png", 300, -50, 700, 700, ); const imageContainerTwo = new ImageContainer("https://empirefable.magwebdesigns.net/images/dwarven_house_2_scaled_transparent.webp", 150, 0, 100, 100, ); const imageContainerThree = new ImageContainer("https://empirefable.magwebdesigns.net/images/dwarven_house_scaled_transparent_1.png", 250, 250, 100, 100, ); ///// INSTANTIATE POINTER ////////////////////////////////////////////////////////////////////// const pointer = new Pointer(0, 0, 20, 20, "red", null); //// INSTANTIATE MOVAEBLE NODE const moveNodeOne = new MovableNode("MOVABLE NODE", 50, 50, 100, 50); ///// update pointer position document.addEventListener("mousemove", (event) => { const rect = canvas.getBoundingClientRect(); pointer.updatePosition( event.clientX - rect.left, event.clientY - rect.top ); }); // check collision between pointer and hot spots on mouse click document.addEventListener("click", () => { hotSpot1.checkCollision(pointer); hotSpot2.checkCollision(pointer); }); //// DRAW GRID /////////////////////////////////////////////////////////////////////// function drawGrid(ctx, width, height) { // Draw vertical lines for (let x = 50; x <= width; x += 50) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); ctx.closePath(); // Draw x-axis label ctx.font = '18px Arial'; ctx.fillStyle = '#000000'; ctx.fillText(x.toString(), x + 5, 15); } // Draw horizontal lines for (let y = 50; y <= height; y += 50) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke(); ctx.closePath(); // Draw y-axis label ctx.font = '18px Arial'; ctx.fillStyle = '#000000'; ctx.fillText(y.toString(), 5, y - 5); } } ////// UPDATE THE CANVAS ////////////////////////////////// function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); pointer.draw(ctx); hotSpot1.draw(ctx); hotSpot2.draw(ctx); imageContainerOne.draw(ctx); imageContainerTwo.draw(ctx); imageContainerThree.draw(ctx); moveNodeOne.draw(ctx); moveNodeOne.addEventListeners(canvas); drawGrid(ctx, canvas.width, canvas.height); requestAnimationFrame(update); } update(); </script><style> .canvas-container { width: 800px; height: 800px; background-image:url('https://empirefable.magwebdesigns.net/wp/Ocean_Deep_Map_2-22-23.webp'); background-size: contain; } #canvas { width: 800px; height: 800px; opacity: .5; /* set the opacity to 50% */ } </style> <div id="canvas-container" class="canvas-container"> <canvas id="canvas" class="canvas"></canvas> </div> <script> class Pointer { constructor(xPos, yPos, xSize, ySize, color, imgSrc) { this.xPos = xPos; this.yPos = yPos; this.xSize = xSize; this.ySize = ySize; this.color = color; this.imgSrc = imgSrc; this.collision = false; } updatePosition(xPos, yPos) { this.xPos = xPos; this.yPos = yPos; } draw(ctx) { ctx.beginPath(); ctx.arc( this.xPos + this.xSize / 2, this.yPos + this.ySize / 2, this.xSize / 2, 0, 2 * Math.PI ); ctx.fillStyle = this.color; ctx.fill(); } } class HotSpot { constructor(id, xPos, yPos, text, imgSrc, xSize, ySize, color) { this.id = id; this.xPos = xPos; this.yPos = yPos; this.text = text; this.imgSrc = imgSrc; this.xSize = xSize; this.ySize = ySize; this.color = color; } checkCollision(pointer) { if ( pointer.xPos < this.xPos + this.xSize && pointer.xPos + pointer.xSize > this.xPos && pointer.yPos < this.yPos + this.ySize && pointer.yPos + pointer.ySize > this.yPos ) { console.log("COLLISION:" + this.id ); } } draw(ctx) { ctx.beginPath(); ctx.font = '24px Arial'; ctx.fillStyle = this.color; ctx.fillText(this.text,this.xPos,this.yPos) ctx.rect(this.xPos, this.yPos, this.xSize, this.ySize); ctx.fill(); } } class ImageContainer { constructor(id,height, width, xPos, yPos, imgSrc, title) { this.id = id; this.height = height; this.width = width; this.xPos = xPos; this.yPos = yPos; this.imgSrc = imgSrc; this.title = title; this.collision = false; } checkCollision(pointer) { if ( pointer.xPos < this.xPos + this.width && pointer.xPos + pointer.xSize > this.xPos && pointer.yPos < this.yPos + this.height && pointer.yPos + pointer.ySize > this.yPos ) { this.collision = true; console.log(this.id); } else { this.collision = false; } } draw(ctx) { // Draw image container ctx.beginPath(); ctx.rect(this.xPos, this.yPos, this.width, this.height); ctx.fillStyle = "#FFFFFF"; ctx.fill(); // Draw image const img = new Image(); img.src = this.imgSrc; img.onload = () => { ctx.drawImage(img, this.xPos, this.yPos, this.width, this.height); }; // Draw title ctx.fillStyle = "#000000"; ctx.font = "12px Arial"; ctx.fillText(this.title, this.xPos + 5, this.yPos + 15); // Draw collision indicator if (this.collision) { ctx.beginPath(); ctx.arc( this.xPos + this.width / 2, this.yPos + this.height / 2, 10, 0, 2 * Math.PI ); ctx.fillStyle = "red"; ctx.fill(); } } } const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 800; const lightHouse = new HotSpot("lightHouse", 400, 350, "LIGHT HOUSE", null, 100, 200, "green"); const hotSpot2 = new HotSpot("hotspot2", 150, 150, "Click me 2", null, 100, 100, "blue"); const citadel = new HotSpot("citadel", 250, 200, "CITADEL", null, 100, 100, "green"); const pointer = new Pointer(0, 0, 20, 20, "red", null); const imageContainer1 = new ImageContainer( "IMAGE CONTAINER ONE", 200, 200, 50, 50, "https://cdn.discordapp.com/attachments/1077812497467310184/1078767223507791953/C1_The_Great_Citadel_in_Ocean_Deep_is_a_towering_fortress_locat_205c01c7-1f69-4f9c-84e8-e143e8b17bb2.png", "Image Container 1" ); // update pointer position document.addEventListener("mousemove", (event) => { const rect = canvas.getBoundingClientRect(); pointer.updatePosition( event.clientX - rect.left, event.clientY - rect.top ); }); // check collision between pointer and hot spots on mouse click document.addEventListener("click", () => { lightHouse.checkCollision(pointer); citadel.checkCollision(pointer); hotSpot2.checkCollision(pointer); imageContainer1.checkCollision(pointer); }); //// DRAW GRID function drawGrid(ctx, width, height) { // Draw vertical lines for (let x = 50; x <= width; x += 50) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); ctx.closePath(); // Draw x-axis label ctx.font = '18px Arial'; ctx.fillStyle = '#000000'; ctx.fillText(x.toString(), x + 5, 15); } // Draw horizontal lines for (let y = 50; y <= height; y += 50) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke(); ctx.closePath(); // Draw y-axis label ctx.font = '18px Arial'; ctx.fillStyle = '#000000'; ctx.fillText(y.toString(), 5, y - 5); } } function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); pointer.draw(ctx); lightHouse.draw(ctx); citadel.draw(ctx); hotSpot2.draw(ctx); drawGrid(ctx, canvas.width, canvas.height); //imageContainer1.checkCollision(pointer); imageContainer1.draw(ctx); requestAnimationFrame(update); } update(); </script><div id="header" class="header"><a href="#"><h3>CITADEL</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Ocean Deep->Ocean Deep]]</div> <div id="linkContainer" class="linkContainer">[[Lord of Ocean Deep->Lord of Ocean Deep]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.midjourney.com/4c983503-45ac-4878-9220-c07ee6096841/grid_0.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> The Great Citadel of Ocean Deep stands at the heart of the city, a magnificent fortress of stone and iron that has withstood countless assaults and sieges over the centuries. From its high walls and soaring towers, one can see for miles in all directions, taking in the sprawling metropolis of Ocean Deep and the vast expanse of the Sea of Storms beyond. The Citadel is a marvel of engineering, with thick walls and deep moats that make it virtually impregnable. The gates are made of solid iron, and can only be opened with the permission of the ruling council. The towers are filled with archers and ballistae, ready to rain death upon any who would dare to challenge the might of Ocean Deep. Inside the Citadel, the halls are lined with tapestries and frescoes depicting the heroic deeds of past rulers and defenders of the city. The throne room is a vast chamber, with high ceilings and intricate carvings adorning the walls. The throne itself is a massive seat of ornately carved stone, set upon a dais and surrounded by guards in gleaming armor. The Great Citadel is not just a symbol of the city's strength, but also a hub of political and military power. The council chambers are located here, where the leaders of the city gather to make decisions and plot strategy. The armories are stocked with the finest weapons and armor, ready to equip the city's defenders in times of war. Despite its imposing presence and fearsome reputation, the Great Citadel is also a place of beauty and culture. There are gardens and courtyards filled with exotic plants and sculptures, and the Great Hall is home to a renowned orchestra that performs concerts for the city's elite. </p> </marquee> </div><div id="header" class="header"><a href="#"><h3>CLOUD STRIDER</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Airship Port->Airship Port]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> CLOUD STRIDER </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>DOCKS</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Ocean Deep->Ocean Deep]]</div> <div id="linkContainer" class="linkContainer">[[Salty Kraken->Salty Kraken]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.midjourney.com/7e900a90-2a45-4360-9e1f-f3e64b47be51/grid_0.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> The docks of Ocean Deep are a sprawling, bustling network of piers and quays that jut out into the Sea of Storms. The scent of salt water and fish hangs heavy in the air, and the constant bustle of activity creates a palpable energy that fills the air. As far as the eye can see, ships of all shapes and sizes are docked or anchored offshore, their masts stretching up towards the sky like a forest of wooden spires. Sailors and merchants bustle about the docks, loading and unloading cargo, repairing sails and rigging, and haggling over prices. The sound of creaking timbers and clanging metal echoes through the air, along with the raucous calls of gulls and the occasional shout or curse from a sailor. The docks are a place where fortunes are made and lost, where the risks are high but the rewards can be even higher. </p> </marquee> </div>First Episode Scene-1 Gwaldor and crew are piloting the Cloud Strider over the Sea of Storms They see an embatled drow Light air skiff with Zephyrus and Aria Shadowshade. The Brother and sister have been attacked by a pirate airship. Gwaldor and the crew of the cloud strider swoop in and fend off the air pirates. -Gwaldor barks orders -Thralgar mans the main gun -Adalyn jumps on the multi fire air cannon -Arabella Watches through a telescope and reports to Gwaldor Causing the air pirates to retreat after exchanging cannon fire with the cloud strider and the burning drow light air skiff. The Cloud Strider docks with the burning drow light air skiff and evacuates Aria and Zephyrus. The drow siblings explain of thier escape from the Drow main city of Yhed Nasad. They explain that they are seeking asylum and bring information regarding a great evil arising from the lands of the South. The Drow are divided and the Royal brother and sister seek the help of the Humans and Dwarves. They are thank full and apeal to Gwaldor for his influence in both the human and dwarven factions. The party makes it way to ocean deep aboard the cloud strider. They land in the great airship Port of Ocean Deep. AI Scene 1 Dialogue Scene 1: Gwaldor and crew are piloting the Cloud Strider over the Sea of Storms Gwaldor: Keep your eyes peeled, everyone. This is the Sea of Storms, and we never know what kind of trouble we might run into. Thralgar: Aye, Captain. I've got the main gun ready and waiting. Adalyn: And I've got the multi-fire air cannon primed and ready to go. Arabella: (looking through her telescope) Captain, I see something on the horizon. It looks like an airship in distress. Gwaldor: (nodding) Alright, crew. Let's move in and assess the situation. As they approach the distressed airship, they see it being attacked by a group of air pirates. Gwaldor: Battle stations, everyone! Thralgar, open fire on those pirates! Thralgar: (grinning) My pleasure, Captain! Adalyn: (jumping on the multi-fire air cannon) Let's show them what the Cloud Strider is made of! Arabella: (reporting to Gwaldor) Captain, the air pirates are trying to flank us from the left. Gwaldor: (barking orders) Adalyn, focus your fire on the left flank! Thralgar, keep them pinned down with the main gun! We'll take them on head-on! The Cloud Strider and the air pirates exchange cannon fire, with Adalyn's multi-fire air cannon providing cover fire. Eventually, the pirates retreat after taking heavy damage. Gwaldor: (smiling) Great work, crew! That was some top-notch flying and shooting. Thralgar: (laughing) Aye, we showed those pirates who's boss! Adalyn: (proudly) The Cloud Strider can take on anyone and come out on top! Arabella: (intrigued) I wonder who those drow siblings are and what they were doing on that airship. Gwaldor: (nodding) Let's find out. We'll dock with the burning airship and evacuate them to safety. Then we'll get to the bottom of this. SCENE 1 BETTER Scene 1: The Cloud Strider Comes to the Rescue As Gwaldor and his crew flew over the Sea of Storms, they saw an air pirate ship attacking a light drow air skiff. Gwaldor: "By the gods, that air skiff is in trouble! We have to help them!" Thralgar: "Aye, Captain! Let's show these pirates what we're made of!" Adalyn: "I'll man the multi-fire air cannon, Captain. Let's take them out!" Arabella: "Captain, I can see the air pirate ship closing in. We have to move quickly!" As they approached the air pirate ship, Thralgar manned the main gun, and Adalyn took control of the multi-fire air cannon. The air pirates had the drow siblings outnumbered, but the Cloud Strider crew was determined to even the odds. Thralgar: "Captain, I've got a clear shot. Shall I take it?" Gwaldor: "Do it, Thralgar! Take out that air pirate ship!" The main gun fired, hitting the air pirate ship with a deafening explosion. Adalyn's multi-fire air cannon followed up, unleashing a barrage of fire onto the air pirates. Adalyn: "Ha! Take that, you scurvy dogs!" Arabella: "Captain, the air pirate ship is retreating. I think we did it!" Gwaldor: "Great work, crew! Let's go check on those drow siblings and see what we can do to help." As they landed the Cloud Strider and approached the drow siblings, Zephyrus and Aria, Gwaldor spoke to them. Gwaldor: "Are you two okay? What were you doing out here alone?" Zephyrus: "We were fleeing the Drow city of Yhed Nasad. It's not safe for us there anymore." Aria: "We were attacked by those air pirates, and we thought we were done for until you showed up." Gwaldor: "Well, you're safe now. We'll take you to Ocean Deep and figure out a way to help you." AI Scene 2 Dialogue Scene 2: On board the Cloud Strider, after the rescue Gwaldor: Are you both alright? You were lucky we happened to be flying by. Zephyrus: Thank you so much for rescuing us. We owe you our lives. Aria: We've been on the run for days, ever since we discovered the plans of the evil sorceress who is trying to take over our city. Arabella: (intrigued) Tell us more about this sorceress. What kind of power does she possess? Aria: She's been studying ancient texts and has uncovered a way to tap into dark magic that has not been seen for centuries. She's already taken over several of the city's major factions and has a large army at her disposal. Thralgar: (gruffly) Sounds like we should be prepared for a tough fight. Adalyn: (determined) We can take on anything with the Cloud Strider on our side. Gwaldor: (soberly) Let's not get ahead of ourselves. We need to gather more information and come up with a plan. But first, we need to make sure these two are safe and secure. Zephyrus: (smiling) We appreciate your concern, but we can take care of ourselves. We are skilled in the art of evasion and stealth. Aria: (nodding) Yes, we have survived this long by being careful and resourceful. Arabella: (impressed) I can see you are both very capable. Perhaps we can work together to uncover more information about this sorceress and her plans. Gwaldor: (grinning) That's the spirit, Arabella. We'll need all the help we can get to stop this evil from spreading. Let's head to Ocean Deep and regroup with the rest of our crew.<div id="header" class="header"><a href="#"><h3>CHARACTERS</h3></a></div> <div id="nav-2" class="nav-2"> <div id="linkContainer" class="linkContainer">[[Ocean Deep->Ocean Deep]]</div> </div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Gwaldor->Gwaldor]]</div> <div id="linkContainer" class="linkContainer">[[Arabella Brassford->Arabella Brassford]]</div> <div id="linkContainer" class="linkContainer">[[Thralgar Irongear->Thralgar Irongear]]</div> <div id="linkContainer" class="linkContainer">[[Adalynn Mechmaster->Adalynn Mechmaster]]</div> <div id="linkContainer" class="linkContainer">[[Aria Shadowshade->Aria Shadowshade]]</div> <div id="linkContainer" class="linkContainer">[[Zephyrus Shadowshade-> Zephyrus Shadowshade]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.midjourney.com/d5225c85-ab8b-4cf0-8fac-6c6ba8aee03a/grid_0.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> Ocean Deep from high above, the bustling city sprawls out beneath him like a living, breathing organism. The great human city is situated at the mouth of the Misty Wine River, with its suburbs stretching out along its banks to the north. The river flows into the Sea of Storms, a vast body of water that stretches out to the horizon in all directions. From above, the city looks like a maze of streets and buildings, with the largest structures standing tall above the rest. The grandest of these structures is the Great Citadel, a massive fortress that stands on a hill overlooking the city. The Citadel's walls are high and thick, with towers and battlements at regular intervals. The flag of the Human Empire flies from its highest tower, indicating that this is the seat of power for the entire region. To the east of the Citadel lies the Market District, a sprawling collection of stalls and shops selling all manner of goods. The district is packed with people at all times of day, with merchants shouting out their prices and customers haggling for the best deals. The Market District is surrounded by the bustling streets of the Inner City, where the city's wealthier citizens reside in opulent homes and palaces. To the west of the Citadel lies the Wharf Slums, a seedy district where the city's less fortunate residents live in squalor. The streets here are narrow and winding, with ramshackle buildings leaning precariously against one another. Despite the poverty and desperation that pervades the area, the Wharf Slums are home to a thriving criminal underworld, with thieves and cutthroats operating openly in the shadows. Beyond the Wharf Slums lies the expansive port, with dozens of ships of all shapes and sizes docked at its many piers. The sea itself is a churning mass of waves and foam, with ships battling against the wind and the tides to make their way in and out of the harbor </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>GWALDOR</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Empire-Fable-Characters->Empire-Fable-Characters]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.midjourney.com/61e2c69b-8587-4f0b-ae3c-969b7a15f1bb/grid_0.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> GWALDOR DESCRIPTION GWALDOR DESCRIPTION </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>LORD OF OCEAN DEEP</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Citadel->Citadel]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> LORD OF OCEAN DEEP </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>MERCHANT DISTRICT</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Ocean Deep->Ocean Deep]]</div> <div id="linkContainer" class="linkContainer">[[Armor Shop->Armor Shop]]</div> <div id="linkContainer" class="linkContainer">[[Weapon Shop->Weapon Shop]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.midjourney.com/334ca6e3-0d13-4e8d-8f5e-944266a36710/grid_0.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> The Merchant District of Ocean Deep is a bustling hive of activity and commerce, filled with the sights and sounds of traders and merchants from all corners of the continent. The buildings here are tall and grand, made of polished stone and marble, with ornate carvings and towering arches that speak of wealth and power. The streets are wide and well-paved, lined with neatly arranged stalls and storefronts selling everything from exotic spices and fabrics to fine jewelry and works of art. The air is filled with the heady scent of incense, perfume, and spices, and the sound of haggling and bargaining fills the ears. The people here are a mix of races and cultures, all gathered to buy and sell goods in this great trading hub. Human merchants in fine clothes rub shoulders with Orc traders in rugged leathers, and Elven artisans in flowing robes display their wares alongside Dwarven craftsmen in sturdy aprons. Despite the frenzied activity of the Merchant District, there is a sense of order and civility here. The traders and merchants have a code of conduct that they follow, and there are guards posted at every entrance to ensure that no troublemakers or thieves slip in unnoticed. </p> </marquee> </div><div id="header" class="header"><a href="#"><h3>OCEAN DEEP</h3></a></div> <div id="nav-2" class="nav-2"> <div id="linkContainer" class="linkContainer">[[Empire-Fable-Characters->Empire-Fable-Characters]]</div> </div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Wharf Slums->Wharf Slums]]</div> <div id="linkContainer" class="linkContainer">[[Citadel->Citadel]]</div> <div id="linkContainer" class="linkContainer">[[Airship Port->Airship Port]]</div> <div id="linkContainer" class="linkContainer">[[Merchant District->Merchant District]]</div> <div id="linkContainer" class="linkContainer">[[Docks->Docks]]</div> </div> <div id="background" class="background" style="background-image:url()"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.discordapp.com/attachments/1077812497467310184/1078028578333151282/C1_From_above_the_city_looks_like_a_maze_of_streets_and_buildin_cae88879-f3bd-4358-bd59-057b4c864811.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> Ocean Deep from high above, the bustling city sprawls out beneath him like a living, breathing organism. The great human city is situated at the mouth of the Misty Wine River, with its suburbs stretching out along its banks to the north. The river flows into the Sea of Storms, a vast body of water that stretches out to the horizon in all directions. From above, the city looks like a maze of streets and buildings, with the largest structures standing tall above the rest. The grandest of these structures is the Great Citadel, a massive fortress that stands on a hill overlooking the city. The Citadel's walls are high and thick, with towers and battlements at regular intervals. The flag of the Human Empire flies from its highest tower, indicating that this is the seat of power for the entire region. To the east of the Citadel lies the Market District, a sprawling collection of stalls and shops selling all manner of goods. The district is packed with people at all times of day, with merchants shouting out their prices and customers haggling for the best deals. The Market District is surrounded by the bustling streets of the Inner City, where the city's wealthier citizens reside in opulent homes and palaces. To the west of the Citadel lies the Wharf Slums, a seedy district where the city's less fortunate residents live in squalor. The streets here are narrow and winding, with ramshackle buildings leaning precariously against one another. Despite the poverty and desperation that pervades the area, the Wharf Slums are home to a thriving criminal underworld, with thieves and cutthroats operating openly in the shadows. Beyond the Wharf Slums lies the expansive port, with dozens of ships of all shapes and sizes docked at its many piers. The sea itself is a churning mass of waves and foam, with ships battling against the wind and the tides to make their way in and out of the harbor </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>SALTY KRACKEN</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Docks->Docks]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> SALTY KRACKEN </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>WHARF SLUMS</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Wharf Slums->Wharf Slums]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> THIEVES GUILD DESCRIPTION </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>THRALGAR IRONGEAR</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Empire-Fable-Characters->Empire-Fable-Characters]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.midjourney.com/feaee3a1-5bd9-47c5-afc5-5ea3bd842781/grid_0.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> THRALGAR IRONGEAR DESCRIPTION -- Orc from Wahg Morbash having settled in to the Merchant district of Ocean deep. -- Motivations Wants to import Orcish Hardened Ceramics into Ocean deep. -- Wants to be accepted by the merchants guild. </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>WEAPON SHOP</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Merchant District->Merchant District]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> WEAPON SHOP </p> </marquee> </div> </div><div id="header" class="header"><a href="#"><h3>WHARF SLUMS</h3></a></div> <div id="nav" class="nav"> <div id="linkContainer" class="linkContainer">[[Ocean Deep->Ocean Deep]]</div> <div id="linkContainer" class="linkContainer">[[Thieves Guild->Thieves Guild]]</div> </div> <div id="background" class="background"> <iframe id="sitepal" class="sitepal" src="https://www.sitepal.com/geturl/?ss=2757274&sl=0&acc=8667722" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe> <div id="text" class="text" style="background-image:url('https://cdn.midjourney.com/e8cca8cc-2a53-461b-9e12-af615dbcafb8/grid_0.png')"> <marquee id="marquee" class="marquee" behavior="scroll" direction="up" scrollamount="2"> <p> The Wharf Slums of Ocean Deep are a sprawling and labyrinthine neighborhood where the destitute and impoverished take refuge. The area is a maze of ramshackle buildings, narrow alleys, and winding streets that seem to be in a perpetual state of decay. The neighborhood is situated in the shadow of the city's towering spires, serving as a stark contrast to the gleaming structures of prosperity that loom above. The structures within the Wharf Slums are precarious at best. The buildings are constructed from wood and stone, and they appear as if they could collapse at any moment. Most of the structures are two or three stories tall, with cramped living quarters on the upper floors and shops and stalls on the ground level. The roofs are made of rusted and pitted corrugated metal that sags under the weight of discarded furniture, tools, and other detritus. The streets within the Wharf Slums are narrow and twisting, lined with makeshift stalls selling cheap trinkets, stolen goods, and other wares. The stalls are occupied by people hawking their wares or begging for spare change. The stench of sewage and decaying garbage permeates the air, and the sounds of barking dogs, shouting, and laughter echo through the alleyways. Despite the squalor and poverty that permeates the Wharf Slums, there is a strong sense of community here. People look out for each other and are willing to lend a helping hand when times are tough. However, there is also danger lurking in the shadows. Thieves, cutthroats, and other unsavory characters prey on the weak and vulnerable. </p> </marquee> </div> </div>