<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#cdc3a5">
<meta name="msapplication-TileColor" content="#cdc3a5">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta -->
<title>The War Within Raid & Dungeon Journal - Warcraft DB</title>
<meta name="description" content="An up to date The War Within Dungeon Journal tool that includes raids, dungeons, boss strategies, and drops.">
<meta name="og:title" content="The War Within Raid & Dungeon Journal - Warcraft DB">
<meta name="og:description" content="An up to date The War Within Dungeon Journal tool that includes raids, dungeons, boss strategies, and drops.">
<meta name="og:url" content="https://warcraftdb.com/">
<meta name="og:image" content="https://warcraftdb.com/images/logo-new.png">
<meta name="og:type" content="website">
<!-- Custom code -->
<link rel="stylesheet" type="text/css" href="/style/base.css"/>
<link rel="stylesheet" type="text/css" href="/style/tooltip.css"/>
<script src="https://unpkg.com/vue@3.2.23/dist/vue.global.prod.js"></script>
<script>const ssrData = {"version":"live","renderMode":1024,"finalDataPath":["live"],"metadata":{"title":"The War Within Raid & Dungeon Journal - Warcraft DB","description":"An up to date The War Within Dungeon Journal tool that includes raids, dungeons, boss strategies, and drops.","image":"https:\/\/warcraftdb.com\/images\/logo-new.png","url":"https:\/\/warcraftdb.com\/","schema":null}}</script>
<!--INJECT_SCRIPTS-->
<script type="module" src="/scripts/bundle-f6OvC_9x.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1CE4489PXJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-1CE4489PXJ');
</script>
<!-- NitroAds -->
<script data-cfasync="false">window.nitroAds=window.nitroAds||{createAd:function(){return new Promise(e=>{window.nitroAds.queue.push(["createAd",arguments,e])})},addUserToken:function(){window.nitroAds.queue.push(["addUserToken",arguments])},queue:[]};</script>
<script data-cfasync="false" async src="https://s.nitropay.com/ads-983.js"></script>
</head>
<body>
<!-- Container -->
<div id="container" v-cloak>
<div class="loading-indicator" :style="{ opacity: loading ? 1 : 0 }">
<div></div><div></div><div></div><div></div>
</div>
<div class="tooltip" v-if="tooltipContent !== null" :style="getGlobalTooltipPosition()">
<div class="tooltip-icon" v-if="tooltipIconID > 0" :style="{ backgroundImage: 'url(' + CSS_GAME_ASSET_BASE + 'icons/' + tooltipIconID + '.png)' }"></div>
<div class="tooltip-inner" v-html="tooltipContent"></div>
</div>
<version-selection></version-selection>
<div v-if="isRenderMode(RENDER_MODE.HOMEPAGE)" id="header" class="homepage">
<div id="header-logo"></div>
<search-box></search-box>
<header-nav></header-nav>
</div>
<div v-else id="header">
<a data-href="difficulty:none,instance:none,operation:none,expansion:none,encounter:none">
<div id="header-logo-small"></div>
</a>
<header-nav></header-nav>
</div>
<div v-if="isRenderMode(RENDER_MODE.HOMEPAGE)" id="content-news">
<div class="news-section">
<a v-for="(post, i) in wctNewsFeed" :href="post.link" target="_blank" :key="i">
<div class="news-post">
<div class="news-background" :style="{ 'background-image': `url(${post.image})` }"></div>
<div class="news-wrapper">
<h3 class="news-title" v-html="post.title"></h3>
<p class="news-description" v-html="post.description"></p>
<p class="news-readmore">READ MORE</p>
</div>
</div>
</a>
</div>
</div>
<div v-else id="content">
<div id="content-header">
<div id="content-header-left">
<div class="ribbon-wrapper">
<div id="content-header-icon"></div>
<div id="content-header-title">
<div id="content-header-title-ribbon">
<a v-for="option in navRibbon" :data-href="option.href">{{ option.label }}</a>
</div>
</div>
</div>
<div class="dropdown dropdown-button" v-if="journalDifficulties.length > 0">
{{ '(' + journalSelectedDifficulty.max_players + ') ' + journalSelectedDifficulty.name }}
<div class="dropdown-menu">
<a :data-href="'difficulty:' + difficulty.name_slug" class="dropdown-menu-item" v-for="difficulty in journalDifficulties">{{ '(' + difficulty.max_players + ') ' + difficulty.name }}</a>
</div>
</div>
<div class="dropdown small dropdown-button" v-if="journalMythicPlus && journalMythicPlusRewardLevels.length > 0 && journalSelectedDifficulty?.name_slug === 'dungeon-mythic'">
{{ '+' + (journalSelectedMythicPlusRewardLevel?.difficulty_level || 0) }}
<div class="dropdown-menu">
<a :data-href="'difficulty:dungeon-mythic'" class="dropdown-menu-item">+0</a>
<a :data-href="`difficulty:dungeon-mythic;${rewardLevel.difficulty_level}`" class="dropdown-menu-item" v-for="rewardLevel in journalMythicPlusRewardLevels">{{ '+' + rewardLevel.difficulty_level }}</a>
</div>
</div>
</div>
<div id="content-header-right">
<div id="content-header-search">
<search-box></search-box>
</div>
</div>
</div>
<div id="content-body">
<template v-if="isRenderMode(RENDER_MODE.INSTANCE) || isRenderMode(RENDER_MODE.ENCOUNTER)">
<div id="content-body-left">
<div class="overview-image" :class="{ small: !isRenderMode(RENDER_MODE.INSTANCE | RENDER_MODE.OVERVIEW) }" :style="{ backgroundImage: 'url(' + CSS_GAME_ASSET_BASE + 'lore_backgrounds/' + journalInstance.lore_fid + '.png)' }"></div>
<div id="encounter-list" v-if="!isRenderMode(RENDER_MODE.INSTANCE | RENDER_MODE.OVERVIEW)">
<a v-for="encounter in journalEncounters" class="entry-header" :data-href="'encounter:' + encounter.name_slug">
<div :style="{ backgroundImage: 'url(' + CSS_GAME_ASSET_BASE + 'creature_buttons/' + encounter.creature_display_info_id + '.png)' }"></div>
{{ encounter.name }}
</a>
</div>
<div v-if="!isRenderMode(RENDER_MODE.INSTANCE | RENDER_MODE.OVERVIEW)" class="mobile-encounter-list dropdown dropdown-button">
Select Boss
<div class="dropdown-menu">
<a v-for="encounter in journalEncounters" :data-href="'encounter:' + encounter.name_slug" class="dropdown-menu-item">
{{ encounter.name }}
</a>
</div>
</div>
</div>
</template>
<div id="content-body-center">
<template v-if="isRenderMode(RENDER_MODE.DATA_VIEW)">
<div id="data-view">
<div class="data-view-tooltip-container">
<div class="tooltip-icon-wrapper" v-if="dataView.iconID > 0">
<div class="data-view-tooltip" :style="{ backgroundImage: 'url(' + CSS_GAME_ASSET_BASE + 'icons/' + dataView.iconID + '.png)' }"></div>
</div>
<div class="tooltip-inner" v-html="dataView.tooltip"></div>
</div>
<div class="map-container" v-if="dataView.content.map">
<map-canvas :map-data="dataView.content.map"></map-canvas>
</div>
<map-component
v-if="dataView?.data?.spawns?.length"
:map-levels="journalMapLevels"
:selected-map-level="journalSelectedMapLevel"
:display-map-pins="displayMapPins"
></map-component>
<div class="data-view-info" v-if="dataView.data">
<data-view-quest v-if="dataView.type === 'quest'" :data="dataView.data" :quest-id="dataView.id"></data-view-quest>
</div>
<related-tables v-if="dataView.relatedTables && dataView.relatedTables.filter(t => t.count > 0).length" :tables="dataView.relatedTables"></related-tables>
</div>
</template>
<template v-if="isRenderMode(RENDER_MODE.SEARCH) || isRenderMode(RENDER_MODE.DATA_LIST)">
<div id="instance-overview">
<data-list-filters v-if="dataView?.type" :data-type="dataView.type"></data-list-filters>
<full-search-list
:results="fullSearchResults"
:result-count="fullSearchFullCount"
:data-layout="dataLayout"
></full-search-list>
</div>
</template>
<template v-else-if="isRenderMode(RENDER_MODE.INSTANCE_LIST)">
<div id="instance-list">
<a v-for="instance in journalInstances" :data-href="'instance:' + instance.name_slug" class="instance-btn" :style="{ backgroundImage: 'url(' + CSS_GAME_ASSET_BASE + 'buttons_large/' + instance.button_fid + '.png)' }">
<span>{{ instance.name }}</span>
<div class="instance-btn-gradient"></div>
</a>
</div>
</template>
<template v-else-if="isRenderMode(RENDER_MODE.EXPANSION)">
<div id="expansion-list">
<p v-if="journalMythicPlus">Listed here are all of the raids and Mythic+ dungeons for Season {{ journalSelectedExpansion?.mythicPlusSeason.season }} of
{{ journalExpansions[journalExpansions.length - 2]?.name }}. These instances currently offer the best endgame PVE rewards in the game. Select an instance to view boss abilities, loot, maps, and character models.</p>
<template v-for="type in Object.keys(INSTANCE_TYPE_NAMES)">
<div class="expansion-section" :key="type" v-if="journalInstances[type].length">
<h3>{{ INSTANCE_TYPE_NAMES[type] }}</h3>
<div id="instance-list">
<a v-for="instance in journalInstances[type]" :data-href="'instance:' + instance.name_slug + (journalMythicPlus ? ',difficulty:dungeon-mythic' : '')" class="instance-btn" :style="{ backgroundImage: 'url(' + CSS_GAME_ASSET_BASE + 'buttons_large/' + instance.button_fid + '.png)' }">
<span>{{ instance.name }}</span>
<div class="instance-btn-gradient"></div>
</a>
</div>
</div>
</template>
</div>
</template>
<template v-else-if="isRenderMode(RENDER_MODE.INSTANCE)">
<div id="instance-navigation">
<div id="instance-overview-tabs" class="tab-list">
<a data-href="operation:none" class="tab" :class="{ selected: isRenderMode(RENDER_MODE.OVERVIEW) }">Overview</a>
<a data-href="operation:loot" class="tab" :class="{ selected: isRenderMode(RENDER_MODE.LOOT) }">Loot</a>
<a data-href="operation:map" class="tab" :class="{ selected: isRenderMode(RENDER_MODE.MAP) }">Map</a>
</div>
</div>
<div id="instance-overview">
<div id="instance-overview-text">
<template v-if="isRenderMode(RENDER_MODE.LOOT)">
<h1>{{ journalInstance.name }} Loot & Drops</h1>
<template v-if="journalMythicPlus">
<p>
Here you'll find all of the loot that is available in {{ journalInstance.name }} for Season {{ journalSelectedExpansion?.mythicPlusSeason.season }} of
{{ journalExpansions[journalExpansions.length - 2]?.name }}. Loot can be sorted by class, equipment slot, the boss it drops from, and the difficulty of the instance.
</p>
<br />
</template>
<loot-table></loot-table>
</template>
<template v-else-if="isRenderMode(RENDER_MODE.MAP)">
<h1>{{ journalInstance.name }} Map</h1>
<map-component
:map-levels="journalMapLevels"
:selected-map-level="journalSelectedMapLevel"
:display-map-pins="displayMapPins"
></map-component>
</template>
<template v-else-if="isRenderMode(RENDER_MODE.OVERVIEW)">
<h1>{{ journalInstance.name }}</h1>
<template v-if="journalMythicPlus">
<p>
As one of the endgame instances for Season {{ journalSelectedExpansion?.mythicPlusSeason.season }} of {{ journalExpansions[journalExpansions.length - 2]?.name }},
{{ journalInstance.name }} offers some difficult challenges and valuable rewards. Below are all of the boss encounters in the instance. On each boss page you'll find their abilities, loot, maps, and character models. You can also view loot and maps for the entire instance using the tabs above.
</p>
<br />
</template>
<p>{{ journalInstance.description }}</p>
<div id="instance-overview-bosses">
<a v-for="encounter in journalEncounters" class="entry-header" :data-href="'encounter:' + encounter.name_slug">
<div :style="{ backgroundImage: 'url(' + CSS_GAME_ASSET_BASE + 'creature_buttons/' + encounter.creature_display_info_id + '.png)' }"></div>
{{ encounter.name }}
</a>
</div>
</template>
</div>
</div>
</template>
<template v-else-if="isRenderMode(RENDER_MODE.ENCOUNTER)">
<div id="instance-navigation">
<div id="instance-overview-tabs" class="tab-list">
<a data-href="operation:none" class="tab" v-if="journalEncounter.showOverviewTab" :class="{ selected: isRenderMode(RENDER_MODE.OVERVIEW) }">Overview</a>
<a data-href="operation:abilities" v-if="journalEncounter.hasOverview" class="tab" :class="{ selected: isRenderMode(RENDER_MODE.ABILITIES) }">Abilities</a>
<a data-href="operation:loot" class="tab" :class="{ selected: isRenderMode(RENDER_MODE.LOOT) }">Loot</a>
<a data-href="operation:map" class="tab" :class="{ selected: isRenderMode(RENDER_MODE.MAP) }">Map</a>
<a data-href="operation:model" class="tab" :class="{ selected: isRenderMode(RENDER_MODE.MODEL) }">Model</a>
</div>
</div>
<div id="instance-overview">
<div id="instance-overview-text">
<template v-if="isRenderMode(RENDER_MODE.LOOT)">
<h1>{{ journalEncounter.name }} Drops & Loot</h1>
<loot-table></loot-table>
</template>
<template v-if="isRenderMode(RENDER_MODE.MODEL)">
<h1>{{ journalEncounter.name }} Model</h1>
<div id="model-container">
<div id="model-container-buttons">
<div v-for="model in journalEncounter.models" :class="{ active: journalDisplayModel === model }" class="model-button" :style="{ backgroundImage: 'url(' + CSS_GAME_ASSET_BASE + 'creature_buttons/' + model.creature_display_info_id + '.png)' }" @click="journalSelectedModel = model">
<div class="tooltip">
<tt-title>{{ model.name }}</tt-title>
<template v-if="model.description.length > 0">{{ model.description }}</template>
</div>
</div>
</div>
<div id="model-container-display" v-if="journalDisplayModel != null" :style="{ backgroundImage: 'url(' + CSS_GAME_ASSET_BASE + 'models/' + journalDisplayModel.creature_display_info_id + '.png)' }">
<div class="model-title">{{ journalDisplayModel.name }}</div>
</div>
</div>
</template>
<template v-else-if="isRenderMode(RENDER_MODE.MAP)">
<h1>{{ journalEncounter.name }} Map Location</h1>
<map-component
:map-levels="journalMapLevels"
:selected-map-level="journalSelectedMapLevel"
:display-map-pins="displayMapPins"
></map-component>
</template>
<template v-else-if="isRenderMode(RENDER_MODE.OVERVIEW) || isRenderMode(RENDER_MODE.ABILITIES)">
<h1 v-if="isRenderMode(RENDER_MODE.OVERVIEW)">{{ journalEncounter.name }}</h1>
<h1 v-else="isRenderMode(RENDER_MODE.ABILITIES)">{{ journalEncounter.name }} Abilities</h1>
<div id="overview-sections">
<div class="section">{{ journalEncounter.overview.description }}</div>
<div class="section" v-for="section in journalEncounter.overview.sections">
<overview-section :section="section"></overview-section>
</div>
</div>
</template>
</div>
</div>
</template>
<div id="videoad"></div>
</div>
<div id="content-body-right">
<div id="stickystack"></div>
</div>
</div>
</div>
<site-footer></site-footer>
</div>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9815eb4bf8c537ca',t:'MTc1ODI1MTczMQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"12932ec5727c489a84b399959bd2ce50","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>