Changed rotation algorithm of post-its

Author: michelgrootjans

src/animation.js

@@ -2,6 +2,7 @@ const PubSub = require('pubsub-js');
 const {createElement} = require('./dom-manipulation')
 
 const round = (number, positions = 2) => Math.round(number * Math.pow(10, positions)) / Math.pow(10, positions);
+const any = array => array[Math.floor(Math.random() * array.length)];
 
 const initialize = (currentSenarioId) => {
   PubSub.subscribe('board.ready', (topic, {columns}) => {
@@ -28,9 +29,10 @@ const initialize = (currentSenarioId) => {
   });
 
   PubSub.subscribe('workitem.added', (topic, {column, item}) => {
+    const rotation = any(['left-2', 'left', 'none', 'right', 'right-2']);
     let $card = createElement({
       type: 'li',
-      className: 'post-it',
+      className: `post-it rotate-${rotation}`,
       attributes:{'data-card-id': item.id},
       style: `background: ${item.color};`
     })

style.css

@@ -75,23 +75,26 @@
 .queue .post-it:nth-child(1000n+1){
     margin-top: 0;
 }
-.todo .post-it:nth-child(4n+1),
-.queue .post-it:nth-child(4n+1){
+.todo .rotate-none,
+.queue .rotate-none{
     transform: rotate(0deg);
 }
-.todo .post-it:nth-child(4n+2),
-.queue .post-it:nth-child(4n+2){
+.todo .rotate-right,
+.queue .rotate-right{
     transform: rotate(2deg);
 }
-.todo .post-it:nth-child(4n+3),
-.queue .post-it:nth-child(4n+3){
+.todo .rotate-left,
+.queue .rotate-left{
     transform: rotate(-2deg);
 }
-.todo .post-it:nth-child(4n+4),
-.done .post-it:nth-child(4n+4),
-.queue .post-it:nth-child(4n+4){
+.todo .rotate-right-2,
+.queue .rotate-right-2{
     transform: rotate(4deg);
 }
+.todo .rotate-left-2,
+.queue .rotate-left-2{
+    transform: rotate(-4deg);
+}
 
 .done .post-it:nth-child(5n+1){
     z-index: 10;
@@ -154,4 +157,4 @@
 
 .chart {
     border: 1px solid lightgray;
-}
+}