User:Toad64/common.js

2026-07-04T03:05:03Z

Toad64: second pass of css code

User:Toad64/common.js

2026-07-04T03:01:16Z

Toad64: initial change to css to user wikis ::root

User:Toad64/common.css

2026-07-04T02:44:54Z

Toad64: commented out personal ::root for media player element

User:Toad64/Sandbox

2026-07-04T02:34:30Z

Toad64:

Using Javascript (and a set of ::root colors i had), It is possible to modify the default audio element used to play audio.

<syntaxhighlight lang="javascript">
// gemini code

// In your Common.js
$(document).ready(function() {
// Find every native audio player generated by the wiki
$('audio').each(function() {
// Create your custom component
const myPlayer = document.createElement('audio-player');

// Transfer the source
myPlayer.setAttribute('track', $(this).attr('src'));

// Replace the native player with your custom one
$(this).replaceWith(myPlayer);
});
});

// audioplayer.js (pulled and modified from website)
if (!customElements.get('audio-player')) {
class AudioPlayer extends HTMLElement {
connectedCallback() {
const src = this.getAttribute("track") || "";
const ext = src.split(".").pop().toLowerCase();
const mime = ext === "wav" ? "audio/wav" : "audio/mpeg";

this.innerHTML = `
<style>
.player-controls {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 400px;
background: var(--box-color, #222);
padding: 10px 15px;
border-radius: 50px;
color: white;
font-family: sans-serif;
}
.playBtn {
width: 30px;
height: 30px;
background: var(--green-color, #4caf50);
border: none;
color: white;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
}
.seek {
-webkit-appearance: none;
flex: 1;
height: 6px;
background: #7e7e7e;
border-radius: 5px;
cursor: pointer;
}
.time { font-size: 12px; opacity: 0.8; white-space: nowrap; }
</style>

<div class="player-controls">
<audio class="audio"><source src="${src}" type="${mime}"></audio>
<button class="playBtn">▶</button>
<input class="seek" type="range" value="0" min="0" max="100">
<span class="time">0:00 / 0:00</span>
</div>
`;

const audio = this.querySelector(".audio");
const playBtn = this.querySelector(".playBtn");
const seek = this.querySelector(".seek");
const time = this.querySelector(".time");

playBtn.addEventListener("click", () => {
if (audio.paused) { audio.play(); playBtn.textContent = '⏸'; }
else { audio.pause(); playBtn.textContent = '▶'; }
});

audio.addEventListener("timeupdate", () => {
seek.value = (audio.currentTime / audio.duration) * 100 || 0;
time.textContent = formatTime(audio.currentTime) + " / " + formatTime(audio.duration);
});

seek.addEventListener("input", () => {
audio.currentTime = (seek.value / 100) * audio.duration;
});

function formatTime(sec) {
if (isNaN(sec)) return "0:00";
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60).toString().padStart(2, "0");
return `${m}:${s}`;
}
}
}
customElements.define("audio-player", AudioPlayer);
}
</syntaxhighlight>

This code creates a styleized media player (in this example the Old Deadlock Title Screen):
[[File:Music menu lp.mp3]]

Template:Gameplay Navbox

2026-07-03T22:45:08Z

Toad64: added Unstable Rift to navbox.

<templatestyles src="Navbox/styles.css" />
{{Navbox
|name = Gameplay Navbox
|title = <div class="navbox_title">Gameplay</div>
|state =
|titlestyle = border-radius: 8px;
|groupstyle = border-bottom-left-radius: 8px; border-top-left-radius: 8px; padding: 5px; text-align: center;
|abovestyle = background:#bdad9f;
|aboveclass = hlist
|above =
|group1 = <div class="navbox_group">General
|list1 = [[Abilities]] • [[Glossary]] • [[Heroes]] • [[Items]] • [[Map]] • [[Skill Rating]] • [[Stats]] • [[Strategy]]
|group2 = <div class="navbox_group">Map features
|list2 = [[Cosmic Veil]] • [[Crate]] • [[The Curiosity Shop]] • [[Golden Statue]] • [[Jump pad]] • [[Mid-Boss]] • [[Neutrals]] • [[Powerup]] • [[Rejuvenator]] • [[Ropes]] • [[Sinner's Sacrifice]] • [[Soul Urn]] • [[Structures]] • [[Teleporter]] • [[Unstable Rift]] • [[Vent]] • [[Ziplines]]
|group3 = [[Mechanics|<div class="navbox_group">Mechanics</div>]]
|list3 = [[Backdoor Protection]] • [[Boon]] • [[Cheater Frog]] • [[Crowd Control]] • [[Death]] • [[Extra Slots]] • [[Health]] • [[Melee Attack]] • [[Minimap]] • [[Movement]] • [[Souls]] • [[Stack]] • [[Status Effects]]
|group4 = <div class="navbox_group">Game Modes
|list4 = [[Bot Match]] • [[Hideout]] • [[Street Brawl]]
}}<includeonly>[[Category:Gameplay]]</includeonly><noinclude>{{Documentation}}</noinclude>

User:Toad64/common.js

2026-06-30T21:45:11Z

Toad64:

User:Toad64/common.js

2026-06-30T21:43:21Z

Toad64:

// HeroCards on wiki homepage

document.querySelectorAll('.HeroCard').forEach(function(el) {
el.style.transition = 'none';
el.style.transformStyle = 'preserve-3d';
el.style.willChange = 'transform';

var animFrame;
var current = { x: 0, y: 0 };
var target = { x: 0, y: 0 };
var mouseX = 0, mouseY = 0;
var isOver = false;
var rect = {};

var updateMouse = function(e){
mouseX = e.clientX;
mouseY = e.clientY;
}

var tick = function() {
var cx = rect.left + rect.width / 2;
var cy = rect.top + rect.height / 2;
var dx = (mouseX - cx) / (rect.width / 2);
var dy = (mouseY - cy) / (rect.height / 2);

target.x = dy * -12;
target.y = dx * 12;

current.x += (target.x - current.x) * 0.12;
current.y += (target.y - current.y) * 0.12;

el.style.transform = 'perspective(400px) rotateX(' + current.x + 'deg) rotateY(' + current.y + 'deg) scale(' + (isOver ? 1.05 : 1) + ')';

animFrame = requestAnimationFrame(tick);
};

el.addEventListener('mouseenter', function() {
rect = el.getBoundingClientRect(); // Measure ONCE
document.addEventListener('mousemove', updateMouse);
animFrame = requestAnimationFrame(tick); // Ignition
});

el.addEventListener('mouseleave', function() {
document.removeEventListener('mousemove', updateMouse);
cancelAnimationFrame(animFrame); // Kill the engine

el.style.transition = 'transform 0.5s ease-out';
el.style.transform = 'perspective(400px) rotateX(0deg) rotateY(0deg) scale(1)';

setTimeout(function() { el.style.transition = 'none'; }, 500);
});
});

// gemini code

// 1. Target the specific container if possible (e.g., table with audio)
const targetContainer = document.querySelector('.wikitable') || document.body;

let timeout;
const observer = new MutationObserver(() => {
// Clear previous pending execution (Debounce)
clearTimeout(timeout);
timeout = setTimeout(() => {
const nativePlayers = document.querySelectorAll('audio:not([data-replaced])');
nativePlayers.forEach(audio => {
audio.setAttribute('data-replaced', 'true');
audio.style.display = 'none';

const myPlayer = document.createElement('audio-player');
const src = audio.querySelector('source')?.src || audio.src;
myPlayer.setAttribute('track', src);

audio.parentElement.insertBefore(myPlayer, audio);
});
}, 200); // Wait 200ms after last change before running
});

observer.observe(targetContainer, { childList: true, subtree: true });

// audioplayer.js (pulled and modified from website)
if (!customElements.get('audio-player')) {
class AudioPlayer extends HTMLElement {
connectedCallback() {
const src = this.getAttribute("track") || "";
const ext = src.split(".").pop().toLowerCase();
const mime = ext === "wav" ? "audio/wav" : "audio/mpeg";

this.innerHTML = `
<style>
.player-controls {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 400px;
background: var(--box-color, #222);
padding: 10px 15px;
border-radius: 50px;
color: white;
font-family: sans-serif;
}
.playBtn {
width: 30px;
height: 30px;
background: var(--green-color, #4caf50);
border: none;
color: white;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
}
.seek {
-webkit-appearance: none;
flex: 1;
height: 6px;
background: #7e7e7e;
border-radius: 5px;
cursor: pointer;
}
.time { font-size: 12px; opacity: 0.8; white-space: nowrap; }
</style>

<div class="player-controls">
<audio class="audio"><source src="${src}" type="${mime}"></audio>
<button class="playBtn">▶</button>
<input class="seek" type="range" value="0" min="0" max="100">
<span class="time">0:00 / 0:00</span>
</div>
`;

const audio = this.querySelector(".audio");
const playBtn = this.querySelector(".playBtn");
const seek = this.querySelector(".seek");
const time = this.querySelector(".time");

playBtn.addEventListener("click", () => {
if (audio.paused) { audio.play(); playBtn.textContent = '⏸'; }
else { audio.pause(); playBtn.textContent = '▶'; }
});

audio.addEventListener("timeupdate", () => {
seek.value = (audio.currentTime / audio.duration) * 100 || 0;
time.textContent = formatTime(audio.currentTime) + " / " + formatTime(audio.duration);
});

seek.addEventListener("input", () => {
audio.currentTime = (seek.value / 100) * audio.duration;
});

function formatTime(sec) {
if (isNaN(sec)) return "0:00";
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60).toString().padStart(2, "0");
return `${m}:${s}`;
}
}
}
customElements.define("audio-player", AudioPlayer);
}

User:Toad64/common.js

2026-06-30T21:41:13Z

Toad64:

// HeroCards on wiki homepage

document.querySelectorAll('.HeroCard').forEach(function(el) {
el.style.transition = 'none';
el.style.transformStyle = 'preserve-3d';
el.style.willChange = 'transform';

var animFrame;
var current = { x: 0, y: 0 };
var target = { x: 0, y: 0 };
var mouseX = 0, mouseY = 0;
var isOver = false;
var rect = {};

var updateMouse = function(e){
mouseX = e.clientX;
mouseY = e.clientY;
}

var tick = function() {
var cx = rect.left + rect.width / 2;
var cy = rect.top + rect.height / 2;
var dx = (mouseX - cx) / (rect.width / 2);
var dy = (mouseY - cy) / (rect.height / 2);

target.x = dy * -12;
target.y = dx * 12;

current.x += (target.x - current.x) * 0.12;
current.y += (target.y - current.y) * 0.12;

el.style.transform = 'perspective(400px) rotateX(' + current.x + 'deg) rotateY(' + current.y + 'deg) scale(' + (isOver ? 1.05 : 1) + ')';

animFrame = requestAnimationFrame(tick);
};

el.addEventListener('mouseenter', function() {
rect = el.getBoundingClientRect(); // Measure ONCE
document.addEventListener('mousemove', updateMouse);
animFrame = requestAnimationFrame(tick); // Ignition
});

el.addEventListener('mouseleave', function() {
document.removeEventListener('mousemove', updateMouse);
cancelAnimationFrame(animFrame); // Kill the engine

el.style.transition = 'transform 0.5s ease-out';
el.style.transform = 'perspective(400px) rotateX(0deg) rotateY(0deg) scale(1)';

setTimeout(function() { el.style.transition = 'none'; }, 500);
});
});

// gemini code

// Add this to your Common.js
const observer = new MutationObserver((mutations) => {
// Look for native audio players created by the template
const nativePlayers = document.querySelectorAll('audio:not([data-replaced])');

nativePlayers.forEach(audio => {
// Mark as processed so we don't loop infinitely
audio.setAttribute('data-replaced', 'true');

// Create your custom component
const myPlayer = document.createElement('audio-player');
myPlayer.setAttribute('track', audio.querySelector('source') ? audio.querySelector('source').src : audio.src);

// Replace
audio.parentElement.replaceChild(myPlayer, audio);
});
});

// Watch the entire document body for new elements appearing
observer.observe(document.body, { childList: true, subtree: true });

// audioplayer.js (pulled and modified from website)
if (!customElements.get('audio-player')) {
class AudioPlayer extends HTMLElement {
connectedCallback() {
const src = this.getAttribute("track") || "";
const ext = src.split(".").pop().toLowerCase();
const mime = ext === "wav" ? "audio/wav" : "audio/mpeg";

this.innerHTML = `
<style>
.player-controls {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 400px;
background: var(--box-color, #222);
padding: 10px 15px;
border-radius: 50px;
color: white;
font-family: sans-serif;
}
.playBtn {
width: 30px;
height: 30px;
background: var(--green-color, #4caf50);
border: none;
color: white;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
}
.seek {
-webkit-appearance: none;
flex: 1;
height: 6px;
background: #7e7e7e;
border-radius: 5px;
cursor: pointer;
}
.time { font-size: 12px; opacity: 0.8; white-space: nowrap; }
</style>

<div class="player-controls">
<audio class="audio"><source src="${src}" type="${mime}"></audio>
<button class="playBtn">▶</button>
<input class="seek" type="range" value="0" min="0" max="100">
<span class="time">0:00 / 0:00</span>
</div>
`;

const audio = this.querySelector(".audio");
const playBtn = this.querySelector(".playBtn");
const seek = this.querySelector(".seek");
const time = this.querySelector(".time");

playBtn.addEventListener("click", () => {
if (audio.paused) { audio.play(); playBtn.textContent = '⏸'; }
else { audio.pause(); playBtn.textContent = '▶'; }
});

audio.addEventListener("timeupdate", () => {
seek.value = (audio.currentTime / audio.duration) * 100 || 0;
time.textContent = formatTime(audio.currentTime) + " / " + formatTime(audio.duration);
});

seek.addEventListener("input", () => {
audio.currentTime = (seek.value / 100) * audio.duration;
});

function formatTime(sec) {
if (isNaN(sec)) return "0:00";
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60).toString().padStart(2, "0");
return `${m}:${s}`;
}
}
}
customElements.define("audio-player", AudioPlayer);
}

User:Toad64/Sandbox

2026-06-30T21:35:32Z

Toad64: updated codeblock

Using Javascript (and a set of ::root colors i had), It is possible to modify the default audio element used to play audio.

<div class="my-custom-player-wrapper"><syntaxhighlight lang="javascript">
// gemini code

// In your Common.js
$(document).ready(function() {
// Find every native audio player generated by the wiki
$('audio').each(function() {
// Create your custom component
const myPlayer = document.createElement('audio-player');

// Transfer the source
myPlayer.setAttribute('track', $(this).attr('src'));

// Replace the native player with your custom one
$(this).replaceWith(myPlayer);
});
});

// audioplayer.js (pulled and modified from website)
if (!customElements.get('audio-player')) {
class AudioPlayer extends HTMLElement {
connectedCallback() {
const src = this.getAttribute("track") || "";
const ext = src.split(".").pop().toLowerCase();
const mime = ext === "wav" ? "audio/wav" : "audio/mpeg";

this.innerHTML = `
<style>
.player-controls {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 400px;
background: var(--box-color, #222);
padding: 10px 15px;
border-radius: 50px;
color: white;
font-family: sans-serif;
}
.playBtn {
width: 30px;
height: 30px;
background: var(--green-color, #4caf50);
border: none;
color: white;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
}
.seek {
-webkit-appearance: none;
flex: 1;
height: 6px;
background: #7e7e7e;
border-radius: 5px;
cursor: pointer;
}
.time { font-size: 12px; opacity: 0.8; white-space: nowrap; }
</style>

<div class="player-controls">
<audio class="audio"><source src="${src}" type="${mime}"></audio>
<button class="playBtn">▶</button>
<input class="seek" type="range" value="0" min="0" max="100">
<span class="time">0:00 / 0:00</span>
</div>
`;

const audio = this.querySelector(".audio");
const playBtn = this.querySelector(".playBtn");
const seek = this.querySelector(".seek");
const time = this.querySelector(".time");

playBtn.addEventListener("click", () => {
if (audio.paused) { audio.play(); playBtn.textContent = '⏸'; }
else { audio.pause(); playBtn.textContent = '▶'; }
});

audio.addEventListener("timeupdate", () => {
seek.value = (audio.currentTime / audio.duration) * 100 || 0;
time.textContent = formatTime(audio.currentTime) + " / " + formatTime(audio.duration);
});

seek.addEventListener("input", () => {
audio.currentTime = (seek.value / 100) * audio.duration;
});

function formatTime(sec) {
if (isNaN(sec)) return "0:00";
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60).toString().padStart(2, "0");
return `${m}:${s}`;
}
}
}
customElements.define("audio-player", AudioPlayer);
}
</syntaxhighlight>

This code creates a styleized media player (in this example the Curiosity Shop Music):
[[File:Curio music.mp3]]
</div>

User:Toad64/common.js

2026-06-30T21:32:06Z

Toad64: stripped unnecessary elements from player

2026-06-30T20:56:54Z

Toad64:

<div class="my-custom-player-wrapper">
[[File:Curio music.mp3]]
</div>

<audio-player
song="Curio Shop"
artist="Valve Orchestra" originalartist="N/A"
originalsource="N/A"
track="https://deadlock.wikiFile:Curio_music.mp3" artcover="">

User:Toad64/Sandbox

2026-06-30T20:55:08Z

Toad64: attempt to use custom tag.

User:Toad64/common.js

2026-06-30T20:52:59Z

Unstable Rift

2026-06-30T20:30:16Z

Toad64: type fix

{{Construction}}
'''Unstable Rift''' is an Objective in ''[[Deadlock]]''.
== Overview ==
The Rift first spawning is at the 12 minute mark. After the first spawn, it spawns at an interval of 7 minutes, with a possible variation of +/- 1 minute. When the rift spawns, it creates a capture point of 20m radius around the bridge in one of the side lanes, indicated by a green circle effect. The rift takes 12s to be captured by a neutral team (not counting comeback modifiers).

Both teams earn progress as long as they have at least one player in the capture point, but the rift can only be claimed once there's only one team in the point. The progress rate is the same regardless of how many players per team are in the point.

=== Comeback mechanics ===
The team that is trailing in souls receives bonuses that scale linearly based on how behind they are, up to 15%. These bonuses are (at maximum difference):
* 50% shorter capture time, and 50% longer for leading team
* +{{MiscData|citadel_koth_cashin|ComebackAuraModifier|modifierProvidedByAura|TechResist}}% [[Damage Resistance|Bullet, Spirit]], and [[Debuff Resist]]

They also receive bonus rewards if they capture the rift (see below).

== Rewards ==
[[File:Rift_troopers.png|thumb|389x389px|Rift troopers down York.]]
The rift's base soul bounty is {{Souls|337}} Souls and increases by '''{{Souls|95}}''' Souls per minute of game time.

When a team wins the rift:
* Rift Troopers will spawn in that lane for the winning team. They have +100% health and damage compared to normal troopers, increasing at +20% (additively) for each consecutive rift. They spawn at a minimum of 5 troopers.
* A random [[Golden Statue]] buff is granted to each member of the capturing team.
* All souls are distributed instantly and equally to all team members.
{{Permanent buffs}}

=== Comeback reward ===
If the favored team wins the rift, they get a soul bonus that scales based on game time and the team's soul deficit. They also get up to +7 Rift troopers (12 total).

== Update history ==
{{Update history}}

== Trivia ==

* Based on datamined voice lines, Unstable Rift was originally called '''Dying Star''' during development.

== References ==
<references />

{{Gameplay Navbox}}

Unstable Rift

2026-06-30T20:29:54Z

Toad64: rift initial spawn info updated

{{Construction}}
'''Unstable Rift''' is an Objective in ''[[Deadlock]]''.
== Overview ==
The Rift first spawning is at the 12 minitue mark. After the first spawn, it spawns at an interval of 7 minutes, with a possible variation of +/- 1 minute. When the rift spawns, it creates a capture point of 20m radius around the bridge in one of the side lanes, indicated by a green circle effect. The rift takes 12s to be captured by a neutral team (not counting comeback modifiers).

Both teams earn progress as long as they have at least one player in the capture point, but the rift can only be claimed once there's only one team in the point. The progress rate is the same regardless of how many players per team are in the point.

=== Comeback mechanics ===
The team that is trailing in souls receives bonuses that scale linearly based on how behind they are, up to 15%. These bonuses are (at maximum difference):
* 50% shorter capture time, and 50% longer for leading team
* +{{MiscData|citadel_koth_cashin|ComebackAuraModifier|modifierProvidedByAura|TechResist}}% [[Damage Resistance|Bullet, Spirit]], and [[Debuff Resist]]

They also receive bonus rewards if they capture the rift (see below).

== Rewards ==
[[File:Rift_troopers.png|thumb|389x389px|Rift troopers down York.]]
The rift's base soul bounty is {{Souls|337}} Souls and increases by '''{{Souls|95}}''' Souls per minute of game time.

When a team wins the rift:
* Rift Troopers will spawn in that lane for the winning team. They have +100% health and damage compared to normal troopers, increasing at +20% (additively) for each consecutive rift. They spawn at a minimum of 5 troopers.
* A random [[Golden Statue]] buff is granted to each member of the capturing team.
* All souls are distributed instantly and equally to all team members.
{{Permanent buffs}}

=== Comeback reward ===
If the favored team wins the rift, they get a soul bonus that scales based on game time and the team's soul deficit. They also get up to +7 Rift troopers (12 total).

== Update history ==
{{Update history}}

== Trivia ==

* Based on datamined voice lines, Unstable Rift was originally called '''Dying Star''' during development.

== References ==
<references />

{{Gameplay Navbox}}

Unstable Rift

2026-06-30T19:41:09Z

Toad64: added some basic info for unstable rift, will eb doing further tests to see how it spawns

{{Construction}}
'''Unstable Rift''' is an Objective in ''[[Deadlock]]''.
== Overview ==
The unstable rift is the former urn objective, now reworked into a separate objective. it is a King of the Hill style (KOTH) objective requiring a team to stay withing the range of the object to fill a meter.

(Theoreticly) The rift will not start spawning until after a [[Guardian]] is downed.

== Rewards ==
[[File:Rift_troopers.png|thumb|389x389px|Rift troopers down York.]]
Upon successfully claiming the rift, Rift troopers will spawn and for the winning team and push the lane the rift was on. The minimum that can spawn are 5, but can be up to 12 when trailing.

== Update history ==
{{Update history}}

== Trivia ==

* Based on datamined voice lines, Unstable Rift was originally called '''Dying Star''' during development.

== References ==
<references />

{{Gameplay Navbox}}

Unstable Rift

2026-06-30T19:15:41Z

Toad64: added info to rewards

{{Construction}}
'''Unstable Rift''' is an Objective in ''[[Deadlock]]''.
== Overview ==
== Rewards ==
[[File:Rift-troopers.png|thumb|389x389px|Rift troopers down York.]]
Upon successfully claiming the rift, Rift troopers will spawn and for the winning team and push the lane the rift was on. The minimum that can spawn are 5, but can be up to 12 when trailing.{{Gameplay Navbox}}

File:Rift troopers.png

2026-06-30T19:11:31Z

Toad64: The rift troopers the spawn after claiming the unstable rift objective.

== Summary ==
The rift troopers the spawn after claiming the unstable rift objective.