headwinds/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

    svg.append("text")
      .text("Recursive Crusade")
    	.attr("id","title")
      .attr("y", 50)
      .attr("x", 20)
      .attr("font-size", 28)
    	.attr("font-weight", 500)
    	.attr("fill", "teal")
      .attr("font-family", "monospace")

    svg.append("text")
      .text("")
    	.attr("id", "result")
      .attr("y", 90)
      .attr("x", 30)
      .attr("font-size", 20)
      .attr("font-family", "monospace")

    svg.append("text")
      .text("...")
    	.attr("id", "recursion")
      .attr("y", 120)
      .attr("x", 50)
      .attr("font-size", 20)
      .attr("font-family", "monospace")

    function removeDuplicateDates(arr, equals) {
      var originalArr = arr.slice(0);
      var i, len, j, val;
      arr.length = 0;

      for (i = 0, len = originalArr.length; i < len; ++i) {
          val = originalArr[i];
          if (!arr.some(function(item) { return thingsEqual(item, val); })) {
              arr.push(val);
          }
      }
		}

    function thingsEqual(thing1, thing2) {
        const date1 = new Date(thing1.created_on);
        const date2 = new Date(thing2.created_on);

        return date1.getDate() === date2.getDate()
            && date1.getMonth() === date1.getMonth()
            && date1.getFullYear() === date1.getFullYear();
    }

    const things = [
      {created_on:"Fri, 06 Dec 2019 02:31:20 GMT",name:"sword"},
      {created_on:"Fri, 07 Dec 2019 02:31:20 GMT",name:"shield"},
      {created_on:"Fri, 08 Dec 2019 02:31:20 GMT",name:"mace"},
      {created_on:"Fri, 08 Dec 2019 02:31:20 GMT",name:"mace"}
    ];

		removeDuplicateDates(things, thingsEqual);

    const updateResult = ( id, result, color) => {
      d3.select(`#${id}`).text(result)
      if (color){
        d3.select(`#${id}`).attr("fill", color)
      }
    }

    const str = things.map( thing => (thing.name))

    updateResult("result", String(str))

    // Resursion practice...

    const phrase = "As the cleric healed the wounded...".split("");

    let sentence = "";

    function walkPhrase(phrase, n) {
      if (n === 0) {
        return;
      } else {
        return setTimeout( () => {
          const idx = phrase.length - n;
          const letter = phrase[idx];

          sentence = sentence + letter;

          const color = n % 2 === 0 ? "pink" : "red";
          updateResult("recursion", sentence, color);
          return walkPhrase(phrase, n - 1)
        }, 200)
      }
    }

    walkPhrase(phrase, phrase.length)

    /*
    https://javascript.info/recursion
		https://javascript.info/currying-partials
    */

  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 500)

	svg.append("text")
	.text("Recursive Crusade")
	.attr("id","title")
	.attr("y", 50)
	.attr("x", 20)
	.attr("font-size", 28)
	.attr("font-weight", 500)
	.attr("fill", "teal")
	.attr("font-family", "monospace")

	svg.append("text")
	.text("")
	.attr("id", "result")
	.attr("y", 90)
	.attr("x", 30)
	.attr("font-size", 20)
	.attr("font-family", "monospace")

	svg.append("text")
	.text("...")
	.attr("id", "recursion")
	.attr("y", 120)
	.attr("x", 50)
	.attr("font-size", 20)
	.attr("font-family", "monospace")

	function removeDuplicateDates(arr, equals) {
	var originalArr = arr.slice(0);
	var i, len, j, val;
	arr.length = 0;

	for (i = 0, len = originalArr.length; i < len; ++i) {
	val = originalArr[i];
	if (!arr.some(function(item) { return thingsEqual(item, val); })) {
	arr.push(val);
	}
	}
	}

	function thingsEqual(thing1, thing2) {
	const date1 = new Date(thing1.created_on);
	const date2 = new Date(thing2.created_on);

	return date1.getDate() === date2.getDate()
	&& date1.getMonth() === date1.getMonth()
	&& date1.getFullYear() === date1.getFullYear();
	}

	const things = [
	{created_on:"Fri, 06 Dec 2019 02:31:20 GMT",name:"sword"},
	{created_on:"Fri, 07 Dec 2019 02:31:20 GMT",name:"shield"},
	{created_on:"Fri, 08 Dec 2019 02:31:20 GMT",name:"mace"},
	{created_on:"Fri, 08 Dec 2019 02:31:20 GMT",name:"mace"}
	];

	removeDuplicateDates(things, thingsEqual);

	const updateResult = ( id, result, color) => {
	d3.select(`#${id}`).text(result)
	if (color){
	d3.select(`#${id}`).attr("fill", color)
	}
	}

	const str = things.map( thing => (thing.name))

	updateResult("result", String(str))

	// Resursion practice...

	const phrase = "As the cleric healed the wounded...".split("");

	let sentence = "";

	function walkPhrase(phrase, n) {
	if (n === 0) {
	return;
	} else {
	return setTimeout( () => {
	const idx = phrase.length - n;
	const letter = phrase[idx];

	sentence = sentence + letter;

	const color = n % 2 === 0 ? "pink" : "red";
	updateResult("recursion", sentence, color);
	return walkPhrase(phrase, n - 1)
	}, 200)
	}
	}

	walkPhrase(phrase, phrase.length)

	/*
	https://javascript.info/recursion
	https://javascript.info/currying-partials
	*/

	</script>
	</body>