JSFiddle - React, Tailwind, and code Playground

by webchemist

HTML

<button id="start_lights">Start</button>
<select id="interrupt">
    <option value="0">N/S Turn</option>
    <option value="1">N/S Straight</option>
    <option value="2">W/E Turn</option>
    <option value="3">W/E Straight</option>
</select>
<button id="interrupt_button">Interrupt</button>


<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 800 800" enable-background="new 0 0 600 600" xml:space="preserve">
    <rect fill="#E6E7E8" stroke="#000000" stroke-miterlimit="10" width="600" height="600" />
    <rect x="200" y="200" fill="#828282" stroke="#000000" stroke-miterlimit="10" width="200" height="200" />
    <rect x="200" fill="#828282" width="200" height="200" />
    <g>
        <line fill="none" stroke="#FAED32" stroke-width="5" stroke-miterlimit="10" x1="296" y1="0" x2="296" y2="180" />
        <line fill="none" stroke="#FAED32" stroke-width="5" stroke-miterlimit="10" x1="304" y1="0" x2="304" y2="180" />
    </g>
    <g>
        <g>
            <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="250" y1="0" x2="250" y2="10" />
            <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" stroke-dasharray="17.7778,17.7778" x1="250" y1="27.778" x2="250" y2="161.111" />
            <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="250" y1="170" x2="250" y2="180" />
        </g>
    </g>
    <g>
        <g>
            <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="350" y1="0" x2="350" y2="10" />
            <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" stroke-dasharray="17.7778,17.7778" x1="350" y1="27.778" x2="350" y2="161.111" />
            <line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="350" y1="170" x2="350" y2="180" />
        </g>
    </g>
    <g>
        <line...

JavaScript

$(document).ready(function () {
    var ctrl = new lightController();
    $('#start_lights').click(function () {
        ctrl.startLights();
    });
    $('#interrupt_button').click(function () {
        ctrl.interrupt($("#interrupt").val());
    });
    
});

function lightController(){
    this.running = false;
    this.basetime = 2000;
    this.clock = -1;
    this.timer;
    this.lights = [
         new stoplight("turn_north")
        ,new stoplight("straight_north")
        ,new stoplight("turn_east")
        ,new stoplight("straight_east")
        ,new stoplight("turn_south")
        ,new stoplight("straight_south")
        ,new stoplight("turn_west")
        ,new stoplight("straight_west")
    ];
    this.priority = [1,1,1,1];
    this.startLights = function(){
        if (this.running == false) {
            $('#start_lights').text('stop');
            this.running = true;
        } else {
            clearTimeout(this.timer);
            $('#start_lights').text('start');
            this.running = false;
        }
        this.changeLights();
    }
    this.changeLights = function() {
		if (this.running == false) {
			return;
		}
		$(this.lights).each(function () {
			this.turnRed();
		});
        this.clock++;
		this.lights[this.clock % 4].turnGreen();
		this.lights[4 + this.clock % 4].turnGreen();
        with (this) this.timer = setTimeout(function(){yellowLight();},         
        this.priority[this.clock%4]*this.basetime);
	}
    this.yellowLight = function(next){
       this.lights[this.clock % 4].turnYellow();
	   this.lights[4 + this.clock % 4].turnYellow();
        if(next != undefined){
            this.clock = next-1
        }
            with (this) this.timer = setTimeout(function(){ changeLights();}, 1000);
    }
    this.interrupt = function(id){
        clearTimeout(this.timer);
        this.yellowLight(id);
    }
    
}
function stoplight(id) {
    this.id = id;
    this.turnGreen = function () {
        $('#' + id).css({
           ...