Skip to content

Instantly share code, notes, and snippets.

@ollicle

ollicle/SketchSystems.spec

Last active November 4, 2018 09:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ollicle/2b80b4e2c852ea28764cfcaae2be40b1 to your computer and use it in GitHub Desktop.
Save ollicle/2b80b4e2c852ea28764cfcaae2be40b1 to your computer and use it in GitHub Desktop.
Download ZIP
Blot gradients
Raw
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
Raw
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}`)
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment