Moon Phases es-419 Explainer

Puzzle Explainer
#1

Explicador de Fases lunares

Objetivo de este acertijo: Crear una animación que cambie según el valor de una variable.
Tutorial de la solución:
La variable phase usa pickRandom() para elegir un valor. Una serie de if statements verificará el valor de phase, y creará una animación correspondiente para mostrar la fase de la luna.

Para completar el acertijo, agrega una cuarta if statement para probar si phase === 'waning'. Dentro del bloque de código {}, define shadow para que cambie durante 1000 milisegundos a una 'cx' de 240.
Solución del código de ejemplo:

let phase = pickRandom(['full','waxing','new','waning']);

if (phase === 'full') {
    shadow.transition().duration(1000).attr('cx',0);
}
if (phase === 'waxing') {
    shadow.transition().duration(1000).attr('cx',80);
}
if (phase === 'new'){
    shadow.transition().duration(1000).attr('cx',160);
}
if (phase === 'waning'){
    shadow.transition().duration(1000).attr('cx',240);
}

console.log(phase);

Conceptos de JavaScript: if statements, pruebas, consola
Conceptos de D3: .transition(), .attr(), .duration()
Conceptos de Grasshopper: pickRandom()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

let r = 80;
let space = svg.append('rect').attr('width',window.innerWidth).attr('height',window.innerHeight).attr('fill','black');
let moon = svg.append('circle').attr('r',r).attr('fill','blanchedalmond').attr('cx',160).attr('cy',r);
let shadow = svg.append('circle').attr('r',r).attr('fill','black').attr('cx',0).attr('cy',r);
let right = window.innerWidth;
let bottom = window.innerHeight;
#2
#3