JSFiddle - React, Tailwind, and code Playground

by SGXEngine

HTML

<script src="http://sgxengine.com/code/sgx/sgx-3.1.2.min.js"></script>
<canvas id="SGXCanvas">This browser does not support the HTML5 Canvas.</canvas>

CSS

canvas {
    display: block;
}

JavaScript

/**
Analog Clock - An SGX Example App

Copyright 2011-2014 by Steven Goodwin. All Rights Reserved.

This file is released under the GNU GPL, version 2.0

http://www.sgxengine.com
*/


var clockFaceTexture;

function SGXPrepare_OS() {
    // By mounting the 'gfx' directory, we can load images remotely
    sgx.filesystem.Engine.get().mountDirectory("gfx", "http://sgxengine.com/code/examples/clock");
 
    sgxskeleton.PrepareLoadingPage();

    new sgx.main.System();

    sgx.graphics.Engine.create(200, 200); // the size of the draw area we (as programmers) will use

    sgx.main.System.writePage();    // if we want a loading page, this renders it
    sgx.main.System.initialize();   // optionally pass the 'loading_screen' ID here, to hide the contents once loaded
}

// SGXinit is called once the system has initialized (see above_
function SGXinit() {

    clockFaceTexture = sgx.graphics.TextureManager.get().load("gfx/clockface");
}

// SGXstart is called once the textures (from SGXinit) have loaded. It's 
// a convenience method that prevents us from checking each texture individually.
function SGXstart() {
    // In previous versions we set-up the texture regions.
    // Since version 3.1.2 of SGX, there is a JSONP fallback
    // option for textures, meaning the regions are loaded
    // auto-magically!
}

// SGXupdate is called every frame. SGX indicate the time elapsed (in 
// seconds) between this and the last frame.
function SGXupdate(telaps) {
}

// SGXdraw is called whenever we (as the app) are expected to draw 
// something on-screen. You should not change any game state vars
// in this method.
function SGXdraw() {
    var pSurface = sgx.graphics.DrawSurfaceManager.get().getDisplaySurface();
    var currentTime = new Date()

    pSurface.setRenderTransform(null);
    pSurface.setFillTexture(clockFaceTexture);
    pSurface.fillPoint(100, 100);

    // Clock hands move gradually between the hours/minutes, not just on them, so we
    // incorporate the...