Compile and run Monkey in browser online!

Monkey Archive Forums/Monkey Discussion/Compile and run Monkey in browser online!

Pakz(Posted 2015) [#1]
I just noticed/found the page where you can compile monkey in the browser. I pasted a thousand line project in it and it compiled and ran. This is a great something for Monkey!!

Here the page :
http://regal-internet-brothers.github.io/webcc/

If you could download the html package that you can compile then that would be a nice feature.
Also if would be nice if the html5 screen would be a little bit bigger(stretchable? or fullscreen?)

Great job!


Playniax(Posted 2015) [#2]
Cool!


Paul - Taiphoz(Posted 2015) [#3]
Yeah he's been working his ass off on it, been following his progress via twitter.


SLotman(Posted 2015) [#4]
Doesn't work for me?! I hit "build and run" (without changing anything), I get this "compiler output" and nothing :(
(Edit: what looks like a canvas - a grey box - does appear, but there's nothing on it - the "print" statement never appears)



Tested on Firefox 28, Chrome 37.
On IE 10 nothing happens, at all.


Pakz(Posted 2015) [#5]
If you paste code in it that has graphics and/or controls then it does do something. Paste something from the code forum in it and see.


ImmutableOctet(SKNG)(Posted 2015) [#6]
Hey all, I'm the developer behind this port. When I get around to finishing an article on it, I'll post it here. This has been a side project of mine for about two weeks now. I'm still surprised it's actually working.

To address the two main issues, though:

@SLotman: There should be a small bar at the bottom, simply drag it upward to view the console. Alternatively, console applications can be built by changing "Html5_Game" to "JavaScript_Tool" in the arguments text-box.

@Pakz: Thanks for sharing this. I did see the resizing behavior as an issue, and the target now uses the automatic-resize option in "MonkeyGame.html". I also made it resizable to the screen, so you can make it just about as large as you want. I've made a few minor tweaks to the front-end, and a number of stability tweaks since yesterday. The most up to date version is at the same URL, if you're interested. Something that probably wasn't mentioned was multi-file projects work with this. That includes both source files, and supported resources. Though, the main file still doesn't save, at the moment. That page is more of a proof of concept for a front-end, anyway.

For those interested, the source code can be found in these repositories:

* https://github.com/Regal-Internet-Brothers/virtualos
* https://github.com/Regal-Internet-Brothers/webcc-monkey
* https://github.com/ImmutableOctet/monkey-tools/tree/master/Virtual_Directory_Generator

* https://github.com/Regal-Internet-Brothers/webcc_frontend-target-monkey
* https://github.com/Regal-Internet-Brothers/jstool-target-monkey

I intend to go into detail about how everything plugs together later this week. The cool part is that it builds without modifying the bulk of 'trans'. My twitter handle is @ImmutableOctet for those who are interested.

EDIT: I forgot to mention this, but you can go here for the generated files used on the website. You need to host a server (MServer works) to use it, though.


Paul - Taiphoz(Posted 2015) [#7]
Throw this code into it to see it shine..

Not my source, thervills did a little port of something from bb.com I think.. but it demo's the above work nicely.
[bbcode]
Strict

Import mojo

Function Main:Int()
New MyApp()
Return 0
End

Class MyApp Extends App
Field wobblyScrollingText:WobblyScrollingText

Field circleScroller:CircleScroller

Method OnCreate:Int()
wobblyScrollingText = New WobblyScrollingText("Monkey Web Based Coding Live FTW !!!", DeviceWidth(), DeviceHeight() / 2)

circleScroller = New CircleScroller()

SetUpdateRate(60)
Return 0
End

Method OnUpdate:Int()
wobblyScrollingText.Update()
circleScroller.Update()
Return 0
End

Method OnRender:Int()
Cls
wobblyScrollingText.Print()
circleScroller.Render()
Return 0
End
End

Class WobblyScrollingText
Field text:String
Field x:Float, y:Float, oy:Float
Field fontSize:Int = 8
Field speed:Float

Method New(text:String, x:Float, y:Float, speed:Float = 3)
Self.x = x
Self.y = y
Self.oy = y
Self.text = text
Self.speed = 3
End

Method Update:Void()
x -= speed
y = oy + Cos(x) * 50
If x + text.Length() * fontSize < 0 Then x = DeviceWidth()
End

Method Print:Void()
DrawText(text, x, y, 0, .5)
End
End

Class Letter
Field rad:Float, angl:Float, letter:Int, rados:Float
Field myList:List<Letter>

Method New(myChar:Int)
self.rad = 170
self.angl = -90
self.letter = myChar
End

Method SetList:Void(aList:List<Letter>)
myList = aList
End

Method Update:Void()
angl += CircleScroller.scrollSpeed
rados = Cos(angl * 3 + CircleScroller.rotangl) * 40
If angl > 270
myList.Remove(Self)
End
End

Method Render:Void()
Local x:Float = Cos(angl) * (rad + rados)
Local y:Float = Sin(angl) * (rad + rados)

Local myAlpha:Float = 1
If angl < -45
myAlpha = (90.0+angl)/45.0
Else If angl > 225
myAlpha = (270.0-angl)/45.0
End

SetAlpha myAlpha
DrawText (String.FromChar(letter), x + 320 , -y + 240)
End
End

Class CircleScroller Extends List<Letter>
Global scrollSpeed:Float = .6
Global rotangl:Float = 0
Global scrollytext:String = "Hello Monkey World! "
Global textPointer:Int = 0
Global letterDelay:Int = 0

Method New()
End

Method Update:Void()
rotangl += scrollSpeed
rotangl = rotangl Mod 360

letterDelay += 1
If letterDelay > 10
Local myLetter:Letter = New Letter( scrollytext[textPointer] )
myLetter.SetList(Self)
AddLast myLetter
textPointer = (textPointer + 1) Mod scrollytext.Length()
letterDelay = 0
End

For Local letter:Letter = Eachin Self
letter.Update()
Next
End

Method Render:Void()
For Local letter:Letter = Eachin Self
letter.Render()
Next
End
End
[/bbcode]


therevills(Posted 2015) [#8]
Very nice Anthony! Now we just need it to compile in real time ;)


SLotman(Posted 2015) [#9]
@SLotman: There should be a small bar at the bottom, simply drag it upward to view the console.

Ahhh! Now I see it :)

Now another question... I typed the code below:


It compiled, and ran... but the "screen" only became red after I dragged the console bar. Is that normal?

Edit: DUH! Missed SetUpdateRate ^_^


SLotman(Posted 2015) [#10]
Just shared this on my timeline on Facebook - it is too good :)

I actually made a really small sample program to show it off, drawing the brazilian flag with a bouncing text on screen ^_^



Mark should post this in the front page, something like "Try Monkey NOW! No download or anything!" :)