diff options
Diffstat (limited to 'examples/demos/src/main/scala')
14 files changed, 662 insertions, 0 deletions
diff --git a/examples/demos/src/main/scala/Splash.scala b/examples/demos/src/main/scala/Splash.scala new file mode 100644 index 0000000..c68bdca --- /dev/null +++ b/examples/demos/src/main/scala/Splash.scala @@ -0,0 +1,43 @@ +import java.lang.Math._ + +import org.scalajs.dom + +import scala.scalajs.js.annotation.JSExport + +@JSExport +object Splash extends{ + @JSExport + def main(canvas: dom.HTMLCanvasElement) = { + + def clear() = { + canvas.width = canvas.parentElement.clientWidth + canvas.height = canvas.parentElement.clientHeight + } + clear() + + val renderer = + canvas.getContext("2d") + .asInstanceOf[dom.CanvasRenderingContext2D] + + def h = canvas.height + def w = canvas.width + + var x = 0.0 + type Graph = (String, Double => Double) + val graphs = Seq[Graph]( + ("red", sin), + ("green", x => 1 - abs(x % 4 - 2)), + ("blue", x => pow(sin(x/12), 2) * sin(x)) + ).zipWithIndex + dom.setInterval(() => { + x = (x + 1) % w; if (x == 0) clear() + for (((color, f), i) <- graphs) { + val offset = h / 3 * (i + 0.5) + val y = f(x / w * 75) * h / 30 + renderer.fillStyle = color + renderer.fillRect(x, y + offset, 3, 3) + } + }, 20) + + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/canvasapp/Clock.scala b/examples/demos/src/main/scala/canvasapp/Clock.scala new file mode 100644 index 0000000..af9d8aa --- /dev/null +++ b/examples/demos/src/main/scala/canvasapp/Clock.scala @@ -0,0 +1,51 @@ +package canvasapp + + +import org.scalajs.dom + +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +@JSExport +object Clock extends{ + @JSExport + def main(canvas: dom.HTMLCanvasElement) = { + /*setup*/ + val renderer = canvas.getContext("2d") + .asInstanceOf[dom.CanvasRenderingContext2D] + + canvas.width = canvas.parentElement.clientWidth + canvas.height = canvas.parentElement.clientHeight + + val gradient = renderer.createLinearGradient( + canvas.width / 2 - 100, 0, canvas.width/ 2 + 100, 0 + ) + gradient.addColorStop(0,"red") + gradient.addColorStop(0.5,"green") + gradient.addColorStop(1,"blue") + renderer.fillStyle = gradient + //renderer.fillStyle = "black" + + renderer.textAlign = "center" + renderer.textBaseline = "middle" + + /*code*/ + def render() = { + val date = new js.Date() + renderer.clearRect( + 0, 0, canvas.width, canvas.height + ) + + renderer.font = "75px sans-serif" + renderer.fillText( + Seq( + date.getHours(), + date.getMinutes(), + date.getSeconds() + ).mkString(":"), + canvas.width / 2, + canvas.height / 2 + ) + } + dom.setInterval(render _, 1000) + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/canvasapp/FlappyLine.scala b/examples/demos/src/main/scala/canvasapp/FlappyLine.scala new file mode 100644 index 0000000..50c9906 --- /dev/null +++ b/examples/demos/src/main/scala/canvasapp/FlappyLine.scala @@ -0,0 +1,107 @@ +package canvasapp + + +import org.scalajs.dom + +import scala.scalajs.js.annotation.JSExport +import scala.util.Random + +@JSExport +object FlappyLine extends{ + @JSExport + def main(canvas: dom.HTMLCanvasElement) = { + /*setup*/ + + val renderer = canvas.getContext("2d") + .asInstanceOf[dom.CanvasRenderingContext2D] + + canvas.width = canvas.parentElement.clientWidth + canvas.height = 400 + + renderer.font = "50px sans-serif" + renderer.textAlign = "center" + renderer.textBaseline = "middle" + + /*variables*/ + val obstacleGap = 200 // Gap between the approaching obstacles + val holeSize = 50 // Size of the hole in each obstacle you must go through + val gravity = 0.1 // Y acceleration of the player + + var playerY = canvas.height / 2.0 // Y position of the player; X is fixed + var playerV = 0.0 // Y velocity of the player + // Whether the player is dead or not; + // 0 means alive, >0 is number of frames before respawning + var dead = 0 + // What frame this is; used to keep track + // of where the obstacles should be positioned + var frame = -50 + // List of each obstacle, storing only the Y position of the hole. + // The X position of the obstacle is calculated by its position in the + // queue and in the current frame. + val obstacles = collection.mutable.Queue.empty[Int] + + + def runLive() = { + frame += 2 + + // Create new obstacles, or kill old ones as necessary + if (frame >= 0 && frame % obstacleGap == 0) + obstacles.enqueue(Random.nextInt(canvas.height - 2 * holeSize) + holeSize) + if (obstacles.length > 7){ + obstacles.dequeue() + frame -= obstacleGap + } + + // Apply physics + playerY = playerY + playerV + playerV = playerV + gravity + + + // Render obstacles, and check for collision + renderer.fillStyle = "darkblue" + for((holeY, i) <- obstacles.zipWithIndex){ + val holeX = i * obstacleGap - frame + canvas.width + renderer.fillRect(holeX, 0, 5, holeY - holeSize) + renderer.fillRect( + holeX, holeY + holeSize, 5, canvas.height - holeY - holeSize + ) + if (math.abs(holeX - canvas.width/2) < 5 && + math.abs(holeY - playerY) > holeSize){ + dead = 50 + } + } + + // Render player + renderer.fillStyle = "darkgreen" + renderer.fillRect(canvas.width / 2 - 5, playerY - 5, 10, 10) + + // Check for out-of-bounds player + if (playerY < 0 || playerY > canvas.height){ + dead = 50 + } + } + + + def runDead() = { + playerY = canvas.height / 2 + playerV = 0 + frame = -50 + obstacles.clear() + dead -= 1 + renderer.fillStyle = "darkred" + renderer.fillText("You Died", canvas.width / 2, canvas.height / 2) + } + + def run() = { + renderer.clearRect(0, 0, canvas.width, canvas.height) + if (dead > 0) runDead() + else runLive() + } + + dom.setInterval(run _, 20) + + canvas.onclick = (e: dom.MouseEvent) => { + playerV -= 5 + } + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/canvasapp/ScratchPad.scala b/examples/demos/src/main/scala/canvasapp/ScratchPad.scala new file mode 100644 index 0000000..cc3d7e0 --- /dev/null +++ b/examples/demos/src/main/scala/canvasapp/ScratchPad.scala @@ -0,0 +1,40 @@ +package canvasapp + + +import org.scalajs.dom + +import scala.scalajs.js.annotation.JSExport + +@JSExport +object ScratchPad extends{ + @JSExport + def main(canvas: dom.HTMLCanvasElement) = { + /*setup*/ + val renderer = canvas.getContext("2d") + .asInstanceOf[dom.CanvasRenderingContext2D] + + canvas.width = canvas.parentElement.clientWidth + canvas.height = canvas.parentElement.clientHeight + + renderer.fillStyle = "#f8f8f8" + renderer.fillRect(0, 0, canvas.width, canvas.height) + + /*code*/ + renderer.fillStyle = "black" + var down = false + canvas.onmousedown = (e: dom.MouseEvent)=>{ + down = true + } + canvas.onmouseup = (e: dom.MouseEvent)=>{ + down = false + } + canvas.onmousemove = (e: dom.MouseEvent)=>{ + val rect = canvas.getBoundingClientRect() + if (down) renderer.fillRect( + e.clientX - rect.left, + e.clientY - rect.top, + 10, 10 + ) + } + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/HelloWorld0.scala b/examples/demos/src/main/scala/webpage/HelloWorld0.scala new file mode 100644 index 0000000..df458ac --- /dev/null +++ b/examples/demos/src/main/scala/webpage/HelloWorld0.scala @@ -0,0 +1,19 @@ +package webpage +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +@JSExport +object HelloWorld0 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val (animalA, animalB) = ("fox", "dog") + target.innerHTML = s""" + <div> + <h1>Hello World!</h1> + <p> + The quick brown <b>$animalA</b> + jumped over the lazy <i>$animalB</b> + </p> + </div> + """ + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/HelloWorld1.scala b/examples/demos/src/main/scala/webpage/HelloWorld1.scala new file mode 100644 index 0000000..1dc77b3 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/HelloWorld1.scala @@ -0,0 +1,18 @@ +package webpage +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ +@JSExport +object HelloWorld1 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val (animalA, animalB) = ("fox", "dog") + target.appendChild( + div( + h1("Hello World!"), + p("The quick brown ", b(animalA), + " jumped over the lazy ", i(animalB), ".") + ).render + ) + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Inputs.scala b/examples/demos/src/main/scala/webpage/Inputs.scala new file mode 100644 index 0000000..9339e84 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Inputs.scala @@ -0,0 +1,35 @@ +package webpage + +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Inputs extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val box = input( + `type`:="text", + placeholder:="Type here!" + ).render + + val output = span.render + + box.onkeyup = (e: dom.Event) => { + output.textContent = + box.value.toUpperCase + } + + target.appendChild( + div( + h1("Capital Box!"), + p( + "Type here and " + + "have it capitalized!" + ), + div(box), + div(output) + ).render + ) + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Search0.scala b/examples/demos/src/main/scala/webpage/Search0.scala new file mode 100644 index 0000000..300b506 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Search0.scala @@ -0,0 +1,50 @@ +package webpage + +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Search0 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val listings = Seq( + "Apple", "Apricot", "Banana", "Cherry", + "Mango", "Mangosteen", "Mandarin", + "Grape", "Grapefruit", "Guava" + ) + + def renderListings = ul( + for { + fruit <- listings + if fruit.toLowerCase.startsWith( + box.value.toLowerCase + ) + } yield li(fruit) + ).render + + lazy val box = input( + `type`:="text", + placeholder:="Type here!" + ).render + + val output = div(renderListings).render + + box.onkeyup = (e: dom.Event) => { + output.innerHTML = "" + output.appendChild(renderListings) + } + + target.appendChild( + div( + h1("Search Box!"), + p( + "Type here to filter " + + "the list of things below!" + ), + div(box), + output + ).render + ) + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Search1.scala b/examples/demos/src/main/scala/webpage/Search1.scala new file mode 100644 index 0000000..1936898 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Search1.scala @@ -0,0 +1,62 @@ +package webpage + +import org.scalajs.dom +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Search1 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val listings = Seq( + "Apple", "Apricot", "Banana", "Cherry", + "Mango", "Mangosteen", "Mandarin", + "Grape", "Grapefruit", "Guava" + ) + + def renderListings = ul( + for { + fruit <- listings + if fruit.toLowerCase.startsWith( + box.value.toLowerCase + ) + } yield { + val (first, last) = fruit.splitAt( + box.value.length + ) + li( + span( + backgroundColor:="yellow", + first + ), + last + ) + } + ).render + + + lazy val box = input( + `type`:="text", + placeholder:="Type here!" + ).render + + val output = div(renderListings).render + + box.onkeyup = (e: dom.Event) => { + output.innerHTML = "" + output.appendChild(renderListings) + } + + target.appendChild( + div( + h1("Search Box!"), + p( + "Type here to filter " + + "the list of things below!" + ), + div(box), + output + ).render + ) + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Weather0.scala b/examples/demos/src/main/scala/webpage/Weather0.scala new file mode 100644 index 0000000..4a2c6f0 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Weather0.scala @@ -0,0 +1,27 @@ +package webpage + +import org.scalajs.dom +import org.scalajs.dom.{Node, Element} +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Weather0 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + val xhr = new dom.XMLHttpRequest() + xhr.open("GET", + "http://api.openweathermap.org/" + + "data/2.5/weather?q=Singapore" + ) + xhr.onload = (e: dom.Event) => { + if (xhr.status == 200) { + target.appendChild( + pre(xhr.responseText).render + ) + } + } + xhr.send() + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Weather1.scala b/examples/demos/src/main/scala/webpage/Weather1.scala new file mode 100644 index 0000000..c509cb5 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Weather1.scala @@ -0,0 +1,30 @@ +package webpage + +import org.scalajs.dom +import org.scalajs.dom.{Node, Element} +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Weather1 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + import dom.extensions._ + import scala.scalajs + .concurrent + .JSExecutionContext + .Implicits + .runNow + + val url = + "http://api.openweathermap.org/" + + "data/2.5/weather?q=Singapore" + + Ajax.get(url).onSuccess{ case xhr => + target.appendChild( + pre(xhr.responseText).render + ) + } + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Weather2.scala b/examples/demos/src/main/scala/webpage/Weather2.scala new file mode 100644 index 0000000..aa04059 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Weather2.scala @@ -0,0 +1,35 @@ +package webpage + +import org.scalajs.dom +import org.scalajs.dom.{Node, Element} +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Weather2 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + import dom.extensions._ + import scala.scalajs + .concurrent + .JSExecutionContext + .Implicits + .runNow + + val url = + "http://api.openweathermap.org/" + + "data/2.5/weather?q=Singapore" + + Ajax.get(url).onSuccess{ case xhr => + target.appendChild( + pre( + js.JSON.stringify( + js.JSON.parse(xhr.responseText), + space=4 + ) + ).render + ) + } + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/Weather3.scala b/examples/demos/src/main/scala/webpage/Weather3.scala new file mode 100644 index 0000000..4dadf94 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/Weather3.scala @@ -0,0 +1,55 @@ +package webpage + +import org.scalajs.dom +import org.scalajs.dom.{Node, Element} +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object Weather3 extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + import dom.extensions._ + import scala.scalajs + .concurrent + .JSExecutionContext + .Implicits + .runNow + + val url = + "http://api.openweathermap.org/" + + "data/2.5/weather?q=Singapore" + + Ajax.get(url).onSuccess{ case xhr => + if (xhr.status == 200) { + val json = js.JSON.parse( + xhr.responseText + ) + val name = json.name.toString + val weather = json.weather + .pop() + .main + .toString + + def celsius(kelvins: js.Dynamic) = { + kelvins.asInstanceOf[Double] - 273.15 + }.toInt + val min = celsius(json.main.temp_min) + val max = celsius(json.main.temp_max) + val humid = json.main.humidity.toString + target.appendChild( + div( + b("Weather in Singapore:"), + ul( + li(b("Country "), name), + li(b("Weather "), weather), + li(b("Temp "), min, " - ", max), + li(b("Humidity "), humid, "%") + ) + ).render + ) + } + } + } +}
\ No newline at end of file diff --git a/examples/demos/src/main/scala/webpage/WeatherSearch.scala b/examples/demos/src/main/scala/webpage/WeatherSearch.scala new file mode 100644 index 0000000..0c8acc9 --- /dev/null +++ b/examples/demos/src/main/scala/webpage/WeatherSearch.scala @@ -0,0 +1,90 @@ +package webpage + +import org.scalajs.dom +import dom.extensions._ +import scala.scalajs.concurrent.JSExecutionContext.Implicits.runNow +import scala.scalajs.js +import scala.scalajs.js.annotation.JSExport +import scalatags.JsDom.all._ + +@JSExport +object WeatherSearch extends{ + @JSExport + def main(target: dom.HTMLDivElement) = { + + lazy val box = input( + `type`:="text", + placeholder:="Type here!" + ).render + + lazy val output = div( + height:="400px", + overflowY:="scroll" + ).render + + box.onkeyup = (e: dom.Event) => { + output.innerHTML = "Loading..." + fetchWeather(box.value) + } + + target.appendChild( + div( + h1("Weather Search"), + p( + "Enter the name of a city to pull the ", + "latest weather data from api.openweathermap.com!" + ), + p(box), + hr, output, hr + ).render + ) + + def fetchWeather(query: String) = { + val searchUrl = + "http://api.openweathermap.org/data/" + + "2.5/find?type=like&mode=json&q=" + + query + + for{ + xhr <- Ajax.get(searchUrl) + if query == box.value + } js.JSON.parse(xhr.responseText).list match{ + case jsonlist: js.Array[js.Dynamic] => + output.innerHTML = "" + showResults(jsonlist, query) + case _ => + output.innerHTML = "No Results" + } + } + + def showResults(jsonlist: js.Array[js.Dynamic], query: String) = { + for (json <- jsonlist) { + val name = json.name.toString + val country = json.sys.country.toString + val weather = json.weather.pop().main.toString + + def celsius(kelvins: js.Dynamic) = { + kelvins.asInstanceOf[Double] - 273.15 + }.toInt + + val min = celsius(json.main.temp_min) + val max = celsius(json.main.temp_max) + val humid = json.main.humidity.toString + val (first, last) = name.splitAt(query.length) + output.appendChild( + div( + b(span(first, backgroundColor:="yellow"), last, ", ", country), + ul( + li(b("Weather "), weather), + li(b("Temp "), min, " - ", max), + li(b("Humidity "), humid, "%") + ) + ).render + ) + } + + } + + + } +}
\ No newline at end of file |