Blot gradients

SketchSystems.spec

Blot gradients
  White square
    center tap -> Black dot
    top left tap -> Top left arc
    top right tap -> Top right arc
    bottom left tap -> Bottom left arc
    bottom right tap -> Bottom right arc
    
  Black dot
    center tap -> Black square
    top left tap -> Bottom right dot
    top right tap -> Bottom left dot
    bottom left tap -> Top right dot
    bottom right tap -> Top left dot
    
  Black square
    center tap -> White dot
    top left tap -> Bottom right dot
    top right tap -> Bottom left dot
    bottom left tap -> Top right dot
    bottom right tap -> Top left dot
    
  White dot
    center tap -> White square
    top left tap -> Top left arc
    top right tap -> Top right arc
    bottom left tap -> Bottom left arc
    bottom right tap -> Bottom right arc
    
  Top left arc
    center tap -> White dot
    top left tap -> Top left corner
    top right tap -> Top right arc
    bottom left tap -> Bottom left arc
    bottom right tap -> White square
    
  Top right arc
    center tap -> White dot
    top left tap -> Top left arc
    bottom right tap -> Bottom right arc
    top right tap -> Top right corner
    bottom left tap -> White square
    
  Bottom right arc
    center tap -> White dot
    top left tap -> White square
    top right tap -> Top right arc
    bottom left tap -> Bottom left arc
    bottom right tap -> Bottom right corner
    
  Bottom left arc
    center tap -> White dot
    top left tap -> Top left arc
    top right tap -> White square
    bottom left tap -> Bottom left corner
    bottom right tap -> Bottom right arc
    
  Top left dot
    center tap -> Black dot
    top left tap -> Black square
    top right tap -> Bottom left dot
    bottom right tap -> Top left corner
    bottom left tap -> Top right dot
    
  Top right dot
    center tap -> Black dot
    bottom left tap -> Top right corner
    top left tap -> Bottom right dot
    bottom right tap -> Top left dot
    top right tap -> Black square
  
  Bottom left dot*
    center tap -> Black dot
    top right tap -> Bottom left corner
    top left tap -> Bottom right dot
    bottom left tap -> Black square
    bottom right tap -> Top left dot
  
  Bottom right dot
    center tap -> Black dot
    top left tap -> Bottom right corner
    top right tap -> Bottom left dot
    bottom right tap -> Black square
    bottom left tap -> Top right dot
  
  Top left corner
    center tap -> Bottom right corner
    top left tap -> Top left dot
    top right tap -> Top right corner
    bottom right tap -> Top left arc
    bottom left tap -> Bottom left corner
  
  Top right corner
    center tap -> Bottom left corner
    top right tap -> Top right dot
    top left tap -> Top left corner
    bottom left tap -> Top right arc
    bottom right tap -> Bottom right corner
  
  Bottom left corner
    center tap -> Top right corner
    top left tap -> Top right corner
    top right tap -> Bottom left arc
    bottom left tap -> Bottom left dot
    bottom right tap -> Bottom right corner
  
  Bottom right corner
    center tap -> Top left corner
    top left tap -> Bottom right arc
    top right tap -> Top right corner
    bottom right tap -> Bottom right dot
    bottom left tap -> Bottom left corner
    

SketchSystems_prototype.js

const shapes = {
  'White square': 'linear-gradient(white, white)',
  'Black square': 'linear-gradient(black, black)',
  'Black dot': 'radial-gradient(black 0%, black 40%, white 40%, white)',
  'White dot': 'radial-gradient(white 0%, white 40%, black 40%, black)',
  
  'Top left arc': 'radial-gradient(circle farthest-side at bottom right, white 0%, white 100%, black 100%, black)',
  'Top right arc': 'radial-gradient(circle farthest-side at bottom left, white 0%, white 100%, black 100%, black)',
  'Bottom right arc': 'radial-gradient(circle farthest-side at top left, white 0%, white 100%, black 100%, black)',
  'Bottom left arc': 'radial-gradient(circle farthest-side at top right, white 0%, white 100%, black 100%, black)',
  
  'Top left corner': 'linear-gradient(to top left, white, white 50%, black 50%, black)',
  'Top right corner': 'linear-gradient(to top right, white, white 50%, black 50%, black)',
  'Bottom left corner': 'linear-gradient(to bottom left, white, white 50%, black 50%, black)',
  'Bottom right corner': 'linear-gradient(to bottom right, white, white 50%, black 50%, black)',
  
  'Top left dot': 'radial-gradient(circle farthest-side at top left, black 0%, black 100%, white 100%, white)',
  'Top right dot': 'radial-gradient(circle farthest-side at top right, black 0%, black 100%, white 100%, white)',
  'Bottom right dot': 'radial-gradient(circle farthest-side at bottom right, black 0%, black 100%, white 100%, white)',
  'Bottom left dot': 'radial-gradient(circle farthest-side at bottom left, black 0%, black 100%, white 100%, white)',
};

const makeClass = function(name) {
  return name.split(' ').join('-').toLowerCase();
};

function render(model){
  let current_state_name = model.active_states[0].name;
  return $('div',{style:{ padding: '2rem', textAlign: 'center'}},
    $('style',`

button {
  background-color: transparent;
  border: none
}

.over-button {
  position: absolute;
  width: 50%;
  height: 50%;
}

`),
    $("div",
           {
            style: 
              {
                position: 'relative',
                display: 'flex',
                textAlign: 'center',
                lineHeight: '200px',
                width: '200px', 
                margin: 'auto',
                height: '200px',
                backgroundImage: `${shapes[current_state_name]}`,
                boxShadow: '0 2px 20px #999'
              }
           },
            $('div',{
              'class': `blot-box ${makeClass(current_state_name)}`
            }
            ),
            $('button',
              {
              'class': 'over-button',
                style: {
                  top: '0',
                  left: '0',
                },
                onClick: function(){
                  model.emit('top left tap');
                }
              },
                ''
             ),
            $('button',
              {
              'class': 'over-button',
                style: {
                  top: '0',
                  right: '0',
                },
                onClick: function(){
                  model.emit('top right tap');
                }
              },
                ''
             ),
            $('button',
              {
              'class': 'over-button',
                style: {
                  bottom: '0',
                  right: '0',
                },
                onClick: function(){
                  model.emit('bottom right tap');
                }
              },
                ''
             ),
            $('button',
              {
              'class': 'over-button',
                style: {
                  bottom: '0',
                  left: '0',
                },
                onClick: function(){
                  model.emit('bottom left tap');
                }
              },
                ''
             ),
            $('button',
              {
                style: {
                  flex: 'auto',
                  transform: 'rotate(45deg) scale(0.7)'
                },
                onClick: function(){
                  model.emit('center tap');
                }
              },
                ''
             ),
           ),
          $('p',
           `${current_state_name}`)
          );
}