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)

TRANS monkey compiler V1.86
FILE [/webcc/data/targets/html5/TARGET.MONKEY] (74)
FILE [/webcc/data/targets/jstool/TARGET.MONKEY] (79)
Parsing...
FILE [/webcc/data/modules/monkey/monkey.monkey] (247)
FILE [/webcc/data/modules/monkey/lang.monkey] (1454)
FILE [/webcc/data/modules/monkey/boxes.monkey] (2549)
FILE [/webcc/data/modules/monkey/list.monkey] (7174)
FILE [/webcc/data/modules/monkey/map.monkey] (9088)
FILE [/webcc/data/modules/monkey/math.monkey] (1470)
FILE [/webcc/data/modules/monkey/random.monkey] (527)
FILE [/webcc/data/modules/monkey/set.monkey] (950)
FILE [/webcc/data/modules/monkey/stack.monkey] (5983)
FILE [/webcc/data/modules/monkey/deque.monkey] (3380)
FILE [/webcc/data/targets/html5/modules/monkeytarget.monkey] (147)
FILE [/webcc/data/modules/os/os.monkey] (43)
FILE [/webcc/data/modules/os/virtualos.monkey] (13828)
FILE [/webcc/data/modules/brl/databuffer.monkey] (7578)
FILE [/webcc/data/modules/brl/asyncevent.monkey] (688)
FILE [/webcc/data/modules/brl/thread.monkey] (1211)
FILE [/webcc/data/modules/brl/datastream.monkey] (1288)
FILE [/webcc/data/modules/brl/stream.monkey] (4233)
FILE [/webcc/data/modules/brl/gametarget.monkey] (2069)
FILE [/webcc/data/dev/user.monkey] (58)
Semanting...
Translating...
Building...
FILE [/webcc/data/dev/user.buildv85e/html5/CONFIG.MONKEY] (273)

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:

Import mojo

Class Game Extends App
   Method OnRender()
      Cls(255,0,0)
   End Method
End Class

Function Main:Int()
        New Game()
	Print("Hello world.")

	Return 0
End

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 ^_^

Import mojo

Class Game Extends App
   Global textAngle:Float = 0

   Method OnRender()
      Cls(0,73,21)

      SetColor(255,212,8)
      local verts:Float[]=[80.0,146,260,32,260,260,
                           260.0,32,440,146,260,260]
      DrawPoly(verts)
      SetColor(0,16,174)
      DrawOval(185, 71, 150,150)

      SetColor(0,0,0)
      SetAlpha 0.75
      DrawRect 0, 130, 600,34

      PushMatrix
      Scale 2,2
      SetColor(255,255,255)
      SetBlend 1
      Local pos:Float = Int(55 + Cos(textAngle)*20)+0.5
      DrawText "Brasil! Monkey roooox!", pos, 67
      DrawText "Brasil! Monkey roooox!", pos+1, 67
      PopMatrix()
   End Method

   Method OnUpdate()
      textAngle+=20
   End Method
End Class

Function Main:Int()
        SetUpdateRate(30)
        New Game()
	Print("Hello world.")

	Return 0
End

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