3 years ago 3 years ago Python Share

Trying to Run Python in a Browser – Game of NIM

This page is basically an experiment to see how well I can get Python code to run inside a web browser. It uses a Python environment called "wc-code", which allows for an "IDE" (Integrated Development Environment) style of view, with a code window and a results window underneath. You can add any Python code in the top window and run it, the results will appear in the window below. You can also save the code to your own device.

The library "wc-code" uses Pyodide, which runs using JavaScript and Web Assembly (WASM) to run a Python interpreter inside your own web browser (rather than on the web server).

The Python code loaded here is for a simplified version of the ancient Chinese game of NIM, which I wrote for an assignment for my Cyber Security course. You can read more about PyNIM here (that page will be edited soon, to add the images and everything else much more properly).

Like almost all current Python implementations which can run in a web browser, this implementation of Python does not handle "input()" statements well, giving a popup alert box instead of letting you type in the console, like a usual Python implementation would allow. (Also, the prompts for what to enter seem to not display at all, anywhere.) The reason for this is mainly security, it was found there was a vulnerability in the code which allowed for user input. There are a few ways to get around this (none of them ideal) which I'll experiment with later to try to get a better-working version of Python which can handle the input() function properly.

In this version of the PyNIM game, you have to enter a name, then a Student ID, then another name, then another Student ID (any character strings at all will work for these e.g. "qwe" etc.). Then a number from 30 to 50. Then you can enter blank values many times over (10-20 should do) and then enter a "n" to end the game. Due to the input() function bug, the whole game won't display anything at all until you click "Cancel" on the popup box, and then you can see the output of the entire game run in the window below (which is supposed to be displayed one line at a time as you're playing the game, if the input() statement was being handled properly by this version of Python).

You can also just clear the code window (e.g. by Ctrl-A to "select all", then press backspace or delete), and try out your own Python code here (by typing it, or copying and pasting code into the window). You can run and save this code.

Most Python code which doesn't use the input() function will probably work in this version without too much problem, though I haven't tested it out much yet.

If you want to play this game of PyNIM properly on another website called futurecoder, which runs Python better than it (so far) runs here, you can copy and paste the whole source code (just use the button under the code window, or alternatively you can press Ctrl-A to "select all", and then Ctrl-C to "copy"), and then go to the futurecoder.io IDE website and paste (Ctrl-V) the code in, and it runs nicely in here. Futurecoder is the only web implementation of Python I've found so far that handles the input() function correctly. Though I think it may not work in Safari on a Mac.

You can use the buttons above to run the Python code, to copy it to the clipboard, or to save it to your own device.

You can also clear it, and experiment with your own Python code here.

More information about wc-code can be found from its page on GitHub.

This Python engine seems to sometimes generate "Out of Memory" errors on Firefox, and fail to run — especially if you have a 32-bit version of Firefox. Conversely, futurecoder seems to work better in Firefox than on Chrome (on Chrome the futurecoder screen seems to repeatdly and annoyingly scroll to the right when you don't want it to).

Bug Hunting 🐜

There's a bug on this page. For some strange reason, the JavaScript for the menu (in the top-left corner of the web page) that only appears when your screen is really narrow (e.g. on a phone), conflicts with the JavaScript of the wc-code Python editor. The bug causes an entire extra set of editor lines to appear at the bottom of the editor view. There is one line there initially, beginning with the number "1", and you can add more lines here. These extra lines don't seem to do anything in terms of the Python interpreter, it just ignores them.

It can be annoying, as I discovered when I was trying to write a short Python program in the editor, and the last lines were not running at all — and then I realised there was nothing wrong with the Python code that I'd entered, but the code in the second "set" of editor lines is just ignored. It seems to also not be code-coloured either.

I haven't figured out how to resolve this bug yet, other than to disable the menu which appears on narrow screens. If you're not using a small screen device right now, you can click here to reload this page with that menu disabled, and that link fixes the bug (but it takes away the menu for narrow screen widths). It's the same menu you can see on a larger screen if you drag the browser window size to quite small horizontally. If you're already looking at the no-narrow-screen-menu version, and you want the original version (with both the bug and the menu back), you can click here to load it.

I was getting annoyed at not being able to resolve it (yet), though I did trace it to a small section of code which I may write more about in future if/when there is time. However, I realised that this whole website is about IT skills, and this bug gave me the idea to add a whole "Bug Hunting" section to some of the web pages (like this section you're reading now), where it's relevant to.

Since hunting for bugs is a large part of IT work, and coding. And Cyber Security especially — where you can get paid large sums of money for being the first person to discover security flaws in code from large companies (who are large enough to afford sums of money in return for being able to fix their security holes, before a hacker finds them).

Cover image by Shutterstock

Categories Python,Coding,Javascript
Byte.Yoga Homepage - Australian Cyber Security Web Magazine

Share This Page

If you liked this page, please share it with others! You can use the links to share on Facebook, Twitter, LinkedIn, Pinterest, and Email. Ther is also an RSS feed to get updates for the website.