Color picker?

[peteruithoven]

Currently the picking the color on arcprize.org/play is quite time consuming. It's a lot of mouse movements and the 0-9 is such a big range it's hard to remember.
Often time you're staring at the color you need. What if we introduce a color picker mode? It's a well known concept.

I can imagine it could work by introducing a "pick color" button. (P keyboard shortcut). When enabled clicking on any color of any of the input or output fields would change the current color to the clicked color.

It could be placed in line with the Edit, Select etc buttons as another mode. This will probably be the simplest option, as it would just be another mode. This does mean it can't be used in combination with the Select mode though. Unless a way is introduced that allows applying the current color to the selection. Maybe pressing Enter / Space, but there not being a UI element that also has that feature makes that unintuitive.

It could also be placed in line with the colors. Maybe this would mean the for example Select mode would remain active while the picker is active and clicking any color would apply that color. Slightly more powerful, but also more complex.

[MischaMegens2]

Currently the picking the color on arcprize.org/play is quite time consuming. [...] What if we introduce a color picker mode?

Oh I think this is a great idea, so obviously an improvement over the shortcut keys.
I tried adding this, with a slight variation: rather than adding a shortcut key P/Enter/Space, or messing with the Edit/Select/Fill modes, it picks up a color from a puzzle cell when you right-click it with the mouse. This way, you don't have to switch between mouse and keyboard. It's simple, and it avoids the drawbacks mentioned (i.e., it works in Select mode too).

All that's needed for this is adding a few lines to the web page's playground.js file. This file has a definition for fillJqGridWithData; originally, it goes like this:

const fillJqGridWithData = (jqGrid, dataGrid) => {
    jqGrid.empty();
    dataGrid.grid.forEach((row, i) => {
        const $row = $('<div>').addClass('grid-row');
        row.forEach((cellValue, j) => {
            const $cell = $('<div>')
                .addClass('cell')
                .attr({ x: i, y: j });
            setCellSymbol($cell, cellValue);
            $row.append($cell);
        });
        jqGrid.append($row);
    });
};

Right before the end, add this:

    jqGrid.find(".cell").contextmenu(function (event) {
        event.preventDefault();
        const cell = $(event.target);
        const symbolNumber = cell.attr("symbol");
        $(`.symbol_preview[symbol='${symbolNumber}']`).click();
    });

..and then you have your color picker.
[Well, that is to say: if you just saved a copy of the ARC Prize - Play the Game.htm web page from your browser, and you want to make that local copy work, then there is one more thing to do: you also have to replace 3 references to /media/json by https://arcprize.org/media/json, in playground.js, so the script can locate its tasks.]

It could also be placed in line with the colors.

For completeness, we might add a hint there, in line with the colors, i.e., in ARC Prize - Play the Game.htm, just below <div id="symbol_picker">[...]</div>, add:

<div style="margin-top:10px;">(You can also right-click on a color in a puzzle.)</div>

@fchollet Would you consider including it in the web page?