Loquicom
/
Boulier


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Boulier</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <link rel="stylesheet" href="boulier.css">
</head>
<body>
    <style>
        #reset {
            text-align: center;
            margin-top: 1em;
        }

        #color-picker {
            text-align: center;
            margin-top: 2em;
        }

        .hide {
            display: none;
        }
    </style>

    <main class="container">
        <div id="setup" class="hide">
            <article>
                <form>
                    <label for="nb-line">
                        Nombre de ligne
                        <input type="number" id="nb-line" name="nb-line" required>
                    </label>
                    <label for="nb-ball">
                        Nombre de boules
                        <input type="number" id="nb-ball" name="nb-ball" required>
                    </label>           
                </form>
                <button onclick="setup()">Valider</button>
            </article>
        </div>
        <div id="boulier"></div>
        <div id="color-picker"></div>
        <div id="reset" class="hide"><a href="#" onclick="boulier.reset();boulier.render()">Reset</a>&nbsp;|&nbsp;<a href="#" onclick="Boulier.clear();location.reload()">Clear</a></div>
    </main>
    

    <script src="boulier.js"></script>
    <script>
        let boulier;
        if (Boulier.isSaved()) {
            boulier = Boulier.load(document.getElementById('boulier'));
            renderAll();
        } else {
            document.getElementById('setup').classList.remove('hide');
        }

        /* --- Setup --- */
        function setup() {
            document.getElementById('setup').classList.add('hide');
            const nbLine = parseInt(document.getElementById('nb-line').value);
            const nbBall = parseInt(document.getElementById('nb-ball').value);
            boulier = Boulier.setup(document.getElementById('boulier'), nbLine, nbBall);
            boulier.save();
            renderAll();
        }

        function renderAll() {
            document.getElementById('reset').classList.remove('hide');
            boulier.render();
            boulier.onChange(boulier.save);
            renderColor();
        }

        /* --- Color picker --- */
        function renderColor() {
            let html = '';
            for (let i = 0; i < boulier.color.length; i++) {
                const line = boulier.color[i];
                html += '<div>Ligne ' + (i+1) + ' :</div><div class="grid"><div><div role="button" data-line="' + i + '" onclick="changeNbColor(this, -1)"' + ((line.length < 2) ? ' disabled' : '') + '>-</div></div>';
                for(let j = 0; j < line.length; j++) {
                    html += '<div><select id="color-' + i + '-' + j + '" data-line="' + i + '" data-pos="' + j + '" onchange="changeColor(this)">';
                    for (const color in Boulier.colors) {
                        html += '<option value="' + color + '"' + ((color == line[j]) ? ' selected' : '') + '>' + Boulier.colors[color] + '</option>';
                    }
                    html += '</select></div>';
                }
                html += '<div><div role="button" data-line="' + i + '" onclick="changeNbColor(this, 1)"' + ((line.length >= boulier._ball) ? ' disabled' : '') + '>+</div></div></div>';
            }
            document.getElementById('color-picker').innerHTML = html;
        }

        function changeNbColor(elt, nb) {
            const line = parseInt(elt.getAttribute('data-line'));
            if (nb > 0) {
                for (let i = 0; i < nb; i++) {
                    boulier.color[line].push('red');
                }
            } else if (nb < 0) {
                for (let i = 0; i < -nb; i++) {
                    boulier.color[line].pop();
                }
            }
            boulier.save();
            boulier.render();
            renderColor();
        }

        function changeColor(elt) {
            const line = parseInt(elt.getAttribute('data-line'));
            const pos = parseInt(elt.getAttribute('data-pos'));
            boulier.color[line][pos] = elt.value;
            boulier.save();
            boulier.render();
        }
    </script>
</body>
</html>