JSFiddle - React, Tailwind, and code Playground

by jcpmcdonald

HTML

<!-- All of this is generated from JSON, which is why I want to avoid using the CSS solution -->
<div id="map" style="margin-left: auto; margin-right: auto; width: 70%; position: relative;">
    <div class="mission" style="top: 100px; left: 100px; width: 100px; height: 100px; background-image: url('http://i.imgur.com/almqCfu.png');" ></div>
    <div class="path complete" style="width: 237.065px; top: 150px; left: 150px; transform: rotate(27.646deg); -webkit-transform: rotate(27.646deg);" ></div>
    <div class="mission" style="top: 200px; left: 300px; width: 120px; height: 120px; background-image: url('http://i.imgur.com/almqCfu.png');" ></div>
    <div class="path" style="width: 180.278px; top: 260px; left: 360px; transform: rotate(-33.6901deg); -webkit-transform: rotate(-33.6901deg);"  ></div>
    <div class="mission" style="top: 120px; left: 470px; width: 80px; height: 80px; background-image: url('http://i.imgur.com/almqCfu.png');"  ></div>
</div>

CSS

body{
    background-color: black;
}

.mission {
	position: absolute;
	z-index: 1;
	
	background-repeat: no-repeat;
	background-size: contain;
}

.path {
	/*background: url('../images/missions/dottedPath.png') repeat-x;*/
    background: url('http://i.imgur.com/KkofiKx.png') repeat-x;
	height:4px;
	position: absolute;
	transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
	z-index: -2;
}

.path.complete {
	background: url('http://i.imgur.com/5aU9Itk.png') repeat-x;
}

JavaScript

var selectedPlanet = null;
var selectedOrigBG = null;

$(".mission").click(function() {
    if (selectedPlanet != null) {
        selectedPlanet.css("background-image", selectedOrigBG);
    }
    
    // Select the clicked planet
    selectedOrigBG = $(this).css("background-image");
    $(this).css({
        /*"background-image": "url('images/missions/Selected.png')",*/
        "background-image": "url('http://i.imgur.com/DIbE9nv.png'), " + selectedOrigBG,
    });
    selectedPlanet = $(this);
});