JSFiddle - React, Tailwind, and code Playground

DAN Live! Floorplan

by tonytlwu

HTML

<div id="container">
  <div id="canvas">
    <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 274.8 541.5" style="enable-background:new 0 0 274.8 541.5;" xml:space="preserve"><style type="text/css">	.st0{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}	.st1{opacity:5.000000e-02;fill:#FFFFFF;}	.st2{fill:none;stroke:#2E2C2C;stroke-miterlimit:10;}	.st3{fill:none;stroke:#FFFFFF;stroke-width:0.5669;stroke-linecap:round;stroke-miterlimit:10;}	.st4{fill:none;stroke:#FFFFFF;stroke-width:0.5669;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:0,1.4259;}	.st5{fill:none;stroke:#FFFFFF;stroke-width:0.5669;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:0,1.4198;}	.st6{fill:#FFFFFF;}	.st7{fill:none;stroke:#FFFFFF;stroke-width:0.4596;stroke-miterlimit:10;}	.st8{fill:none;stroke:#FFFFFF;stroke-width:0.9268;stroke-miterlimit:10;}	.st9{fill:none;stroke:#E8138B;stroke-width:8.5039;stroke-miterlimit:10;}</style><line class="st0" x1="197.8" y1="130.2" x2="265.9" y2="130.2"/><line class="st0" x1="266" y1="248.5" x2="196.8" y2="248.5"/><polygon onclick="clickedRoom('EM6')" class="st1" points="52,35.7 52,74.9 117.8,74.9 117.8,28 "/><polygon class="st0" points="52,35.7 52,74.9 117.8,74.9 117.8,28 "/><polyline class="st2" points="117.8,434.8 117.8,513.7 52,513.7 52,365 117.8,365 117.8,388.4 "/><rect x="52" y="271.9" class="st2" width="65.8" height="34.4"/><rect x="52" y="330.6" class="st2" width="65.8" height="34.4"/><rect x="129.4" y="144.6" onclick="clickedRoom('EM Square')" class="st1" width="49.9" height="56.8"/><g>	<g>		<line class="st3" x1="129.4" y1="144.6" x2="129.4" y2="144.6"/>		<line class="st4" x1="130.8" y1="144.6" x2="178.6" y2="144.6"/>		<line class="st3" x1="179.3" y1="144.6" x2="179.3" y2="144.6"/>		<line class="st5" x1="179.3" y1="146" x2="179.3" y2="200.6"/>		<line class="st3" x1="179.3" y1="201.3" x2="179.3" y2="201.3"/>		<line class="st4" x1="177.9"...

CSS

html, body {
  height: 100%;
  margin: 0;
}

#container {
  padding: 15px 15px 25px;
  background: #000;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  font-family: 'century gothic', sans-serif;
}
#canvas {
  position: relative;
  margin: 0 auto;
  width: 0;
  height: 0;
}
#roomDescription {
  border-top: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.7);
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  transition: all 0.2s ease-out;
  transform: translate3d(0,100%,0);
  text-transform: uppercase;
  text-align: center;
}

#roomDescription.active {
  transform: translate3d(0,0,0);
}

#canvas *[onclick] {
  opacity: 0;
}

#canvas *.pulse {
  animation: pulsate 3s infinite both;
  opacity: 0.5;
}

@keyframes pulsate {
  0, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

JavaScript

function onWinResize () {
  var maxW = $('#container').width();
  var maxH = $('#container').height();
  var canvasRatio = 0.5;
  var canvasW;
  var canvasH;

  if (maxW/maxH > canvasRatio) {
    // Height first
    canvasH = maxH;
    canvasW = canvasH*canvasRatio;
  } else {
    // Width first
    canvasW = maxW;
    canvasH = canvasW/canvasRatio
  }

  $('#canvas').width(canvasW).height(canvasH);
}

window.clickedRoom = function (name) {
  var room = rooms.filter(function(x){return x.name === name;})[0];
  $('#canvas [onclick]').removeClass('pulse').filter('[onclick="clickedRoom(\''+name+'\')"]').addClass('pulse');
  $('#description').stop().fadeOut(200, function(){
  	$(this).html(room.text).fadeIn(200);
  });
}

var rooms = [
	{
  	name: 'EM6',
    text: 'Cloak Room'
  },
	{
  	name: 'EM1',
    text: 'Hangout Zone'
  },
	{
  	name: 'EM2',
    text: 'Content and Creative'
  },
	{
  	name: 'EM3',
    text: 'B2B'
  },
	{
  	name: 'QS4',
    text: 'CRM'
  },
	{
  	name: 'QS5',
    text: 'Data'
  },
	{
  	name: 'QS6',
    text: 'Social'
  },
	{
  	name: 'QS7',
    text: 'Mobile'
  },
	{
  	name: 'QS3',
    text: 'Location Based Marketing'
  },
	{
  	name: 'EM4',
    text: 'Programmatic'
  },
	{
  	name: 'Little Gallery',
    text: 'Tracy’s talk'
  },
	{
  	name: 'EM Square',
    text: 'Learning Zone'
  }
];

var roomColorMap = {
  'red': '#e72827',
  'orange': '#f39a00',
  'blue': '#389de0',
  'lime': '#a9d61a',
  'purple': '#886db6',
  'pink': '#dd008f',
  'yellow': '#fcf900',
  'green': '#63c036'
}

$(window).on('resize', onWinResize).trigger('resize');
$('#roomDescription').addClass('active');
$('#canvas [onclick]').css('fill', roomColorMap['green']);