/clickcount_world.html

## clickcount_world.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>worldcomponent　くりっく　かうんたー</title>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
  </head>
  <body>
    <div class="container">
      <h2>worldcomponent　くりっく　かうんたー</h2>
      <div id="content"></div>
      <p>
        マヌケが……知るがいい……「worldcomponent」の真の能力は…まさに！「FRPを支配する」能力だということを！
      </p>
      <h4>能力一覧</h4>
      <ul>
        <li>時を戻す能力</li>
        <li>時を進める能力</li>
        <li>時を忘れる能力</li>
        <li>時を記録する能力</li>
        <li>時を再現する能力</li>
      </ul>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.17.0/ramda.min.js"></script>
    <script type="text/babel">
"use strict";

/* begin of worldcomponent */
var worldcomponent = function(initialVal)
{
  var computingF = [];
  var value = {};
  var state;
  Object.defineProperties(value,
  {
    val: //value.val
    {
      get: function()
      {
        return state;
      },
      set: function(x)
      {
        state = x;
        computingF.map(
          function(f)
          {
            f(x);
          });
        return;
      }
    }
  });
  var o = {
    compute: function(f)
    {
      var f1 = function()
      {
        computingF[computingF.length] = f; //push  f
        value.val = initialVal;
      };
      return f1;
    },
    appear: function(a)
    {
      var f1 = function(){value.val = a;};
      return f1;
    },
    now: function()
    {
      return value.val;
    }
  };

  return o;
};

Object.defineProperties(worldcomponent,
{
  world: //our physical world
  {
    set: function(f)
    {
      return f();
    }
  }
});

worldcomponent.log = function(a)
{
  var f = console.log.bind(console, a);
  return f;
};
/* end of worldcomponent */
var ___ = worldcomponent;
var ___state = ___({
  counts: R.repeat(0, 4),
  total: 0,
  prev: null,
  next: null,
  save: null
});

class  ClickCounter extends React.Component {
  componentWillMount() {
    ___.world = ___state.compute((x) => {
      this.forceUpdate();
    });
  }


  _clickCount(number) {
    ___.world = ___state.appear(R.merge(___state.now(), {
      counts: R.set(R.lensIndex(number), ___state.now().counts[number] + 1, ___state.now().counts),
      total: ___state.now().total + 1,
      prev: ___state.now(),
      next: null
    }));
  }

  _clickUndo() {
    ___.world = ___state.appear(R.merge(___state.now().prev, {next: ___state.now()}));
  }

  _clickRedo() {
    ___.world = ___state.appear(R.merge(___state.now().next, {prev: ___state.now()}));
  }

  _clickForget() {
    ___.world = ___state.appear(R.merge(___state.now(), {prev: null, next: null}));
  }

  _clickSave() {
    ___.world = ___state.appear(R.merge(___state.now(), {save: ___state.now()}));
  }

  _clickLoad() {
    ___.world = ___state.appear(R.merge(___state.now().save, {save: ___state.now().save}));
  }

  render() {
    return (
      <div className="clickCounter">
        <ChildrenCounter counts={___state.now().counts} total={___state.now().total}
            onCount={this._clickCount.bind(this)}/>
        <UndoRedo enableUndo={___state.now().prev != null} enableRedo={___state.now().next != null}
            clickUndo={this._clickUndo.bind(this)} clickRedo={this._clickRedo.bind(this)}
            clickForget={this._clickForget.bind(this)}/>
        <SaveLoad enableSave={true} enableLoad={___state.now().save != null}
            clickSave={this._clickSave.bind(this)} clickLoad={this._clickLoad.bind(this)}/>
      </div>
    );
  }
}

class ChildrenCounter extends React.Component {
  render() {
    const children = this.props.counts.map((v, i) => {
      return <ChildCounter number={i} count={v} total={this.props.total} onCount={this.props.onCount} key={i}/>;
    });
    return (
      <div className="childrenCounter row">
        {children}
      </div>
    );
  }
}

class ChildCounter extends React.Component {
  _onClick() {
    return this.props.onCount(this.props.number);
  }

  render() {
    return (
      <div className="childCounter col-sm-3 col-md-2 panel panel-default text-center btn btn-default"
          onClick={this._onClick.bind(this)}>
        <h3>ばんごう {this.props.number}</h3>
        <p>このわく <span className="badge">{this.props.count}</span></p>
        <p>とーたる <span className="badge">{this.props.total}</span></p>
      </div>
    );
  }
}

class Button extends React.Component {
  render() {
    const classes = [
      this.props.name + "Button",
      "btn",
      "btn-" + this.props.level
    ].join(" ");
    if (this.props.enabled) {
      return (
        <button name={this.props.name} className={classes} onClick={this.props.onClick}>
          {this.props.text}
        </button>
      );
    } else {
      return (
        <button name={this.props.name} className={classes} disabled="disabled">
          {this.props.text}
        </button>
      );
    }
  }
}
Button.defaultProps = {level: "default"};

class UndoRedo extends React.Component {
  render() {
    return (
      <p className="undoRedo">
        <Button name="undo" text="時よ戻れ！" level="primary"
            enabled={this.props.enableUndo} onClick={this.props.clickUndo}/>
        &nbsp;
        <Button name="redo" text="時よ進め！" level="primary"
            enabled={this.props.enableRedo} onClick={this.props.clickRedo}/>
        &nbsp;
        <Button name="forget" text="記憶を忘却"
            enabled={this.props.enableUndo || this.props.enableRedo} onClick={this.props.clickForget}/>
      </p>
    );
  }
}

class SaveLoad extends React.Component {
  render() {
    return (
      <p className="saveLoad">
        <Button name="save" text="保存"
            enabled={this.props.enableSave} onClick={this.props.clickSave}/>
        &nbsp;
        <Button name="load" text="読込"
            enabled={this.props.enableLoad} onClick={this.props.clickLoad}/>
      </p>
    );
  }
}

React.render(<ClickCounter />, document.getElementById('content'));
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>worldcomponent　くりっく　かうんたー</title>
	<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
	</head>
	<body>
	<div class="container">
	<h2>worldcomponent　くりっく　かうんたー</h2>
	<div id="content"></div>
	<p>
	マヌケが……知るがいい……「worldcomponent」の真の能力は…まさに！「FRPを支配する」能力だということを！
	</p>
	<h4>能力一覧</h4>
	<ul>
	<li>時を戻す能力</li>
	<li>時を進める能力</li>
	<li>時を忘れる能力</li>
	<li>時を記録する能力</li>
	<li>時を再現する能力</li>
	</ul>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.17.0/ramda.min.js"></script>
	<script type="text/babel">
	"use strict";

	/* begin of worldcomponent */
	var worldcomponent = function(initialVal)
	{
	var computingF = [];
	var value = {};
	var state;
	Object.defineProperties(value,
	{
	val: //value.val
	{
	get: function()
	{
	return state;
	},
	set: function(x)
	{
	state = x;
	computingF.map(
	function(f)
	{
	f(x);
	});
	return;
	}
	}
	});
	var o = {
	compute: function(f)
	{
	var f1 = function()
	{
	computingF[computingF.length] = f; //push f
	value.val = initialVal;
	};
	return f1;
	},
	appear: function(a)
	{
	var f1 = function(){value.val = a;};
	return f1;
	},
	now: function()
	{
	return value.val;
	}
	};

	return o;
	};

	Object.defineProperties(worldcomponent,
	{
	world: //our physical world
	{
	set: function(f)
	{
	return f();
	}
	}
	});

	worldcomponent.log = function(a)
	{
	var f = console.log.bind(console, a);
	return f;
	};
	/* end of worldcomponent */
	var ___ = worldcomponent;
	var ___state = ___({
	counts: R.repeat(0, 4),
	total: 0,
	prev: null,
	next: null,
	save: null
	});

	class ClickCounter extends React.Component {
	componentWillMount() {
	___.world = ___state.compute((x) => {
	this.forceUpdate();
	});
	}


	_clickCount(number) {
	___.world = ___state.appear(R.merge(___state.now(), {
	counts: R.set(R.lensIndex(number), ___state.now().counts[number] + 1, ___state.now().counts),
	total: ___state.now().total + 1,
	prev: ___state.now(),
	next: null
	}));
	}

	_clickUndo() {
	___.world = ___state.appear(R.merge(___state.now().prev, {next: ___state.now()}));
	}

	_clickRedo() {
	___.world = ___state.appear(R.merge(___state.now().next, {prev: ___state.now()}));
	}

	_clickForget() {
	___.world = ___state.appear(R.merge(___state.now(), {prev: null, next: null}));
	}

	_clickSave() {
	___.world = ___state.appear(R.merge(___state.now(), {save: ___state.now()}));
	}

	_clickLoad() {
	___.world = ___state.appear(R.merge(___state.now().save, {save: ___state.now().save}));
	}

	render() {
	return (
	<div className="clickCounter">
	<ChildrenCounter counts={___state.now().counts} total={___state.now().total}
	onCount={this._clickCount.bind(this)}/>
	<UndoRedo enableUndo={___state.now().prev != null} enableRedo={___state.now().next != null}
	clickUndo={this._clickUndo.bind(this)} clickRedo={this._clickRedo.bind(this)}
	clickForget={this._clickForget.bind(this)}/>
	<SaveLoad enableSave={true} enableLoad={___state.now().save != null}
	clickSave={this._clickSave.bind(this)} clickLoad={this._clickLoad.bind(this)}/>
	</div>
	);
	}
	}

	class ChildrenCounter extends React.Component {
	render() {
	const children = this.props.counts.map((v, i) => {
	return <ChildCounter number={i} count={v} total={this.props.total} onCount={this.props.onCount} key={i}/>;
	});
	return (
	<div className="childrenCounter row">
	{children}
	</div>
	);
	}
	}

	class ChildCounter extends React.Component {
	_onClick() {
	return this.props.onCount(this.props.number);
	}

	render() {
	return (
	<div className="childCounter col-sm-3 col-md-2 panel panel-default text-center btn btn-default"
	onClick={this._onClick.bind(this)}>
	<h3>ばんごう {this.props.number}</h3>
	<p>このわく <span className="badge">{this.props.count}</span></p>
	<p>とーたる <span className="badge">{this.props.total}</span></p>
	</div>
	);
	}
	}

	class Button extends React.Component {
	render() {
	const classes = [
	this.props.name + "Button",
	"btn",
	"btn-" + this.props.level
	].join(" ");
	if (this.props.enabled) {
	return (
	<button name={this.props.name} className={classes} onClick={this.props.onClick}>
	{this.props.text}
	</button>
	);
	} else {
	return (
	<button name={this.props.name} className={classes} disabled="disabled">
	{this.props.text}
	</button>
	);
	}
	}
	}
	Button.defaultProps = {level: "default"};

	class UndoRedo extends React.Component {
	render() {
	return (
	<p className="undoRedo">
	<Button name="undo" text="時よ戻れ！" level="primary"
	enabled={this.props.enableUndo} onClick={this.props.clickUndo}/>

	<Button name="redo" text="時よ進め！" level="primary"
	enabled={this.props.enableRedo} onClick={this.props.clickRedo}/>

	<Button name="forget" text="記憶を忘却"
	enabled={this.props.enableUndo \|\| this.props.enableRedo} onClick={this.props.clickForget}/>
	</p>
	);
	}
	}

	class SaveLoad extends React.Component {
	render() {
	return (
	<p className="saveLoad">
	<Button name="save" text="保存"
	enabled={this.props.enableSave} onClick={this.props.clickSave}/>

	<Button name="load" text="読込"
	enabled={this.props.enableLoad} onClick={this.props.clickLoad}/>
	</p>
	);
	}
	}

	React.render(<ClickCounter />, document.getElementById('content'));
	</script>
	</body>
	</html>