Permalink
Browse files

simple modularity

  • Loading branch information...
bhauman committed Jun 8, 2015
1 parent 1960a13 commit 9547f5e2de9afa45dcf4e0fb3293f4491e202a40
Showing with 47 additions and 26 deletions.
  1. +47 −26 src/yome.js
View
@@ -24,7 +24,7 @@ Yome.initialState = () => {
return { sides: [1,2,3,4,5,6,7,8].map( () => new Object() ) }
}
Yome.state = Yome.state || Yome.initialState();
// Yome.state = Yome.state || Yome.initialState();
//l(Yome.state)
Yome.sideCount = (st) => st.sides.length
@@ -33,7 +33,6 @@ Yome.sideCount = (st) => st.sides.length
Yome.sliceTheta = (st) => 2 * Math.PI / Yome.sideCount(st)
//l(Yome.sliceTheta(Yome.state))
Yome.rotate = (theta, point) => {
const sint = Math.sin(theta), cost = Math.cos(theta);
return { x: (point.x * cost) - (point.y * sint),
@@ -183,14 +182,16 @@ Yome.drawYome = (st) =>
//Yome.clearPlayArea()
//side effecting
Yome.eventHandler = (f) =>
(e => {e.preventDefault(); f(e.target.value); Yome.render()})
Yome.prevent = (f) =>
(e => {e.preventDefault(); f(e.target.value);})
//side effecting
Yome.changeSideCount = (new_count) => {
Yome.changeSideCount = (state) =>
(new_count) => {
let nArray = Array.apply(null, Array(parseInt(new_count)));
Yome.state.sides = nArray.map((_,i) => Yome.state.sides[i] || {});
}
state.changeState((st) => st.sides = nArray.map((_,i) => st.sides[i] || {}))
}
//Yome.changeSideCount(6)
//Yome.changeSideCount(7)
//Yome.changeSideCount(8)
@@ -202,7 +203,7 @@ Yome.sideOptions = () =>
Yome.sideCountInput = st =>
<div className="top-control">
<span> Size of Yome </span>
<select onChange={ Yome.eventHandler(Yome.changeSideCount) }
<select onChange={ Yome.prevent(Yome.changeSideCount(st)) }
value={ Yome.sideCount(st) }>
{ Yome.sideOptions() }
</select>
@@ -213,10 +214,13 @@ Yome.sideCountInput = st =>
Yome.worldPosition = (point) => ({ x: point.x + 250, y: point.y + 250})
Yome.addRemoveWindow = (i) =>
Yome.addRemoveWindow = (state, i) =>
(_) => {
const side = Yome.state.sides[i];
side.face = (!side.face ? "window" : null);
state.changeState(
(st) => {
const side = st.sides[i];
side.face = (!side.face ? "window" : null);
})
}
Yome.windowControl = (st, side, i) => {
@@ -227,7 +231,7 @@ Yome.windowControl = (st, side, i) => {
left: pos.x } }>
<a className={ "window-control-offset " +
(add ? "add" : "remove")}
onClick={ Yome.eventHandler(Yome.addRemoveWindow(i)) }
onClick={ Yome.prevent(Yome.addRemoveWindow(st, i)) }
href="#">
{ add ? "+ window" : "- window" }
</a>
@@ -240,35 +244,51 @@ Yome.windowControls = (st) =>
// --- Corner Controls
// SIDE EFFECT
Yome.addRemoveCornerItem = (type, side) =>
(_) => side.corner = (side.corner ? null : type)
Yome.addRemoveCornerItem = (state, type, i) =>
(_) =>
state.changeState(st => {
st.sides[i].corner = (st.sides[i].corner ? null : type)
})
Yome.cornerControlStateClass = (type, corner_type) =>
((! corner_type) && "add") || ((corner_type == type) && "remove") || "hidden"
Yome.cornerControlLink = (type, side) =>
<a className={Yome.cornerControlStateClass(type, side.corner)}
Yome.cornerControlLink = (state, type, i) => {
const side = state.sides[i];
return <a className={Yome.cornerControlStateClass(type, side.corner)}
key={ type } href="#"
onClick={Yome.eventHandler(Yome.addRemoveCornerItem(type, side))}>
onClick={ Yome.prevent(Yome.addRemoveCornerItem(state, type, i)) }>
{ (side.corner ? "- " : "+ ") + type }
</a>
}
Yome.cornerControlLinks = (side, i) =>
Yome.cornerControlLinks = (state, i) =>
["stove-vent", "zip-door", "door-frame"].map(
(t) => Yome.cornerControlLink(t, side))
(t) => Yome.cornerControlLink(state, t, i))
Yome.cornerControl = (st, side, i) => {
let theta = Yome.sliceTheta(st) * (i + 0.5),
Yome.cornerControl = (st, i) => {
let side = st.sides[i],
theta = Yome.sliceTheta(st) * (i + 0.5),
pos = Yome.worldPosition(Yome.radialPoint(221, theta));
return <div className="control-holder" style={{ top: pos.y, left: pos.x }}>
<div className="corner-control-offset">
{ Yome.cornerControlLinks(side, i) }
{ Yome.cornerControlLinks(st, i) }
</div>
</div>
}
Yome.StateHolder = function(sides, renderFunc) {
this.sides = sides;
this.__render = renderFunc;
}
Yome.StateHolder.prototype.changeState = function(f) {
f(this);
this.__render()
}
Yome.cornerControls = (st) =>
st.sides.map((side, i) => Yome.cornerControl(st, side, i))
st.sides.map((_, i) => Yome.cornerControl(st, i))
// --- Add new code above this line ---
@@ -282,7 +302,8 @@ Yome.widget = (st) =>
</div>
</div>
Yome.render = () =>
React.render(Yome.widget(Yome.state), document.getElementById('app'))
Yome.state = Yome.state ||
new Yome.StateHolder(Yome.initialState().sides,
() => { React.render(Yome.widget(Yome.state), document.getElementById('app'))} );
Yome.render();
Yome.state.__render()

0 comments on commit 9547f5e

Please sign in to comment.