BasicOperations.scala

object ScalaJSExample extends js.JSApp{
  def main() = {
    val xs = Seq(1, 2, 3)
    println(xs.toString)
    val ys = Seq(4, 5, 6)
    println(ys.toString)
    val zs = for{
      x <- xs
      y <- ys
    } yield x * y
    println(zs.toString)
  }
}

DodgeTheDots.scala

import scala.util.Random

case class Point(x: Double, y: Double){
  def +(p: Point) = Point(x + p.x, y + p.y)
  def -(p: Point) = Point(x - p.x, y - p.y)
  def *(d: Double) = Point(x * d, y * d)
  def /(d: Double) = Point(x / d, y / d)
  def length = Math.sqrt(x * x + y * y)
}
 
class Enemy(var pos: Point, var vel: Point)

object ScalaJSExample extends js.JSApp{
  import Page._ 
  var startTime = js.Date.now()
 
  var player = Point(dom.innerWidth.toInt/2, dom.innerHeight.toInt/2)
 
  var enemies = Seq.empty[Enemy]
 
  var death: Option[(String, Int)] = None
  def run() = {
    enemies = enemies.filter(e =>
      e.pos.x >= 0 && e.pos.x <= canvas.width &&
      e.pos.y >= 0 && e.pos.y <= canvas.height
    )
 
    def randSpeed = Random.nextInt(5) - 3
    enemies = enemies ++ Seq.fill(20 - enemies.length)(
      new Enemy(
        Point(Random.nextInt(canvas.width.toInt), 0),
        Point(randSpeed, randSpeed)
      )
    )
 
    for(enemy <- enemies){
      enemy.pos = enemy.pos + enemy.vel
      val delta = player - enemy.pos
      enemy.vel = enemy.vel + delta / delta.length / 100
    }
 
    if(enemies.exists(e => (e.pos - player).length < 20)){
      death = Some((s"You lasted $deltaT seconds", 100))
      enemies = enemies.filter(e => (e.pos - player).length > 20)
    }
  }
  def deltaT = ((js.Date.now() - startTime) / 1000).toInt
 
  def draw() = {
    renderer.clearRect(0, 0, canvas.width, canvas.height)
    death match{
      case None =>
 
        renderer.fillStyle = "white"
        renderer.fillRect(player.x - 10, player.y - 10, 20, 20)
        renderer.fillText("player", player.x - 15, player.y - 30)
 
        renderer.fillStyle = "red"
        for (enemy <- enemies){
          renderer.fillRect(enemy.pos.x - 10, enemy.pos.y - 10, 20, 20)
        }
 
        renderer.fillStyle = "white"
 
        renderer.fillText(s"$deltaT seconds", canvas.width / 2 - 100, canvas.height / 5)
      case Some((msg, time)) =>
        renderer.fillStyle = "white"
        renderer.fillText(msg, canvas.width / 2 - 100, canvas.height / 2)
        if (time - 1 == 0){
          death = None
          startTime = js.Date.now()
        }else{
          death = Option((msg, time - 1))
        }
    }
  }
 
  def main() = {
 
    dom.document.onmousemove = { (e: dom.MouseEvent) =>
      player = Point(e.clientX.toInt, e.clientY.toInt)
      (): js.Any
    }
    dom.setInterval(() => {run(); draw()}, 20)
  }
}

FlappyLine.scala

/**
 * A spiritual clone of Flappy Bird. Click to jump, don't hit the white barriers!
 * 
 * High scores are saved using HTML5 Local Storage.
 */
object ScalaJSExample extends js.JSApp{
  import Page._
  var game = new Game()
  
  def main() = {
    dom.setInterval(() => game.run(), 20 * 800 / canvas.width)
    canvas.onclick = { (e: dom.MouseEvent) =>
      game.v += canvas.height / 200
    }
    
  }
  class Game{
    renderer.fillStyle = "black"
    renderer.fillRect(0, 0, canvas.width, canvas.height)
    var i = 0.0
    var h = canvas.height / 2.0
    var v = 0.0
    val a = -0.05

    def run() = {
      val imageData = renderer.getImageData(1, 0, canvas.width-1, canvas.height)
      clear()
      println("Score: " + i.toDouble.toInt)
      val highScore = Option(dom.localStorage.getItem("highScore")).fold(0)(_.toString.toDouble.toInt)
      println("High Score: " + highScore)
      i += 1
      dom.localStorage.setItem("highScore", Math.max(i, highScore).toString)
      v += a
      h += v
      
      val spotData = renderer.getImageData(canvas.width/2 + 3, canvas.height - h, 1, 1).data

      if (spotData.take(3).map(_.toInt).sum != 0 || h > canvas.height || h < 0) {
        game = new Game()
      } else{
        
        renderer.putImageData(imageData, 0, 0)
        renderer.fillStyle = "black"
        renderer.fillRect(canvas.width-1, 0, 1, canvas.height)
        if (i.toInt % (canvas.width / 3).toInt == 0){
          val gapHeight = canvas.height / 5
          val gap = util.Random.nextInt(canvas.height.toInt - gapHeight.toInt)
          renderer.fillStyle = "white"
          renderer.fillRect(canvas.width-2, 0, 2, gap)
          renderer.fillRect(canvas.width-2, gap + gapHeight, 2, canvas.height - gap - gapHeight)
        }
        val r = (h / canvas.height * 255).toInt
        val b = (255 / (1 + Math.pow(Math.E, -v))).toInt

        renderer.fillStyle = s"rgb($r, 255, $b)"
        renderer.fillRect(canvas.width / 2, canvas.height - h, 2, 2)
      }
    }
  }
}

JsonParser.scala

/**
 * Simple, zero-dependency, self-contained JSON parser, serializer and AST
 * taken from 
 * 
 * https://github.com/nestorpersist/json
 * 
 * Notably, does not use the browser's native JSON capability, but re-implements
 * it all in order to be 100% compatible with both Scala-JS and Scala-JVM
 */

object ScalaJSExample extends js.JSApp{

  def main() = {
    val parsed = Json.read(ugly)
    println(parsed(0).toString)
    println(parsed(8)("real").toString)
    println(parsed(8)("comment").toString)
    println(parsed(8)("jsontext").toString)
    println(Json.write(parsed(8)).toString)
  }
  
  val ugly =
        """
          |[
          |    "JSON Test Pattern pass1",
          |    {"object with 1 member":["array with 1 element"]},
          |    {},
          |    [],
          |    -42,
          |    true,
          |    false,
          |    null,
          |    {
          |        "integer": 1234567890,
          |        "real": -9876.543210,
          |        "e": 0.123456789e-12,
          |        "E": 1.234567890E+34,
          |        "":  23456789012E66,
          |        "zero": 0,
          |        "one": 1,
          |        "space": " ",
          |        "quote": "\"",
          |        "backslash": "\\",
          |        "controls": "\b\f\n\r\t",
          |        "slash": "/ & \/",
          |        "alpha": "abcdefghijklmnopqrstuvwyz",
          |        "ALPHA": "ABCDEFGHIJKLMNOPQRSTUVWYZ",
          |        "digit": "0123456789",
          |        "0123456789": "digit",
          |        "special": "`1~!@#$%^&*()_+-={':[,]}|;.</>?",
          |        "hex": "\u0123\u4567\u89AB\uCDEF\uabcd\uef4A",
          |        "true": true,
          |        "false": false,
          |        "null": null,
          |        "array":[  ],
          |        "object":{  },
          |        "address": "50 St. James Street",
          |        "url": "http://www.JSON.org/",
          |        "comment": "// /* <!-- --",
          |        "# -- --> */": " ",
          |        " s p a c e d " :[1,2 , 3
          |
          |,
          |
          |4 , 5        ,          6           ,7        ],"compact":[1,2,3,4,5,6,7],
          |        "jsontext": "{\"object with 1 member\":[\"array with 1 element\"]}",
          |        "quotes": "&#34; \u005Cu0022 %22 0x22 034 &#x22;",
          |        "\/\\\"\uCAFE\uBABE\uAB98\uFCDE\ubcda\uef4A\b\f\n\r\t`1~!@#$%^&*()_+-=[]{}|;:',./<>?"
          |: "A key can be any string"
          |    },
          |    0.5 ,98.6
          |,
          |99.44
          |,
          |
          |1066,
          |1e1,
          |0.1e1,
          |1e-1,
          |1e00,2e+00,2e-00
          |,"rosebud"]
        """.stripMargin
}


object Js {
  sealed trait Value{
    def value: Any
    def apply(i: Int): Value = this.asInstanceOf[Array].value(i)
    def apply(s: java.lang.String): Value = this.asInstanceOf[Object].value.find(_._1 == s).get._2
  }
  case class String(value: java.lang.String) extends Value
  case class Object(value: Seq[(java.lang.String, Value)]) extends Value
  case class Array(value: Seq[Value]) extends Value
  case class Number(value: java.lang.String) extends Value
  case object False extends Value{
    def value = true
  }
  case object True extends Value{
    def value = false
  }
  case object Null extends Value{
    def value = null
  }
}


object Json {
  def write(v: Js.Value): String = v match {
    case Js.String(s) =>
      val out = s.flatMap {
        case '\\' => "\\\\"
        case '"' => "\\\""
        case '/' => "\\/"
        case '\b' => "\\b"
        case '\t' => "\\t"
        case '\n' => "\\n"
        case '\f' => "\\f"
        case '\r' => "\\r"
        case c if c < ' ' =>
          val t = "000" + Integer.toHexString(c)
          "\\u" + t.takeRight(4)
        case c => c.toString
      }
      '"' + out + '"'
    case Js.Object(kv) =>
      val contents = kv.toIterator.map{
        case (k, v) => s"${write(Js.String(k))}: ${write(v)}"
      }.mkString(", ")
      s"{$contents}"
    case Js.Array(vs) => s"[${vs.map(write).mkString(", ")}]"
    case Js.Number(d) => d
    case Js.False => "false"
    case Js.True => "true"
    case Js.Null => "null"
  }

  /**
   * Self-contained JSON parser adapted from
   *
   * https://github.com/nestorpersist/json
   */
  def read(s: String): Js.Value = {

    // *** Character Kinds

    type CharKind = Int
    val Letter = 0
    val Digit = 1
    val Minus = 2
    val Quote = 3
    val Colon = 4
    val Comma = 5
    val Lbra = 6
    val Rbra = 7
    val Larr = 8
    val Rarr = 9
    val Blank = 10
    val Other = 11
    val Eof = 12
    val Slash = 13

    // *** Token Kinds

    type TokenKind = Int
    val ID = 0
    val STRING = 1
    val NUMBER = 2
    val BIGNUMBER = 3
    val FLOATNUMBER = 4
    val COLON = 5
    val COMMA = 6
    val LOBJ = 7
    val ROBJ = 8
    val LARR = 9
    val RARR = 10
    val BLANK = 11
    val EOF = 12

    // *** Character => CharKind Map ***

    val charKind = (0 to 255).toArray.map {
      case c if 'a'.toInt <= c && c <= 'z'.toInt => Letter
      case c if 'A'.toInt <= c && c <= 'Z'.toInt => Letter
      case c if '0'.toInt <= c && c <= '9'.toInt => Digit
      case '-' => Minus
      case ',' => Comma
      case '"' => Quote
      case ':' => Colon
      case '{' => Lbra
      case '}' => Rbra
      case '[' => Larr
      case ']' => Rarr
      case ' ' => Blank
      case '\t' => Blank
      case '\n' => Blank
      case '\r' => Blank
      case '/' => Slash
      case _ => Other
    }

    // *** Character Escapes

    val escapeMap = Map[Int, String](
      '\\'.toInt -> "\\",
      '/'.toInt -> "/",
      '\"'.toInt -> "\"",
      'b'.toInt -> "\b",
      'f'.toInt -> "\f",
      'n'.toInt -> "\n",
      'r'.toInt -> "\r",
      't'.toInt -> "\t"
    )
    // *** Import Shared Data ***

    // *** INPUT STRING ***

    // array faster than accessing string directly using charAt
    //final  val s1 = s.toCharArray()
    val size = s.size

    // *** CHARACTERS ***

    var pos = 0

    var ch: Int = 0
    var chKind: CharKind = 0
    var chLinePos: Int = 0
    var chCharPos: Int = 0

    def chNext() = {
      if (pos < size) {
        //ch = s1(pos).toInt
        ch = s.charAt(pos)
        chKind = if (ch < 255) {
          charKind(ch)
        } else {
          Other
        }
        pos += 1
        if (ch == '\n'.toInt) {
          chLinePos += 1
          chCharPos = 1
        } else {
          chCharPos += 1
        }
      } else {
        ch = -1
        pos = size + 1
        chKind = Eof
      }
    }


    def chError(msg: String): Nothing = {
      throw new Json.Exception(msg, s, chLinePos, chCharPos)
    }

    def chMark = pos - 1

    def chSubstr(first: Int, delta: Int = 0) = {
      s.substring(first, pos - 1 - delta)
    }

    // *** LEXER ***

    var tokenKind = BLANK
    var tokenValue = ""
    var linePos = 1
    var charPos = 1

    def getDigits() = {
      while (chKind == Digit) chNext()
    }

    def handleDigit() {
      val first = chMark
      getDigits()
      val k1 = if (ch == '.'.toInt) {
        chNext()
        getDigits()
        BIGNUMBER
      } else {
        NUMBER
      }
      val k2 = if (ch == 'E'.toInt || ch == 'e'.toInt) {
        chNext()
        if (ch == '+'.toInt) {
          chNext()
        } else if (ch == '-'.toInt) {
          chNext()
        }
        getDigits()
        FLOATNUMBER
      } else {
        k1
      }
      tokenKind = k2
      tokenValue = chSubstr(first)
    }

    def handleRaw() {
      chNext()
      val first = chMark
      var state = 0
      do {
        if (chKind == Eof) chError("EOF encountered in raw string")
        state = (ch, state) match {
          case ('}', _) => 1
          case ('"', 1) => 2
          case ('"', 2) => 3
          case ('"', 3) => 0
          case _ => 0
        }

        chNext()
      } while (state != 3)
      tokenKind = STRING
      tokenValue = chSubstr(first, 3)
    }

    def handle(i: Int) = {
      chNext()
      tokenKind = i
      tokenValue = ""
    }

    def tokenNext() {
      do {
        linePos = chLinePos
        charPos = chCharPos
        val kind: Int = chKind
        kind match {
          case Letter =>
            val first = chMark
            while (chKind == Letter || chKind == Digit) {
              chNext()
            }
            tokenKind = ID
            tokenValue = chSubstr(first)

          case Digit => handleDigit()
          case Minus =>
            chNext()
            handleDigit()
            tokenValue = "-" + tokenValue

          case Quote =>
            val sb = new StringBuilder(50)
            chNext()
            var first = chMark
            while (ch != '"'.toInt && ch >= 32) {
              if (ch == '\\'.toInt) {
                sb.append(chSubstr(first))
                chNext()
                escapeMap.get(ch) match {
                  case Some(s) =>
                    sb.append(s)
                    chNext()

                  case None =>
                    if (ch != 'u'.toInt) chError("Illegal escape")
                    chNext()
                    var code = 0
                    for (i <- 1 to 4) {
                      val ch1 = ch.toChar.toString
                      val i = "0123456789abcdef".indexOf(ch1.toLowerCase)
                      if (i == -1) chError("Illegal hex character")
                      code = code * 16 + i
                      chNext()
                    }
                    sb.append(code.toChar.toString)
                }
                first = chMark
              } else {
                chNext()
              }
            }
            if (ch != '"') chError("Unexpected string character: " + ch.toChar)

            sb.append(chSubstr(first))

            tokenKind = STRING

            tokenValue = sb.toString()
            chNext()
            if (tokenValue.length() == 0 && ch == '{') {
              handleRaw()
            }

          case Colon => handle(COLON)
          case Comma => handle(COMMA)
          case Lbra => handle(LOBJ)
          case Rbra => handle(ROBJ)
          case Larr => handle(LARR)
          case Rarr => handle(RARR)
          case Blank =>
            do chNext() while (chKind == Blank)
            tokenKind = BLANK
            tokenValue = ""

          case Other => chError("Unexpected character: " + ch.toChar + " " + ch)
          case Eof =>
            chNext()
            tokenKind = EOF
            tokenValue = ""

          case Slash =>
            if (chKind != Slash) chError("Expecting Slash")
            do chNext() while (ch != '\n' && chKind != Eof)
            tokenKind = BLANK
            tokenValue = ""

        }
      } while (tokenKind == BLANK)
    }

    def tokenError(msg: String): Nothing = {
      throw new Json.Exception(msg, s, linePos, charPos)
    }

    // *** PARSER ***

    def handleEof() = tokenError("Unexpected eof")
    def handleUnexpected(i: String) = tokenError(s"Unexpected input: [$i]")

    def handleArray(): Js.Array = {
      tokenNext()
      var result = List.empty[Js.Value]
      while (tokenKind != RARR) {
        result = getJson() :: result
        tokenKind match{
          case COMMA => tokenNext()
          case RARR => // do nothing
          case _ => tokenError("Expecting , or ]")
        }
      }
      tokenNext()
      Js.Array(result.reverse)
    }

    def handleObject(): Js.Object = {
      tokenNext()
      var result = List.empty[(String, Js.Value)]

      while (tokenKind != ROBJ) {
        if (tokenKind != STRING && tokenKind != ID) tokenError("Expecting string or name")
        val name = tokenValue
        tokenNext()
        if (tokenKind != COLON) tokenError("Expecting :")
        tokenNext()
        result = (name -> getJson()) :: result
        tokenKind match{
          case COMMA => tokenNext()
          case ROBJ => // do nothing
          case _ => tokenError("Expecting , or }")
        }
      }
      tokenNext()
      Js.Object(result.reverse)
    }
    def handleNumber(name: String, f: String => Unit) = {
      val v = try {
        f(tokenValue)
      } catch {
        case _: Throwable => tokenError("Bad " + name)
      }
      val old = tokenValue
      tokenNext()

      Js.Number(old)
    }
    def getJson(): Js.Value = {
      val kind: Int = tokenKind
      val result: Js.Value = kind match {
        case ID =>
          val result = tokenValue match {
            case "true" => Js.True
            case "false" => Js.False
            case "null" => Js.Null
            case _ => tokenError("Not true, false, or null")
          }

          tokenNext()
          result

        case STRING =>
          val result = tokenValue
          tokenNext()
          Js.String(result)

        case NUMBER => handleNumber("NUMBER", _.toLong)
        case BIGNUMBER => handleNumber("BIGNUMBER", _.toDouble)
        case FLOATNUMBER => handleNumber("FLOATNUMBER", _.toDouble)
        case COLON => handleUnexpected(":")
        case COMMA => handleUnexpected(",")
        case LOBJ => handleObject()
        case ROBJ => handleUnexpected("}")
        case LARR => handleArray()
        case RARR => handleUnexpected("]")
        case EOF => handleEof()
      }
      result
    }
    def parse(): Js.Value = {
      chNext()
      tokenNext()
      val result = getJson
      if (tokenKind != EOF) tokenError("Excess input")
      result
    }
    parse()
  }
  class Exception(val msg: String,
                  val input: String,
                  val line: Int,
                  val char: Int)
    extends scala.Exception(s"JsonParse Error: $msg line $line [$char] in $input")
}

LandingPage.scala

import scalatags.JsDom.all._    
    
/**
 * Splash page for www.scala-js-fiddle.com. Uses Scalatags to render a HTML page
 * containing the text on the page, while using a HTML5 Canvas element to slowly
 * render a Sierpinski Triangle behind the text pixel by pixel.
 */
object ScalaJSExample extends js.JSApp{
 
  def main() = {
    Page.clear()
    
    println(
      div(
        padding:="10px",
        id:="page",
        h1(
          marginTop:="0px",
          img(src:="/Shield.svg", height:="40px", marginBottom:="-10px"),
          " Scala.jsFiddle"
        ),
        p(
          "Scala.jsFiddle is an online scratchpad to try out your ", 
          a(href:="http://www.scala-js.org/", "Scala.js "),
          "snippets. Enter Scala code on the left and see the results on the right, ",
          "after the Scala is compiled to Javascript using the Scala.js compiler."
        ),
        ul(
          li(yellow("Ctrl/Cmd-Enter"), ": compile and execute"),
          li(yellow("Ctrl/Cmd-Shift-Enter"), ": compile and execute optimized code"),
          li(yellow("Ctrl/Cmd-Space"), ": autocomplete at caret"),
          li(yellow("Ctrl/Cmd-J"), ": show the generated Javascript code"),
          li(yellow("Ctrl/Cmd-Shift-J"), ": show the generated code, optimized by Google Closure"),
          li(yellow("Ctrl/Cmd-S"), ": save the code to a public Gist"),
          li(yellow("Ctrl/Cmd-E"), ": export your code to a stand-alone web page")
        ),
        p(
          "To load the code from an existing gist, simply go to "
        ),
        ul(li(green(s"${Page.fiddleUrl}/gist/<gist-id>"))), 
        p(
          "Where ",green("<gist-id>"), " is the last section of the gist's URL.",
          "You can also go to:"
        ),
        ul(li(green(s"${Page.fiddleUrl}/gist/<gist-id>/<file-name>"))), 
        p(
          "If you want a particular file in a multi file gist."
        ),
        p(
          "If you need ideas of things you can make using Scala.jsFiddle, check ",
          "out some of our examples:"
        ),
        ul(
          for {
            (file, name) <- Seq(
              "BasicOperations.scala" -> "Basic Operations",
              "SierpinskiTriangle.scala" -> "Sierpinski Triangle",
              "Turmites.scala" -> "Turmites",
              "Oscilloscope.scala" -> "Oscilloscope",
              "FlappyLine.scala" -> "Flappy Line",
              "SquareRoot.scala" -> "Square Root solver",
              "DodgeTheDots.scala" -> "Dodge the Dots",
              "SpaceInvaders.scala" -> "Space Invaders",
              "SquareRootRx.scala" -> "Square Root solver with Scala.rx",
              "TodoMVC.scala" -> "TodoMVC",
              "JsonParser.scala" -> "JSON Parser",
            //   "ScalaAsyncPaintbrush.scala" -> "Scala Async Paintbrush",
              "RayTracer.scala" -> "RayTracer"
            )
          } yield li(
            a(href:=(dom.document.location.origin + s"/gist/${Page.fiddleGistId}/" + file), name)
          )
        ),
        p("Scala-Js-Fiddle comes with the following default imports at the top of every program:"),
        pre(Page.fiddlePrelude),
        p(
          "This imports the Scala.js ", blue("js"), " and ", blue("dom"), " namespaces ",
          "ready to use, imports the ", blue("Page"), " object and imports the ", 
          blue("scalatags.JsDom"), " namespace to support the helper functions in ", 
          blue("Page"), "."
        ),
        p(blue("Page"), " provides the following built-in variables to give you started quickly:"),
        ul(
          li(
            green("canvas"), ": a ", blue("dom.HTMLCanvasElement"), " that lets you draw ",
            "on the right pane"
          ),
          li(
            green("renderer"), ": a ", blue("dom.CanvasRenderingContext2D"), " that ",
            "lets you draw on the ", blue("canvas")
          ),
          li(
            green("print/println(s: Frag*)"), ": prints the given values to the right pane as ",
            "a scalatags ", blue("Frag"), "s. These could be ", blue("String"), "s, numbers, or ",
            "Scalatags ", blue("Tag"), "s. This behaves slightly differently from the built-in ",
            blue("println"), " which is available as ", blue("Predef.println"), " and prints to ",
            "the browser console"
          ),
          li(green("clear()"), ": Removes all printed output from the right pane"),
          li(
            green("scroll(px: Int)"), ": Scrolls the right pane up or down by ",
            "the given number of pixels"
          ),
          li(
            "The colors ", red("red"), ", ", green("green"), ", ", blue("blue"),
            ", ", yellow("yellow"), " and ", orange("orange"),
            " to help prettify your output"
          )
        ),
        p("Apart from these inbuilt helpers, available libraries include:"),
        ul(
          li(a(href:="https://github.com/lihaoyi/scalatags", "scalatags")),
          li(a(href:="https://github.com/lihaoyi/scala.rx", "scala.rx")),
          li(a(href:="https://github.com/scala-js/scala-js-dom", "scala-js-dom")),
          li(a(href:="https://github.com/scala/async", "scala-async"))
        ),
        p(
          "Scala.jsFiddle is made by ", a(href:="https://github.com/lihaoyi")("Li Haoyi"), 
          " and can be found on ", a(href:="https://github.com/lihaoyi/scala-js-fiddle")("Github")
        )
      )
    )
    // scroll to top so if the users screen is too short, he sees the top of the
    // rendered page rather than the bottom
    Page.scroll(-1000)
}
  }

Oscilloscope.scala

import Math._

object ScalaJSExample extends js.JSApp{
  def main(): Unit = {
    val (h, w) = (Page.canvas.height, Page.canvas.width)
    var x = 0.0
    val graphs = Seq[(String, Double => Double)](
      ("red", sin),
      ("green", x => 2 - abs(x % 8 - 4)),
      ("blue", x => 3 * pow(sin(x / 12), 2) * sin(x))
    ).zipWithIndex
    dom.setInterval(() => {
      x = (x + 1) % w
      if (x == 0) Page.renderer.clearRect(0, 0, w, h)
      else for (((color, func), i) <- graphs) {
        val y = func(x/w * 75) * h/40 + h/3 * (i+0.5)
        Page.renderer.fillStyle = color
        Page.renderer.fillRect(x, y, 3, 3)
      }
    }, 10)
  }
}

RayTracer.scala

import math._
import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
import ScalaJSExample.{Color, Epsilon}

import scala.language.postfixOps

/**
 * A simple ray tracer, taken from the PyPy benchmarks
 *
 * https://bitbucket.org/pypy/benchmarks/src/846fa56a282b/own/raytrace-simple.py?at=default
 *
 * Half the lines of code
 */
object ScalaJSExample extends js.JSApp{
  import Page._
  val Epsilon = 0.00001

  type Color = Vec
  val Color = Vec

  def main() = {
    val r = new util.Random(16314302)
    val spiral = for (i <- 0 until 11) yield {
      val theta = i * (i + 5) * Pi / 100 + 0.3
      val center = (0 - 4 * sin(theta), 1.5 - i / 2.0, 0 - 4 * cos(theta))
      val form = Sphere(center, 0.3 + i * 0.1)
      val surface = Flat((i / 6.0, 1 - i / 6.0, 0.5))
      (form, surface)
    }

    def rand(d: Double) = (r.nextDouble() - 0.5) * d * 2

    val drops = Array(
      Sphere((2.5, 2.5, -8), 0.3),
      Sphere((1.5, 2.2, -7), 0.25),
      Sphere((-1.3, 0.8, -8.5), 0.15),
      Sphere((0.5, -2.5, -7.5), 0.2),
      Sphere((-1.8, 2.3, -7.5), 0.3),
      Sphere((-1.8, -2.3, -7.5), 0.3),
      Sphere((1.3, 0.0, -8), 0.25)
    ).map(_ -> Refractor())

    val s = new Scene(
      objects = Array(
        Sphere((0, 0, 0), 2) -> Flat((1, 1, 1), specularC = 0.6, lambertC = 0.4),
        Plane((0, 4, 0), (0, 1, 0)) -> Checked(),
        Plane((0, -4, 0), (0, 1, 0)) -> Flat((0.9, 1, 1)),
        Plane((6, 0, 0), (1, 0, 0)) -> Flat((1, 0.9, 1)),
        Plane((-6, 0, 0), (1, 0, 0)) -> Flat((1, 1, 0.9)),
        Plane((0, 0, 6), (0, 0, 1)) -> Flat((0.9, 0.9, 1))
      ) ++ spiral ++ drops,
      lightPoints = Array(
        Light((0, -3, 0), (3, 3, 0)),
        Light((3, 3, 0), (0, 3, 3)),
        Light((-3, 3, 0), (3, 0, 3))
      ),
      position = (0, 0, -15),
      lookingAt = (0, 0, 0),
      fieldOfView = 45.0
    )


    val c = new Canvas{
      val width = math.min(canvas.width.toInt, canvas.height.toInt)
      val height = math.min(canvas.width.toInt, canvas.height.toInt)
      val data = renderer.getImageData(0, 0, canvas.width, canvas.height)
      def save(y: Int): Unit = {
        renderer.putImageData(data, 0, 0, 0, y-1, width, 1)
      }

      def plot(x: Int, y: Int, rgb: ScalaJSExample.Color): Unit = {
        val index = (y * data.width + x) * 4
        data.data(index+0) = (rgb.x * 255).toInt
        data.data(index+1) = (rgb.y * 255).toInt
        data.data(index+2) = (rgb.z * 255).toInt
        data.data(index+3) = 255
      }
    }
    s.render(c)
  }
}

final case class Vec(x: Double, y: Double, z: Double){
  def magnitude = sqrt(this dot this)
  def +(o: Vec) = Vec(x + o.x, y + o.y, z + o.z)
  def -(o: Vec) = Vec(x - o.x, y - o.y, z - o.z)
  def *(o: Vec) = Vec(x * o.x, y * o.y, z * o.z)
  def *(f: Double) = Vec(x * f, y * f, z * f)
  def /(f: Double) = Vec(x / f, y / f, z / f)
  def dot(o: Vec) = x * o.x + y * o.y + z * o.z
  def cross(o: Vec) = Vec(
    y * o.z - z * o.y,
    z * o.x - x * o.z,
    x * o.y - y * o.x
  )

  def normalized = this / magnitude
  def reflectThrough(normal: Vec) = this - normal * (this dot normal) * 2
}
object Vec{
  case class Unit(x: Double, y: Double, z: Double)
  implicit def normalizer(v: Vec) = {
    val l = v.magnitude
    new Unit(v.x / l, v.y / l, v.z / l)
  }
  implicit def denormalizer(v: Vec.Unit) = new Vec(v.x, v.y, v.z)
  implicit def pointify[X: Numeric, Y: Numeric, Z: Numeric](x: (X, Y, Z)): Vec = Vec(
    implicitly[Numeric[X]].toDouble(x._1),
    implicitly[Numeric[Y]].toDouble(x._2),
    implicitly[Numeric[Z]].toDouble(x._3)
  )
  implicit def pointify2[X: Numeric, Y: Numeric, Z: Numeric](x: (X, Y, Z)): Vec.Unit = Vec.normalizer(x)
}

abstract class Form{
  def intersectionTime(ray: Ray): Double
  def normalAt(p: Vec): Vec
}

case class Sphere(center: Vec, radius: Double) extends Form{
  def intersectionTime(ray: Ray) = {
    val cp = center - ray.point
    val v = cp dot ray.vector
    val d = radius * radius - ((cp dot cp) - v * v)
    if (d < 0) -1
    else v - sqrt(d)
  }
  def normalAt(p: Vec) = (p - center).normalized
}

case class Plane(point: Vec, normal: Vec.Unit) extends Form{
  def intersectionTime(ray: Ray) = {
    val v = ray.vector dot normal
    if (v != 0) ((point - ray.point) dot normal) / v
    else -1
  }
  def normalAt(p: Vec) = normal
}

case class Ray(point: Vec, vector: Vec.Unit){
  def pointAtTime(t: Double) = point + vector * t
}
case class Light(center: Vec, color: Color)
abstract class Surface{
  def colorAt(scene: Scene, ray: Ray, p: Vec, normal: Vec.Unit, depth: Int): Color
}
abstract class SolidSurface extends Surface{
  def baseColorAt(p: Vec): Color
  def specularC: Double
  def lambertC: Double
  val ambientC = 1.0 - specularC - lambertC
  def colorAt(scene: Scene, ray: Ray, p: Vec, normal: Vec.Unit, depth: Int): Color = {
    val b = baseColorAt(p)

    val specular = {
      val reflectedRay = Ray(p, ray.vector.reflectThrough(normal))
      val reflectedColor = scene.rayColor(reflectedRay, depth)
      reflectedColor * specularC
    }

    val lambert = {
      var lambertAmount = Vec(0, 0, 0)
      for (i <- 0 until scene.lightPoints.length) {
        val light = scene.lightPoints(i)
        if (scene.lightIsVisible(light.center, p)) {
          val d = p - light.center
          val dLength = d.magnitude
          val contribution = light.color * abs(d dot normal / (dLength * dLength))

          lambertAmount += contribution
        }
      }
      b * lambertAmount * lambertC
    }

    val ambient = b * ambientC

    specular + lambert + ambient
  }
}
case class Refractor(refractiveIndex: Double = 0.5) extends Surface{
  def colorAt(scene: Scene, ray: Ray, p: Vec, normal: Vec.Unit, depth: Int): Color = {
    val r = if ((normal dot ray.vector) < 0)
      refractiveIndex
    else
      1.0 / refractiveIndex

    val c = (normal * -1) dot ray.vector

    val sqrtValue = 1 - r * r * (1 - c * c)

    if (sqrtValue > 0){
      val refracted = ray.vector * r + normal * (r * c - sqrt(sqrtValue))
      scene.rayColor(Ray(p, refracted), depth)
    }else{
      val perp = ray.vector dot normal
      val reflected: Vec = Vec.denormalizer(ray.vector) + normal * 2 * perp
      scene.rayColor(Ray(p, reflected), depth)
    }
  }
}
case class Flat(baseColor: Color = Color(1, 1, 1),
                specularC: Double = 0.3,
                lambertC: Double = 0.6) extends SolidSurface{

  def baseColorAt(p: Vec) = baseColor

}
case class Checked(baseColor: Color = Color(1, 1, 1),
                   specularC: Double = 0.3,
                   lambertC: Double = 0.6,
                   otherColor: Color = (0, 0, 0),
                   checkSize: Double = 1) extends SolidSurface{
  override def baseColorAt(p: Vec) = {
    val v = p * (1.0 / checkSize)

    def f(x: Double) = (abs(x) + 0.5).toInt
    if ((f(v.x) + f(v.y) + f(v.z)) % 2 == 1) otherColor
    else baseColor
  }
}
abstract class Canvas{
  def width: Int
  def height: Int
  def save(y: Int): Unit
  def plot(x: Int, y: Int, rgb: Color)
}
class Scene(objects: Array[(Form, Surface)],
            val lightPoints: Array[Light],
            position: Vec,
            lookingAt: Vec,
            fieldOfView: Double){

  def lightIsVisible(l: Vec, p: Vec) = {
    val ray = Ray(p, l - p)
    val length = (l - p).magnitude
    var visible = true
    for (i <- 0 until objects.length){
      val (o, s) = objects(i)
      val t = o.intersectionTime(ray)
      if (t > Epsilon && t < length - Epsilon){
        visible = false
      }
    }
    visible
  }

  def rayColor(ray: Ray, depth: Int): Color = {
    if (depth > 3) (0, 0, 0)
    else{
      var (minT, minO, minS) = (-1.0, null: Form, null: Surface)
      for(i <- 0 until objects.length){
        val (o, s) = objects(i)
        val t = o.intersectionTime(ray)
        if (t > Epsilon && (t < minT || minT < 0)){
          minT = t
          minO = o
          minS = s
        }
      }
      minT match{
        case -1 => (0, 0, 0)
        case t =>
          val p = ray.pointAtTime(minT)
          minS.colorAt(this, ray, p, minO.normalAt(p), depth + 1)
      }
    }
  }

  def render(canvas: Canvas) = {
    val fovRadians = Pi * (fieldOfView / 2.0) / 180.0
    val halfWidth = tan(fovRadians)
    val halfHeight = halfWidth
    val width = halfWidth * 2
    val height=  halfHeight * 2
    val pixelWidth = width / (canvas.width - 1)
    val pixelHeight = height / (canvas.height - 1)
    val eye = Ray(position, lookingAt - position)
    val vpRight = eye.vector.cross((0, 1, 0)).normalized
    val vpUp = vpRight.cross(eye.vector).normalized

    var y = 0;
    lazy val interval: Int = dom.setInterval({ () => 
      for (x <- 0 until canvas.width){
        val xcomp = vpRight * (x * pixelWidth - halfWidth)
        val ycomp = vpUp * (y * pixelHeight - halfHeight)
        val ray = Ray(eye.point, xcomp + ycomp + eye.vector)
        val color = rayColor(ray, 0)
        canvas.plot(x, y, color)
      }
      canvas.save(y)
      if (y > canvas.height) dom.clearInterval(interval)
      y+= 1
      
    }, 0)
    interval
  }
}

ScalaAsyncPaintbrush.scala

import org.scalajs.dom
import concurrent._
import async.Async._
import scalajs.concurrent.JSExecutionContext.Implicits.queue
/**
 * Re-implementation of the mouse-drag example from Deprecating the Observer 
 * Pattern 
 * 
 * http://lampwww.epfl.ch/~imaier/pub/DeprecatingObserversTR2010.pdf
 * 
 * Using Scala.Async instead of Scala.React and continuations. Click and drag
 * around the canvas on the right to see pretty shapes appear.
 */

object ScalaJSExample extends js.JSApp{
  import Page._
  def main() = {
    val command = Channel[dom.MouseEvent]()  
    
    canvas.onmousemove = command.update _
    canvas.onmouseup = command.update _
    canvas.onmousedown = command.update _
    
    renderer.lineWidth = 5
    renderer.strokeStyle = "red"
    renderer.fillStyle = "cyan"
    
    val flow = async{
      while(true){
        renderer.beginPath()
        val start = await(command.filter(_.`type` == "mousedown")())
        renderer.moveTo(start.clientX - canvas.width, start.clientY)
        var m = await(command())
        while(m.`type` == "mousemove"){
          renderer.lineTo(m.clientX - canvas.width, m.clientY)
          renderer.stroke()
          m = await(command())
        } 
        renderer.fill()
      }
    }
  }
}

case class Channel[T](){
  private[this] var value: Promise[T] = null
  def apply(): Future[T] = {
    value = Promise[T]()
    value.future
  }
  def update(t: T) = {
    if (value != null && !value.isCompleted) value.success(t)
  }
  def filter(p: T => Boolean) = {
    val filtered = Channel[T]()
    async{
      while(true){
        val t = await(this())
        if (p(t)) filtered() = t
      }
    }
    filtered
  }
}

SierpinskiTriangle.scala

case class Pt(x: Double, y: Double)

object ScalaJSExample extends js.JSApp{
  println("Hello!!")
  
  val corners = Seq(
    Pt(Page.canvas.width/2, 0),
    Pt(0, Page.canvas.height),
    Pt(Page.canvas.width, Page.canvas.height)
  )
  var p = corners(0)
  val (w, h) = (Page.canvas.height.toDouble, Page.canvas.height.toDouble)
  
  def main() = {
    dom.setInterval(() => for(_ <- 0 until 10){
      val c = corners(util.Random.nextInt(3))
      p = Pt((p.x + c.x) / 2, (p.y + c.y) / 2)
      val m = (p.y / h)
      val r = 255 - (p.x / w * m * 255).toInt
      val g = 255 - ((w-p.x) / w * m * 255).toInt
      val b = 255 - ((h - p.y) / h * 255).toInt
      Page.renderer.fillStyle = s"rgb($r, $g, $b)"
      Page.renderer.fillRect(p.x, p.y, 1, 1)
    }, 10)
  }
}

SineWave.scala

object ScalaJSExample extends js.JSApp{

  def main(): Unit = {
    var i = 0
    
    dom.setInterval(() => for(_ <- 0 until 5){
      i += 1
      val x = i % canvas.width
      
      val y = Math.sin(i / canvas.width * 10) * canvas.height / 4 + canvas.height / 2
      output.clear()
      
      val r = math.abs(((y / canvas.height - 0.5) * 255 * 4).toInt)
      println(x)
      println(y)
      renderer.fillStyle = s"rgb($r, 255, 255)"
      renderer.fillRect(x, y, 2, 2)
    }, 10)
  }
}

SpaceInvaders.scala

case class Point(x: Double, y: Double){
  def +(p: Point) = Point(x + p.x, y + p.y)
  def -(p: Point) = Point(x - p.x, y - p.y)
  def /(d: Double) = Point(x / d, y / d)
  def *(d: Double) = Point(x * d, y * d)
  def length = Math.sqrt(x * x + y * y)
}

object ScalaJSExample extends js.JSApp{
  import Page._
  var count = 0
  var player = Point(dom.innerWidth / 2, dom.innerHeight / 2)
  val corners = Seq(Point(255, 255), Point(0, 255), Point(128, 0))
 
  var bullets = Seq.empty[Point]
  var enemies = Seq.empty[Point]
 
  var wave = 1
 
  def run = {
    count += 1
    bullets = bullets.map(
      p => Point(p.x, p.y - 5)
    )
 
    if (enemies.isEmpty){
      enemies = for{
        x <- (0 until canvas.width.toInt by 50)
        y <- 0 until wave
      } yield {
        Point(x, 50 + y * 50)
      }
      wave += 1
    }
 
    enemies = enemies.filter( e =>
      !bullets.exists(b =>
        (e - b).length < 5
      )
    )
    enemies = enemies.map{ e =>
      val i = count % 200
      if (i < 50) e.copy(x = e.x - 0.2)
      else if (i < 100) e.copy(y = e.y + 0.2)
      else if (i < 150) e.copy(x = e.x + 0.2)
      else e.copy(y = e.y + 0.2)
    }
 
 
    if (keysDown(38)) player += Point(0, -2)
    if (keysDown(37)) player += Point(-2, 0)
    if (keysDown(39)) player += Point(2, 0)
    if (keysDown(40)) player += Point(0, 2)
  }
 
  def draw = {
    renderer.clearRect(0, 0, canvas.width, canvas.height)
 
    renderer.fillStyle = "white"
    renderer.fillRect(player.x - 5, player.y - 5, 10, 10)
 
    renderer.fillStyle = "yellow"
    for (enemy <- enemies){
      renderer.fillRect(enemy.x - 5, enemy.y - 5, 10, 10)
    }
    renderer.fillStyle = "red"
    for (bullet <- bullets){
      renderer.fillRect(bullet.x - 2, bullet.y - 2, 4, 4)
    }
  }
 
  val keysDown = collection.mutable.Set.empty[Int]
  
  def main() = {
 
    dom.onkeypress = {(e: dom.KeyboardEvent) =>
      if (e.keyCode.toInt == 32) bullets = player +: bullets
    }
    dom.onkeydown = {(e: dom.KeyboardEvent) =>
      keysDown.add(e.keyCode.toInt)
    }
    dom.onkeyup = {(e: dom.KeyboardEvent) =>
      keysDown.remove(e.keyCode.toInt)
    }
    dom.setInterval(() => {run; draw}, 20)
  }
}

SquareRoot.scala

/**
 * A simple square root solver, one step at a time
 */ 
object ScalaJSExample extends js.JSApp{
  def main() = {
    val n = 1000.0
    var guess = 1.0
    
    lazy val id: Int = dom.setInterval(() => {
      val newGuess = guess - (guess * guess - n) / (2 * guess)
      if (newGuess == guess) dom.clearInterval(id)
      else guess = newGuess
      println(guess)
    }, 1000)
    id
  }
}

SquareRootRx.scala

/**
 * A simple Scala.Rx dataflow graph which looks like:
 * 
 *      guess -> error 
 *        ^        |
 *        |        v
 *        --------o
 * 
 * Where the changes propagate around and around until
 * the magnitude of `error` drops below `epsilon`
 * 
 */ 

object ScalaJSExample extends js.JSApp{
  def main() = {
    import rx._
    
    val n = 10.0
    val guess = Var(1.0)
    val epsilon = 0.0000000001
    val error = Rx{ guess() * guess() - n }
    val o = Obs(error){
      println("Guess: " + guess())
      if (math.abs(error()) > epsilon) {
        guess() = guess() - error() / (2 * guess())
      }
    }
  }
}

TodoMVC.scala

/**
 * Port of the Scala.js TodoMVC example application 
 * 
 * http://lihaoyi.github.io/workbench-example-app/todo.html
 * 
 * To Scala.jsFiddle. Mostly involved sticking the two source files into one 
 * (since Scala.jsFiddle doesn't support multiple files) and inlining/tweaking 
 * the CSS so it looks right
 */
 
 import org.scalajs.dom

import rx._

import scala.collection.{SortedMap, mutable}
import scalatags.JsDom.tags2
import scalatags.JsDom.tags2.section

import scala.util.{Failure, Success, Random}

import rx.core.{Propagator, Obs}

import org.scalajs.dom.{Element, DOMParser}

/**
 * A minimal binding between Scala.Rx and Scalatags and Scala-Js-Dom
 */
object Framework {

  /**
   * Wraps reactive strings in spans, so they can be referenced/replaced
   * when the Rx changes.
   */
  implicit def RxStr[T](r: Rx[T])(implicit f: T => Frag): Modifier = {
    rxMod(Rx(span(r())))
  }

  /**
   * Sticks some Rx into a Scalatags fragment, which means hooking up an Obs
   * to propagate changes into the DOM via the element's ID. Monkey-patches
   * the Obs onto the element itself so we have a reference to kill it when
   * the element leaves the DOM (e.g. it gets deleted).
   */
  implicit def rxMod(r: Rx[HtmlTag]): Modifier = {
    def rSafe = r.toTry match {
      case Success(v) => v.render
      case Failure(e) => span(e.toString, backgroundColor := "red").render
    }
    var last = rSafe
    Obs(r, skipInitial = true){
      val newLast = rSafe
      last.parentElement.replaceChild(newLast, last)
      last = newLast
    }
    last
  }
  implicit def RxAttrValue[T: AttrValue] = new AttrValue[Rx[T]]{
    def apply(t: Element, a: Attr, r: Rx[T]): Unit = {
      Obs(r){ implicitly[AttrValue[T]].apply(t, a, r())}
    }
  }
  implicit def RxStyleValue[T: StyleValue] = new StyleValue[Rx[T]]{
    def apply(t: Element, s: Style, r: Rx[T]): Unit = {
      Obs(r){ implicitly[StyleValue[T]].apply(t, s, r())}
    }
  }

}

case class Task(txt: Var[String], done: Var[Boolean])

object ScalaJSExample extends js.JSApp{
  import Framework._

  val editing = Var[Option[Task]](None)

  val tasks = Var(
    Seq(
      Task(Var("TodoMVC Task A"), Var(true)),
      Task(Var("TodoMVC Task B"), Var(false)),
      Task(Var("TodoMVC Task C"), Var(false))
    )
  )

  val filter = Var("All")

  val filters = Map[String, Task => Boolean](
    ("All", t => true),
    ("Active", !_.done()),
    ("Completed", _.done())
  )

  val done = Rx{tasks().count(_.done())}

  val notDone = Rx{tasks().length - done()}

  val inputBox = input(
    id:="new-todo",
    placeholder:="What needs to be done?",
    autofocus:=true
  ).render

  def main() = {
    println(
      div(
        tags2.style(inlineCss),
        section(id:="todoapp", color:="black")(
          
          header(id:="header")(
            h1("todos"),
            form(
              inputBox,
              onsubmit := { () =>
                tasks() = Task(Var(inputBox.value), Var(false)) +: tasks()
                inputBox.value = ""
                false
              }
            )
          ),
          section(id:="main")(
            input(
              id:="toggle-all",
              `type`:="checkbox",
              cursor:="pointer",
              onclick := { () =>
                val target = tasks().exists(_.done() == false)
                Var.set(tasks().map(_.done -> target): _*)
              }
            ),
            label(`for`:="toggle-all", "Mark all as complete"),
            Rx {
              ul(id := "todo-list")(
                for (task <- tasks() if filters(filter())(task)) yield {
                  val inputRef = input(`class` := "edit", value := task.txt()).render
  
                  li(
                    `class` := Rx{
                      if (task.done()) "completed"
                      else if (editing() == Some(task)) "editing"
                      else ""
                    },
                    div(`class` := "view")(
                      "ondblclick".attr := { () =>
                        editing() = Some(task)
                      },
                      input(
                        `class` := "toggle",
                        `type` := "checkbox",
                        cursor := "pointer",
                        onchange := { () =>
                          task.done() = !task.done()
                        },
                        if (task.done()) checked := true
                      ),
                      label(task.txt()),
                      button(
                        `class` := "destroy",
                        cursor := "pointer",
                        onclick := { () =>tasks() = tasks().filter(_ != task) }
                      )
                    ),
                    form(
                      onsubmit := { () =>
                        task.txt() = inputRef.value
                        editing() = None
                        false
                      },
                      inputRef
                    )
                  )
                }
              )
            },
            footer(id:="footer")(
              span(id:="todo-count")(strong(RxStr(notDone)(intFrag)), " item left"),
  
              ul(id:="filters")(
                for ((name, pred) <- filters.toSeq) yield {
                  li(a(
                    `class`:=Rx{
                      if(name == filter()) "selected"
                      else ""
                    },
                    name,
                    href:="#",
                    onclick := {() => filter() = name}
                  ))
                }
              ),
              button(
                id:="clear-completed",
                onclick := { () => tasks() = tasks().filter(!_.done()) },
                "Clear completed (", done, ")"
              )
            )
          ),
          footer(id:="info")(
            p("Double-click to edit a todo"),
            p(a(href:="https://github.com/lihaoyi/workbench-example-app/blob/todomvc/src/main/scala/example/ScalaJSExample.scala")("Source Code")),
            p("Created by ", a(href:="http://github.com/lihaoyi")("Li Haoyi"))
          )
        )
      ).render
    )
  }

  def inlineCss = """
      html,
body {
	margin: 0;
	padding: 0;
}
 
button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 100%;
	vertical-align: baseline;
	font-family: inherit;
	color: inherit;
	-webkit-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}
 
body{
  background: url('https://raw.github.com/lihaoyi/workbench-example-app/todomvc/src/main/resources/css/bg.png');
}
#sandbox {
	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 1.4em;
	background: url('https://raw.github.com/lihaoyi/workbench-example-app/todomvc/src/main/resources/css/bg.png');
	color: #4d4d4d;
	width: 550px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
 
button,
input[type="checkbox"] {
  outline: none;
}
 
#todoapp {
	background: #fff;
	background: rgba(255, 255, 255, 0.9);
	margin: 130px 0 40px 0;
	border: 1px solid #ccc;
	position: relative;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
				0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
 
#todoapp:before {
	content: '';
	border-left: 1px solid #f5d6d6;
	border-right: 1px solid #f5d6d6;
	width: 2px;
	position: absolute;
	top: 0;
	left: 40px;
	height: 100%;
}
 
#todoapp input::-webkit-input-placeholder {
	font-style: italic;
}
 
#todoapp input::-moz-placeholder {
	font-style: italic;
	color: #a9a9a9;
}
 
#todoapp h1 {
	position: absolute;
	top: -120px;
	width: 100%;
	font-size: 70px;
	font-weight: bold;
	text-align: center;
	color: #b3b3b3;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
}
 
#header {
	padding-top: 15px;
	border-radius: inherit;
}
 
#header:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 15px;
	z-index: 2;
	border-bottom: 1px solid #6c615c;
	background: #8d7d77;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
	border-top-left-radius: 1px;
	border-top-right-radius: 1px;
}
 
#new-todo,
.edit {
	position: relative;
	margin: 0;
	width: 100%;
	font-size: 24px;
	font-family: inherit;
	line-height: 1.4em;
	border: 0;
	outline: none;
	color: inherit;
	padding: 6px;
	border: 1px solid #999;
	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
 
#new-todo {
	padding: 16px 16px 16px 60px;
	border: none;
	background: rgba(0, 0, 0, 0.02);
	z-index: 100;
	box-shadow: none;
}
 
#main {
	position: relative;
	z-index: 2;
	border-top: 1px dotted #adadad;
}
 
label[for='toggle-all'] {
	display: none;
}
 
#toggle-all {
	position: absolute;
	top: -42px;
	left: -4px;
	width: 40px;
	text-align: center;
	/* Mobile Safari */
	border: none;
}
 
#toggle-all:before {
	content: '»';
	font-size: 28px;
	color: #d9d9d9;
	padding: 0 25px 7px;
}
 
#toggle-all:checked:before {
	color: #737373;
}
 
#todo-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
#todo-list li {
	position: relative;
	font-size: 24px;
	border-bottom: 1px dotted #ccc;
}
 
#todo-list li:last-child {
	border-bottom: none;
}
 
#todo-list li.editing {
	border-bottom: none;
	padding: 0;
}
 
#todo-list li.editing .edit {
	display: block;
	width: 506px;
	padding: 13px 17px 12px 17px;
	margin: 0 0 0 43px;
}
 
#todo-list li.editing .view {
	display: none;
}
 
#todo-list li .toggle {
	text-align: center;
	width: 40px;
	/* auto, since non-WebKit browsers doesn't support input styling */
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	/* Mobile Safari */
	border: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}
 
#todo-list li .toggle:after {
	content: '✔';
	/* 40 + a couple of pixels visual adjustment */
	line-height: 43px;
	font-size: 20px;
	color: #d9d9d9;
	text-shadow: 0 -1px 0 #bfbfbf;
}
 
#todo-list li .toggle:checked:after {
	color: #85ada7;
	text-shadow: 0 1px 0 #669991;
	bottom: 1px;
	position: relative;
}
 
#todo-list li label {
	white-space: pre;
	word-break: break-word;
	padding: 15px 60px 15px 15px;
	margin-left: 45px;
	display: block;
	line-height: 1.2;
	-webkit-transition: color 0.4s;
	transition: color 0.4s;
}
 
#todo-list li.completed label {
	color: #a9a9a9;
	text-decoration: line-through;
}
 
#todo-list li .destroy {
	display: none;
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	width: 40px;
	height: 40px;
	margin: auto 0;
	font-size: 22px;
	color: #a88a8a;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}
 
#todo-list li .destroy:hover {
	text-shadow: 0 0 1px #000,
				 0 0 10px rgba(199, 107, 107, 0.8);
	-webkit-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
}
 
#todo-list li .destroy:after {
	content: '✖';
}
 
#todo-list li:hover .destroy {
	display: block;
}
 
#todo-list li .edit {
	display: none;
}
 
#todo-list li.editing:last-child {
	margin-bottom: -1px;
}
 
#footer {
	color: #777;
	padding: 0 15px;
	position: absolute;
	right: 0;
	bottom: -31px;
	left: 0;
	height: 20px;
	text-align: center;
}
 
#footer:before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 31px;
	left: 0;
	height: 50px;
	z-index: -1;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
				0 6px 0 -3px rgba(255, 255, 255, 0.8),
				0 7px 1px -3px rgba(0, 0, 0, 0.3),
				0 43px 0 -6px rgba(255, 255, 255, 0.8),
				0 44px 2px -6px rgba(0, 0, 0, 0.2);
}
 
#todo-count {
	float: left;
	text-align: left;
}
 
#filters {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	right: 0;
	left: 0;
}
 
#filters li {
	display: inline;
}
 
#filters li a {
	color: #83756f;
	margin: 2px;
	text-decoration: none;
}
 
#filters li a.selected {
	font-weight: bold;
}
 
#clear-completed {
	float: right;
	position: relative;
	line-height: 20px;
	text-decoration: none;
	background: rgba(0, 0, 0, 0.1);
	font-size: 11px;
	padding: 0 10px;
	border-radius: 3px;
	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
}
 
#clear-completed:hover {
	background: rgba(0, 0, 0, 0.15);
	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}
 
#info {
	margin: 65px auto 0;
	color: #a6a6a6;
	font-size: 12px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	text-align: center;
}
 
#info a {
	color: inherit;
}
 
/*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox and Opera
*/
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#toggle-all,
	#todo-list li .toggle {
		background: none;
	}
 
	#todo-list li .toggle {
		height: 40px;
	}
 
	#toggle-all {
		top: -56px;
		left: -15px;
		width: 65px;
		height: 41px;
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
		-webkit-appearance: none;
		appearance: none;
	}
}
 
.hidden {
	display: none;
}
 
hr {
	margin: 20px 0;
	border: 0;
	border-top: 1px dashed #C5C5C5;
	border-bottom: 1px dashed #F7F7F7;
}
 
.learn a {
	font-weight: normal;
	text-decoration: none;
	color: #b83f45;
}
 
.learn a:hover {
	text-decoration: underline;
	color: #787e7e;
}
 
.learn h3,
.learn h4,
.learn h5 {
	margin: 10px 0;
	font-weight: 500;
	line-height: 1.2;
	color: #000;
}
 
.learn h3 {
	font-size: 24px;
}
 
.learn h4 {
	font-size: 18px;
}
 
.learn h5 {
	margin-bottom: 0;
	font-size: 14px;
}
 
.learn ul {
	padding: 0;
	margin: 0 0 30px 25px;
}
 
.learn li {
	line-height: 20px;
}
 
.learn p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 0;
}
 
.quote {
	border: none;
	margin: 20px 0 60px 0;
}
 
.quote p {
	font-style: italic;
}
 
.quote p:before {
	content: '“';
	font-size: 50px;
	opacity: .15;
	position: absolute;
	top: -20px;
	left: 3px;
}
 
.quote p:after {
	content: '”';
	font-size: 50px;
	opacity: .15;
	position: absolute;
	bottom: -42px;
	right: 3px;
}
 
.quote footer {
	position: absolute;
	bottom: -40px;
	right: 0;
}
 
.quote footer img {
	border-radius: 3px;
}
 
.quote footer a {
	margin-left: 5px;
	vertical-align: middle;
}
 
.speech-bubble {
	position: relative;
	padding: 10px;
	background: rgba(0, 0, 0, .04);
	border-radius: 5px;
}
 
.speech-bubble:after {
	content: '';
	position: absolute;
	top: 100%;
	right: 30px;
	border: 13px solid transparent;
	border-top-color: rgba(0, 0, 0, .04);
}
 
.learn-bar > .learn {
	position: absolute;
	width: 272px;
	top: 8px;
	left: -300px;
	padding: 10px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, .6);
	-webkit-transition-property: left;
	transition-property: left;
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}
 
@media (min-width: 899px) {
	.learn-bar {
		width: auto;
		margin: 0 0 0 300px;
	}
 
	.learn-bar > .learn {
		left: 8px;
	}
 
	.learn-bar #todoapp {
		width: 550px;
		margin: 130px auto 40px auto;
	}
}
      """
}

Turmites.scala

import scalatags.JsDom.all._

case class Pt(x: Double, y: Double)

object ScalaJSExample extends js.JSApp{
  
  val directions = Seq(
    Pt(0, 1),
    Pt(1, 0),
    Pt(0, -1),
    Pt(-1, 0)
  )
  
  val (w, h) = (Page.canvas.width, Page.canvas.height)
  
  var turmites = Seq(
    Pt(w / 2, h / 2) -> 0
  )
  def main() = {
    dom.setInterval(() => for(_ <- 0 until 10){
      turmites = for((oldP, facing) <- turmites) yield {

        val d = directions(facing)
        
        val p = Pt((oldP.x + d.x + w) % w, (oldP.y + d.y + h) % h)
        
        val data = Page.renderer.getImageData(p.x, p.y, 1, 1).data
        val newFacing = if (data(0).toInt == 0){
          
          val m = (p.y / h)
          val r = 255 - (p.x / w * m * 255).toInt
          val g = 255 - ((w - p.x) / w * m * 255).toInt
          val b = 255 - ((h - p.y) / h * 255).toInt
          Page.renderer.fillStyle = s"rgb($r, $g, $b)"
          (facing + 3) % 4
        }else{
          Page.renderer.fillStyle = "black"
          (facing + 1) % 4
        }
        
        Page.renderer.fillRect(p.x, p.y, 1, 1)
        p -> newFacing
      }
    }, 20)
    Page.canvas.onclick = { (e: dom.MouseEvent) => 
      val rect = Page.canvas.getBoundingClientRect()
      val newP = Pt(e.clientX.toInt - rect.left, e.clientY.toInt - rect.top)
      turmites = turmites :+ (newP -> util.Random.nextInt(4))
    }
  }

  println(
    "An implementation of ", a(href:="http://en.wikipedia.org/wiki/Turmites")("Turmites"), 
    ", in particular ", a(href:="http://en.wikipedia.org/wiki/Langton's_ant")("Langton's Ant"),
    ", on the HTML canvas. Click anywhere to create more turmites."
  )   
}

Dear @lihaoyi, I found this gist via scala-js-fiddle.com. I was wondering which gist to use. This one or the one it was forked from?