var calcColor = function(i, numLeds, total) {
let c = null;
const time = new Date().getTime();
if (palette === 0) {
let hue = hueSpeed * time / 1000 + i / numLeds * 360;
hue %= 360;
c = color({
h: hue,
s: 1,
v: total || 0
}).toRgb();
} else if (palette === 1) {
let fade = 50 * Math.sin(i / numLeds * 4 * Math.PI + (hueSpeed / 90) * time / 1000) + 50;
c = color.mix(color({
r: 255,
g: 200,
b: 120
}), color('red'), fade);
c = color.mix(color('black'), c, total * 100).toRgb();
}
return c;
};
GridWorker.prototype.drawMarker = function() {
var offset = [0, 0]; // offset depends on marker position (tl/tr/br/bl)
if(this._markerpos == 'tl') {
offset = [1, 1];
} else if (this._markerpos == 'tr') {
offset = [this.width - 1 - 7, 1];
} else if (this._markerpos == 'br') {
offset = [this.width - 1 - 7, this.height - 1 - 7];
} else if (this._markerpos == 'bl') {
offset = [1, this.height - 1 - 7];
}
var black = new Colr({ r:0, g:0, b:0, a: 1});
var colr = Colr.mix(this.baseClr, black, this.markerAmp * 100);
// console.log(colr);
// marker is 5x5 2d array
// draw marker to tiles
for (var y = 0; y < 7; y++) {
for (var x = 0; x < 7; x++) {
// this draws the 'frame'
if(x == 0 || y == 0 || x == 6 || y == 6) {
this.tiles[x + offset[0]][y + offset[1]] = colr;
} else { // this draws the actual marker
if (this.marker[y-1][x-1] == 1) {
// omit white parts here to make marker 'transparent'
// this.tiles[x+1][y+1] = new Colr("FFFFFF");
} else {
this.tiles[x + offset[0]][y + offset[1]] = colr;
}
}
}
}
}
function mixColors (a0, a1, t) {
var mix = new Uint32Array(a0.length);
for (var i = 0; i < a0.length; i++) {
mix[i] = rgbToInt(tinycolor.mix(intToRgb(a0[i]), intToRgb(a1[i]), t*100).toRgb());
}
return mix;
}
GridWorker.prototype.setTile = function(pos, col) {
var c = this.tiles[pos[0]][pos[1]];
var newc;
col = new Colr(col);
newc = Colr.mix(c, col, 50);
this.tiles[pos[0]][pos[1]] = newc;
}
Bassdr01.prototype.tick = function() {
// add tiles left and right of latest additions until edge was reached...
for (var i=0; i < 3; i++) {
// left:
this.newHead('l');
// right:
this.newHead('r');
};
// console.log(this.heads);
if(this.diedAt == 0) {
var dyingProp = (this.m.age - 483) / 335
if(dyingProp > Math.random()) {
this.diedAt = this.m.age;
this.amp.tween({
from: {s: 1},
to: {s: 0},
duration: 7493 // this is in seconds!
});
}
}
////// draw stuff from here
this.m.renderTiles = { };
var white = new Colr({r: 255, g: 255, b: 255, a: 0});
var amp = this.amp.get()['s'];
for(i in this.oldheads) {
// console.log(this.oldheads[i]);
this.m.renderTiles[this.oldheads[i]] = white;
}
this.oldheads = [ ];
for(lr in this.heads) {
var heads = this.heads[lr];
for(i in heads) {
var head = heads[i];
var sin = Math.sin((this.m.age - head.createdAt) / this.speed);
sin = sin + ((Math.random() - 0.5) * this.noise.get().s);
var drawpos = [head.pos[0], head.pos[1] + Math.round(sin * this.height.get().s)];
var ndx = drawpos[0]+"."+drawpos[1];
this.m.renderTiles[ndx] = Colr.mix(white, this.m.clr, amp * 100);
this.oldheads.push(ndx);
}
}
// finally die
if(this.amp.get()['s'] == 0) {
this.m.alive = false;
}
};
it('should use combo of \'axis.color\', bgcolor and lightFraction as default for \'axis.gridcolor\'', function() {
layoutIn = {
paper_bgcolor: 'green',
plot_bgcolor: 'yellow',
xaxis: { showgrid: true, color: 'red' },
yaxis: { gridcolor: 'blue' },
yaxis2: { showgrid: true }
};
var bgColor = Color.combine('yellow', 'green'),
frac = 100 * (0xe - 0x4) / (0xf - 0x4);
supplyLayoutDefaults(layoutIn, layoutOut, fullData);
expect(layoutOut.xaxis.gridcolor)
.toEqual(tinycolor.mix('red', bgColor, frac).toRgbString());
expect(layoutOut.yaxis.gridcolor).toEqual('blue');
expect(layoutOut.yaxis2.gridcolor)
.toEqual(tinycolor.mix('#444', bgColor, frac).toRgbString());
});
const makeSolidTheme = (themeColor, textColor = '#fff', style = 'solid', opacity = '.65') => {
let buttonColor = themeColor;
let color = textColor;
if (style === 'inverted') {
buttonColor = tinycolor.mix(themeColor, '#fff', 90).toHexString();
color = tinycolor.mix(textColor, '#000', 10).toHexString();
}
return {
backgroundColor: buttonColor,
borderColor: buttonColor,
color,
':hover': {
color,
opacity
},
':focus': {
color,
opacity
}
};
};
module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, options) {
var containerIn, containerOut;
function coerce(attr, dflt) {
return Lib.coerce(containerIn, containerOut, layoutAttributes, attr, dflt);
}
for(var j = 0; j < axesNames.length; j++) {
var axName = axesNames[j];
containerIn = layoutIn[axName] || {};
containerOut = {
_id: axName[0] + options.scene,
_name: axName
};
layoutOut[axName] = containerOut = handleAxisDefaults(
containerIn,
containerOut,
coerce, {
font: options.font,
letter: axName[0],
data: options.data,
showGrid: true,
bgColor: options.bgColor,
calendar: options.calendar
});
coerce('gridcolor', colorMix(containerOut.color, options.bgColor, gridLightness).toRgbString());
coerce('title', axName[0]); // shouldn't this be on-par with 2D?
containerOut.setScale = Lib.noop;
if(coerce('showspikes')) {
coerce('spikesides');
coerce('spikethickness');
coerce('spikecolor', containerOut.color);
}
coerce('showaxeslabels');
if(coerce('showbackground')) coerce('backgroundcolor');
}
};
module.exports = function handleLineGridDefaults(containerIn, containerOut, coerce, opts) {
opts = opts || {};
var dfltColor = opts.dfltColor;
function coerce2(attr, dflt) {
return Lib.coerce2(containerIn, containerOut, opts.attributes, attr, dflt);
}
var lineColor = coerce2('linecolor', dfltColor);
var lineWidth = coerce2('linewidth');
var showLine = coerce('showline', opts.showLine || !!lineColor || !!lineWidth);
if(!showLine) {
delete containerOut.linecolor;
delete containerOut.linewidth;
}
var gridColorDflt = colorMix(dfltColor, opts.bgColor, opts.blend || lightFraction).toRgbString();
var gridColor = coerce2('gridcolor', gridColorDflt);
var gridWidth = coerce2('gridwidth');
var showGridLines = coerce('showgrid', opts.showGrid || !!gridColor || !!gridWidth);
if(!showGridLines) {
delete containerOut.gridcolor;
delete containerOut.gridwidth;
}
if(!opts.noZeroLine) {
var zeroLineColor = coerce2('zerolinecolor', dfltColor);
var zeroLineWidth = coerce2('zerolinewidth');
var showZeroLine = coerce('zeroline', opts.showGrid || !!zeroLineColor || !!zeroLineWidth);
if(!showZeroLine) {
delete containerOut.zerolinecolor;
delete containerOut.zerolinewidth;
}
}
};
const getMixedNoteColor = (note1, note2, mix = 50) => tinyColor.mix(getNoteColor(note1), getNoteColor(note2), mix).toHexString();
import React, {PropTypes} from 'react';
import look, {StyleSheet} from 'react-look';
import theme from 'universal/styles/theme';
import tinycolor from 'tinycolor2';
const backgroundColor = tinycolor.mix(theme.palette.mid10l, '#fff', 50).toHexString();
let styles = {};
const DashContent = (props) => {
const {children, padding} = props;
const style = {padding};
return (
<div className={styles.root} style={style}>
{children}
</div>
);
};
DashContent.propTypes = {
children: PropTypes.any,
padding: PropTypes.string
};
DashContent.defaultProps = {
padding: '1rem'
};
styles = StyleSheet.create({
root: {
backgroundColor,
flex: 1,
module.exports = function supplyLayoutDefaults(containerIn, containerOut, options) {
function coerce(attr, dflt) {
return Lib.coerce(containerIn, containerOut, layoutAttributes, attr, dflt);
}
containerOut.type = 'linear'; // no other types allowed for ternary
var dfltColor = coerce('color');
// if axis.color was provided, use it for fonts too; otherwise,
// inherit from global font color in case that was provided.
var dfltFontColor = (dfltColor === containerIn.color) ? dfltColor : options.font.color;
var axName = containerOut._name,
letterUpper = axName.charAt(0).toUpperCase(),
dfltTitle = 'Component ' + letterUpper;
var title = coerce('title', dfltTitle);
containerOut._hovertitle = title === dfltTitle ? title : letterUpper;
Lib.coerceFont(coerce, 'titlefont', {
family: options.font.family,
size: Math.round(options.font.size * 1.2),
color: dfltFontColor
});
// range is just set by 'min' - max is determined by the other axes mins
coerce('min');
handleTickValueDefaults(containerIn, containerOut, coerce, 'linear');
handleTickLabelDefaults(containerIn, containerOut, coerce, 'linear',
{ noHover: false });
handleTickMarkDefaults(containerIn, containerOut, coerce,
{ outerTicks: true });
var showTickLabels = coerce('showticklabels');
if(showTickLabels) {
Lib.coerceFont(coerce, 'tickfont', {
family: options.font.family,
size: options.font.size,
color: dfltFontColor
});
coerce('tickangle');
coerce('tickformat');
}
coerce('hoverformat');
var showLine = coerce('showline');
if(showLine) {
coerce('linecolor', dfltColor);
coerce('linewidth');
}
var showGridLines = coerce('showgrid');
if(showGridLines) {
// default grid color is darker here (60%, vs cartesian default ~91%)
// because the grid is not square so the eye needs heavier cues to follow
coerce('gridcolor', colorMix(dfltColor, options.bgColor, 60).toRgbString());
coerce('gridwidth');
}
};
render() {
return (
<Pane padding={40}>
<Group
title="Base Colors"
colors={[
{
oldColor: colors.red['500'],
oldColorString: `colors.red['500']`,
newColor: palette.red.base,
newColorString: `palette.red.base`
},
{
oldColor: colors.green['500'],
oldColorString: `colors.green['500']`,
newColor: palette.green.base,
newColorString: `palette.green.base`
},
{
oldColor: colors.blue['500'],
oldColorString: `colors.blue['500']`,
newColor: palette.blue.base,
newColorString: `palette.blue.base`
},
{
oldColor: colors.purple['500'],
oldColorString: `colors.purple['500']`,
newColor: palette.purple.base,
newColorString: `palette.purple.base`
},
{
oldColor: colors.turquoise['500'],
oldColorString: `colors.turquoise['500']`,
newColor: palette.teal.base,
newColorString: `palette.teal.base`
},
{
oldColor: colors.pink['500'],
oldColorString: `colors.pink['500']`,
newColor: palette.orange.base,
newColorString: `palette.orange.base`
},
{
oldColor: colors.neutral['500'],
oldColorString: `colors.neutral['500']`,
newColor: palette.neutral.base,
newColorString: `palette.neutral.base`
}
]}
/>
<Group
title="Dark Colors"
colors={[
{
oldColor: colors.red['1000'],
oldColorString: `colors.red['1000']`,
newColor: palette.red.dark,
newColorString: `palette.red.dark`
},
{
oldColor: colors.green['1000'],
oldColorString: `colors.green['1000']`,
newColor: palette.green.dark,
newColorString: `palette.green.dark`
},
{
oldColor: colors.blue['1000'],
oldColorString: `colors.blue['1000']`,
newColor: palette.blue.dark,
newColorString: `palette.blue.dark`
},
{
oldColor: colors.purple['1000'],
oldColorString: `colors.purple['1000']`,
newColor: palette.purple.dark,
newColorString: `palette.purple.dark`
},
{
oldColor: colors.turquoise['1000'],
oldColorString: `colors.turquoise['1000']`,
newColor: palette.teal.dark,
newColorString: `palette.teal.dark`
},
{
oldColor: colors.pink['1000'],
oldColorString: `colors.pink['1000']`,
newColor: palette.orange.dark,
newColorString: `palette.orange.dark`
},
{
oldColor: colors.neutral['1000'],
oldColorString: `colors.neutral['1000']`,
newColor: palette.neutral.dark,
newColorString: `palette.neutral.dark`
}
]}
/>
<Group
title="Light Colors"
colors={[
{
oldColor: colors.red['30'],
oldColorString: `colors.red['30']`,
newColor: palette.red.light,
newColorString: `palette.red.light`
},
{
oldColor: colors.green['30'],
oldColorString: `colors.green['30']`,
newColor: palette.green.light,
newColorString: `palette.green.light`
},
{
oldColor: colors.blue['30'],
oldColorString: `colors.blue['30']`,
newColor: palette.blue.light,
newColorString: `palette.blue.light`
},
{
oldColor: colors.purple['30'],
oldColorString: `colors.purple['30']`,
newColor: palette.purple.light,
newColorString: `palette.purple.light`
},
{
oldColor: colors.turquoise['30'],
oldColorString: `colors.turquoise['30']`,
newColor: palette.teal.light,
newColorString: `palette.teal.light`
},
{
oldColor: colors.pink['30'],
oldColorString: `colors.pink['30']`,
newColor: palette.orange.light,
newColorString: `palette.orange.light`
},
{
oldColor: colors.neutral['30'],
oldColorString: `colors.neutral['30']`,
newColor: palette.neutral.light,
newColorString: `palette.neutral.light`
}
]}
/>
<Group
title="Lightest Colors"
colors={[
{
oldColor: colors.red['5'],
oldColorString: `colors.red['5']`,
newColor: palette.red.lightest,
newColorString: `palette.red.lightest`
},
{
oldColor: colors.green['5'],
oldColorString: `colors.green['5']`,
newColor: palette.green.lightest,
newColorString: `palette.green.lightest`
},
{
oldColor: colors.blue['5'],
oldColorString: `colors.blue['5']`,
newColor: palette.blue.lightest,
newColorString: `palette.blue.lightest`
},
{
oldColor: colors.purple['5'],
oldColorString: `colors.purple['5']`,
newColor: palette.purple.lightest,
newColorString: `palette.purple.lightest`
},
{
oldColor: colors.turquoise['5'],
oldColorString: `colors.turquoise['5']`,
newColor: palette.teal.lightest,
newColorString: `palette.teal.lightest`
},
{
oldColor: colors.pink['5'],
oldColorString: `colors.pink['5']`,
newColor: palette.orange.lightest,
newColorString: `palette.orange.lightest`
},
{
oldColor: colors.neutral['5'],
oldColorString: `colors.neutral['5']`,
newColor: palette.neutral.lightest,
newColorString: `palette.neutral.lightest`
}
]}
/>
<Group
title="Neutral Scale"
colors={[
{
oldColor: colors.neutral['5'],
oldColorString: `colors.neutral['5']`,
newColor: scales.neutral.N1,
newColorString: `scales.neutral.N1`
},
{
oldColor: colors.neutral['7'],
oldColorString: `colors.neutral['7']`,
newColor: scales.neutral.N2,
newColorString: `scales.neutral.N2`
},
{
oldColor: colors.neutral['10'],
oldColorString: `colors.neutral['10']`,
newColor: scales.neutral.N3,
newColorString: `scales.neutral.N3`
},
{
oldColor: colors.neutral['15'],
oldColorString: `colors.neutral['15']`,
newColor: scales.neutral.N4,
newColorString: `scales.neutral.N4`
},
{
oldColor: colors.neutral['40'],
oldColorString: `colors.neutral['40']`,
newColor: scales.neutral.N5,
newColorString: `scales.neutral.N5`
},
{
oldColor: colors.neutral['80'],
oldColorString: `colors.neutral['80']`,
newColor: scales.neutral.N6,
newColorString: `scales.neutral.N6`
},
{
oldColor: colors.neutral['200'],
oldColorString: `colors.neutral['200']`,
newColor: scales.neutral.N7,
newColorString: `scales.neutral.N7`
},
{
oldColor: colors.neutral['300'],
oldColorString: `colors.neutral['300']`,
newColor: scales.neutral.N8,
newColorString: `scales.neutral.N8`
},
{
oldColor: colors.neutral['500'],
oldColorString: `colors.neutral['500']`,
newColor: scales.neutral.N9,
newColorString: `scales.neutral.N9`
},
{
oldColor: colors.neutral['800'],
oldColorString: `colors.neutral['800']`,
newColor: scales.neutral.N10,
newColorString: `scales.neutral.N10`
}
]}
/>
<Group
title="Blue Scale"
colors={[
{
oldColor: colors.blue['5'],
oldColorString: `colors.blue['5']`,
newColor: scales.blue.B1,
newColorString: `scales.blue.B1`
},
{
oldColor: colors.blue['7'],
oldColorString: `colors.blue['7']`,
newColor: scales.blue.B2,
newColorString: `scales.blue.B2`
},
{
oldColor: colors.blue['10'],
oldColorString: `colors.blue['10']`,
newColor: scales.blue.B3,
newColorString: `scales.blue.B3`
},
{
oldColor: colors.blue['15'],
oldColorString: `colors.blue['15']`,
newColor: scales.blue.B4,
newColorString: `scales.blue.B4`
},
{
oldColor: colors.blue['40'],
oldColorString: `colors.blue['40']`,
newColor: scales.blue.B5,
newColorString: `scales.blue.B5`
},
{
oldColor: colors.blue['80'],
oldColorString: `colors.blue['80']`,
newColor: scales.blue.B6,
newColorString: `scales.blue.B6`
},
{
oldColor: colors.blue['200'],
oldColorString: `colors.blue['200']`,
newColor: scales.blue.B7,
newColorString: `scales.blue.B7`
},
{
oldColor: colors.blue['300'],
oldColorString: `colors.blue['300']`,
newColor: scales.blue.B8,
newColorString: `scales.blue.B8`
},
{
oldColor: colors.blue['500'],
oldColorString: `colors.blue['500']`,
newColor: scales.blue.B9,
newColorString: `scales.blue.B9`
},
{
oldColor: colors.blue['800'],
oldColorString: `colors.blue['800']`,
newColor: scales.blue.B10,
newColorString: `scales.blue.B10`
}
]}
/>
<Group
title="Mapping Out of System Colors"
colors={[
{
oldColor: colors.green['3A'],
oldColorString: `colors.green['3A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.025)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.025).toString()`
},
{
oldColor: colors.green['5A'],
oldColorString: `colors.green['5A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.041)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.041).toString()`
},
{
oldColor: colors.green['7A'],
oldColorString: `colors.green['7A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.057)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.057).toString()`
},
{
oldColor: colors.green['10A'],
oldColorString: `colors.green['10A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.079)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.079).toString()`
},
{
oldColor: colors.green['15A'],
oldColorString: `colors.green['15A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.114)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.114).toString()`
},
{
oldColor: colors.green['20A'],
oldColorString: `colors.green['20A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.146)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.146).toString()`
},
{
oldColor: colors.green['30A'],
oldColorString: `colors.green['30A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.204)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.204).toString()`
},
{
oldColor: colors.green['40A'],
oldColorString: `colors.green['40A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.255)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.255).toString()`
},
{
oldColor: colors.green['50A'],
oldColorString: `colors.green['50A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.301)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.301).toString()`
},
{
oldColor: colors.green['60A'],
oldColorString: `colors.green['60A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.342)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.342).toString()`
},
{
oldColor: colors.green['70A'],
oldColorString: `colors.green['70A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.38)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.38).toString()`
},
{
oldColor: colors.green['80A'],
oldColorString: `colors.green['80A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.415)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.415).toString()`
},
{
oldColor: colors.green['90A'],
oldColorString: `colors.green['90A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.447)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.447).toString()`
},
{
oldColor: colors.green['100A'],
oldColorString: `colors.green['100A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.477)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.477).toString()`
},
{
oldColor: colors.green['125A'],
oldColorString: `colors.green['125A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.544)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.544).toString()`
},
{
oldColor: colors.green['150A'],
oldColorString: `colors.green['150A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.602)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.602).toString()`
},
{
oldColor: colors.green['175A'],
oldColorString: `colors.green['175A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.653)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.653).toString()`
},
{
oldColor: colors.green['200A'],
oldColorString: `colors.green['200A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.699)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.699).toString()`
},
{
oldColor: colors.green['300A'],
oldColorString: `colors.green['300A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.845)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.845).toString()`
},
{
oldColor: colors.green['400A'],
oldColorString: `colors.green['400A']`,
newColor: tinycolor(palette.green.base)
.setAlpha(0.954)
.toString(),
newColorString: `tinycolor(palette.green.base).setAlpha(0.954).toString()`
},
{
oldColor: colors.green['3'],
oldColorString: `colors.green['3']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.025 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.025 * 100).toString()`
},
{
oldColor: colors.green['5'],
oldColorString: `colors.green['5']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.041 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.041 * 100).toString()`
},
{
oldColor: colors.green['7'],
oldColorString: `colors.green['7']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.057 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.057 * 100).toString()`
},
{
oldColor: colors.green['10'],
oldColorString: `colors.green['10']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.079 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.079 * 100).toString()`
},
{
oldColor: colors.green['15'],
oldColorString: `colors.green['15']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.114 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.114 * 100).toString()`
},
{
oldColor: colors.green['20'],
oldColorString: `colors.green['20']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.146 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.146 * 100).toString()`
},
{
oldColor: colors.green['30'],
oldColorString: `colors.green['30']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.204 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.204 * 100).toString()`
},
{
oldColor: colors.green['40'],
oldColorString: `colors.green['40']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.255 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.255 * 100).toString()`
},
{
oldColor: colors.green['50'],
oldColorString: `colors.green['50']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.301 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.301 * 100).toString()`
},
{
oldColor: colors.green['60'],
oldColorString: `colors.green['60']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.342 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.342 * 100).toString()`
},
{
oldColor: colors.green['70'],
oldColorString: `colors.green['70']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.38 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.38 * 100).toString()`
},
{
oldColor: colors.green['80'],
oldColorString: `colors.green['80']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.415 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.415 * 100).toString()`
},
{
oldColor: colors.green['90'],
oldColorString: `colors.green['90']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.447 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.447 * 100).toString()`
},
{
oldColor: colors.green['100'],
oldColorString: `colors.green['100']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.477 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.477 * 100).toString()`
},
{
oldColor: colors.green['125'],
oldColorString: `colors.green['125']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.544 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.544 * 100).toString()`
},
{
oldColor: colors.green['150'],
oldColorString: `colors.green['150']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.602 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.602 * 100).toString()`
},
{
oldColor: colors.green['175'],
oldColorString: `colors.green['175']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.653 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.653 * 100).toString()`
},
{
oldColor: colors.green['200'],
oldColorString: `colors.green['200']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.699 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.699 * 100).toString()`
},
{
oldColor: colors.green['300'],
oldColorString: `colors.green['300']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.845 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.845 * 100).toString()`
},
{
oldColor: colors.green['400'],
oldColorString: `colors.green['400']`,
newColor: tinycolor
.mix('white', palette.green.base, 0.954 * 100)
.toString(),
newColorString: `tinycolor.mix('white', palette.green.base, 0.954 * 100).toString()`
},
{
oldColor: colors.green['500'],
oldColorString: `colors.green['500']`,
newColor: palette.green.base,
newColorString: `palette.green.base`
},
{
oldColor: colors.green['600'],
oldColorString: `colors.green['600']`,
newColor: tinycolor(palette.green.base)
.darken(3)
.toString(),
newColorString: `tinycolor(palette.green.base).darken(3).toString()`
},
{
oldColor: colors.green['700'],
oldColorString: `colors.green['700']`,
newColor: tinycolor(palette.green.base)
.darken(5)
.toString(),
newColorString: `tinycolor(palette.green.base).darken(5).toString()`
},
{
oldColor: colors.green['800'],
oldColorString: `colors.green['800']`,
newColor: tinycolor(palette.green.base)
.darken(9)
.toString(),
newColorString: `tinycolor(palette.green.base).darken(9).toString()`
},
{
oldColor: colors.green['900'],
oldColorString: `colors.green['900']`,
newColor: tinycolor(palette.green.base)
.darken(13)
.toString(),
newColorString: `tinycolor(palette.green.base).darken(13).toString()`
},
{
oldColor: colors.green['1000'],
oldColorString: `colors.green['1000']`,
newColor: tinycolor(palette.green.base)
.darken(20)
.toString(),
newColorString: `tinycolor(palette.green.base).darken(20).toString()`
}
]}
/>
</Pane>
)
}
module.exports = function handleAxisDefaults(containerIn, containerOut, coerce, options, layoutOut) {
var letter = options.letter,
font = options.font || {},
defaultTitle = 'Click to enter ' +
(options.title || (letter.toUpperCase() + ' axis')) +
' title';
function coerce2(attr, dflt) {
return Lib.coerce2(containerIn, containerOut, layoutAttributes, attr, dflt);
}
var visible = coerce('visible', !options.cheateronly);
var axType = containerOut.type;
if(axType === 'date') {
var handleCalendarDefaults = Registry.getComponentMethod('calendars', 'handleDefaults');
handleCalendarDefaults(containerIn, containerOut, 'calendar', options.calendar);
}
setConvert(containerOut, layoutOut);
var autoRange = coerce('autorange', !containerOut.isValidRange(containerIn.range));
if(autoRange) coerce('rangemode');
coerce('range');
containerOut.cleanRange();
handleCategoryOrderDefaults(containerIn, containerOut, coerce);
containerOut._initialCategories = axType === 'category' ?
orderedCategories(letter, containerOut.categoryorder, containerOut.categoryarray, options.data) :
[];
if(!visible) return containerOut;
var dfltColor = coerce('color');
// if axis.color was provided, use it for fonts too; otherwise,
// inherit from global font color in case that was provided.
var dfltFontColor = (dfltColor === containerIn.color) ? dfltColor : font.color;
coerce('title', defaultTitle);
Lib.coerceFont(coerce, 'titlefont', {
family: font.family,
size: Math.round(font.size * 1.2),
color: dfltFontColor
});
handleTickValueDefaults(containerIn, containerOut, coerce, axType);
handleTickLabelDefaults(containerIn, containerOut, coerce, axType, options);
handleTickMarkDefaults(containerIn, containerOut, coerce, options);
var lineColor = coerce2('linecolor', dfltColor),
lineWidth = coerce2('linewidth'),
showLine = coerce('showline', !!lineColor || !!lineWidth);
if(!showLine) {
delete containerOut.linecolor;
delete containerOut.linewidth;
}
if(showLine || containerOut.ticks) coerce('mirror');
var gridColor = coerce2('gridcolor', colorMix(dfltColor, options.bgColor, lightFraction).toRgbString()),
gridWidth = coerce2('gridwidth'),
showGridLines = coerce('showgrid', options.showGrid || !!gridColor || !!gridWidth);
if(!showGridLines) {
delete containerOut.gridcolor;
delete containerOut.gridwidth;
}
var zeroLineColor = coerce2('zerolinecolor', dfltColor),
zeroLineWidth = coerce2('zerolinewidth'),
showZeroLine = coerce('zeroline', options.showGrid || !!zeroLineColor || !!zeroLineWidth);
if(!showZeroLine) {
delete containerOut.zerolinecolor;
delete containerOut.zerolinewidth;
}
return containerOut;
};
"Color <- mix Color with Float % of Color": (a, mix, b) => tinycolor.mix(a, b, mix),
LilQuad.prototype.tick = function() {
// this.rayProp += 0.001;
// 'head' wanders around in a rect, but sometimes jumps a little off
var steps = [[1.0, 0], [0, 1.0], [-1.0, 0], [0, -1.0]];
var newTile = [0.0, 0.0];
var offstepProp = Math.random() < 0.23;
var nextStep = this.m.age + offstepProp * 1;
// console.log(nextStep);
newTile[0] = parseInt(this.m.head[0]) + parseInt(steps[nextStep%4][0]);
newTile[1] = parseInt(this.m.head[1]) + parseInt(steps[nextStep%4][1]);
if(!this.m.worldMap[newTile[0]+"."+newTile[1]]) { // checks if tile is available to creature
newTile = this.m.head;
}
this.m.head = newTile;
this.m.setTile(newTile);
if(offstepProp) {
this.m.osc.send('/creature/setValue', this.m.uid, 'offstep', 1);
}
this.m.osc.send('/creature/setValue', this.m.uid, 'raysum', this.rays.length);
// add ray from time to time
if(this.rayProp > 0) {
this.rayProp = 0;
var ray = {
age: 0,
vect: [Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 + 3], // dir x/y, speed
tiles: [this.m.head],
dying: false,
dead: false
};
this.rays.push(ray);
}
// maybe die if older than 33 and no rays are active TODO: fade out somehow
if(this.m.age > 33 && this.rays.length == 0 && this.diedAt == 0) {
// console.log("dying");
var dyingprop = (this.m.age - 33) / 300;
// console.log(dyingprop);
if(Math.random() < dyingprop) {
this.diedAt = this.m.age;
this.amp.tween({
from: {s: 1},
to: {s: 0},
duration: 338,
// finish: function() { this.m.alive = false;console.log("dead"); }.bind(this)
});
}
}
if(this.m.age > 500 && this.diedAt == 0) {
// console.log("dying");
this.diedAt = this.m.age;
this.amp.tween({
from: {s: 1},
to: {s: 0},
duration: 2338,
// finish: function() { this.m.alive = false; console.log("dead"); }.bind(this)
});
}
if(this.amp.get().s == 0) {
this.m.alive = false;
}
// update rays
var removableRays = [];
// for(var i = this.rays.length-1; i >= 0; i--) {
for (i in this.rays) {
var ray = this.rays[i];
var lastTile = ray.tiles[ray.tiles.length-1];
var newTile = [];
// TODO: some jitter here
if(!ray.dying) {
newTile[0] = lastTile[0] + Math.round(1 * ray.vect[0] * ray.vect[2]);
newTile[1] = lastTile[1] + Math.round(1 * ray.vect[1] * ray.vect[2]);
// console.log(newTile);
if(this.m.worldMap[newTile[0]+"."+newTile[1]]) {
this.rays[i].tiles.push(newTile);
} else {
this.rays[i].dying = true;
this.rays[i].diedAt = ray.age;
}
} else {
// it's dying!!!!
if(ray.age - ray.diedAt > 19) {
// removableRays.push(i);
// this.rays.splice(removableRays[i], 1);
delete this.rays[i];
}
}
ray.age += 1;
}
////// draw stuff from here
var white = new Colr({r: 255, g: 255, b: 255, a: 0});
this.m.renderTiles = { };
for(ndx in this.m.tiles) {
var t = this.m.tiles[ndx];
var c = Colr.mix(this.m.clr, white, 5 * t[1]);
c = Colr.mix(white, c, this.amp.get()['s'] * 100);
this.m.renderTiles[ndx] = c;
// console.log(ndx);
// console.log(c);
}
for(i in this.rays) {
var r = this.rays[i];
var mod = 0.75;
if(r.dying) {
mod = mod + 1/80 * (r.age - r.diedAt);
}
for (var j = 0; j < r.tiles.length; j++) {
var t = r.tiles[j];
if(!this.m.renderTiles[t[0]+"."+t[1]]) {
var co = this.m.clr.toHsv();
co.s = co.s + Math.random() * -0.3; // modulate saturation
co.a = co.a * (1-mod);
var c = new Colr(co);
this.m.renderTiles[t[0]+"."+t[1]] = c;
}
}
}
};
module.exports = function handleAxisDefaults(containerIn, containerOut, coerce, options) {
var letter = options.letter,
font = options.font || {},
defaultTitle = 'Click to enter ' +
(options.title || (letter.toUpperCase() + ' axis')) +
' title';
function coerce2(attr, dflt) {
return Lib.coerce2(containerIn, containerOut, layoutAttributes, attr, dflt);
}
// set up some private properties
if(options.name) {
containerOut._name = options.name;
containerOut._id = axisIds.name2id(options.name);
}
// now figure out type and do some more initialization
var axType = coerce('type');
if(axType === '-') {
setAutoType(containerOut, options.data);
if(containerOut.type === '-') {
containerOut.type = 'linear';
}
else {
// copy autoType back to input axis
// note that if this object didn't exist
// in the input layout, we have to put it in
// this happens in the main supplyDefaults function
axType = containerIn.type = containerOut.type;
}
}
setConvert(containerOut);
var dfltColor = coerce('color');
// if axis.color was provided, use it for fonts too; otherwise,
// inherit from global font color in case that was provided.
var dfltFontColor = (dfltColor === containerIn.color) ? dfltColor : font.color;
coerce('title', defaultTitle);
Lib.coerceFont(coerce, 'titlefont', {
family: font.family,
size: Math.round(font.size * 1.2),
color: dfltFontColor
});
var validRange = (
(containerIn.range || []).length === 2 &&
isNumeric(containerIn.range[0]) &&
isNumeric(containerIn.range[1])
);
var autoRange = coerce('autorange', !validRange);
if(autoRange) coerce('rangemode');
var range = coerce('range', [-1, letter === 'x' ? 6 : 4]);
if(range[0] === range[1]) {
containerOut.range = [range[0] - 1, range[0] + 1];
}
Lib.noneOrAll(containerIn.range, containerOut.range, [0, 1]);
coerce('fixedrange');
handleTickValueDefaults(containerIn, containerOut, coerce, axType);
handleTickLabelDefaults(containerIn, containerOut, coerce, axType, options);
handleTickMarkDefaults(containerIn, containerOut, coerce, options);
handleCategoryOrderDefaults(containerIn, containerOut, coerce);
var lineColor = coerce2('linecolor', dfltColor),
lineWidth = coerce2('linewidth'),
showLine = coerce('showline', !!lineColor || !!lineWidth);
if(!showLine) {
delete containerOut.linecolor;
delete containerOut.linewidth;
}
if(showLine || containerOut.ticks) coerce('mirror');
var gridColor = coerce2('gridcolor', colorMix(dfltColor, options.bgColor, lightFraction).toRgbString()),
gridWidth = coerce2('gridwidth'),
showGridLines = coerce('showgrid', options.showGrid || !!gridColor || !!gridWidth);
if(!showGridLines) {
delete containerOut.gridcolor;
delete containerOut.gridwidth;
}
var zeroLineColor = coerce2('zerolinecolor', dfltColor),
zeroLineWidth = coerce2('zerolinewidth'),
showZeroLine = coerce('zeroline', options.showGrid || !!zeroLineColor || !!zeroLineWidth);
if(!showZeroLine) {
delete containerOut.zerolinecolor;
delete containerOut.zerolinewidth;
}
// fill in categories
containerOut._initialCategories = axType === 'category' ?
orderedCategories(letter, containerOut.categoryorder, containerOut.categoryarray, options.data) :
[];
return containerOut;
};
import React, {PropTypes} from 'react';
import look, {StyleSheet} from 'react-look';
import theme from 'universal/styles/theme';
import layoutStyle from 'universal/styles/layout';
import tinycolor from 'tinycolor2';
import FontAwesome from 'react-fontawesome';
import DashNavListContainer from 'universal/containers/DashNavList/DashNavListContainer';
import DashNavItem from './DashNavItem';
import SettingsHub from 'universal/components/SettingsHub/SettingsHub';
import StandardHubContainer from 'universal/containers/StandardHub/StandardHubContainer';
import Logo from 'universal/styles/theme/images/brand/parabol-lockup-h.svg';
const textColor = tinycolor.mix(theme.palette.mid10l, '#fff', 50).toHexString();
let styles = {};
const DashSidebar = (props) => {
const {isUserSettings} = props;
return (
<div className={styles.root}>
{isUserSettings ? <SettingsHub/> : <StandardHubContainer/>}
<nav className={styles.nav}>
<div className={styles.singleNavItem}>
<DashNavItem
href="/me"
label="My Dashboard"
/>
</div>
<div className={styles.navLabel}>
My Teams
</div>
<DashNavListContainer/>
Spreadr.prototype.tick = function() {
for(ndx in this.tiles) {
if(this.tiles[ndx] >= 0 && this.tiles[ndx] < 14) {
this.tiles[ndx] += 1;
} else {
delete this.tiles[ndx];
}
}
var newHeads = [];
for(i in this.heads) {
// for each head, check surroundings
// if tile is available, fill it with a 0
// (maybe set fill-directions before)
// update all filled tiles with +1 (to set clr from)
var h = this.heads[i];
for(j in this.fillers) {
var fill = this.fillers[j];
var n = [h[0] + fill[0], h[1] + fill[1]];
if(this.m.worldMap[n[0]+"."+n[1]] && this.tiles[n[0]+"."+n[1]] == undefined) {
newHeads.push(n);
this.tiles[n[0]+"."+n[1]] = 0;
}
}
}
this.heads = newHeads;
if(this.heads.length == 0 && this.diedAt == 0) {
this.diedAt = this.m.age;
this.amp.tween({
from: {s: 1},
to: {s: 0},
duration: 2493
});
}
// this.m.osc.send('/creature/setValue', this.m.uid, 'speed', speed);
// finally die
if(this.diedAt > 0 && this.m.age - this.diedAt > 60) {
this.m.alive = false;
};
if(this.amp.get()['s'] == 0) {
this.m.alive = false;
}
// console.log(this.m.race, this.m.age, this.diedAt, this.m.alive, this.amp.get()['s']);
////// draw stuff from here
this.m.renderTiles = { };
var white = new Colr({r: 255, g: 255, b: 255});
var amp = this.amp.get()['s'];
for(ndx in this.tiles) {
if(this.tiles[ndx] < 12) {
var fact = 1 - (1/11 * this.tiles[ndx] * amp);
// console.log(amp);
// amp = 1;
this.m.renderTiles[ndx] = Colr.mix(white, this.m.clr, amp*(Math.random() * 10 + fact * 90));
// this.m.renderTiles[ndx] = Colr.mix(white, this.m.clr, amp * 100);
}
}
for(i in this.heads) {
var h = this.heads[i]
this.m.renderTiles[h[0]+"."+h[1]] = this.m.clr;
}
};