JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div id=face>
    <div id=curtain1></div>
    <div id=curtain2></div>
    <div id=curtain3></div>
    <div id=curtain4></div>
    <div id=curtain5></div>
</div>

CSS

#face {position:relative; width:156px; height:174px; background:black;}
*[id^=curtain] {position:absolute; background:red;}

JavaScript

//im not sure what your functions do but i've kept the same names in this mock-up so that the final code is the same for you
function bitmap_layer_get_layer(id){
    return document.getElementById(id);
}
function GRect(x,y,w,h){//GRect(double x, double y, double width, double height) 
    return {"x":x,"y":y,"w":w,"h":h}        
}
//dunno what the pebble animate_layer does but why does it take two GRects?
function animate_layer(el, grect1, grect2, duration, dunno){
    el.style.left = grect2.x+"px";
    el.style.top = grect2.y+"px";
    el.style.width = grect2.w+"px";
    el.style.height = grect2.h+"px";
    //console.log(el);
}

//remember this isnt C++
//use int not var in C equivalent

var minutes = 0;
(function tick(){
    minutes = minutes%60;
    //console.log(minutes);


if(minutes == 0) {//curtain 0
    //open all curtains
    animate_layer(bitmap_layer_get_layer("curtain1"),GRect(64,2,80,10),GRect(74,2,70,10),0,0);  
    animate_layer(bitmap_layer_get_layer("curtain2"),GRect(0,0,0,0),GRect(144,2,10,160),0,0);    
    //animate_layer(bitmap_layer_get_layer("curtain3"),GRect(0,0,0,0),GRect(144,2,10,160),0,0);    
    //animate_layer(bitmap_layer_get_layer("curtain4"),GRect(0,0,0,0),GRect(144,2,10,160),0,0);
    //animate_layer(bitmap_layer_get_layer("curtain5"),GRect(0,0,0,0),GRect(2,2,70,10),0,0);
}
if(minutes >= 1) {//curtain 1
    //There's a maximum size we want to transform this layer to.
    //so if minutes == 8 we're only going to perform the same resizing that we would if minutes == 7
    var m = (minutes <= 7)?minutes:7;//m = minutes or 7 (whichever is lower)
   
    //I see a simple linear pattern to how this shape is changed each minute.
    //I'm assuming there will a a very similar linear pattern for the other layers too.
    //    @ minute 0 = GRect(64,2,80,10), GRect(74,2,70,10)
    //    @ minute 1 = GRect(74,2,70,10), GRect(84,2,60,10)
    //    @ minute 2 = GRect(84,2,60,10), GRect(94,2,50,10)
    //    @ minute 3 = GRect(94,2,50,10),...