Wild West es-419 Explainer

Puzzle Explainer
#1

Explicador de El lejano oeste

Objetivo de este acertijo: Hacer que circle se mueve hacia la izquierda si direction es 'W' (oeste).

Tutorial de la solución: El código comienza con 3 if statements, cuando direction es 'N', 'E' o 'S'. Necesita 1 más cuando direction === 'W'.

Comienza agregando una if statement en la parte inferior del código que verifique direction === 'W'. Dentro del bloque {}, debe hacer que circle se mueva hacia la izquierda. La posición de izquierda a derecha de un círculo se controla con el valor 'cx', y mide la distancia desde el lado izquierdo de la pantalla. Si queremos mover el círculo hacia la izquierda, su distancia debe ser 0. Agrega circle.attr('cx',0) dentro de las llaves {}.

Ahora, si direction es 'W', circle está en el lado izquierdo, pero solo aparece ahí. Para animarlo para que se mueva desde el centro, se debe agregar una .transition() antes de .attr('cx',0). Debe ir en la misma línea, justo entre circle y .attr().

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

let direction = pickRandom([
  'N',
  'E',
  'S',
  'W'
]);
console.log(direction);
if (direction === 'N') {
  circle.transition().attr('cy', 0);
}
if (direction === 'E') {
  circle.transition().attr('cx', right);
}
if (direction === 'S') {
  circle.transition().attr('cy', bottom);
}
if (direction === 'W') {
  circle.transition().attr('cx', 0);
}

Conceptos de JavaScript: bloque de código (if statement), funciones de llamada, condicionales (if statement), console.log(), estructuras de datos (arreglo), identificadores

Conceptos de Grasshopper: pickRandom()

Conceptos de D3: .attr('cx',), .attr('cy',), .transition()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

let _pickRandom = pickRandom;
pickRandom = i => _pickRandom(['W',_pickRandom(i),_pickRandom(i)]); //P(W)=0.5
let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);
let circle = svg.append('circle').attr('r',window.innerHeight/4).attr('fill',_pickRandom(color)).attr('cx',window.innerWidth/2).attr('cy',window.innerHeight/2);
let right = window.innerWidth;
let bottom = window.innerHeight;
#2
#3