JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id="canvas" width=700 height=700></canvas>

CSS

body{
	margin: 0;
}

canvas{
	width: 700px;
	height: 700px;
	background: #fff;
}

JavaScript

"use strict"
// type:
//	A: ability
//	P: proficiency
//	E: passive effect
var circleDefs = {
	// tier 0
	base: {
		title: "Base",
		next: ["bolt", "minorHeal", "slice", "shoot", "bash", "mightyPunch", "defend", "toughen"],
		type: 'E',
		color: '#ccc',
		known: true,
	},
	
	// tier 1
	bolt: {
		title: "Bolt",
		next: ["powerBolt", "quickBolt"],
		type: 'A',
		color: '#f0f',
	},
	minorHeal: {
		title: 'Minor Heal',
		next: [],
		type: 'A',
		color: '#ff0',
	},
	toughen: {
		title: 'Toughen',
		next: [],
		type: 'A',
		color: '#ff0',
	},
	shoot: {
		title: "Shoot",
		next: ['strongShot', 'quickDraw'],
		type: 'A',
		color: '#fa0',
	},
	slice: {
		title: "Slice",
		next: [],
		type: 'A',
		color: '#fa0',
	},
	bash: {
		title: "Bash",
		next: [],
		type: 'A',
		color: '#fa0',
	},
	mightyPunch: {
		title: "Mighty Punch",
		next: [],
		type: 'A',
		color: '#fa0',
	},
	defend: {
		title: "Defend",
		next: [],
		type: 'A',
		color: '#fa0',
	},
	
	// tier 2
	strongShot: {
		title: "Strong Shot",
		next: ['magicBowProficiency'],
		type: 'E',
		color: '#d92',
	},
	quickDraw: {
		title: "Quick Draw",
		next: ['magicBowProficiency'],
		type: 'E',
		color: '#fc0',
	},
	powerBolt: {
		title: "Power Bolt",
		next: ["magicStaffProficiency", "knowledgeIsPower"],
		type: 'E',
		color: '#c0f',
	},
	quickBolt: {
		title: "Quick Bolt",
		next: ["wildElements", "clawHands"],
		type: 'E',
		color: '#f0c',
	},
	
	// tier 3
	magicBowProficiency: {
		title: "Magic Bow Proficiency",
		next: [],
		type: 'P',
		color: '#fa0',
	},
	magicStaffProficiency: {
		title: "magicStaffProficiency",
		next: ['flameBolt', 'forceShield'],
		type: 'P',
		color: '#a0f',
	},
	knowledgeIsPower: {
		title: "knowledgeIsPower",
		next: ['giftOfTougnes', 'explodingRune'],
		type: 'E',
		color: '#a0f',
	},
	wildElements: {
		title: "wildElements",
		next: ['mysticWispers', 'fireBall', 'frostWind'],
		type: 'E',
		color: '#f0a',
	},
	clawHands: {
		title: "clawHands",
		next: ['poisonClaws',...