JSFiddle - React, Tailwind, and code Playground

by Dan Vassallo

HTML

<div id="game-running">
    <p></p>
</div>
<button data-status='on' id="game-toggle">SCENE ON</button>
<div id="controls">
    <h1>Controls</h1>
    <a href="#" class="control tossing">I am a control</a>
    <a href="#" class="control tossing">I am a control</a>
    <a href="#" class="control tossing">I am a control</a>
</div>

CSS

#game-running{
    position: absolute;
    background: black;
    height: 100px;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 30px;
    text-transform: uppercase;
}

#game-toggle{
    position: absolute;
    width: 100px;
    font-size: 12px;
    padding: 10px;
    border-radius: 5px;
    border-color: transparent;
    color: white;
    background-color: green;
    top: 120px;
    left: 50%;
    margin-left: -50px;
}

#controls{
    position: absolute;
    top: 150px;
}


.tossing{
	animation-name: tossing;
	-webkit-animation-name: tossing;	
}

@keyframes tossing {
	0% {
		transform: rotate(-4deg);	
	}
	50% {
		transform: rotate(4deg);
	}
	100% {
		transform: rotate(-4deg);	
	}						
}

@-webkit-keyframes tossing {
	0% {
		-webkit-transform: rotate(-4deg);	
	}
	50% {
		-webkit-transform: rotate(4deg);
	}
	100% {
		-webkit-transform: rotate(-4deg);	
	}				
}

.animate{
    animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;    
}

JavaScript

<!-- Game Toggle Button -->
$('#game-toggle').on('click', function(){
    if($(this).data('status') == 'on'){
        $('#game-running').html('<p>Game is running!</p>');
        $(this).html('SCENE OFF');
        $(this).css('background-color','red');
        $(this).data('status', 'off'); 
        <!-- UNBIND ANIMATION -->
		$('.control').off().mouseenter().off().mouseleave();
    } else if ($(this).data('status') == 'off'){
    	$('#game-running').html('<p></p>');
        $(this).html('SCENE ON');
        $(this).css('background-color','green');
        $(this).data('status', 'on');
        <!-- REBIND ANIMATION -->
        enableAnimation();
    }
});


function enableAnimation(){
	$('.control').on('mouseenter', function(){
        $(this).toggleClass('animate');    
    }).on('mouseleave', function(){
        $(this).toggleClass('animate');        
    });
}

enableAnimation();