christopherhesse/immediate-mode-prototype

## immediate-mode-prototype
<!DOCTYPE html>
<html>
<body>

<style>
html, body, div {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
</style>

<script>
var active = null
var should_render = true

var css = function(e, props) {
  for (var k in props) {
    if (typeof(props[k]) == 'number') {
      e.style[k] = props[k].toString() + 'px'
    } else {
      e.style[k] = props[k]
    }
  }
}

var doButton = function(id, w, h, text) {
  var e = document.createElement('div')
  e.innerText = text
  e.id = id
  css(e, {
    'font-family': 'Ideal Sans A, Ideal Sans B, Helvetica Neue, Helvetica, Segoe UI, sans-serif',
    'color': 'white',
    'margin': 10,
    'width': w,
    'height': h,
    'font-size': 14,
    'padding': 10,
    'line-height': h,
    'text-align': 'center',
    'cursor': 'pointer',
    '-webkit-user-select': 'none',
    'border-radius': 6,
    'background-color': '#d95b5b',
    'transition': 'background-color 2s',
  })

  root.appendChild(e)

  if (active == id) {
    return true
  } else {
    return false
  }
}

var root = document.createElement('div')
document.body.appendChild(root)

document.body.addEventListener('click', function(e) {
  if (e.target.id == '') {
    return
  }

  if (active != e.target.id) {
    active = e.target.id
    should_render = true
  }
})

var counter = 0
var message = 'hello'

var render = function() {
  root.innerHTML = ''

  var pressed = doButton("increment-button", 200, 50, "Increment Counter")
  if (pressed) {
    counter += 1
  }

  var pressed = doButton("decrement-button", 200, 50, "Decrement Counter")
  if (pressed) {
    counter -= 1
  }

  var e = document.createElement('div')
  css(e, {
    'font-family': 'Ideal Sans A, Ideal Sans B, Helvetica Neue, Helvetica, Segoe UI, sans-serif',
    'width': 150,
    'height': 50,
    'margin': 10,
    'padding': 10,
    'font-size': 14,
    'text-align': 'center',
    'color': 'white',
    'background-color': 'rgb(42,72,107)',
    'padding': '20px',
    'border-radius': 6,
  })
  e.innerText = 'counter: ' + counter.toString()
  root.appendChild(e)

  active = null
}

var animationFrame = function() {
  if (should_render) {
    render()
    should_render = false
  }
  window.requestAnimationFrame(animationFrame)
}
window.requestAnimationFrame(animationFrame)
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<style>
	html, body, div {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
	}
	</style>

	<script>
	var active = null
	var should_render = true

	var css = function(e, props) {
	for (var k in props) {
	if (typeof(props[k]) == 'number') {
	e.style[k] = props[k].toString() + 'px'
	} else {
	e.style[k] = props[k]
	}
	}
	}

	var doButton = function(id, w, h, text) {
	var e = document.createElement('div')
	e.innerText = text
	e.id = id
	css(e, {
	'font-family': 'Ideal Sans A, Ideal Sans B, Helvetica Neue, Helvetica, Segoe UI, sans-serif',
	'color': 'white',
	'margin': 10,
	'width': w,
	'height': h,
	'font-size': 14,
	'padding': 10,
	'line-height': h,
	'text-align': 'center',
	'cursor': 'pointer',
	'-webkit-user-select': 'none',
	'border-radius': 6,
	'background-color': '#d95b5b',
	'transition': 'background-color 2s',
	})

	root.appendChild(e)

	if (active == id) {
	return true
	} else {
	return false
	}
	}

	var root = document.createElement('div')
	document.body.appendChild(root)

	document.body.addEventListener('click', function(e) {
	if (e.target.id == '') {
	return
	}

	if (active != e.target.id) {
	active = e.target.id
	should_render = true
	}
	})

	var counter = 0
	var message = 'hello'

	var render = function() {
	root.innerHTML = ''

	var pressed = doButton("increment-button", 200, 50, "Increment Counter")
	if (pressed) {
	counter += 1
	}

	var pressed = doButton("decrement-button", 200, 50, "Decrement Counter")
	if (pressed) {
	counter -= 1
	}

	var e = document.createElement('div')
	css(e, {
	'font-family': 'Ideal Sans A, Ideal Sans B, Helvetica Neue, Helvetica, Segoe UI, sans-serif',
	'width': 150,
	'height': 50,
	'margin': 10,
	'padding': 10,
	'font-size': 14,
	'text-align': 'center',
	'color': 'white',
	'background-color': 'rgb(42,72,107)',
	'padding': '20px',
	'border-radius': 6,
	})
	e.innerText = 'counter: ' + counter.toString()
	root.appendChild(e)

	active = null
	}

	var animationFrame = function() {
	if (should_render) {
	render()
	should_render = false
	}
	window.requestAnimationFrame(animationFrame)
	}
	window.requestAnimationFrame(animationFrame)
	</script>
	</body>
	</html>