It isn't really a suggestion per-say but more a query. How does the server backend store the focus trees? Like what data format? Yesterday, out of pure boredom, I started making a similar focus-making site to see if I could and was wondering how this site stored stuff.

The site uses MYSQL to store the data, although MongoDB would probably make more sense.

I've taken one of your focuses as an example.

Focus tree ID is the internal ID, on another table that stores the focus tree name, continuous focus position, tag, and language for the localisation files.

Game ID is used when importing focuses from focus trees; as that is used at a later time to work out a focus' absolute X/Y position from a relative position (e.g. where a focus says it is +1 X & +1 Y from the prerequisite)

Name - Name of the focus tree
Description - The description set
These are set separately to other data to make getting the data easier.

GFX - The internal ID for the GFX on a separate table.

X & Y - The number the game uses for the X/Y positions on the grid (position in the focus tree editor multiplies by the distance value I want them to sit at on the site's "grid")

Data - This is JSON of all other fields, where the key is what the game reads (available, completion_reward, etc.) and the value is the code inputted into the corresponding fields. I took this approach due to new options being added to the game with DLCs, and thought it best to have the ability to just add to an already existing cell in a database, and deal with any peculiarities later on*, rather than adding a new column as I had originally built with the old site:

*I just have a switch in the export functionality which looks like this: (yes it's in PHP, and no I won't apologise for making you see it)

switch ($key) {
	case 'prerequisite':
	case 'mutually_exclusive':
		$fortree .= $this->focusInternalToExternalConvert($key, $value); //Internal game key(s) in value to focus ID for game to use
	break;
	case 'ai_will_do':
		if(is_numeric($value)){
			$fortree .= $this->addLine($key.' = { factor = '.$value.' }', 2);
		}else{
			$fortree .= $this->addLine($key.' = {', 2);
			$lines = explode("\n", $value);
			foreach($lines as $line){
				$fortree .= $this->addLine($line, 3);
			}
			$fortree .= $this->addLine('}', 2);
		}
	break;
	case 'cost':
	case 'will_lead_to_war_with':
	case 'available_if_capitulated':
	case 'cancel':
	case 'cancel_if_invalid':
	case 'complete_tooltip':
	case 'historical_ai':
	case 'select_effect':
	case 'continue_if_invalid': //All of these are key = value
		if(!empty($value)){
			if($key == 'select_effect'){ //This one sometimes imports with { } and sometimes without
				$trimmedValue = trim($value);
				if(!empty($trimmedValue)){
					if($trimmedValue[0] != '{'){
						$value = "{\n".$value;
					}
				}
				if(substr_count($value, '}') < substr_count($value, '{')){
					$value .= "\n}";
				}
			}
			if(is_array($value)){
				foreach($value as $v){
					$fortree .= $this->addLine($key.' = '.$v, 2);
				}
			}else{
				$fortree .= $this->addLine($key.' = '.$value, 2);
			}
		}
	break;
	case 'offset': //This isn't needed as all focuses are absolutely positioned
	case '[object SVGSymbolElement]': //Somehow, someone imported a focus tree with this value inside it, safety measure in case someone else does
	break;
	default: //All of these are key = { value }
		$fortree .= $this->addLine($key.' = {', 2);
		if(gettype($value) == 'array'){
			$v = '';
			foreach($value as $i){
				$v .= htmlspecialchars_decode($i); //Ensure any html encoding is converted accordingly
			}
			$value = $v;
		}
		$lines = explode("\n", $value);
		foreach($lines as $line){
			$fortree .= $this->addLine(htmlspecialchars_decode($line), 3); //Ensure new lines are actually added as new lines (some people use SHIFT+Enter others use just enter to change lines)
		}
		$fortree .= $this->addLine('}', 2);
	break;
}

If you're not really looking to need to store stuff in databases and whatnot, and don't mind potentially saving a lot of data to your browser's storage (not a good idea, but the option is there) then you could take do what I originally did when making the focus tool just for me to use. In Javascript (using jQuery, not required - but you get the idea)

if(localStorage.getItem('nationalfocus')) {
	var nationalfocusitems = localStorage.getItem('nationalfocus');
	$('#display').html(nationalfocusitems);
}
$("#savetostorage").click(function(){
	localStorage.setItem('nationalfocus', $('#display').html());
});

And then all you need to worry about is exporting the content.

Let me know when you have something to show, I'd love to see what you come up with! And if you need any help with anything, drop me a message on Discord 🙂

For now, I am using localStorage though I will use MySQL when I finish with the basics because that is the DB system I am used to so far. Currently, I have all the focus tree data as one JSON localStorage (alongside two other small pieces of data) including the X, Y, GFX, name, etc. GFX will definetly benifit from moving towards a database for me. I will be sure to send you a showcase of what I do when I work on it a bit further!