Ignore testing

Ignore

by jonahe

HTML

<script src="https://unpkg.com/react-motion/build/react-motion.js"></script>
<div id="app"></div>

CSS

body {
  background: teal;
  padding: 10px;
  height: 100vh;
  box-sizing: border-box;
  font-family: Helvetica;
}

#app {
  display: flex;
  flex-direction: column;
  //align-items: center;
  background: #fff;
  border-radius: 4px;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
}
.char-element {
  display: inline-block;
  font-size: 40px;
  white-space: pre-wrap;
  user-select: none;
}


.weirdo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: teal;
  padding: 10px 0;
  height: 93vh;
  box-sizing: border-box;
}
.weirdo-center {
}
.weirdo-arms {
  margin-left: 10px;
}
.weirdo-inline {
  display: inline-block;
}

.weirdo-row {
  background: pink;
  
}
.empty {
  background: teal!important;
}
.empty-e {
  width: 5px;
}
.empty-r {
  width: 20px;
}
.empty-g {
  width: 30px;
}
.empty-dot-se {
  width: 40px;
}

React

const {StaggeredMotion, spring, presets} = ReactMotion;

const CHARS = "e r i k w i b e r g .se".split(" ");

const weirdoData = [
	"E",
  "r",
  "erikwiberg.se".split(""), // index 2
  "k",
  "w",
  "i",
  "b",
  "ee".split(""),
  "rr".split(""),
  "gg".split(""),
  ".se .se".split(" "),  
];

const WEIRDO_ROW_INDEX_FOR_ARM = 2;
const WEIRDO_ARM_ROW_INDEX_FOR_MIDDLE = 5;  // not middle, but the second i
const WEIRDO_ROW_INDEX_FOR_LEG_START = 7;

const initialData = () => weirdoData.map((row, rowIndex) => {
	if(rowIndex < WEIRDO_ROW_INDEX_FOR_ARM) {
  	return { style: {x: 0, y: 0}, type: 'head', content: row, key: 'head-' + rowIndex};
  } else if(rowIndex == WEIRDO_ROW_INDEX_FOR_ARM) {
  	const items = row.map((content, armIndex) => ({ test: 100, style: {x: 0, y: 0}, content: content, key: 'arm-' +armIndex}));
  	return {test: 500, type: 'arms', items, key: 'arms'};
  } else if(rowIndex < WEIRDO_ROW_INDEX_FOR_LEG_START) {
  	return {style: {x: 0, y: 0}, type: 'torso', content: row, key: 'torso-' + rowIndex};
  } else if(rowIndex >= WEIRDO_ROW_INDEX_FOR_LEG_START) {
  	const items = row.map((content, legIndex) => ({ style: {x: 0, y: 0}, content: content, key: 'leg-' + legIndex}));
  	return {type: 'legs', items, key: 'legs-' + rowIndex};
  } else {
  	throw new Error("unexpeced index of weirdo");
  }
});
console.log(initialData())

const dataTransformer = (mousePos) => prevData => {
	console.log('prevData in transform fn ', prevData)
	return prevData.map((dataRow, dataRowIndex) => {
  	if(dataRow.type == "arms") {
    	const prevArmDataRow = dataRow.items;
      
    	const itemsData = prevArmDataRow.map((armData, armIndex) => {
      	if(armIndex == WEIRDO_ARM_ROW_INDEX_FOR_MIDDLE) {
        	return {...armData, style: { x: spring(mousePos.x), y: spring(mousePos.y)}};
        } else {
        	const neighbourArmDataStyle = armIndex < WEIRDO_ARM_ROW_INDEX_FOR_MIDDLE ? prevArmDataRow[armIndex + 1].style : prevArmDataRow[armIndex - 1].style;
         ...