​x
165
 
1
/**
2
 * Color Sorting
3
 * Sort the liquids so that each container only contains the same color. How fast can you sort them?
4
 *
5
 * How to use:
6
 * - Click/tap a container to select it as the source container.
7
 * - Click/tap it again to unselect it.
8
 * - Click/tap another container to select it as destination.
9
 * - The top liquid from the source container will be transfered onto the top of the destination container.
10
 *
11
 * Conversion table for the minified code:
12
 * f = isAnimating
13
 * g = stocks
14
 * h = containers
15
 * m = timeStart
16
 * n = Date.now
17
 * o = initialize
18
 * p = containerChecker
19
 * q = selection
20
 * r = prevSelection
21
 * s = size
22
 * t = tileSize
23
 * u = tileSize * 4 / 5
24
 * v = 25
25
 * w = draw
26
 */
27
​
28
size = Math.min(a.width, a.height); // Fit to window
29
a.width = size; // Make the board a square
30
a.height = size;
31
tileSize = size / 5;
32
timeStart = 0; // Timestamp of the first liquid transfer
33
selection = -1; // -1 = none
34
prevSelection = -1; // (same as above)
35
isAnimating = 0; // The offset when the liquid transfer is happening
36
stocks = []; // Used for liquid initialization
37
containers = []; // The current state of the containers
38
​
39
// Helper function to check whether a container is full and single-colored
40
containerChecker = k => {
41
    if (k.length < 5) {
42
        return false;
43
    }
44
    z = k[0];
45
    for (j = 1; j < 5; j ++) {
46
        if (k[j] != z) {
47
            z = -1;
48
            break;
49
        }
50
    }
51
    return z > -1;
52
};
53
​
54
// Function to create a randomized board
55
initialize = e => {
56
    stocks = [25, 25, 20, 25, 25]; // Green is less due to 1 empty container.
57
    containers = [];
58
    for (i = 25; i > 0; ) {
59
        z = [];
60
        if (i -- != 13) {
61
            for (j = 5; j; j --) {
62
                k = Math.floor(Math.random() * 4);
63
                while (stocks[k] <= 0) {
64
                    // This ensures that there are no pairs of the same color.
65
                    k = Math.floor(k + 1 + Math.random() * 3) % 5;
66
                }
67
                z.push(k);
68
                stocks[k] --;
69
            }
70
        }
71
        containers.push(z);
72
    }
73
    i = 0;
74
    for (; i < 25; i ++) {
75
        if (containerChecker(containers[i])) {
76
            break;
77
        }
78
    }
79
    if (i < 25) {
80
        initialize();
81
    }
82
};
83
initialize();
84
​
85
// Function to draw the board
86
draw = e => {
87
    for (y = 0; y < 5; y ++) {
88
    for (x = 0; x < 5; x ++) {
89
        i = x + y * 5;
90
        if (prevSelection == i) { // The selected container
91
            c.fillStyle = "#ffa";
92
        } else if (containerChecker(containers[i])) { // The "correct" container
93
            c.fillStyle = "#afa";
94
        } else {
95
            c.fillStyle = "#fff";
96
        }
97
        c.fillRect(tileSize * x, tileSize * y, tileSize, tileSize);
98
        c.strokeRect(tileSize * (x + 0.1), tileSize * (y + 0.1), tileSize * 4 / 5, tileSize * 4 / 5);
99
        k = containers[i].length;
100
        j = 0;
101
        z = 0;
102
        for (; z < k; z ++) {
103
            if (isAnimating && z == k - 1) {
104
                if (prevSelection == i) { // The source container is giving the top liquid.
105
                    j = tileSize * 4 / 25 - isAnimating;
106
                } else if (selection == i) { // The destination container is receiving a liquid on top.
107
                    j = isAnimating;
108
                }
109
            }
110
            hue = containers[i][z] / 5 * 360;
111
            c.fillStyle = `hsl(${hue},100%,50%)`;
112
            c.fillRect(tileSize * (x + 0.1), tileSize * (y + 0.1 + 16 / 25 - z * 4 / 25) + j, tileSize * 4 / 5, tileSize * 4 / 25 - j);
113
        }
114
    }
115
    }
116
    if (isAnimating > 0) {
117
        setTimeout(draw, 9);
118
        isAnimating = Math.max(0, isAnimating - 2);
119
        if (isAnimating == 0) {
120
            // The top liquid is removed from the source container only after the animation has completed.
121
            containers[prevSelection].pop();
122
            // All selections are cleared after the transfer is done.
123
            selection = prevSelection = -1;
124
        }
125
    }
126
};
127
draw();
128
​
129
// Function to be called when a click is happening
130
a.onclick = e => {
131
    if (isAnimating > 0) {
132
        // The board is frozen/disabled when an animation is still happening.
133
        return;
134
    }
135
    selection = Math.floor(e.x / tileSize) + Math.floor(e.y / tileSize) * 5;
136
    if (prevSelection < 0) {
137
        if (containers[selection].length > 0) {
138
            // The player can only select non-empty containers.
139
            prevSelection = selection;
140
        }
141
    } else if (prevSelection == selection) {
142
        // This allows player to unselect a container.
143
        selection = -1;
144
        prevSelection = -1;
145
    } else if (containers[selection].length < 5) {
146
        // The player can only select a non-full container as the destination.
147
        containers[selection].push(containers[prevSelection].slice(-1)[0]);
148
        isAnimating = tileSize * 4 / 25;
149
        if (timeStart == 0) {
150
            timeStart = Date.now();
151
        }
152
    }
153
    draw();
154
    x = 0;
155
    i = 0;
156
    for (; i < 25; ) {
157
        if (containerChecker(containers[i ++])) {
158
            x ++;
159
        }
160
    }
161
    if (x > 23) {
162
        // A winning alert is shown after the player has completed the task.
163
        alert(`Won! (${(Date.now()-timeStart)/1000} s)`);
164
    }
165
};