JSFiddle - React, Tailwind, and code Playground

by Adambasszer

HTML

<script src="http://nagyadam.voovq.com/morphic.js"></script>
	<canvas id="world" tabindex="1" width="400" height="300" style="position: absolute; left: 0px; top: 0px;">
		<p>
			Your browser doesn't support canvas.
		</p>
	</canvas>

JavaScript

var world, stepMorphNr = 0;

			window.onload = function() {
				world = new WorldMorph(document.getElementById('world'));
				setInterval(loop, 50);
			};

			function loop() {
				world.doOneCycle();
			}

			var StepMorph;

			StepMorph.prototype = new BoxMorph();
			StepMorph.prototype.constructor = StepMorph;
			StepMorph.uber = BoxMorph.prototype;

			function StepMorph(id, description, target, x, y, action, parameter, nextStep, duration) {
				this.init(id, description, target, x, y, action, parameter, nextStep, duration);
			}


			StepMorph.prototype.init = function(id, description, target, x, y, action, parameter, nextStep, duration) {
				this.id = id;
				this.description = description;
				this.target = target;
				this.x = x;
				this.y = y;
				this.action = action;
				this.parameter = parameter;
				this.nextStep = nextStep;
				this.duration = duration;
				stepMorphNr++;
				StepMorph.uber.init.call(this);
			};

			StepMorph.prototype.drawNew = function() {
				// re-build my contents
				if (this.contentsMorph) {
					this.contentsMorph.destroy();
				}
				if (this.contents instanceof Morph) {
					this.contentsMorph = this.contents;
				} else if (isString(this.contents)) {
					this.contentsMorph = new TextMorph(this.contents, MorphicPreferences.bubbleHelpFontSize, null, false, true, 'center');
				} else if (this.contents instanceof HTMLCanvasElement) {
					this.contentsMorph = new Morph();
					this.contentsMorph.silentSetWidth(this.contents.width);
					this.contentsMorph.silentSetHeight(this.contents.height);
					this.contentsMorph.image = this.contents;
				} else {
					this.contentsMorph = new TextMorph("MyStep" + stepMorphNr, MorphicPreferences.prompterFontSize, null, false, false, 'center');
				}
				this.add(this.contentsMorph);

				var context;

				this.image = newCanvas(this.extent());
				context = this.image.getContext('2d');
				if ((this.edge === 0) && (this.border === 0))...