3DNexus

Adding perspective view to Nexus.
As of 14.02.2021. See ბოლო ვერსია.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         3DNexus
// @namespace    https://duelingnexus.com/
// @version      0.4
// @description  Adding perspective view to Nexus.
// @author       part-time roadman#1456
// @include      https://duelingnexus.com/game/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // CSS
    GM_addStyle(`
        #game-field > tbody {
            transform: perspective(30rem) rotateX(30deg) scale(1) translate(0%, -20%);
        }

        #game-field-opponent-hand {
            transform: translate(39%, -680%) scale(0.6) rotate(180deg);
            position: absolute;
        }

        #game-field-player-hand {
            transform: translate(39%, -200%);
            position: absolute;
        }

        #game-field-player-deck {
            transform: translate(500%, 0) scaley(0.8);
        }

        #game-field-player-extra {
            transform: scaley(0.8);
        }

        #game-field-opponent-extra {
            transform: translate(490%, 0);
        }

        #game-field-opponent-spell4, #game-field-opponent-spell3, #game-field-opponent-spell2, #game-field-opponent-spell1 {
            transform: translate(-102%, 0);
        }

        #phase-container {
            width: 30px;
            transform: translate(-30%,-50%);
            position: absolute;
            bottom: -4%;
            right: 2%;
        }

        .game-avatar-area.game-avatar-left {
            position: absolute;
            top: 0;
            right: 4%;
            width: 93px;
        }

        .game-avatar-area.game-avatar-right {
            position: absolute;
            top: 12%;
            right: 4%;
            width: 93px;
        }

        #game-player-name, #game-opponent-name {
            position: absolute;
            top: -14%;
            right: 0;
            transform: translate(-74px, 120%);
            text-align: center;
            width: 150px;
            z-index: -2;
            background: #9d4fb7;
            border: 2px solid black;
            border-radius: 5px;
            white-space: nowrap;
        }

        #game-avatar-player-image, #game-avatar-opponent-image {
            border-radius: 50%;
            border: 4px solid #9d4fb7;
        }

        #game-life-player {
            position: absolute;
            display: block;
            transform: translate(-63px, -63px);
            font-family: math;
            font-weight: bold;
        }

        #game-life-opponent {
            position: absolute;
            display: block;
            transform: translate(-63px, -63px);
            font-family: math;
            font-weight: bold;
        }

        .game-life-bar {
            margin-top: 8px;
            background-color: gray;
            height: 15px;
            border-radius: 5px;
            z-index: -1;
            border: none;
            position: absolute;
            top: -14%;
            right: 0;
            transform: translate(-110%, 300%) scaleX(1.3);
        }

        .game-life-bar-part {
            background-color: #c03030;
            border-radius: 5px;
            height: 100%;
        }

        div#game-timer-bar-player, #game-timer-bar-opponent {
            display: none !important;
        }

        #game-timer-player, #game-timer-opponent {
            position: fixed;
            margin-left: -13px;
        }

    `);

    // 3D Exclusions
    const game = document.getElementById("game-field");
    const divExclusions = document.createElement("div");
    const handPlr = document.getElementById("game-field-player-hand");
    const handOpp = document.getElementById("game-field-opponent-hand");
    const btnDP = document.getElementById("game-dp-button");
    const btnSP = document.getElementById("game-sp-button");
    const btnMP1 = document.getElementById("game-mp1-button");
    const btnBP = document.getElementById("game-bp-button");
    const btnMP2 = document.getElementById("game-mp2-button");
    const btnEP = document.getElementById("game-ep-button");
    const btnCancel = document.getElementById("game-cancel-button");
    const btnForce = document.getElementById("game-force-chain-button");
    const stats = document.getElementsByClassName("game-avatar-area");
    const Exclusions = [handPlr, handOpp];
    const options = document.getElementById("options-area");
    const phaseContainer = document.createElement("div");
    const phaseBtns = [btnDP, btnSP, btnMP1, btnBP, btnMP2, btnEP];

    divExclusions.setAttribute("id", "Exclusions");
    game.appendChild(divExclusions);
    Exclusions.forEach(item => divExclusions.appendChild(item));
    for (let i = 0; i < stats.length; i++) {
       Exclusions.forEach(item => divExclusions.appendChild(stats[i]));
    }
    options.appendChild(btnCancel);
    options.appendChild(btnForce);
    phaseContainer.setAttribute("id", "phase-container");
    divExclusions.appendChild(phaseContainer);
    phaseBtns.forEach(item => phaseContainer.appendChild(item));
})();