<div style="display:flex; gap:10px;">
{{TabToggle|Alchemist|[[File:Alchemist.png|link=|x150px]]|active=yes}}
{{TabToggle|Weaponsmith|[[File:Weaponsmith.png|link=|x150px]]]}}
{{TabToggle|The Collector|[[File:The Collector.png|link=|x150px]]}}
</div>
<div class="Alchemist-data" >asdasd</div>
<div class="Weaponsmith-data" style="display:none">123123</div>
<div class="TheCollector-data" style="display:none">ghghfgh</div>

<div style="display:flex; gap:10px;">
{{TabToggle|Alchemist|Alchemist|active=yes}}
{{TabToggle|Weaponsmith|Weaponsmith]}}
{{TabToggle|Leathersmith|Leathersmith}}
</div>
<div class="Alchemist-data" >asdasd</div>
<div class="Weaponsmith-data" style="display:none">123123</div>
<div class="Leathersmith-data" style="display:none">ghghfgh</div>

2023-11-29T01:58:05Z

Snowpaw:

/* CSS placed here will be applied to all skins */
.stripedtable tr:nth-child(even) {
background-color: rgb(100,100,100,0.3);
}

/*=============================================================
Rarity Colors
==============================================================*/
:root {
--rarity-Elite: 255,30,30;
--rarity-Nightmare: 120, 60, 140;
}

.rarityElite {
border: 1px solid rgb(var(--rarity-Elite),.5);
background: linear-gradient(360deg,rgb(var(--rarity-Elite),.5),rgba(0,0,0,0.5));
}

.colorrarityElite {
color: rgb(var(--rarity-Elite));
}

.rarityNightmare {
border: 1px solid rgb(var(--rarity-Nightmare),.5);
background: linear-gradient(360deg,rgb(var(--rarity-Nightmare),.5),rgba(0,0,0,0.5));
}

.colorrarityNightmare {
color: rgb(var(--rarity-Nightmare));
}
/*=============================================================
Class Page /Classes
==============================================================*/
.image-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 20px;
}

.image-container {
position: relative;
margin: 10px;
height: fit-content;
}

.image-container img {
display: block;
height: auto;
max-width: 100%;
}

.image-container .text {
position: absolute;
bottom: -20;
left: 0;
width: 100%;
background-color: transparent;
padding: 5px;
font-size: 18px;
font-weight: bold;
color: white;
text-align: center;
}
/*=============================================================
Portal Page /Portals
==============================================================*/
.flexbox{
display: flex;
flex-direction: row;
}
.flexboxtext{
flex: 2;
}
.flexboximage{
flex: 1;
text-align: right;
}
/*=============================================================
Tabs (Template:StatsCardWeaponTabs)
==============================================================*/

/* See also: MediaWiki:Common.js */
.cardtabs{
float:right;
margin-left:25px;
display: flex;
flex-direction: column;
}
.cardtabs__buttons {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.cardtabs__button {
border-radius: 5px 5px 0 0;
display: inline-block;
font-size: 13px;
line-height: 1.5;
position: relative;
flex-grow: 1;
text-align: center;
}
.cardtabs__panel {
position: relative;
z-index: 1;
}
.cardtabs__panel--js-hidden {
display: none;
}
.cardtabs__button:not(.cardtabs__button--disabled):hover {
cursor: url('/skins/ScratchWikiSkin2/resources/custom-cursorlink.webp?bccaa') 4 4, auto;
}
.cardtabs__button--active {
border-bottom: 0;
z-index: 1;
box-shadow: 0px -1px 7px 0px #fff;
}
/* Info/Unlock panels */
.cardtabs__button--icon-info img {
position: relative;
top: -2px;
}
.cardtabs__button--icon-unlock img {
position: relative;
top: -1px;
}
.cardtabs__button--icon-unlock {
padding-bottom: 0;
}

/*=============================================================
Toggle Buttons (Template:ToggleStart + Template:ToggleButton)
==============================================================*/

.btn {
background: rgba(255,255,255,0.05);
border-radius: 3px;
border: 1px solid white;
display: inline-block;
font-size: 0.85rem;
font-weight: bold;
padding: 6px 10px;
}
.btn:hover {
background: rgba(255,255,255,0.1);
}
.btn--link {
padding: 0;
}
.btn--link > a {
padding: 6px 15px 6px 10px;
padding-right: 15px !important; /* override needed due to exteral link bg image icon */
display: inline-block;
}
.btn--active {
border-color: #366436;
}
.btn--inactive {
border-color: #643636;
}

.tab{

margin:15px;
padding:5px;
}

.selected-tab{
border: #e79f34 solid 5px;
}

Template:TabToggle

2023-11-29T01:52:44Z

Snowpaw:

MediaWiki:Common.js

2023-11-29T01:49:55Z

Snowpaw:

/* Any JavaScript here will be loaded for all users on every page load. */

/*
WARNING: ES5 ONLY!
*/

$(document).ready( function()
{
// Inits
// ============================================================================

initCardTabs(); // Template:StatsCardWeaponTabs
initStatsCardsToggles(); // Allows hiding StatsCard (.ibox) elements, via toggle buttons (WIP)
initStatsCardsMiscToggles(); // Toggles for misc (costs/tags)

// Funcs
// ============================================================================

/**
* Sets up tabs. Used by the StatsCardWeaponTabs template
*
* @link https://brotato.wiki.spellsandguns.com/Template:StatsCardWeaponTabs
* @link https://brotato.wiki.spellsandguns.com/MediaWiki:Common.css
*
* @return {void}
*/
function initCardTabs()
{
var $containers = $( '[data-cardtabs]' );

if ( !$containers.length )
{
return;
}

// Loop over every container
$containers.each( function( i1, containerEl )
{
var $tabs = $( containerEl );

// We use the extra step of targetting containers here, instead of
// just using `.find`, because this lets us support nesteds tabs!
var $panelsContainer = $tabs.children( '[data-cardtabs-panels]' );
var $btnsContainer = $tabs.children( '[data-cardtabs-btns]' );
var $panels = $panelsContainer.children( '[data-cardtabs-panel]' );
var $btns = $btnsContainer.children( '[data-cardtabs-btn]' );

// Loop over buttons and set up their onclicks
$btns.each( function( i2, btnEl )
{
var $btn = $( btnEl );
var btnNum = $btn.attr( 'data-cardtabs-btn' );
var $panel = $panels.filter( '[data-cardtabs-panel="' + btnNum + '"]' );
var btnActiveCls = 'cardtabs__button--active';
var panelHideCls = 'cardtabs__panel--js-hidden';

// Disabled buttons use "-1" for their numbers
if ( btnNum === '-1' )
{
return;
}

$btn.on( 'click', function()
{
// Hide all other panels, then show the button's own panel
$panels.addClass( panelHideCls );
$panel.removeClass( panelHideCls );

$btns.removeClass( btnActiveCls );
$btn.addClass( btnActiveCls );
});
});
});

// Tier toggles
// ---------------------------------------------------------------------

// Example:
// <span class="btn btn--active" data-weapon-toggle="1">Tier 1</span>
// <span class="btn btn--inactive" data-weapon-toggle="2">Tier 2</span>
// <span class="btn btn--inactive" data-weapon-toggle="3">Tier 3</span>
// <span class="btn btn--inactive" data-weapon-toggle="4">Tier 4</span>

var $tierToggles = $( '[data-weapon-toggle]' );

$tierToggles.each( function( i1, el )
{
var $toggle = $( el );
var tierNum = $toggle.attr( 'data-weapon-toggle' );

$toggle.on( 'click', function( ev, el )
{
$tierToggles.not( $toggle ).addClass( 'btn--inactive' );
$tierToggles.not( $toggle ).removeClass( 'btn--active' );
$toggle.addClass( 'btn--active' );
$toggle.removeClass( 'btn--inactive' );

$containers.each( function( i2, el )
{
var $tabs = $( el );
var btnNum = tierNum;

// @todo: Maybe refactor this to remove the stuff duped from above?
var $panelsContainer = $tabs.children( '[data-cardtabs-panels]' );
var $btnsContainer = $tabs.children( '[data-cardtabs-btns]' );
var $panels = $panelsContainer.children( '[data-cardtabs-panel]' );
var $btns = $btnsContainer.children( '[data-cardtabs-btn]' );

var $btn = $btns.filter( '[data-cardtabs-btn="' + btnNum + '"]' );

if ( !$btn.length )
{
// If not button was found, it must have been a -1 button
// (ie. a disabled tab), so let's find the next lowest tier
for (var checkedNum = btnNum; checkedNum < 4; checkedNum++)
{
$btn = $btns.filter( '[data-cardtabs-btn="' + checkedNum + '"]' );
console.log($btn.length);

if ( $btn.length )
{
btnNum = checkedNum;
break;
}
}

if ( !$btn.length )
{
// If we still haven't found a button, just exit.
// Should never get to this point though, unless
// the ibox has hidden tiers that aren't in order
return;
}
}

var $panel = $panels.filter( '[data-cardtabs-panel="' + btnNum + '"]' );
var btnActiveCls = 'cardtabs__button--active';
var panelHideCls = 'cardtabs__panel--js-hidden';

// Hide all other panels, then show the button's own panel
$panels.addClass( panelHideCls );
$panel.removeClass( panelHideCls );

$btns.removeClass( btnActiveCls );
$btn.addClass( btnActiveCls );
});
});
});

}//end:initCardTabs

/**
* Toggle a StatsCard box (.ibox)
*
* Targets elements with [data-ibox-type="item"], selecting them by the
* given class (eg. rarity1), which should be applied to the element with
* the data-ibox-type data attr
*
* @todo: Use the CSS class (ibox--hidden) instead of JS-injected opacity
*
* @return {void}
*/
function initStatsCardsToggles()
{
var $allBtns = $( '[data-hide-type="item"]' );
var $bulkBtns = $( '[data-hide-target="show-all"], [data-hide-target="show-none"]' );
var $nonBulkBtns = $allBtns.not( $bulkBtns );
var $allTargets = $( '[data-ibox-type="item"]' );

// Stores all target strings
// Used to prevent iboxs from being hidden when they shouldn't be
var allTargetStrs = [];
var activeTargetStrs = []

var specialFilters = [
'show-all',
'show-none'
];

$allBtns.each( function( i, el )
{
var $btn = $( el );
var filterStr = $btn.attr( 'data-hide-target' ); // eg "rarity3"

// ES5 version of Array.prototype.includes()
if ( ( allTargetStrs.indexOf( filterStr ) === -1 ) && ( specialFilters.indexOf( filterStr ) === -1 ) )
{
allTargetStrs.push( filterStr );
}
});

activeTargetStrs = allTargetStrs;

$allBtns.on( 'click', function( ev )
{
var $btn = $( ev.currentTarget );
var filterStr = $btn.attr( 'data-hide-target' ); // eg "rarity3"
var $targets = $( '[data-ibox-type="item"]' + filterStr );
var $all = $( '[data-ibox-type="item"]' );

if ( filterStr === 'show-all' || filterStr === 'show-none' )
{
// Bulk toggle ALL targets
$targets = $all;

switch( filterStr )
{
case 'show-all':
$targets.removeClass( 'ibox--hidden' );
$targets.css( { opacity: 1 } );
$nonBulkBtns.addClass( 'btn--active' );
$nonBulkBtns.removeClass( 'btn--inactive' );
activeTargetStrs = allTargetStrs;
break;

case 'show-none':
$targets.addClass( 'ibox--hidden' );
$targets.css( { opacity: 0.2 } );
$nonBulkBtns.removeClass( 'btn--active' );
$nonBulkBtns.addClass( 'btn--inactive' );
activeTargetStrs = [];
break;
}
}
else
{
var strIndex = activeTargetStrs.indexOf( filterStr );

if ( $btn.hasClass( 'btn--active' ) )
{
// Button was active, so it's now INACTIVE

// If all other buttons are active (ie. no buttons have been
// selected yet), make this one active and all others disabled
if ( activeTargetStrs.length === allTargetStrs.length )
{
// Disable all others, keep only this one
$nonBulkBtns.not( $btn ).removeClass( 'btn--active' );
$nonBulkBtns.not( $btn ).addClass( 'btn--inactive' );
activeTargetStrs = [];
activeTargetStrs.push( filterStr );
}
// Or, if this was the last (ie. only) active button and it
// was just disabled, enable every button
else if ( activeTargetStrs.length === 1 )
{
$nonBulkBtns.removeClass( 'btn--inactive' );
$nonBulkBtns.addClass( 'btn--active' );
activeTargetStrs = allTargetStrs;
}
// Otherwise function normally: Just disable this button
else
{
$btn.removeClass( 'btn--active' );
$btn.addClass( 'btn--inactive' );
activeTargetStrs.splice( strIndex, 1 );
}
}
else
{
// Button was inactive, so it's now ACTIVE
$btn.removeClass( 'btn--inactive' );
$btn.addClass( 'btn--active' );
activeTargetStrs.push( filterStr );
}

// Apply filters

// Show all, if every filter is active (ie. if every ibox should be shown)
if ( activeTargetStrs.length === allTargetStrs.length )
{
$allTargets.removeClass( 'ibox--hidden' );
$allTargets.css( { opacity: 1 } );
}
// Otherwise, apply the actual filters
else
{
// Hide all to start with
$allTargets.addClass( 'ibox--hidden' );
$allTargets.css( { opacity: 0.2 } );

// Show any that match the currently active filters
for (var i = 0; i < activeTargetStrs.length; i++)
{
var targetStr = activeTargetStrs[i];
var $currentTargets = $allTargets.filter( '[data-ibox-type="item"].' + targetStr );
$currentTargets.removeClass( 'ibox--hidden' );
$currentTargets.css( { opacity: 1 } );
}
}
}
});
}//end:initStatsCardsToggles

/**
* Toggle "misc" (costs/tags)
*
* Buttons: <span class="btn btn--active" data-hide-type="misc" data-hide-target=".myelement">
* Targets: <span class="myelement" data-target-type"misc">
*
* @return {void}
*/
function initStatsCardsMiscToggles()
{
var $btns = $( '[data-hide-type="misc"]' );

$btns.each( function( i, el )
{
var $btn = $( el );
var targetStr = $btn.attr( 'data-hide-target' );
var $targets = $( '[data-target-type="misc"]' + targetStr );

if ( !$targets.length )
{
return;
}

$btn.on( 'click', function( ev )
{
$btn.toggleClass( 'btn--active' );
$btn.toggleClass( 'btn--inactive' );

$targets.toggle();
});
});
}
}); // end:$(document).ready

$(document).ready( function()
{
//WIP tab toggler
$tabList = $('.tab-toggle');

if (! $tabList.length) {
return;
}

//Toggles contents of the given tabs with display
function togglecontent(tab, display) {
$('.' + tab + '-data').each(function() {
$(this).css('display', display);
});
}

//Resets all display of content and sets it to a new one
function setTab(element) {
$tabList.each(function() {
$(this).removeClass('selected-tab');
togglecontent($(this).attr('data-tab'), 'none');
});
$(element).addClass('selected-tab');
togglecontent($(element).attr('data-tab'),'');
}

$tabList.each(function(index) {
$(this).click(function() {
setTab(this);
});
});

}); // end:$(document).ready

MediaWiki:Common.css

2023-11-29T01:49:49Z

Snowpaw:

MediaWiki:Common.js

2023-11-29T00:51:56Z

Snowpaw:

/* Any JavaScript here will be loaded for all users on every page load. */

/*
WARNING: ES5 ONLY!
*/

$(document).ready( function()
{
// Inits
// ============================================================================

initCardTabs(); // Template:StatsCardWeaponTabs
initStatsCardsToggles(); // Allows hiding StatsCard (.ibox) elements, via toggle buttons (WIP)
initStatsCardsMiscToggles(); // Toggles for misc (costs/tags)

// Funcs
// ============================================================================

/**
* Sets up tabs. Used by the StatsCardWeaponTabs template
*
* @link https://brotato.wiki.spellsandguns.com/Template:StatsCardWeaponTabs
* @link https://brotato.wiki.spellsandguns.com/MediaWiki:Common.css
*
* @return {void}
*/
function initCardTabs()
{
var $containers = $( '[data-cardtabs]' );

if ( !$containers.length )
{
return;
}

// Loop over every container
$containers.each( function( i1, containerEl )
{
var $tabs = $( containerEl );

// We use the extra step of targetting containers here, instead of
// just using `.find`, because this lets us support nesteds tabs!
var $panelsContainer = $tabs.children( '[data-cardtabs-panels]' );
var $btnsContainer = $tabs.children( '[data-cardtabs-btns]' );
var $panels = $panelsContainer.children( '[data-cardtabs-panel]' );
var $btns = $btnsContainer.children( '[data-cardtabs-btn]' );

// Loop over buttons and set up their onclicks
$btns.each( function( i2, btnEl )
{
var $btn = $( btnEl );
var btnNum = $btn.attr( 'data-cardtabs-btn' );
var $panel = $panels.filter( '[data-cardtabs-panel="' + btnNum + '"]' );
var btnActiveCls = 'cardtabs__button--active';
var panelHideCls = 'cardtabs__panel--js-hidden';

// Disabled buttons use "-1" for their numbers
if ( btnNum === '-1' )
{
return;
}

$btn.on( 'click', function()
{
// Hide all other panels, then show the button's own panel
$panels.addClass( panelHideCls );
$panel.removeClass( panelHideCls );

$btns.removeClass( btnActiveCls );
$btn.addClass( btnActiveCls );
});
});
});

// Tier toggles
// ---------------------------------------------------------------------

// Example:
// <span class="btn btn--active" data-weapon-toggle="1">Tier 1</span>
// <span class="btn btn--inactive" data-weapon-toggle="2">Tier 2</span>
// <span class="btn btn--inactive" data-weapon-toggle="3">Tier 3</span>
// <span class="btn btn--inactive" data-weapon-toggle="4">Tier 4</span>

var $tierToggles = $( '[data-weapon-toggle]' );

$tierToggles.each( function( i1, el )
{
var $toggle = $( el );
var tierNum = $toggle.attr( 'data-weapon-toggle' );

$toggle.on( 'click', function( ev, el )
{
$tierToggles.not( $toggle ).addClass( 'btn--inactive' );
$tierToggles.not( $toggle ).removeClass( 'btn--active' );
$toggle.addClass( 'btn--active' );
$toggle.removeClass( 'btn--inactive' );

$containers.each( function( i2, el )
{
var $tabs = $( el );
var btnNum = tierNum;

// @todo: Maybe refactor this to remove the stuff duped from above?
var $panelsContainer = $tabs.children( '[data-cardtabs-panels]' );
var $btnsContainer = $tabs.children( '[data-cardtabs-btns]' );
var $panels = $panelsContainer.children( '[data-cardtabs-panel]' );
var $btns = $btnsContainer.children( '[data-cardtabs-btn]' );

var $btn = $btns.filter( '[data-cardtabs-btn="' + btnNum + '"]' );

if ( !$btn.length )
{
// If not button was found, it must have been a -1 button
// (ie. a disabled tab), so let's find the next lowest tier
for (var checkedNum = btnNum; checkedNum < 4; checkedNum++)
{
$btn = $btns.filter( '[data-cardtabs-btn="' + checkedNum + '"]' );
console.log($btn.length);

if ( $btn.length )
{
btnNum = checkedNum;
break;
}
}

if ( !$btn.length )
{
// If we still haven't found a button, just exit.
// Should never get to this point though, unless
// the ibox has hidden tiers that aren't in order
return;
}
}

var $panel = $panels.filter( '[data-cardtabs-panel="' + btnNum + '"]' );
var btnActiveCls = 'cardtabs__button--active';
var panelHideCls = 'cardtabs__panel--js-hidden';

// Hide all other panels, then show the button's own panel
$panels.addClass( panelHideCls );
$panel.removeClass( panelHideCls );

$btns.removeClass( btnActiveCls );
$btn.addClass( btnActiveCls );
});
});
});

}//end:initCardTabs

/**
* Toggle a StatsCard box (.ibox)
*
* Targets elements with [data-ibox-type="item"], selecting them by the
* given class (eg. rarity1), which should be applied to the element with
* the data-ibox-type data attr
*
* @todo: Use the CSS class (ibox--hidden) instead of JS-injected opacity
*
* @return {void}
*/
function initStatsCardsToggles()
{
var $allBtns = $( '[data-hide-type="item"]' );
var $bulkBtns = $( '[data-hide-target="show-all"], [data-hide-target="show-none"]' );
var $nonBulkBtns = $allBtns.not( $bulkBtns );
var $allTargets = $( '[data-ibox-type="item"]' );

// Stores all target strings
// Used to prevent iboxs from being hidden when they shouldn't be
var allTargetStrs = [];
var activeTargetStrs = []

var specialFilters = [
'show-all',
'show-none'
];

$allBtns.each( function( i, el )
{
var $btn = $( el );
var filterStr = $btn.attr( 'data-hide-target' ); // eg "rarity3"

// ES5 version of Array.prototype.includes()
if ( ( allTargetStrs.indexOf( filterStr ) === -1 ) && ( specialFilters.indexOf( filterStr ) === -1 ) )
{
allTargetStrs.push( filterStr );
}
});

activeTargetStrs = allTargetStrs;

$allBtns.on( 'click', function( ev )
{
var $btn = $( ev.currentTarget );
var filterStr = $btn.attr( 'data-hide-target' ); // eg "rarity3"
var $targets = $( '[data-ibox-type="item"]' + filterStr );
var $all = $( '[data-ibox-type="item"]' );

if ( filterStr === 'show-all' || filterStr === 'show-none' )
{
// Bulk toggle ALL targets
$targets = $all;

switch( filterStr )
{
case 'show-all':
$targets.removeClass( 'ibox--hidden' );
$targets.css( { opacity: 1 } );
$nonBulkBtns.addClass( 'btn--active' );
$nonBulkBtns.removeClass( 'btn--inactive' );
activeTargetStrs = allTargetStrs;
break;

case 'show-none':
$targets.addClass( 'ibox--hidden' );
$targets.css( { opacity: 0.2 } );
$nonBulkBtns.removeClass( 'btn--active' );
$nonBulkBtns.addClass( 'btn--inactive' );
activeTargetStrs = [];
break;
}
}
else
{
var strIndex = activeTargetStrs.indexOf( filterStr );

if ( $btn.hasClass( 'btn--active' ) )
{
// Button was active, so it's now INACTIVE

// If all other buttons are active (ie. no buttons have been
// selected yet), make this one active and all others disabled
if ( activeTargetStrs.length === allTargetStrs.length )
{
// Disable all others, keep only this one
$nonBulkBtns.not( $btn ).removeClass( 'btn--active' );
$nonBulkBtns.not( $btn ).addClass( 'btn--inactive' );
activeTargetStrs = [];
activeTargetStrs.push( filterStr );
}
// Or, if this was the last (ie. only) active button and it
// was just disabled, enable every button
else if ( activeTargetStrs.length === 1 )
{
$nonBulkBtns.removeClass( 'btn--inactive' );
$nonBulkBtns.addClass( 'btn--active' );
activeTargetStrs = allTargetStrs;
}
// Otherwise function normally: Just disable this button
else
{
$btn.removeClass( 'btn--active' );
$btn.addClass( 'btn--inactive' );
activeTargetStrs.splice( strIndex, 1 );
}
}
else
{
// Button was inactive, so it's now ACTIVE
$btn.removeClass( 'btn--inactive' );
$btn.addClass( 'btn--active' );
activeTargetStrs.push( filterStr );
}

// Apply filters

// Show all, if every filter is active (ie. if every ibox should be shown)
if ( activeTargetStrs.length === allTargetStrs.length )
{
$allTargets.removeClass( 'ibox--hidden' );
$allTargets.css( { opacity: 1 } );
}
// Otherwise, apply the actual filters
else
{
// Hide all to start with
$allTargets.addClass( 'ibox--hidden' );
$allTargets.css( { opacity: 0.2 } );

// Show any that match the currently active filters
for (var i = 0; i < activeTargetStrs.length; i++)
{
var targetStr = activeTargetStrs[i];
var $currentTargets = $allTargets.filter( '[data-ibox-type="item"].' + targetStr );
$currentTargets.removeClass( 'ibox--hidden' );
$currentTargets.css( { opacity: 1 } );
}
}
}
});
}//end:initStatsCardsToggles

/**
* Toggle "misc" (costs/tags)
*
* Buttons: <span class="btn btn--active" data-hide-type="misc" data-hide-target=".myelement">
* Targets: <span class="myelement" data-target-type"misc">
*
* @return {void}
*/
function initStatsCardsMiscToggles()
{
var $btns = $( '[data-hide-type="misc"]' );

$btns.each( function( i, el )
{
var $btn = $( el );
var targetStr = $btn.attr( 'data-hide-target' );
var $targets = $( '[data-target-type="misc"]' + targetStr );

if ( !$targets.length )
{
return;
}

$btn.on( 'click', function( ev )
{
$btn.toggleClass( 'btn--active' );
$btn.toggleClass( 'btn--inactive' );

$targets.toggle();
});
});
}

//WIP merchant toggler
$merchantList = $('.merchant-toggle');

if (! $merchantList.length) {
return;
}

//Toggles contents of the given merchant with display
function togglecontent(merchant, display) {
$('.' + merchant + '-data').each(function() {
$(this).css('display', display);
});
}

//Resets all display of content and sets it to a new one
function setMerchant(element) {
$merchantList.each(function() {
$(this).removeClass('selected-merchant');
togglecontent($(this).attr('mechant-id'), 'none');
});
$(element).addClass('selected-merchant');
togglecontent($(element).attr('mechant-id'),'');
}

$dealerList.each(function() {
$(this).click(setMerchant(this));
});

}); // end:$(document).ready

MediaWiki:Common.js

2023-11-29T00:38:57Z

Snowpaw:

/* Any JavaScript here will be loaded for all users on every page load. */

/*
WARNING: ES5 ONLY!
*/

$(document).ready( function()
{
// Inits
// ============================================================================

initCardTabs(); // Template:StatsCardWeaponTabs
initStatsCardsToggles(); // Allows hiding StatsCard (.ibox) elements, via toggle buttons (WIP)
initStatsCardsMiscToggles(); // Toggles for misc (costs/tags)

// Funcs
// ============================================================================

/**
* Sets up tabs. Used by the StatsCardWeaponTabs template
*
* @link https://brotato.wiki.spellsandguns.com/Template:StatsCardWeaponTabs
* @link https://brotato.wiki.spellsandguns.com/MediaWiki:Common.css
*
* @return {void}
*/
function initCardTabs()
{
var $containers = $( '[data-cardtabs]' );

if ( !$containers.length )
{
return;
}

// Loop over every container
$containers.each( function( i1, containerEl )
{
var $tabs = $( containerEl );

// We use the extra step of targetting containers here, instead of
// just using `.find`, because this lets us support nesteds tabs!
var $panelsContainer = $tabs.children( '[data-cardtabs-panels]' );
var $btnsContainer = $tabs.children( '[data-cardtabs-btns]' );
var $panels = $panelsContainer.children( '[data-cardtabs-panel]' );
var $btns = $btnsContainer.children( '[data-cardtabs-btn]' );

// Loop over buttons and set up their onclicks
$btns.each( function( i2, btnEl )
{
var $btn = $( btnEl );
var btnNum = $btn.attr( 'data-cardtabs-btn' );
var $panel = $panels.filter( '[data-cardtabs-panel="' + btnNum + '"]' );
var btnActiveCls = 'cardtabs__button--active';
var panelHideCls = 'cardtabs__panel--js-hidden';

// Disabled buttons use "-1" for their numbers
if ( btnNum === '-1' )
{
return;
}

$btn.on( 'click', function()
{
// Hide all other panels, then show the button's own panel
$panels.addClass( panelHideCls );
$panel.removeClass( panelHideCls );

$btns.removeClass( btnActiveCls );
$btn.addClass( btnActiveCls );
});
});
});

// Tier toggles
// ---------------------------------------------------------------------

// Example:
// <span class="btn btn--active" data-weapon-toggle="1">Tier 1</span>
// <span class="btn btn--inactive" data-weapon-toggle="2">Tier 2</span>
// <span class="btn btn--inactive" data-weapon-toggle="3">Tier 3</span>
// <span class="btn btn--inactive" data-weapon-toggle="4">Tier 4</span>

var $tierToggles = $( '[data-weapon-toggle]' );

$tierToggles.each( function( i1, el )
{
var $toggle = $( el );
var tierNum = $toggle.attr( 'data-weapon-toggle' );

$toggle.on( 'click', function( ev, el )
{
$tierToggles.not( $toggle ).addClass( 'btn--inactive' );
$tierToggles.not( $toggle ).removeClass( 'btn--active' );
$toggle.addClass( 'btn--active' );
$toggle.removeClass( 'btn--inactive' );

$containers.each( function( i2, el )
{
var $tabs = $( el );
var btnNum = tierNum;

// @todo: Maybe refactor this to remove the stuff duped from above?
var $panelsContainer = $tabs.children( '[data-cardtabs-panels]' );
var $btnsContainer = $tabs.children( '[data-cardtabs-btns]' );
var $panels = $panelsContainer.children( '[data-cardtabs-panel]' );
var $btns = $btnsContainer.children( '[data-cardtabs-btn]' );

var $btn = $btns.filter( '[data-cardtabs-btn="' + btnNum + '"]' );

if ( !$btn.length )
{
// If not button was found, it must have been a -1 button
// (ie. a disabled tab), so let's find the next lowest tier
for (var checkedNum = btnNum; checkedNum < 4; checkedNum++)
{
$btn = $btns.filter( '[data-cardtabs-btn="' + checkedNum + '"]' );
console.log($btn.length);

if ( $btn.length )
{
btnNum = checkedNum;
break;
}
}

if ( !$btn.length )
{
// If we still haven't found a button, just exit.
// Should never get to this point though, unless
// the ibox has hidden tiers that aren't in order
return;
}
}

var $panel = $panels.filter( '[data-cardtabs-panel="' + btnNum + '"]' );
var btnActiveCls = 'cardtabs__button--active';
var panelHideCls = 'cardtabs__panel--js-hidden';

// Hide all other panels, then show the button's own panel
$panels.addClass( panelHideCls );
$panel.removeClass( panelHideCls );

$btns.removeClass( btnActiveCls );
$btn.addClass( btnActiveCls );
});
});
});

}//end:initCardTabs

/**
* Toggle a StatsCard box (.ibox)
*
* Targets elements with [data-ibox-type="item"], selecting them by the
* given class (eg. rarity1), which should be applied to the element with
* the data-ibox-type data attr
*
* @todo: Use the CSS class (ibox--hidden) instead of JS-injected opacity
*
* @return {void}
*/
function initStatsCardsToggles()
{
var $allBtns = $( '[data-hide-type="item"]' );
var $bulkBtns = $( '[data-hide-target="show-all"], [data-hide-target="show-none"]' );
var $nonBulkBtns = $allBtns.not( $bulkBtns );
var $allTargets = $( '[data-ibox-type="item"]' );

// Stores all target strings
// Used to prevent iboxs from being hidden when they shouldn't be
var allTargetStrs = [];
var activeTargetStrs = []

var specialFilters = [
'show-all',
'show-none'
];

$allBtns.each( function( i, el )
{
var $btn = $( el );
var filterStr = $btn.attr( 'data-hide-target' ); // eg "rarity3"

// ES5 version of Array.prototype.includes()
if ( ( allTargetStrs.indexOf( filterStr ) === -1 ) && ( specialFilters.indexOf( filterStr ) === -1 ) )
{
allTargetStrs.push( filterStr );
}
});

activeTargetStrs = allTargetStrs;

$allBtns.on( 'click', function( ev )
{
var $btn = $( ev.currentTarget );
var filterStr = $btn.attr( 'data-hide-target' ); // eg "rarity3"
var $targets = $( '[data-ibox-type="item"]' + filterStr );
var $all = $( '[data-ibox-type="item"]' );

if ( filterStr === 'show-all' || filterStr === 'show-none' )
{
// Bulk toggle ALL targets
$targets = $all;

switch( filterStr )
{
case 'show-all':
$targets.removeClass( 'ibox--hidden' );
$targets.css( { opacity: 1 } );
$nonBulkBtns.addClass( 'btn--active' );
$nonBulkBtns.removeClass( 'btn--inactive' );
activeTargetStrs = allTargetStrs;
break;

case 'show-none':
$targets.addClass( 'ibox--hidden' );
$targets.css( { opacity: 0.2 } );
$nonBulkBtns.removeClass( 'btn--active' );
$nonBulkBtns.addClass( 'btn--inactive' );
activeTargetStrs = [];
break;
}
}
else
{
var strIndex = activeTargetStrs.indexOf( filterStr );

if ( $btn.hasClass( 'btn--active' ) )
{
// Button was active, so it's now INACTIVE

// If all other buttons are active (ie. no buttons have been
// selected yet), make this one active and all others disabled
if ( activeTargetStrs.length === allTargetStrs.length )
{
// Disable all others, keep only this one
$nonBulkBtns.not( $btn ).removeClass( 'btn--active' );
$nonBulkBtns.not( $btn ).addClass( 'btn--inactive' );
activeTargetStrs = [];
activeTargetStrs.push( filterStr );
}
// Or, if this was the last (ie. only) active button and it
// was just disabled, enable every button
else if ( activeTargetStrs.length === 1 )
{
$nonBulkBtns.removeClass( 'btn--inactive' );
$nonBulkBtns.addClass( 'btn--active' );
activeTargetStrs = allTargetStrs;
}
// Otherwise function normally: Just disable this button
else
{
$btn.removeClass( 'btn--active' );
$btn.addClass( 'btn--inactive' );
activeTargetStrs.splice( strIndex, 1 );
}
}
else
{
// Button was inactive, so it's now ACTIVE
$btn.removeClass( 'btn--inactive' );
$btn.addClass( 'btn--active' );
activeTargetStrs.push( filterStr );
}

// Apply filters

// Show all, if every filter is active (ie. if every ibox should be shown)
if ( activeTargetStrs.length === allTargetStrs.length )
{
$allTargets.removeClass( 'ibox--hidden' );
$allTargets.css( { opacity: 1 } );
}
// Otherwise, apply the actual filters
else
{
// Hide all to start with
$allTargets.addClass( 'ibox--hidden' );
$allTargets.css( { opacity: 0.2 } );

// Show any that match the currently active filters
for (var i = 0; i < activeTargetStrs.length; i++)
{
var targetStr = activeTargetStrs[i];
var $currentTargets = $allTargets.filter( '[data-ibox-type="item"].' + targetStr );
$currentTargets.removeClass( 'ibox--hidden' );
$currentTargets.css( { opacity: 1 } );
}
}
}
});
}//end:initStatsCardsToggles

/**
* Toggle "misc" (costs/tags)
*
* Buttons: <span class="btn btn--active" data-hide-type="misc" data-hide-target=".myelement">
* Targets: <span class="myelement" data-target-type"misc">
*
* @return {void}
*/
function initStatsCardsMiscToggles()
{
var $btns = $( '[data-hide-type="misc"]' );

$btns.each( function( i, el )
{
var $btn = $( el );
var targetStr = $btn.attr( 'data-hide-target' );
var $targets = $( '[data-target-type="misc"]' + targetStr );

if ( !$targets.length )
{
return;
}

$btn.on( 'click', function( ev )
{
$btn.toggleClass( 'btn--active' );
$btn.toggleClass( 'btn--inactive' );

$targets.toggle();
});
});
}

//WIP merchant toggler
$merchantList = $('.merchant-toggle');

if (! $merchantList.length) {
return;
}

//Toggles contents of the given merchant with display
function togglecontent(merchant, display) {
$('.' + merchant + '-data').each(function() {
$(this).css('display', display);
});
}

//Resets all display of content and sets it to a new one
function setMerchant(element) {
$merchantList.each(function() {
$(this).removeClass('selected-merchant');
togglecontent($(this).attr('mechant-id'), 'none');
});
$(element).addClass('selected-merchant');
togglecontent($(element).attr('mechant-id'),'');
}

$dealerList.each(function(index) {
$(this).on('click', function() {
setMerchant(this);
});
});

}); // end:$(document).ready

MediaWiki:Common.js

2023-11-29T00:35:02Z

Snowpaw:

/* Any JavaScript here will be loaded for all users on every page load. */

/*
WARNING: ES5 ONLY!
*/

$(document).ready( function()
{
// Inits
// ============================================================================

initCardTabs(); // Template:StatsCardWeaponTabs
initStatsCardsToggles(); // Allows hiding StatsCard (.ibox) elements, via toggle buttons (WIP)
initStatsCardsMiscToggles(); // Toggles for misc (costs/tags)

// Funcs
// ============================================================================

/**
* Sets up tabs. Used by the StatsCardWeaponTabs template
*
* @link https://brotato.wiki.spellsandguns.com/Template:StatsCardWeaponTabs
* @link https://brotato.wiki.spellsandguns.com/MediaWiki:Common.css
*
* @return {void}
*/
function initCardTabs()
{
var $containers = $( '[data-cardtabs]' );

if ( !$containers.length )
{
return;
}

// Loop over every container
$containers.each( function( i1, containerEl )
{
var $tabs = $( containerEl );

// We use the extra step of targetting containers here, instead of
// just using `.find`, because this lets us support nesteds tabs!
var $panelsContainer = $tabs.children( '[data-cardtabs-panels]' );
var $btnsContainer = $tabs.children( '[data-cardtabs-btns]' );
var $panels = $panelsContainer.children( '[data-cardtabs-panel]' );
var $btns = $btnsContainer.children( '[data-cardtabs-btn]' );

// Loop over buttons and set up their onclicks
$btns.each( function( i2, btnEl )
{
var $btn = $( btnEl );
var btnNum = $btn.attr( 'data-cardtabs-btn' );
var $panel = $panels.filter( '[data-cardtabs-panel="' + btnNum + '"]' );
var btnActiveCls = 'cardtabs__button--active';
var panelHideCls = 'cardtabs__panel--js-hidden';

// Disabled buttons use "-1" for their numbers
if ( btnNum === '-1' )
{
return;
}

$btn.on( 'click', function()
{
// Hide all other panels, then show the button's own panel
$panels.addClass( panelHideCls );
$panel.removeClass( panelHideCls );

$btns.removeClass( btnActiveCls );
$btn.addClass( btnActiveCls );
});
});
});

// Tier toggles
// ---------------------------------------------------------------------

// Example:
// <span class="btn btn--active" data-weapon-toggle="1">Tier 1</span>
// <span class="btn btn--inactive" data-weapon-toggle="2">Tier 2</span>
// <span class="btn btn--inactive" data-weapon-toggle="3">Tier 3</span>
// <span class="btn btn--inactive" data-weapon-toggle="4">Tier 4</span>

var $tierToggles = $( '[data-weapon-toggle]' );

$tierToggles.each( function( i1, el )
{
var $toggle = $( el );
var tierNum = $toggle.attr( 'data-weapon-toggle' );

$toggle.on( 'click', function( ev, el )
{
$tierToggles.not( $toggle ).addClass( 'btn--inactive' );
$tierToggles.not( $toggle ).removeClass( 'btn--active' );
$toggle.addClass( 'btn--active' );
$toggle.removeClass( 'btn--inactive' );

$containers.each( function( i2, el )
{
var $tabs = $( el );
var btnNum = tierNum;

// @todo: Maybe refactor this to remove the stuff duped from above?
var $panelsContainer = $tabs.children( '[data-cardtabs-panels]' );
var $btnsContainer = $tabs.children( '[data-cardtabs-btns]' );
var $panels = $panelsContainer.children( '[data-cardtabs-panel]' );
var $btns = $btnsContainer.children( '[data-cardtabs-btn]' );

var $btn = $btns.filter( '[data-cardtabs-btn="' + btnNum + '"]' );

if ( !$btn.length )
{
// If not button was found, it must have been a -1 button
// (ie. a disabled tab), so let's find the next lowest tier
for (var checkedNum = btnNum; checkedNum < 4; checkedNum++)
{
$btn = $btns.filter( '[data-cardtabs-btn="' + checkedNum + '"]' );
console.log($btn.length);

if ( $btn.length )
{
btnNum = checkedNum;
break;
}
}

if ( !$btn.length )
{
// If we still haven't found a button, just exit.
// Should never get to this point though, unless
// the ibox has hidden tiers that aren't in order
return;
}
}

var $panel = $panels.filter( '[data-cardtabs-panel="' + btnNum + '"]' );
var btnActiveCls = 'cardtabs__button--active';
var panelHideCls = 'cardtabs__panel--js-hidden';

// Hide all other panels, then show the button's own panel
$panels.addClass( panelHideCls );
$panel.removeClass( panelHideCls );

$btns.removeClass( btnActiveCls );
$btn.addClass( btnActiveCls );
});
});
});

}//end:initCardTabs

/**
* Toggle a StatsCard box (.ibox)
*
* Targets elements with [data-ibox-type="item"], selecting them by the
* given class (eg. rarity1), which should be applied to the element with
* the data-ibox-type data attr
*
* @todo: Use the CSS class (ibox--hidden) instead of JS-injected opacity
*
* @return {void}
*/
function initStatsCardsToggles()
{
var $allBtns = $( '[data-hide-type="item"]' );
var $bulkBtns = $( '[data-hide-target="show-all"], [data-hide-target="show-none"]' );
var $nonBulkBtns = $allBtns.not( $bulkBtns );
var $allTargets = $( '[data-ibox-type="item"]' );

// Stores all target strings
// Used to prevent iboxs from being hidden when they shouldn't be
var allTargetStrs = [];
var activeTargetStrs = []

var specialFilters = [
'show-all',
'show-none'
];

$allBtns.each( function( i, el )
{
var $btn = $( el );
var filterStr = $btn.attr( 'data-hide-target' ); // eg "rarity3"

// ES5 version of Array.prototype.includes()
if ( ( allTargetStrs.indexOf( filterStr ) === -1 ) && ( specialFilters.indexOf( filterStr ) === -1 ) )
{
allTargetStrs.push( filterStr );
}
});

activeTargetStrs = allTargetStrs;

$allBtns.on( 'click', function( ev )
{
var $btn = $( ev.currentTarget );
var filterStr = $btn.attr( 'data-hide-target' ); // eg "rarity3"
var $targets = $( '[data-ibox-type="item"]' + filterStr );
var $all = $( '[data-ibox-type="item"]' );

if ( filterStr === 'show-all' || filterStr === 'show-none' )
{
// Bulk toggle ALL targets
$targets = $all;

switch( filterStr )
{
case 'show-all':
$targets.removeClass( 'ibox--hidden' );
$targets.css( { opacity: 1 } );
$nonBulkBtns.addClass( 'btn--active' );
$nonBulkBtns.removeClass( 'btn--inactive' );
activeTargetStrs = allTargetStrs;
break;

case 'show-none':
$targets.addClass( 'ibox--hidden' );
$targets.css( { opacity: 0.2 } );
$nonBulkBtns.removeClass( 'btn--active' );
$nonBulkBtns.addClass( 'btn--inactive' );
activeTargetStrs = [];
break;
}
}
else
{
var strIndex = activeTargetStrs.indexOf( filterStr );

if ( $btn.hasClass( 'btn--active' ) )
{
// Button was active, so it's now INACTIVE

// If all other buttons are active (ie. no buttons have been
// selected yet), make this one active and all others disabled
if ( activeTargetStrs.length === allTargetStrs.length )
{
// Disable all others, keep only this one
$nonBulkBtns.not( $btn ).removeClass( 'btn--active' );
$nonBulkBtns.not( $btn ).addClass( 'btn--inactive' );
activeTargetStrs = [];
activeTargetStrs.push( filterStr );
}
// Or, if this was the last (ie. only) active button and it
// was just disabled, enable every button
else if ( activeTargetStrs.length === 1 )
{
$nonBulkBtns.removeClass( 'btn--inactive' );
$nonBulkBtns.addClass( 'btn--active' );
activeTargetStrs = allTargetStrs;
}
// Otherwise function normally: Just disable this button
else
{
$btn.removeClass( 'btn--active' );
$btn.addClass( 'btn--inactive' );
activeTargetStrs.splice( strIndex, 1 );
}
}
else
{
// Button was inactive, so it's now ACTIVE
$btn.removeClass( 'btn--inactive' );
$btn.addClass( 'btn--active' );
activeTargetStrs.push( filterStr );
}

// Apply filters

// Show all, if every filter is active (ie. if every ibox should be shown)
if ( activeTargetStrs.length === allTargetStrs.length )
{
$allTargets.removeClass( 'ibox--hidden' );
$allTargets.css( { opacity: 1 } );
}
// Otherwise, apply the actual filters
else
{
// Hide all to start with
$allTargets.addClass( 'ibox--hidden' );
$allTargets.css( { opacity: 0.2 } );

// Show any that match the currently active filters
for (var i = 0; i < activeTargetStrs.length; i++)
{
var targetStr = activeTargetStrs[i];
var $currentTargets = $allTargets.filter( '[data-ibox-type="item"].' + targetStr );
$currentTargets.removeClass( 'ibox--hidden' );
$currentTargets.css( { opacity: 1 } );
}
}
}
});
}//end:initStatsCardsToggles

/**
* Toggle "misc" (costs/tags)
*
* Buttons: <span class="btn btn--active" data-hide-type="misc" data-hide-target=".myelement">
* Targets: <span class="myelement" data-target-type"misc">
*
* @return {void}
*/
function initStatsCardsMiscToggles()
{
var $btns = $( '[data-hide-type="misc"]' );

$btns.each( function( i, el )
{
var $btn = $( el );
var targetStr = $btn.attr( 'data-hide-target' );
var $targets = $( '[data-target-type="misc"]' + targetStr );

if ( !$targets.length )
{
return;
}

$btn.on( 'click', function( ev )
{
$btn.toggleClass( 'btn--active' );
$btn.toggleClass( 'btn--inactive' );

$targets.toggle();
});
});
}

//WIP merchant toggler
$merchantList = $('merchant-toggle');

if (! $merchantList.length) {
return;
}

//Toggles contents of the given merchant with display
function togglecontent(merchant, display) {
$(merchant + '-data').each(function() {
$(this).css('display', display);
});
}

//Resets all display of content and sets it to a new one
function setMerchant(element) {
$merchantList.each(function() {
$(this).removeClass('selected-merchant');
togglecontent($(this).attr('mechant-id'), 'none');
});
$(element).addClass('selected-merchant');
togglecontent($(element).attr('mechant-id'),'');
}

$dealerList.each(function(index) {
$(this).on('click', function() {
setMerchant(this);
});
});

}); // end:$(document).ready

MediaWiki:Common.css

2023-11-29T00:31:27Z

Snowpaw:

2023-04-19T00:34:35Z

Snowpaw: /* Crypt */

<metadesc>Dark and Darker Wiki Dungeons Guide. High Roller Dungeon, Enemies, Leaderboards, Difficulties and more...</metadesc>

==Dungeons==
There are 2 different types of dungeons:
*Regular, can played with party of up to 3 players
*Solo, can be solo

Beside party sizes, the dungeons are also different.

There are 3 levels for regular dungeon:
*Unknown - Dungeon Basement level 1 (Difficulty Normal): This is currently in development and not available in the game.
*[[Crypt]] - Dungeon Basement level 2 (Difficulty Hard): This level is currently the starting level for the normal dungeon.
*[[Inferno]] - Dungeon Basement level 3 (Difficulty Hell): This level is only available through surviving and entering red portals.
*[[Ruins]] - Dungeon Basement level ? (Difficulty Normal): This level is currently the starting level for the normal dungeon.

High Roller Dungeon: These dungeons are higher difficulty versions of the '''regular''' dungeons and will have higher quality loot. Every single enemy will be elite or higher.

There is only 1 level for solo dungeon:
*[[Goblin Cave]] - This dungeon is solo only that has their own ores, bosses, and enemies.

You can navigate easier with the use of the wiki's [https://darkanddarker.map.spellsandguns.com/ map].

==Crypt==
[[File:Crypt.png|right|x250px]]
The [[Crypt]] is normally going to be the second level of dungeon in the game. However, there is no level 1 at the moment.

Therefore, when you join the game, you start in this dungeon.

New ores spawn in the Crypt:

*[[File:Rubysilver Ore.png|x100px]] Rubysilver Ore

<br>
New mini bosses spawn in the Crypt:
*[[Wraith]]
*[[Skeleton Champion]]

==Ruins==
[[File:The Ruins.png|right|x250px]]
[[Ruins]] is an experimental map that can be played with up to 3 players.

It has a similar difficulty to the Crypt, and will have up to 18 people per game.

Many new monsters spawn here, such as:
*[[Wisp]]
*[[Dire Wolf]]

<br>

To learn more about monsters, check [[Enemies|Monsters]]

==Inferno==
[[File:Inferno.png|right|x250px]]
[[Inferno]] is the most difficult dungeon in the game at the moment, featuring some dangerous monsters, mini-bosses and bosses that can't be found anywhere else. It can be reached by using the down portal from the Crypt Dungeon.

While it is the most difficult dungeon, it is also the smallest dungeon. The center piece room of this dungeon always houses one of the bosses.

There is no new ore to be found in this level, it contains [[Rubysilver Ore]], same as the Crypt.

Many new monsters spawn here, such as:
*[[Demon Centaur]]
*[[Demon Dog]]
*[[Demon Bat]]

<br>
Also end game bosses:
*[[Lich]]
*[[Ghost King]]
<br>

==Goblin Cave==
[[File:Goblin Cave.png|right|x250px]]
[[Goblin Cave]] is the only "Solo" dungeon in the game at the moment.

It has a similar difficulty to the Crypt, but can be more difficult to extract as there are only 4 escape portals for 11 people.

New ores spawn in the Crypt:

*[[File:Cobalt Ore.png|x100px]] [[Cobalt Ore]]

It also has [[Rubysilver Ore]].

Many new monsters spawn here, such as:
*[[Goblin Warrior]]
*[[Goblin Archer]]
*[[Goblin Mage]]

<br>
and one Boss:
*[[Cave Troll]]
<br>

To learn more about monsters, check [[Enemies|Monsters]]

==Traps==

Watch your step, the dungeons are riddled with traps in order to protect it's valuable treasures. You will encounter 3 kinds of traps during your adventures, wall spikes, swinging axe traps and floor spike traps.
* Swinging Axe Traps does 25 HP Damage
* Wall Spikes Traps does 20 HP Damage
* Floor Spikes Traps does 20 HP Damage

<div style="display:flex; justify-content: space-evenly; flex-wrap:wrap; padding:2%;">

<div style="display= inline-block;"> [[File:Swinging_Axe_Traps.png|link=|350px]]
<p style="text-align:center;">'''Swinging Axe Traps'''</p></div>
<div style="display= inline-block;"> [[File:Wall_Spikes_Traps.png|link=|350px]]
<p style="text-align:center;">'''Wall Spikes Traps'''</p></div>
<div style="display= inline-block;"> [[File:Floor_Spikes_Traps.png|link=|350px]]
<p style="text-align:center;">'''Floor Spikes Traps'''</p></div>
</div>

As opposed to it's dormant spiky brethren, axe traps are always active. Take your time to navigate through axe traps, if you are not in a hurry, it's better to wait for the right moment to traverse instead of risking to take avoidable damage.

Wall spike traps are difficult to detect, as only a small hole is visible on the wall. Some of them are depicted on the mini-map, but you will take some unavoidable deaths while you learn the locations of the hidden ones. They are positioned at head level and spring into action when something get's too close. Simply crouch down to avoid them. Some sneaky wall spike traps are at knee height, however, these are only found in the maze.

Floor spikes are usually easy to spot, they can sometimes be hidden in dak areas, but generally it's easy to navigate around them. Alternatively, you can throw a torch onto them to activate the mechanism and wait for the moment the spikes go back down. There is a brief recharge time after the spikes have fully retracted before they can spring out again, use this downtime to walk over them for a short distance and leap away to safety before the spikes come out again.

Use these traps to your advantage to eliminate monsters or unsuspecting players.

==Portals==

There are two different types of [[Portals]] in the game, one allowing you to escape and the takes you down one level deeper.

Escape Portals will appear isolated and only allow a single person out of the dungeon.

Down Portals will appear in a set three, allowing 3 players to descend together, each of these portals also only allows one player to escape at a time.
<div style="display:flex; justify-content: space-evenly; flex-wrap:wrap; padding:2%;">

<div style="display= inline-block;"> [[File:EscapePortal.png|link=|250px]]
<p style="text-align:center;">'''Escape Portal'''</p></div>
<div style="display= inline-block;"> [[File:DescendingPortal.png|link=|250px]]
<p style="text-align:center;">'''Down Portal'''</p></div>
</div>

==Escaping==

Escaping is possible when a player activates a [[Escape Portal]] they have the option to escape the map. These portals will appear at any level, decreasing in numbers as you dwell deeper. In [[Goblin Cave]], there is [[Cave Extract]] which allows 1 person to escape.

When a player escapes they will keep everything in their inventory and additionally they will get [[Adventure Currency]] depending on how many [[Monsters]] they have killed and other factors. Also, you will keep 100% of the [[Experience Point]]s that you have earned.

In the case you die, you will only get rewarded 50% of the [[Experience Point]]s you have earned and will lose all Adventure Currency collected. Furthermore, you will lose every equipment including your tools and inventory. Currently there is no way to secure your loot.

{{:Shrines}}

==Death Swarm==

The dungeons below are protected by a powerful curse. The Death Swarm will try to consume your soul. Heed the mini-map and avoid its oppressive clutch.
The circle will slowly move closer towards the white circle indicated on the mini-map. If you are caught in the red zone you will slowly start taking 1 damage per second. However, if you are in the last circle and cannot find a portal in time before the circle fully closes, then you will instantly die.
<div style="display:flex; justify-content: space-evenly; flex-wrap:wrap; padding:2%;">

<div style="display= inline-block;"> [[File:DeathSwarm.png|x250px]]
<p style="text-align:center;">'''Death Swarm'''</p></div>
<div style="display= inline-block;"> [[File:RedZone.png|x250px]]
<p style="text-align:center;">'''Red Zone'''</p></div>
</div>

Check individual [[Dungeon#Dungeons|Dungeon]] page to see their death swarm timings.

==Monsters==
[[File:Skeleton Footman.png|right|x250px]]

There is a vast variety of [[Enemies|monsters]] you will encounter depending on the room you enter and map you get into.

The lower level the dungeon, the harder the monsters become and different types of monsters start to appear.

Monsters also have 3 different variants:
*Common
*Elite
*Nightmare

With each variety increase, the enemy gets stronger, tougher and faster.

Nightmare monsters have an extremely low spawn chance on normal difficulty dungeons.

There are mini bosses starting from level 2, however, the only way to kill bosses is by going down to the level 3 dungeon.

==Treasures==

During your adventures you will come across a vast variety of treasures of varying sizes and value. These treasures can be sold to [[The Collector]] in exchange for gold coins. As of now, larger treasures take up a lot of inventory space, but have poor gold value per inventory slot. Try picking up single slot treasures if possible, since these occupy the least amount of inventory space and therefore have the highest gold value per inventory slot.

If you want to check out the individual values, you can check [[Treasures]].

You can get more loot information in [[Lootables]], [[Containers]], and [[Monsters]]. Make sure to check their individual pages for their loot tables.

You can also find where an item drops in their own pages. For example, check [[Golden Key#Drop_Table]] to see where it drops.

==Leaderboards==

High Roller Dungeons are the only way to obtain a spot on the leaderboard. The leaderboards include:
*Veteran Adventurer: Adventure score is earned by killing enemy player and monsters, opening chests, acquiring new loot and going deeper to inferno. The player must successfully extract to secure the amassed adventure score from the raid.
*Treasure Collector: Top looting scores.
*Killer Outlaw: Amount of kills scored.
*Escape Artist: Times escaped.
*Lich Slayer: Amount of times Lich has been killed.
*GhostKing Slayer: Amount of times Ghost King has been killed.