netrunner-mockup/mockup.js at main · notapixelstudio/netrunner-mockup · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
var svg = document.querySelector('svg');
var slide_index = 0;

var console_visible = true;

document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('.next').forEach(o => o.addEventListener('click', function(e) {
        console.log('next!');
    }));

    right_mode();

    svg.querySelectorAll('.highlight').forEach(o => {
        o.setAttribute('opacity', 0);
        o.addEventListener('mouseover', function(e) {
            o.classList.forEach(c => {
                if(c.endsWith('_h')) {
                    svg.querySelectorAll(`.${c}`).forEach(b => b.setAttribute('opacity', 1))
                }
            })
        });
        o.addEventListener('mouseout', function(e) {
            o.classList.forEach(c => {
                if(c.endsWith('_h')) {
                    svg.querySelectorAll(`.${c}`).forEach(b => b.setAttribute('opacity', 0))
                }
            })
        });
    });

    svg.querySelector('#consoleBtn').addEventListener('click', function(e) {
        console_visible = !console_visible;
        svg.querySelector('#console').setAttribute('opacity', console_visible ? 1 : 0);
    });
});

document.addEventListener('keyup', function(e) {
    if(e.code == 'ArrowLeft') {
        slide_prev();
    }
    else if(e.code == 'ArrowRight') {
        slide_next();
    }
    else if(e.code == 'KeyL') {
        left_mode();
    }
    else if(e.code == 'KeyR') {
        right_mode();
    }
});

function slide_prev() {
    slide_index = Math.max(0, slide_index-1);
    update_slide();
}

function slide_next() {
    slide_index++;
    update_slide();
}

function w(selector) {
    return +(svg.querySelector(selector).getAttribute('width'));
}

function update_slide() {
    svg.setAttribute("viewBox", `${svg.viewBox.baseVal.width*slide_index} ${svg.viewBox.baseVal.y} ${svg.viewBox.baseVal.width} ${svg.viewBox.baseVal.height}`);
}

function right_mode() {
    svg.querySelectorAll('.right').forEach(e => e.setAttribute('visibility', 'visible'));
    svg.querySelectorAll('.left').forEach(e => e.setAttribute('visibility', 'hidden'));

    svg.querySelector('#scoreArea').setAttribute('transform', `translate(0,0)`);
    svg.querySelector('#playArea').setAttribute('transform', `translate(${w('#scoreAreaExtent')},0)`);
    svg.querySelector('#actionsArea').setAttribute('transform', `translate(${w('#scoreAreaExtent')+w('#playAreaExtent')},0)`);

    svg.querySelector('#menuArea').setAttribute('transform', `translate(1920,0) scale(-1,1)`);
}

function left_mode() {
    svg.querySelectorAll('.left').forEach(e => e.setAttribute('visibility', 'visible'));
    svg.querySelectorAll('.right').forEach(e => e.setAttribute('visibility', 'hidden'));

    svg.querySelector('#actionsArea').setAttribute('transform', `translate(0,0)`);
    svg.querySelector('#playArea').setAttribute('transform', `translate(${w('#actionsAreaExtent')},0)`);
    svg.querySelector('#scoreArea').setAttribute('transform', `translate(${w('#actionsAreaExtent')+w('#playAreaExtent')},0)`);

    svg.querySelector('#menuArea').setAttribute('transform', `translate(0,0)`);
}