JSFiddle - React, Tailwind, and code Playground

by Abhijeet Kandalkar

HTML

<script src="http://fabricjs.com/lib/fabric_with_gestures.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Dots</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <style>
	  html, body { width:100%; height:100%; } 
    </style>
	<link rel="stylesheet" href="master.css" type="text/css" media="screen">
    <script src="fabric_with_gestures.js"></script>
	<script src="jquery.js"></script>
  </head>
<script id="main">
	var TIMER_VALUE = 7;
	var RADIUS = 20;
    var score = 0;
	
	var MOVES = -1;
	var TIME = -1;
	var COMPLEXCITY = 5;
	var ADJUSTMENT = 10;

	var highestScore = 0;
	var type = "i";
	
	var updateTimer;
	
	function getHighestScore(type) {
	    var score = 0;
		switch(type)
		{
			case 't':
				score = localStorage.TimeScore;
				break;
			case 'c':
				score = localStorage.ComplexityScore;
				break;
			case 'm':
				score = localStorage.MoveScore;
				break;
			case 'i':
				score = localStorage.InfiniteScore;
				break;
		}
		return score;
	}
	
	function setHighestScore(type) {
		/* For testing*/
		//localStorage.MoveScore = 0;
	
		if (!localStorage.TimeScore)
			localStorage.TimeScore = 0;
			
		if (!localStorage.ComplexityScore)
			localStorage.ComplexityScore = 0;
			
		if (!localStorage.MoveScore)
			localStorage.MoveScore = 0;
			
		if (!localStorage.InfiniteScore)
			localStorage.InfiniteScore = 0;

	}

	function updateTime()
	{
		TIME = TIME - 1;
		document.getElementById("dashboard").innerHTML = TIME;
		if(TIME > 0) {
			updateTimer = setTimeout("updateTime()",1000);
		}else{
		// Automatically trigger the pop-up after 10 seconds
			setTimeout( strtBlackout, 10);
			//unInitialiseEvents();
		}
	}
	
	function updateScrores(type)
	{
		score+=(pattern.length*10);
		document.getElementById("result").innerHTML = score;
		switch(type)
		{
			case 't':
				if (score > localStorage.TimeScore) {
					localStorage.TimeScore = score;
					document.getElementById("hscore").innerHTML = ...

CSS

html {
	height: 100%;
}

body {
	padding: 0;
	margin: 0;
	height: 100%;
	font-family: "Helvetica Neue", "Arial", sans-serif;
	font-size: 1em;
	#background: #29485c url(../images/bg.jpg) center top no-repeat;
	background-size: 100% 100%;
}

.message {
	width: 350px;
	border-left: 1px solid;
	border-right: 1px solid;
	border-color: #f5f5f5;
	margin: 0 auto;
	padding: 0;
	font-size: 12px;
	position: relative;
	top: 10%;
	background: #fff;
	border-radius: 15px;
	position: absolute;
	box-sizing: border-box;
	text-align: center;
	z-index: 99;
	font-size: x-large;
}

.score {
	background: #fff;
	border-radius: 15px;
	position: absolute;
	padding: 0px 0;
	box-sizing: border-box;
	text-align: center;
	z-index: 99;
	top: 10px;
}

.score h3 {
	margin: 0;
	padding: 0 0 20px 0;
	text-align: center;
	font-size: 1.5em;
	color: #ccc;
}

.message h2 {
	margin: 0;
	padding: 0 0 20px 0;
	text-align: center;
	font-size: 2em;
	color: #ccc;
}

.message ul,
.message li {
	display: inline-block;
	padding: 5px;
}

.message button {
	display: block;
	font-size: 1em;
	border: none;
	background: #ccc;
	border-radius: 10px;
	box-shadow: 3px 3px 1px rgba(0,0,0,0.15);
	color: #fff;
	font-weight: bold;
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
	cursor: pointer;
	height: 150px;
	width: 150px;
}

.message .infinite {
	background-color: #CC00CC;
}

.message .complexity {
	background-color: #2868C7;
}

.message .move {
	background-color: #006600;
}

.message .time {
	background-color: #FF0000;
	
}