Klinke

[Hydra]

   Hey guys!  I recently asked a question here : http://en.sfml-dev.org/forums/index.php?topic=18824.0 about whether you can write a SFML game and get it on the web. From what I gathered there's some outdated program for C++ to HTML that doesn't work with SFML. Basically I really wanted to get SFML stuff on the web so you can play it in your browser and there were no programs for doing that so I decided to start a project called Klinke (note? I'm not sure if it's suppose to be here. It's in C++ and I'm writing SFML code and that). Basically it reads .cpp files with SFML stuff in (2.3.1). Then it does it's best to convert it to HTML5 canvas code. Which basically is a window on a webpage. If you don't know what a canvas looks like then heres an example from some HTML5 tutorial thing: http://www.lostdecadegames.com/demos/simple_canvas_game/.

Basically you download Klinke.exe. You put it in the same directory as the files you want to convert. Then you go into the console and run "Klinke [name of file]". Note: don't write .cpp at the end. It opens the file then read's it and then basically writes to a few variables saying what is in the program. Right now it only detects a window. It get's it's width. Then it writes it to a file called "index.html". Which can then be opened.

Notes :
Right now I just wanted to post it so you can see my progress and also in case it helps anyone. As of right now it's not really the best thing as it only detects and window then it's width. I'm going to be working on other versions but this is literally what I did in one day:

Download: https://github.com/HydraPlays/Klinke

v0.01:
Klinke detects window's and reads their width

v0.02
Klinke now detects the window's height aswell

[eXpl0it3r]

I doubt anyone is gonna download some exes from your repository to "see" the progress. Instead you actually might want to provide the code - at least that's what Git was created for anyways.

[Hydra]

I doubt anyone is gonna download some exes from your repository to "see" the progress. Instead you actually might want to provide the code - at least that's what Git was created for anyways.

Yeah, I'm pretty sure it was mainly created for open-source projects and that but I don't really want to upload it to something like filedropper.com that's going to take down the download like every month. Plus it's a lot easier to just download the .zip and see the individual versions and pick one instead of searching for what versions there are then going to filedropper.com links with no explanation and then just downloading random stuff. Also GitHub is more secure! If I do put the code up I won't put it in the same repo as it ends up losing the binaries and you have people searching through source code and that for the .exe versions.

Edit : Also, the code is pretty messy lol.

[dabbertorres]

If I do put the code up I won't put it in the same repo as it ends up losing the binaries and you have people searching through source code and that for the .exe versions.

The Releases functionality on Github is what you're looking for then.

[Jesper Juhl]

I don't mean to be rude or discourage you. But I think that you are massively underestimating the task at hand.

To translate C++ to JavaScript+HTML you need to actually parse and understand the C++ grammar and then generate equivalent JavaScript.
That means you need a tokenizer, a lexer, a parser that can build a proper AST, and a backend to emit JS based on that AST. In short; you need a C++ compiler that can emit JS.
This is exactly what the Emscripten guys are building (and it's a multi-man-year effort, even starting with LLVM as the base).
You won't get far by doing some pattern matching on C++ sources (detecting Window width and height etc) and then generating HTML/JS from that - enjoy dealing with stuff like templates, the most vexing parse, overload resolution, ADL, pointers, references, exceptions, threads, atomics and much, much more.

Your energy would be much better spent by helping the Emscripten guys with their compiler and helping port SFML to modern OpenGL that Emscripten can deal with. That might actually have some chance of resulting in a real solution.

[Hydra]

I don't mean to be rude or discourage you. But I think that you are massively underestimating the task at hand.

To translate C++ to JavaScript+HTML you need to actually parse and understand the C++ grammar and then generate equivalent JavaScript.
That means you need a tokenizer, a lexer, a parser that can build a proper AST, and a backend to emit JS based on that AST. In short; you need a C++ compiler that can emit JS.
This is exactly what the Emscripten guys are building (and it's a multi-man-year effort, even starting with LLVM as the base).
You won't get far by doing some pattern matching on C++ sources (detecting Window width and height etc) and then generating HTML/JS from that - enjoy dealing with stuff like templates, the most vexing parse, overload resolution, ADL, pointers, references, exceptions, threads, atomics and much, much more.

Your energy would be much better spent by helping the Emscripten guys with their compiler and helping port SFML to modern OpenGL that Emscripten can deal with. That might actually have some chance of resulting in a real solution.

I don't want to build a program that matches what the Emscripten people have made. That doesn't work from what I heard and I simply want to make a basic program that I can use to port my SFML code to HTML5 canvas. Do you know HTML5/JS code for canvas? I don't even need to bother with threads, pointers, etc! Also if every time a project was hard you quit then your clearly not going to get anywhere.

I'm literally going to have to handle a few things. For example:

- Detecting a window, window width, window height (possibly window title if I want to display that somewhere)
- Detecting the basic functions such as RectangleShape, which I literally need to say to JS only bother with where it renders then create a Rectangle and render it that, because I'm reading from top to bottom this will automatically go in the correct order
- Detecting keyboard events which is again as simple as telling JS to only bother with where it gets the keys then do that
- Variables such as integers, those are pretty easy
- And a few other things

I'll just be making a SFML project then port it using Klinke and if there any problems I'll fix/add them.

[Jesper Juhl]

I wish you the best of luck. But honestly, I doubt very much that you'll be able to actually get any real programs running like that.
But I'd like you to prove me wrong.

Small question: have you ever written a compiler or interpreter before? If not, then you might want to study up a bit on that first.
I wrote a recursive-descent C89 interpreter once (except for a few bits like volatile, register, union and other niche parts of the language) and I can tell you that it's not a trivial exercise. And parsing C++ is many times harder than C89.

If you want something fairly simple to test your program on, then let me know when it successfully converts my two simple examples from the wiki:
 https://github.com/SFML/SFML/wiki/Source:-Bouncing-ball
 https://github.com/SFML/SFML/wiki/Source:-Jukebox

I want to stress again that I'd love to be proven wrong and see you succeed. I'll honestly be impressed. But I must admit I don't believe your aproach will get you very far.

[Hydra]

I wish you the best of luck. But honestly, I doubt very much that you'll be able to actually get any real programs running like that.
But I'd like you to prove me wrong.

Small question: have you ever written a compiler or interpreter before? If not, then you might want to study up a bit on that first.
I wrote a recursive-descent C89 interpreter once (except for a few bits like volatile, register, union and other niche parts of the language) and I can tell you that it's not a trivial exercise. And parsing C++ is many times harder than C89.

If you want something fairly simple to test your program on, then let me know when it successfully converts my two simple examples from the wiki:
 https://github.com/SFML/SFML/wiki/Source:-Bouncing-ball
 https://github.com/SFML/SFML/wiki/Source:-Jukebox

I want to stress again that I'd love to be proven wrong and see you succeed. I'll honestly be impressed. But I must admit I don't believe your aproach will get you very far.

For your small question. I have sort of written an interpreter. But it was in Java and it was on my old Windows 7 laptop and I just completely forgot about it. I think I called it Flex or something? It literally just read .flex files then converted it over to Java and then compiled it then compiled it all into a .jar file.

Edit : I'm pretty sure your right though. I'm going to try and learn how to make Python interpreter that interprets Python code to C++. Because Python is pretty simple, then I'll take a look at C++ to JavaScript. I'm guessing I'm going to have to establish some common link between all programming languages. Such as for example all programming languages have variables and if statements.

[zsbzsb]

Please avoid full quotes, its absolutely unnecessary and makes the thread unreadable (especially when its the directly previous reply).

I'm guessing I'm going to have to establish some common link between all programming languages. Such as for example all programming languages have variables and if statements.

LLVM?

[Jesper Juhl]

I'm guessing I'm going to have to establish some common link between all programming languages. Such as for example all programming languages have variables and if statements.

This is exactly what the LLVM IR (Intermediate Representation) language is. All the frontends that parse specific languages generate IR code. The optimizer then works on the IR representation and the backends then generate object code for different CPUs from that (or generate JavaScript in the case of the Emscripten backend).

[Hydra]

+zsbzsb

Ah, sorry for the quotes I'll stop using them when replying to comments.

[Jesper Juhl]

I don't want to build a program that matches what the Emscripten people have made.

So far it sounds like that's exactly what you want.

That doesn't work from what I heard

It works impressively well given what an enormous task it is to translate a huge and incredibly complex language like C++ to JavaScript.
Have you even looked at their examples? It's quite amazing what they have managed to get working. And in my opinion it's the only sane way to do what you want; use a real C++ frontend like Clang to generate LLVM IR, then use the LLVM optimizer to speed it up, then write a JavaScript backend to generate the final JS code that must run on the web.
If you have to invent the tokenizer, lexer, parser (AST generator), optimizer and JS backend from scratch/first principles then you are looking at hundreds of man years of work (which is roughly what has already been put into LLVM + Clang + Emscripten).
Just consider the fact that the current C++ language standard/specification is ~1300 pages. You want to write a program that tackles that on your own? And then on top of that you want to implement the entire C++ standard library + STL on your own (you'll need it; programs use it). Then you want to write code that translates all that faithfully into working JavaScript.
Good luck.
The Emscripten people have (by using the base that LLVM already built) almost achieved that, but it has taken them years (and many developers during those years).
Throwing your weight behind those projects is really the only realistic way I see towards achieving your goal. Trying to do it alone (in one human lifetime) is just unrealistic on such an enormous scale that it's not even funny.

[Jesper Juhl]

For your small question. I have sort of written an interpreter. But it was in Java and it was on my old Windows 7 laptop and I just completely forgot about it. I think I called it Flex or something? It literally just read .flex files then converted it over to Java and then compiled it then compiled it all into a .jar file.

That's not really an interpreter though.

Tell me, how would you parse and evaluate a simple expression such as this:

1 + 3 × 5 ÷ 7 - 8

What if we throw in some parentheses?

((1 + 3) × 5 ÷ 7) - 8

Or how about with some variables?

A = 1 + 3
B = 5 ÷ 7 - 8
C = B % A

Start by writing a program that can parse/interpret those simple expressions (it's not too hard, but can be a challenge if you've never done it before). Extend your program to be a real calculator with variables where I can enter any expression and have it evaluated (possibly over many lines and using variables).
Then try to think about how you'd interpret something like a C++ lambda expression or a variadic template or similar and I think the size of the task will dawn on you.