RetroDraw/app.js at main · RobPeeples/RetroDraw · 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


const PALETTE = [
    'red',
    'blue',
    'green',
    'purple',
    'orange',
    'pink',
    'white',
    'black',
    'yellow',

    ]

function makePalette() {
    for (let index = 0; index < PALETTE.length; index = index + 1) {
        const nextColor = PALETTE[index];
        let newButton = $('<button>' + nextColor + '</button>');

        console.log(newButton);
        newButton.css("background-color", nextColor);

    if (nextColor === 'black' || nextColor === 'blue' || nextColor === 'purple') {
        newButton.css('color', 'white');
        }
        $('.palette').append(newButton);
        $('.palette button').first().addClass('active');
            }
        }
        makePalette();

function makeGrid() {
    for (let i = 0; i < 64; i++) {
        let newDiv = $('<div class = "cell">');
        $('.grid').append(newDiv);
            }
        }
        makeGrid();

function onPaletteClick() {
    if('.palette button' != 'active') {
        $('.palette button').removeClass('active');
            }
        $(this).toggleClass('active');
        $('.palette button').click(onPaletteClick);
        }

        onPaletteClick();

function onGridClick() {
        const paletteColor = $('.palette .active').css('background-color');

        $(this).css('background-color', paletteColor);
        $('.cell').click(onGridClick);
        }

        onGridClick();

function onClearClick() {
        $('.grid .cell').css('background-color', "");
        $('.controls .clear').click(onClearClick);
        }

        onClearClick();

function onFillAllClick() {
        $('.controls .fill-all').click(onFillAllClick);
        const paletteColor = $('.palette .active').css('background-color');
        $('.grid .cell').css('background-color', paletteColor);
        }

        onFillAllClick();

function onFillEmptyClick() {
        let elements = $('.grid .cell')

        for (let index = 0; index < elements.length; index = index + 1) {
            let nextElement = $( elements[index] );

            if (nextElement.css('background-color') === 'rgba(0, 0, 0, 0)') {
                nextElement.css('background-color', $('.palette .active').css('background-color'));
                }
            }
        }
        $('.controls .fill-empty').click(onFillEmptyClick);
        onFillEmptyClick();