scripts/experiments/visual_search/visual_search.js

export {hex_to_color, get_color_paths};

var ADDRESS = location.protocol + "//" + location.hostname + ":" + location.port;

const DIMENSIONS = ["LUM", "CHR", "HUE"];
const OPPOSITE_COLORS = {"BLUE":"YELLOW", "YELLOW":"BLUE", "GREEN":"RED", "RED":"GREEN"};
const HEX_TO_COLOR = {"007ebc":"BLUE", "20874a":"GREEN", "cd4c32":"RED", "dbc667":"YELLOW"};
const DISTANCES = ["-2", "-1", "+1", "+2"];
const COLORS = ["BLUE", "GREEN", "RED", "YELLOW"];

/*
 * Maps input hex to a color string
 * @ param color_hex       {string} "0007ebc" etc
 * @return                 {string} "BLUE"
*/ 
function hex_to_color(color_hex) {
    // if (!HEX_TO_COLOR.includes(color_hex)) {
    //     throw Error(color + " is not supported.");
    // }
    return HEX_TO_COLOR[color_hex];
}

/* Constructs all possible color paths for a given color.
 * Should give 13 (1 opposite + 12 on same color gradient)
 *  
 * @ param color            {string} "BLUE", "GREEN", "RED", "YELLOW"
 *
 * @ return                 [string, string...]  array containing paths to each color
 */
function get_color_paths(color) {
    let color_paths = [];

    if (!COLORS.includes(color)){
        throw Error(color + " is not supported.");
    } 

    // Get opposite color w/ same dimension
    color_paths.push(get_opposite_target(color, "CHR")); // Force CHR, all target hex same anyway

    // Get the other colors
    for (let distance of DISTANCES){
      for (let dimension of DIMENSIONS) {
        let distractor_path = construct_path(color, dimension, distance);
        color_paths.push(distractor_path);
      }
    }  

    return color_paths;
}

/* Constructs path of opposite color but same dimension.
 *  
 * @ param color            {string} "BLUE", "GREEN", "RED", "YELLOW"
 * @ param dimension        {string} "LUM", "CHR", "HUE"
 *
 * @ return                 {string}  path to opposite color of same dimension
 */
function get_opposite_target(color, dimension){

    let opposite_color = OPPOSITE_COLORS[color];

    return construct_path(opposite_color, dimension, null);
}

/* Constructs path to the svg.
 *  
 * @ param color            {string} "BLUE", "GREEN", "RED", "YELLOW"
 * @ param dimension        {string} "LUM", "CHR", "HUE"
 * @ param distance         {string} "-2", "-1", "+1", "+2"
 *
 * @ return                 {string}  path to the svg
 */
function construct_path(color, dimension, distance) {
    let path = ADDRESS + "/img/instructions/visual_search/distractor_stimuli/" + color + "/" + color + "_" + dimension;
    if (distance){
        return path + distance + ".svg";
    }
    return path + ".svg";
}

/* Constructs name of the color.
 *  
 * @ param color            {string} "BLUE", "GREEN", "RED", "YELLOW"
 * @ param dimension        {string} "LUM", "CHR", "HUE"
 * @ param distance         {string} "-2", "-1", "+1", "+2"
 *
 * @ return                 {string} Name of the color
 */
function construct_name(color, dimension, distance){

    let name = color + "_" + dimension;

    if (distance){
        return name + distance;
    }
    
    return name;
}