Skip to content

Commit

Permalink
fix animation colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@antoniokov
antoniokov committed Feb 16, 2017
1 parent 0d08aae commit 6fbe6f4
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 34 deletions.
66 changes: 33 additions & 33 deletions src/app/TableContainer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,37 +358,37 @@ html{

@keyframes replay-table-green-fading-100 {
0% {background-color: transparent;}
50% {background-color: rgba(94,179,26,0.7);}
50% {background-color: rgba(94,179,26,1);}
100% {background-color: transparent;}
}

@keyframes replay-table-green-fading-90 {
0% {background-color: transparent;}
50% {background-color: rgba(94,179,26,0.65);}
50% {background-color: rgba(94,179,26,0.9);}
100% {background-color: transparent;}
}

@keyframes replay-table-green-fading-80 {
0% {background-color: transparent;}
50% {background-color: rgba(94,179,26,0.6);}
50% {background-color: rgba(94,179,26,0.8);}
100% {background-color: transparent;}
}

@keyframes replay-table-green-fading-70 {
0% {background-color: transparent;}
50% {background-color: rgba(94,179,26,0.55);}
50% {background-color: rgba(94,179,26,0.7);}
100% {background-color: transparent;}
}

@keyframes replay-table-green-fading-60 {
0% {background-color: transparent;}
50% {background-color: rgba(94,179,26,0.5);}
50% {background-color: rgba(94,179,26,0.6);}
100% {background-color: transparent;}
}

@keyframes replay-table-green-fading-50 {
0% {background-color: transparent;}
50% {background-color: rgba(94,179,26,0.45);}
50% {background-color: rgba(94,179,26,0.5);}
100% {background-color: transparent;}
}

Expand All @@ -400,51 +400,51 @@ html{

@keyframes replay-table-green-fading-30 {
0% {background-color: transparent;}
50% {background-color: rgba(94,179,26,0.35);}
50% {background-color: rgba(94,179,26,0.3);}
100% {background-color: transparent;}
}

@keyframes replay-table-green-fading-20 {
0% {background-color: transparent;}
50% {background-color: rgba(94,179,26,0.3);}
50% {background-color: rgba(94,179,26,0.2);}
100% {background-color: transparent;}
}

@keyframes replay-table-green-fading-10 {
0% {background-color: transparent;}
50% {background-color: rgba(94,179,26,0.25);}
50% {background-color: rgba(94,179,26,0.1);}
100% {background-color: transparent;}
}


@keyframes replay-table-green-100 {
0% {background-color: transparent;}
100% {background-color: rgba(94,179,26,0.7);}
100% {background-color: rgba(94,179,26,1);}
}

@keyframes replay-table-green-90 {
0% {background-color: transparent;}
100% {background-color: rgba(94,179,26,0.65);}
100% {background-color: rgba(94,179,26,0.9);}
}

@keyframes replay-table-green-80 {
0% {background-color: transparent;}
100% {background-color: rgba(94,179,26,0.6);}
100% {background-color: rgba(94,179,26,0.8);}
}

@keyframes replay-table-green-70 {
0% {background-color: transparent;}
100% {background-color: rgba(94,179,26,0.55);}
100% {background-color: rgba(94,179,26,0.7);}
}

@keyframes replay-table-green-60 {
0% {background-color: transparent;}
100% {background-color: rgba(94,179,26,0.5);}
100% {background-color: rgba(94,179,26,0.6);}
}

@keyframes replay-table-green-50 {
0% {background-color: transparent;}
100% {background-color: rgba(94,179,26,0.45);}
100% {background-color: rgba(94,179,26,0.5);}
}

@keyframes replay-table-green-40 {
Expand All @@ -454,12 +454,12 @@ html{

@keyframes replay-table-green-30 {
0% {background-color: transparent;}
100% {background-color: rgba(94,179,26,0.35);}
100% {background-color: rgba(94,179,26,0.3);}
}

@keyframes replay-table-green-20 {
0% {background-color: transparent;}
100% {background-color: rgba(94,179,26,0.3);}
100% {background-color: rgba(94,179,26,0.2);}
}

@keyframes replay-table-green-10 {
Expand All @@ -471,37 +471,37 @@ html{

@keyframes replay-table-red-fading-100 {
0% {background-color: transparent;}
50% {background-color: rgba(179,82,82,0.7);}
50% {background-color: rgba(179,82,82,1);}
100% {background-color: transparent;}
}

@keyframes replay-table-red-fading-90 {
0% {background-color: transparent;}
50% {background-color: rgba(179,82,82,0.65);}
50% {background-color: rgba(179,82,82,0.9);}
100% {background-color: transparent;}
}

@keyframes replay-table-red-fading-80 {
0% {background-color: transparent;}
50% {background-color: rgba(179,82,82,0.6);}
50% {background-color: rgba(179,82,82,0.8);}
100% {background-color: transparent;}
}

@keyframes replay-table-red-fading-70 {
0% {background-color: transparent;}
50% {background-color: rgba(179,82,82,0.55);}
50% {background-color: rgba(179,82,82,0.7);}
100% {background-color: transparent;}
}

@keyframes replay-table-red-fading-60 {
0% {background-color: transparent;}
50% {background-color: rgba(179,82,82,0.5);}
50% {background-color: rgba(179,82,82,0.6);}
100% {background-color: transparent;}
}

@keyframes replay-table-red-fading-50 {
0% {background-color: transparent;}
50% {background-color: rgba(179,82,82,0.45);}
50% {background-color: rgba(179,82,82,0.5);}
100% {background-color: transparent;}
}

Expand All @@ -513,13 +513,13 @@ html{

@keyframes replay-table-red-fading-30 {
0% {background-color: transparent;}
50% {background-color: rgba(179,82,82,0.35);}
50% {background-color: rgba(179,82,82,0.3);}
100% {background-color: transparent;}
}

@keyframes replay-table-red-fading-20 {
0% {background-color: transparent;}
50% {background-color: rgba(179,82,82,0.3);}
50% {background-color: rgba(179,82,82,0.2);}
100% {background-color: transparent;}
}

Expand All @@ -532,32 +532,32 @@ html{

@keyframes replay-table-red-100 {
0% {background-color: transparent;}
100% {background-color: rgba(179,82,82,0.7);}
100% {background-color: rgba(179,82,82,1);}
}

@keyframes replay-table-red-90 {
0% {background-color: transparent;}
100% {background-color: rgba(179,82,82,0.65);}
100% {background-color: rgba(179,82,82,0.9);}
}

@keyframes replay-table-red-80 {
0% {background-color: transparent;}
100% {background-color: rgba(179,82,82,0.6);}
100% {background-color: rgba(179,82,82,0.8);}
}

@keyframes replay-table-red-70 {
0% {background-color: transparent;}
100% {background-color: rgba(179,82,82,0.55);}
100% {background-color: rgba(179,82,82,0.7);}
}

@keyframes replay-table-red-60 {
0% {background-color: transparent;}
100% {background-color: rgba(179,82,82,0.5);}
100% {background-color: rgba(179,82,82,0.6);}
}

@keyframes replay-table-red-50 {
0% {background-color: transparent;}
100% {background-color: rgba(179,82,82,0.45);}
100% {background-color: rgba(179,82,82,0.5);}
}

@keyframes replay-table-red-40 {
Expand All @@ -567,12 +567,12 @@ html{

@keyframes replay-table-red-30 {
0% {background-color: transparent;}
100% {background-color: rgba(179,82,82,0.35);}
100% {background-color: rgba(179,82,82,0.3);}
}

@keyframes replay-table-red-20 {
0% {background-color: transparent;}
100% {background-color: rgba(179,82,82,0.3);}
100% {background-color: rgba(179,82,82,0.2);}
}

@keyframes replay-table-red-10 {
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/SeasonTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function SeasonTable (props) {
const rowStyle = {};

if (props.isMoving) {
if (props.round.meta.areAllResultsMapped && props.areRoundsConsecutive) {
if (props.round.meta.areAllResultsMapped && props.areRoundsConsecutive && result.change !== null) {
rowStyle.animation = `replay-table-${result.result} ${props.animationDuration}ms`;
} else {
const isFading = props.mode === 'season' || !props.areRoundsConsecutive;
Expand Down
8 changes: 8 additions & 0 deletions src/app/components/auxiliary/styling.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,19 @@ function calculateColorIntensity (change, maxChange) {
}

export function getRowColor (change, maxAbsChange) {
if (change === null) {
return null;
}

const color = change >= 0 ? 'green' : 'red';
return `rgba(${colors[color]},${calculateColorIntensity(change, maxAbsChange)})`;
}

export function getRowAnimation (change, maxAbsChange, animationDuration, isFading = true) {
if (change === null) {
return null;
}

const color = change >= 0 ? 'green' : 'red';
const intensity = 100*calculateColorIntensity(change, maxAbsChange);
return `replay-table-${color}${isFading ? '-fading' : ''}-${intensity} ${animationDuration}ms`;
Expand Down

0 comments on commit 6fbe6f4

Please sign in to comment.