JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas width=1144 height=878 id='map'></canvas>

CSS

body{
    margin: 0;
}

canvas{
    background: #eee;
}

JavaScript

const data = {
    sectorData: {"1":["space","yellow","space","space","brown","space","space","space","space","space","space","red","space","blue","space","orange","space","purple","space"],"2":["space","space","space","orange","space","brown","red","black","space","space","space","space","space","white","space","purple","space","yellow","space"],"3":["space","space","space","space","green","space","blue","purple","space","space","space","yellow","space","space","white","space","space","black","space"],"4":["space","white","space","space","space","orange","space","black","red","space","space","space","space","space","brown","space","space","space","blue"],"5":["space","space","space","space","green","space","orange","white","space","space","space","yellow","space","space","space","space","purple","red","space"],"6":["space","space","space","space","brown","space","space","space","space","space","green","space","purple","blue","space","purple","space","space","yellow"],"7":["purple","space","space","space","space","green","space","space","red","space","space","black","brown","space","green","space","space","space","space"],"8":["space","space","space","space","space","orange","purple","blue","white","space","space","space","space","space","black","space","purple","space","space"],"9":["space","space","brown","orange","space","black","space","space","space","space","space","space","purple","space","green","space","white","space","space"],"10":["space","space","blue","space","yellow","space","red","space","space","space","space","space","purple","space","green","space","purple","space","space"]},
    sectorCenters: [{x:5, y:8},{x:10, y:6},{x:15, y:4},{x:2, y:13},{x:7, y:11},{x:12, y:9},{x:17, y:7},{x:4, y:16},{x:9, y:14},{x:14, y:12}],
    defaultSectorConfig: [['10',0],['1',0],['5',0],['9',0],['2',0],['3',0],['6',0],['8',0],['4',0],['7',0]], // name, rotation
};
const HEX_RADIUS = 37;
const TYPES =               ['space', 'blue', 'yellow', 'brown', 'red', 'orange',...