constructor(parent,x,y,w,h,renderer,onclick,showing){

if(parent instanceof UI){

this.parent = parent;

this.parent.children.push(this);

}

this.relX = x;

this.relY = y;

this.width = w;

this.height = h;

if(renderer instanceof Function) this.renderFunc = renderer;

if(renderer instanceof Array){

let size = renderer[0];

let charLimit = renderer[1];

let enterFunc = renderer[2];

this.isInput = true;

this.value = '';

this.clickFunc = function(){

textInput.value = this.value;

if(charLimit) textInput.maxLength = charLimit;

else textInput.removeAttribute('maxlength');

textInput.focus();

UI.focusedInput = this;

if(onclick instanceof Function) onclick.call(this,UI.focusedInput===this);

};

this.textCanvas = createBuffer(this.width,this.height);

this.renderFunc = function(s){

s.input(size);

};

if(enterFunc) this.enterFunc = enterFunc;

}else{

this.clickFunc = onclick;

this.isInput = false;

}

this.children = [];

this.showing = showing===undefined ? true : showing;

if(!this.parent) UI.elements.push(this);

}

getX(){

if(this.parent) return this.parent.getX() + this.relX;

return this.relX;

}

getY(){

if(this.parent) return this.parent.getY() + this.relY;

return this.relY;

}

render(){

if(this.showing){

translate(this.relX,this.relY);

if(this.renderFunc) this.renderFunc(this.schematics());

if(this.children.length===1){

this.children[0].render();

}else{

for(let c of this.children){

push();

c.render();

pop();

}

}

}

}

schematics(){

let s = {};

s.fullRect = ()=>{

rect(0,0,this.width,this.height);

};

s.button = (txt,box,size,grey)=>{

noStroke();

if(box){

fill(COLORS.UI.buttonBox);

s.fullRect();

}

if(this.isHovered()){

fill(COLORS.UI.buttonHover);

s.fullRect();

}

if(grey) fill(COLORS.UI.greyText);

else fill(COLORS.UI.text);

textAlign(CENTER,CENTER);

textSize(size || 18);

text(txt,this.width/2,this.height/2);

};

s.input = (size)=>{

fill(COLORS.UI.input);

if(UI.focusedInput===this) stroke(COLORS.UI.text);

else{

if(this.isHovered()){

noStroke();

s.fullRect();

fill(COLORS.UI.buttonHover);

}

stroke(COLORS.UI.nonSelectedInput);

}

s.fullRect();

let c = this.textCanvas;

c.clear();

c.noStroke();

c.fill(COLORS.UI.text);

c.textSize(size || 18);

let t = UI.focusedInput===this ? textInput.value : this.value;

let xAnchor;

if(UI.focusedInput===this){

c.textAlign(LEFT,CENTER);

let caret1X = c.textWidth(t.slice(0,textInput.selectionStart));

let caret2X = c.textWidth(t.slice(0,textInput.selectionEnd));

if(caret2X>this.width-5) xAnchor = this.width-5-caret2X;

else xAnchor = 5;

caret1X += xAnchor;

caret2X += xAnchor;

c.text(t,xAnchor,this.height/2);

if(textInput.selectionStart===textInput.selectionEnd){

c.stroke(COLORS.UI.text);

c.noFill();

if(millis()%1000<500) c.line(caret1X,this.height/8,caret1X,7*this.height/8);

}else{

c.rect(caret1X,this.height/8,caret2X-caret1X,3*this.height/4);

c.fill(COLORS.UI.input);

c.text(t.slice(textInput.selectionStart,textInput.selectionEnd),caret1X,this.height/2);

}

}else{

if(c.textWidth(t)>this.width-5){

c.textAlign(RIGHT,CENTER);

xAnchor = this.width-5;

}else{

c.textAlign(LEFT,CENTER);

xAnchor = 5;

}

c.text(t,xAnchor,this.height/2);

}

image(c,0,0);

};

return s;

}

setBox(x,y,w,h){ // Should be used inside of the renderer function

if(x===undefined) x = this.relX;

if(y===undefined) y = this.relY;

if(w===undefined) w = this.width;

if(h===undefined) h = this.height;

translate(x-this.relX,y-this.relY);

this.relX = x;

this.relY = y;

this.width = w;

this.height = h;

}

append(chain,...opts){

if(chain!==false && this.children.length>chain) return this.children[chain].append(0,...opts);

return new UI(this,...opts);

}

checkMouseOver(){

if(this.showing){

if(this.children.length>0){

let cmo = null;

for(let i=this.children.length-1;i>=0;i--){

cmo = this.children[i].checkMouseOver();

if(cmo) return cmo;

}

}

let left = this.getX();

let right = left + this.width;

let top = this.getY();

let bottom = top + this.height;

if(this.clickFunc && getMouseX()>=left && getMouseX()<right && getMouseY()>=top && getMouseY()<bottom) return this;

}

return null;

}

isHovered(){

return UI.mouseOver===this; // onclick parameter in constructor is required in order for hovering to work; use any truthy non-function value if clicking the UI does nothing

}

clicked(){

if(this.clickFunc instanceof Function) this.clickFunc();

}

show(){

this.showing = true;

}

hide(){

this.showing = false;

}

toggleShow(){

this.showing = !this.showing;

}

remove(){

let mouseIsHere = false;

if(this.checkMouseOver()){

UI.mouseOver = undefined;

mouseIsHere = true;

}

if(this.parent){

for(let i=this.parent.children.length-1;i>=0;i--){

if(this.parent.children[i]===this){

this.parent.children.splice(i,1);

break;

}

}

}else{

for(let i=UI.elements.length-1;i>=0;i--){

if(UI.elements[i]===this){

UI.elements.splice(i,1);

break;

}

}

}

if(mouseIsHere) UI.updateMouseOver();

}

dropChildren(){

let mouseIsHere = false;

if(this.checkMouseOver()){

UI.mouseOver = undefined;

mouseIsHere = true;

}

this.children = [];

if(mouseIsHere) UI.updateMouseOver();

}

for(let u of UI.elements){

push();

u.render();

pop();

}

for(let i=UI.elements.length-1;i>=0;i--){

let u = UI.elements[i];

let mo = u.checkMouseOver();

if(mo){

UI.mouseOver = mo;

return mo;

}

}

UI.mouseOver = null;

return null;

UI.updateMouseOver();

if(UI.mouseOver){

UI.mouseOver.clicked();

return true;

}

return false;

// hoist!

let yearselbox;

// "scene" wrappers

mainMenu = new UI(null,0,0,WIDTH,HEIGHT);

basinCreationMenu = new UI(null,0,0,WIDTH,HEIGHT,undefined,function(){

yearselbox.enterFunc();

},false);

loadMenu = new UI(null,0,0,WIDTH,HEIGHT,undefined,undefined,false);

settingsMenu = new UI(null,0,0,WIDTH,HEIGHT,undefined,undefined,false);

let desigSystemEditor = new UI(null,0,0,WIDTH,HEIGHT,undefined,undefined,false);

primaryWrapper = new UI(null,0,0,WIDTH,HEIGHT,function(s){

if(UI.viewBasin instanceof Basin){

let basin = UI.viewBasin;

if(basin.viewingPresent()) for(let S of basin.activeSystems) S.fetchStorm().renderIcon();

else{

let seas = basin.fetchSeason(viewTick,true);

if(seas) for(let S of seas.forSystems(true)) S.renderIcon();

}

if(!land.drawn){

renderToDo = land.draw();

return;

}

let drawMagGlass = ()=>{

if(simSettings.showMagGlass){

let magMeta = buffers.get(magnifyingGlass);

image(

magnifyingGlass,

getMouseX()-magMeta.baseWidth/2,

getMouseY()-magMeta.baseHeight/2,

magMeta.baseWidth,

magMeta.baseHeight

);

}

};

drawBuffer(outBasinBuffer);

if(basin.env.displaying>=0 && basin.env.layerIsOceanic){

drawBuffer(envLayer);

drawMagGlass();

}

drawBuffer(landBuffer);

if(simSettings.snowLayers){

if(land.snowDrawn) drawBuffer(snow[floor(map(seasonalSine(viewTick,SNOW_SEASON_OFFSET),-1,1,0,simSettings.snowLayers*10))]);

else renderToDo = land.drawSnow();

}

if(simSettings.useShadows){

if(land.shaderDrawn) drawBuffer(landShadows);

else renderToDo = land.drawShader();

}

if(basin.env.displaying>=0 && !basin.env.layerIsOceanic){

drawBuffer(envLayer);

drawMagGlass();

if(!basin.env.layerIsVector) drawBuffer(coastLine);

}

// let sub = land.getSubBasin(getMouseX(),getMouseY());

// if(basin.subBasins[sub] instanceof SubBasin && basin.subBasins[sub].mapOutline) drawBuffer(basin.subBasins[sub].mapOutline); // test

drawBuffer(tracks);

drawBuffer(forecastTracks);

drawBuffer(stormIcons);

}

},function(){

helpBox.hide();

sideMenu.hide();

seedBox.hide();

if(UI.viewBasin instanceof Basin){

let basin = UI.viewBasin;

if(basin.godMode && keyIsPressed && basin.viewingPresent()) {

if(['l','x','d','D','s','S','1','2','3','4','5','6','7','8','9','0','y'].includes(key))

basin.spawnArchetype(key,getMouseX(),getMouseY());

// let g = {x: getMouseX(), y: getMouseY()};

// if(key === "l" || key === "L"){

// g.sType = "l";

// }else if(key === "d"){

// g.sType = "d";

// }else if(key === "D"){

// g.sType = "sd";

// }else if(key === "s"){

// g.sType = "s";

// }else if(key === "S"){

// g.sType = "ss";

// }else if(key === "1"){

// g.sType = "1";

// }else if(key === "2"){

// g.sType = "2";

// }else if(key === "3"){

// g.sType = "3";

// }else if(key === "4"){

// g.sType = "4";

// }else if(key === "5"){

// g.sType = "5";

// }else if(key === "6"){

// g.sType = "6";

// }else if(key === "7"){

// g.sType = "7";

// }else if(key === "8"){

// g.sType = "8";

// }else if(key === "9"){

// g.sType = "9";

// }else if(key === "0"){

// g.sType = "10";

// }else if(key === "y" || key === "Y"){

// g.sType = "y";

// }else if(key === "x" || key === "X"){

// g.sType = "x";

// }else return;

// basin.spawn(false,g);

}else if(basin.viewingPresent()){

let mVector = createVector(getMouseX(),getMouseY());

for(let i=basin.activeSystems.length-1;i>=0;i--){

let s = basin.activeSystems[i].fetchStorm();

let p = s.getStormDataByTick(viewTick,true).pos;

if(p.dist(mVector)<DIAMETER){

selectStorm(s);

refreshTracks(true);

return;

}

}

selectStorm();

refreshTracks(true);

}else{

let vSeason = basin.fetchSeason(viewTick,true);

if(vSeason){

let mVector = createVector(getMouseX(),getMouseY());

for(let i=vSeason.systems.length-1;i>=0;i--){

let s = vSeason.fetchSystemAtIndex(i);

if(s && s.aliveAt(viewTick)){

let p = s.getStormDataByTick(viewTick).pos;

if(p.dist(mVector)<DIAMETER){

selectStorm(s);

refreshTracks(true);

return;

}

}

}

selectStorm();

refreshTracks(true);

}

}

}

},false);

areYouSure = new UI(null,0,0,WIDTH,HEIGHT,function(s){

fill(COLORS.UI.box);

noStroke();

s.fullRect();

},true,false);

// main menu

mainMenu.append(false,WIDTH/2,HEIGHT/4,0,0,function(s){ // title text

fill(COLORS.UI.text);

noStroke();

textAlign(CENTER,CENTER);

textSize(36);

text(TITLE,0,0);

textSize(18);

textStyle(ITALIC);

text("Simulate your own monster storms!",0,40);

});

mainMenu.append(false,WIDTH/2-100,HEIGHT/2-20,200,40,function(s){ // "New Basin" button

s.button('New Basin',true,24);

},function(){

mainMenu.hide();

basinCreationMenu.show();

}).append(false,0,60,200,40,function(s){ // load button

s.button('Load Basin',true,24);

},function(){

mainMenu.hide();

loadMenu.show();

loadMenu.refresh();

}).append(false,0,60,200,40,function(s){ // settings menu button

s.button('Settings',true,24);

},function(){

mainMenu.hide();

settingsMenu.show();

});

// basin creation menu

basinCreationMenu.append(false,WIDTH/2,HEIGHT/16,0,0,function(s){ // menu title text

fill(COLORS.UI.text);

noStroke();

textAlign(CENTER,CENTER);

textSize(36);

text("New Basin Settings",0,0);

});

let basinCreationMenuButtonSpacing = 36;

let basinCreationMenuButtonHeights = 28;

let basinCreationMenuButtonWidths = 400;

let hemsel = basinCreationMenu.append(false,WIDTH/2-basinCreationMenuButtonWidths/2,HEIGHT/8,basinCreationMenuButtonWidths,basinCreationMenuButtonHeights,function(s){ // hemisphere selector

let hem = "Random";

if(newBasinSettings.hem===1) hem = "Northern";

if(newBasinSettings.hem===2) hem = "Southern";

s.button('Hemisphere: '+hem,true);

},function(){

yearselbox.enterFunc();

if(newBasinSettings.hem===undefined) newBasinSettings.hem = 1;

else{

newBasinSettings.hem++;

newBasinSettings.hem %= 3;

}

});

let yearsel = hemsel.append(false,0,basinCreationMenuButtonSpacing,0,basinCreationMenuButtonHeights,function(s){ // Year selector

textAlign(LEFT,CENTER);

text("Starting year: ",0,basinCreationMenuButtonHeights/2);

});

yearsel.append(false,110,0,basinCreationMenuButtonWidths-110,basinCreationMenuButtonHeights,function(s){

let yName;

if(newBasinSettings.year===undefined) yName = "Current year";

else{

let y = newBasinSettings.year;

let h;

if(newBasinSettings.hem===1) h = false;

if(newBasinSettings.hem===2) h = true;

if(h===undefined){

yName = seasonName(y,false) + " or " + seasonName(y,true);

}else yName = seasonName(y,h);

}

textAlign(LEFT,CENTER);

let fontSize = 18;

textSize(fontSize);

while(textWidth(yName)>this.width-10 && fontSize>8){

fontSize--;

textSize(fontSize);

}

s.button(yName,true,fontSize);

},function(){

yearselbox.toggleShow();

if(yearselbox.showing) yearselbox.clicked();

});

yearselbox = yearsel.append(false,110,0,basinCreationMenuButtonWidths-110,basinCreationMenuButtonHeights,[18,16,function(){

if(yearselbox.showing){

let v = yearselbox.value;

let m = v.match(/^\s*(\d+)(\s+B\.?C\.?(?:E\.?)?)?(?:\s*-\s*(\d+))?(?:\s+(?:(B\.?C\.?(?:E\.?)?)|A\.?D\.?|C\.?E\.?))?\s*$/i);

if(m){

let bce = m[2] || m[4];

let bce2 = m[4];

let year1 = parseInt(m[1]);

if(bce) year1 = 1-year1;

let year2;

if(m[3]){

year2 = parseInt(m[3]);

if(bce2) year2 = 1-year2;

if(year1+1===year2 || (year1+1)%100===year2) newBasinSettings.year = year1+1;

else newBasinSettings.year = undefined;

}else newBasinSettings.year = year1;

}else if(v!=='') newBasinSettings.year = undefined;

if(newBasinSettings.year && !moment.utc([newBasinSettings.year,0,1]).isValid()) newBasinSettings.year = undefined;

yearselbox.value = '';

yearselbox.hide();

}

}],undefined,false);

let gmodesel = yearsel.append(false,0,basinCreationMenuButtonSpacing,basinCreationMenuButtonWidths,basinCreationMenuButtonHeights,function(s){ // Simulation mode selector

let mode = newBasinSettings.actMode || 0;

mode = SIMULATION_MODES[mode];

s.button('Simulation Mode: '+mode,true);

},function(){

yearselbox.enterFunc();

if(newBasinSettings.actMode===undefined) newBasinSettings.actMode = 0;

newBasinSettings.actMode++;

newBasinSettings.actMode %= SIMULATION_MODES.length;

}).append(false,0,basinCreationMenuButtonSpacing,basinCreationMenuButtonWidths,basinCreationMenuButtonHeights,function(s){ // Scale selector

let scale = newBasinSettings.scale || 0;

scale = Scale.presetScales[scale].displayName;

s.button('Scale: '+scale,true);

},function(){

yearselbox.enterFunc();

if(newBasinSettings.scale===undefined) newBasinSettings.scale = 0;

newBasinSettings.scale++;

newBasinSettings.scale %= Scale.presetScales.length;

newBasinSettings.scaleFlavor = 0;

}).append(false,0,basinCreationMenuButtonSpacing,basinCreationMenuButtonWidths,basinCreationMenuButtonHeights,function(s){ // Scale flavor selector

let scale = newBasinSettings.scale || 0;

scale = Scale.presetScales[scale];

let flavor = newBasinSettings.scaleFlavor || 0;

let grey = scale.flavorDisplayNames.length<2;

s.button('Scale Flavor: '+(scale.flavorDisplayNames[flavor] || 'N/A'),true,18,grey);

},function(){

yearselbox.enterFunc();

let scale = newBasinSettings.scale || 0;

scale = Scale.presetScales[scale];

if(scale.flavorDisplayNames.length<2) return;

if(newBasinSettings.scaleFlavor===undefined) newBasinSettings.scaleFlavor = 0;

newBasinSettings.scaleFlavor++;

newBasinSettings.scaleFlavor %= scale.flavorDisplayNames.length;

}).append(false,0,basinCreationMenuButtonSpacing,basinCreationMenuButtonWidths,basinCreationMenuButtonHeights,function(s){ // Designations selector

let ds = newBasinSettings.designations || 0;

ds = DesignationSystem.presetDesignationSystems[ds].displayName;

s.button('Designations: '+ds,true);

},function(){

yearselbox.enterFunc();

if(newBasinSettings.designations===undefined) newBasinSettings.designations = 0;

newBasinSettings.designations++;

newBasinSettings.designations %= DesignationSystem.presetDesignationSystems.length;

}).append(false,0,basinCreationMenuButtonSpacing,basinCreationMenuButtonWidths,basinCreationMenuButtonHeights,function(s){ // Map type Selector

let maptype = ["Two Continents","East Continent","West Continent","Island Ocean","Central Continent","Central Inland Sea","Atlantic",'Eastern Pacific','Western Pacific','Northern Indian Ocean','Australian Region','South Pacific','South-West Indian Ocean','South Atlantic','Mediterranean','World'][newBasinSettings.mapType || 0];

s.button('Map Type: '+maptype,true);

},function(){

yearselbox.enterFunc();

if(newBasinSettings.mapType===undefined) newBasinSettings.mapType = 0;

newBasinSettings.mapType++;

newBasinSettings.mapType %= MAP_TYPES.length;

}).append(false,0,basinCreationMenuButtonSpacing,basinCreationMenuButtonWidths,basinCreationMenuButtonHeights,function(s){ // God mode Selector

let gMode = newBasinSettings.godMode ? "Enabled" : "Disabled";

s.button('God Mode: '+gMode,true);

},function(){

yearselbox.enterFunc();

newBasinSettings.godMode = !newBasinSettings.godMode;

});

let seedsel = gmodesel.append(false,0,basinCreationMenuButtonSpacing,0,basinCreationMenuButtonHeights,function(s){

textAlign(LEFT,CENTER);

text('Seed:',0,basinCreationMenuButtonHeights/2);

}).append(false,50,0,basinCreationMenuButtonWidths-50,basinCreationMenuButtonHeights,[18,16],function(){

yearselbox.enterFunc();

});

basinCreationMenu.append(false,WIDTH/2-basinCreationMenuButtonWidths/2,7*HEIGHT/8-20,basinCreationMenuButtonWidths,basinCreationMenuButtonHeights,function(s){ // "Start" button

s.button("Start",true,20);

},function(){

yearselbox.enterFunc();

let seed = seedsel.value;

if(/^-?\d+$/g.test(seed)) newBasinSettings.seed = parseInt(seed);

else newBasinSettings.seed = hashCode(seed);

seedsel.value = '';

let opts = {};

if(newBasinSettings.hem===1) opts.hem = false;

else if(newBasinSettings.hem===2) opts.hem = true;

else opts.hem = random()<0.5;

opts.year = opts.hem ? SHEM_DEFAULT_YEAR : NHEM_DEFAULT_YEAR;

if(newBasinSettings.year!==undefined) opts.year = newBasinSettings.year;

for(let o of [

'seed',

'actMode',

'designations',

'mapType',

'godMode',

'scale',

'scaleFlavor'

]) opts[o] = newBasinSettings[o];

let basin = new Basin(false,opts);

newBasinSettings = {};

basin.initialized.then(()=>{

basin.mount();

});

basinCreationMenu.hide();

}).append(false,0,basinCreationMenuButtonSpacing,basinCreationMenuButtonWidths,basinCreationMenuButtonHeights,function(s){ // "Cancel" button

s.button("Cancel",true,20);

},function(){

yearselbox.value = '';

yearselbox.hide();

basinCreationMenu.hide();

mainMenu.show();

});

// load menu

loadMenu.loadables = []; // cache that stores a list of saved basins and if they are loadable

loadMenu.page = 0;

loadMenu.append(false,WIDTH/2,HEIGHT/8,0,0,function(s){ // menu title text

fill(COLORS.UI.text);

noStroke();

textAlign(CENTER,CENTER);

textSize(36);

text("Load Basin",0,0);

});

loadMenu.refresh = function(){

loadMenu.loadables = [];

waitForAsyncProcess(()=>{

return db.transaction('r',db.saves,()=>{

let col = db.saves.orderBy('format');

let saveNames = col.primaryKeys();

let formats = col.keys();

return Promise.all([saveNames,formats]);

}).then(res=>{

let saveNames = res[0];

let formats = res[1];

for(let i=0;i<saveNames.length;i++){

loadMenu.loadables.push({

saveName: saveNames[i],

format: formats[i]

});

}

loadMenu.loadables.sort((a,b)=>{

a = a.saveName;

b = b.saveName;

if(a===AUTOSAVE_SAVE_NAME) return -1;

if(b===AUTOSAVE_SAVE_NAME) return 1;

return a>b ? 1 : -1;

});

});

},'Fetching Saved Basins...').catch(e=>{

console.error(e);

});

};

let loadbuttonrender = function(s){

let b = loadMenu.loadables[loadMenu.page*LOAD_MENU_BUTTONS_PER_PAGE+this.buttonNum];

let label;

let loadable;

if(!b){

label = '--Empty--';

loadable = false;

}else{

label = b.saveName;

if(b.format < EARLIEST_COMPATIBLE_FORMAT || b.format > SAVE_FORMAT){

label += " [Incompatible]";

loadable = false;

}else loadable = true;

}

let fontSize = 18;

textSize(fontSize);

while(textWidth(label)>this.width-10 && fontSize>8){

fontSize--;

textSize(fontSize);

}

s.button(label,true,fontSize,!loadable);

};

let loadbuttonclick = function(){

let b = loadMenu.loadables[loadMenu.page*LOAD_MENU_BUTTONS_PER_PAGE+this.buttonNum];

if(b && b.format >= EARLIEST_COMPATIBLE_FORMAT && b.format <= SAVE_FORMAT){

let basin = new Basin(b.saveName);

basin.initialized.then(()=>{

basin.mount();

});

loadMenu.hide();

}

};

let loadbuttons = [];

for(let i=0;i<LOAD_MENU_BUTTONS_PER_PAGE;i++){

let x = i===0 ? WIDTH/2-150 : 0;

let y = i===0 ? HEIGHT/4 : 40;

loadbuttons[i] = loadMenu.append(1,x,y,300,30,loadbuttonrender,loadbuttonclick);

loadbuttons[i].buttonNum = i;

}

loadMenu.append(1,0,40,300,30,function(s){ // "Cancel" button

s.button("Cancel",true,20);

},function(){

loadMenu.hide();

mainMenu.show();

});

loadMenu.append(false,WIDTH/2-75,HEIGHT/4-40,30,30,function(s){ // prev page

s.button('',true,18,loadMenu.page<1);

triangle(5,15,25,5,25,25);

},function(){

if(loadMenu.page>0) loadMenu.page--;

}).append(false,120,0,30,30,function(s){ // next page

let grey = loadMenu.page>=ceil(loadMenu.loadables.length/LOAD_MENU_BUTTONS_PER_PAGE)-1;

s.button('',true,18,grey);

triangle(5,5,25,15,5,25);

},function(){

if(loadMenu.page<ceil(loadMenu.loadables.length/LOAD_MENU_BUTTONS_PER_PAGE)-1) loadMenu.page++;

});

let delbuttonrender = function(s){

let b = loadMenu.loadables[loadMenu.page*LOAD_MENU_BUTTONS_PER_PAGE+this.parent.buttonNum];

s.button("Del",true,18,!b);

};

let delbuttonclick = function(){

let b = loadMenu.loadables[loadMenu.page*LOAD_MENU_BUTTONS_PER_PAGE+this.parent.buttonNum];

if(b){

areYouSure.dialog(()=>{

Basin.deleteSave(b.saveName,()=>{

loadMenu.refresh();

});

},'Delete "'+b.saveName+'"?');

}

};

for(let i=0;i<LOAD_MENU_BUTTONS_PER_PAGE;i++) loadbuttons[i].append(false,315,0,40,30,delbuttonrender,delbuttonclick);

// Settings Menu

settingsMenu.append(false,WIDTH/2,HEIGHT/8,0,0,function(s){ // menu title text

fill(COLORS.UI.text);

noStroke();

textAlign(CENTER,CENTER);

textSize(36);

text("Settings",0,0);

});

settingsMenu.append(false, WIDTH / 2 - 150, 3 * HEIGHT / 16, 300, 30, function(s){ // storm intensity indicator

let b = simSettings.showStrength ? "Enabled" : "Disabled";

s.button("Intensity Indicator: "+b,true);

},function(){

simSettings.setShowStrength("toggle");

}).append(false,0,37,300,30,function(s){ // autosaving

let b = simSettings.doAutosave ? "Enabled" : "Disabled";

s.button("Autosaving: "+b,true);

},function(){

simSettings.setDoAutosave("toggle");

}).append(false,0,37,300,30,function(s){ // track mode

let m = ["Active TC Tracks","Full Active Tracks","Season Summary","No Tracks"][simSettings.trackMode];

s.button("Track Mode: "+m,true);

},function(){

simSettings.setTrackMode("incmod",4);

refreshTracks(true);

}).append(false,0,37,300,30,function(s){ // snow

let b = simSettings.snowLayers ? (simSettings.snowLayers*10) + " layers" : "Disabled";

s.button("Snow: "+b,true);

},function(){

simSettings.setSnowLayers("incmod",floor(MAX_SNOW_LAYERS/10)+1);

if(land) land.clearSnow();

}).append(false,0,37,300,30,function(s){ // shadows (NOT a shader O~O)

let b = simSettings.useShadows ? "Enabled" : "Disabled";

s.button("Land Shadows: "+b,true);

},function(){

simSettings.setUseShadows("toggle");

}).append(false,0,37,300,30,function(s){ // magnifying glass

let b = simSettings.showMagGlass ? "Enabled" : "Disabled";

s.button("Magnifying Glass: "+b,true);

},function(){

simSettings.setShowMagGlass("toggle");

if(UI.viewBasin) UI.viewBasin.env.updateMagGlass();

}).append(false,0,37,300,30,function(s){ // smooth land color

let b = simSettings.smoothLandColor ? "Enabled" : "Disabled";

s.button("Smooth Land Color: "+b,true);

},function(){

simSettings.setSmoothLandColor("toggle");

if(land){

// landBuffer.clear();

land.drawn = false;

}

}).append(false,0,37,300,30,function(s){ // speed unit

let u = ['kts', 'mph', 'km/h'][simSettings.speedUnit];

s.button("Windspeed Unit: " + u, true);

},function(){

simSettings.setSpeedUnit("incmod", 3);

}).append(false,0,37,300,30,function(s){ // color scheme

let n = COLOR_SCHEMES[simSettings.colorScheme].name;

s.button("Color Scheme: " + n, true);

},function(){

simSettings.setColorScheme("incmod", COLOR_SCHEMES.length);

refreshTracks(true);

});

settingsMenu.append(false,WIDTH/2-150,7*HEIGHT/8-20,300,30,function(s){ // "Back" button

s.button("Back",true,20);

},function(){

settingsMenu.hide();

if(UI.viewBasin instanceof Basin) primaryWrapper.show();

else mainMenu.show();

});

// Are you sure dialog

areYouSure.append(false,WIDTH/2,HEIGHT/4,0,0,function(s){ // dialog text

fill(COLORS.UI.text);

noStroke();

textAlign(CENTER,CENTER);

textSize(36);

text("Are You Sure?",0,0);

if(areYouSure.desc){

textSize(24);

text(areYouSure.desc,0,50);

}

});

areYouSure.append(false,WIDTH/2-108,HEIGHT/4+100,100,30,function(s){ // "Yes" button

s.button("Yes",true,20);

},function(){

if(areYouSure.action){

areYouSure.action();

areYouSure.action = undefined;

}

else console.error("No action tied to areYouSure dialog");

areYouSure.hide();

}).append(false,116,0,100,30,function(s){ // "No" button

s.button("No",true,20);

},function(){

areYouSure.hide();

});

areYouSure.dialog = function(action,desc){

if(action instanceof Function){

areYouSure.action = action;

if(typeof desc === "string") areYouSure.desc = desc;

else areYouSure.desc = undefined;

areYouSure.show();

}

};

// designation system editor

const desig_editor_definition = (()=>{

const section_spacing = 36;

const section_heights = 28;

const section_width = 400;

const name_sections = 6;

let editing_sub_basin;

let desig_system;

let name_list_num = 0;

let name_list_page = 0;

let list_lists_mode = true;

let aux_list = false;

let prefix_box;

let suffix_box;

let num_affix_section;

let name_editor;

let name_edit_box;

let name_edit_index = 0;

let adding_name = false;

const refresh_num_section = ()=>{

if(desig_system instanceof DesignationSystem){

prefix_box.value = desig_system.numbering.prefix || '';

suffix_box.value = desig_system.numbering.suffix || '';

}

if(desig_system && desig_system.numbering.enabled)

num_affix_section.show();

else

num_affix_section.hide();

};

const refresh_name_section = ()=>{

name_list_page = 0;

};

const refresh_desig_editor = ()=>{

if(editing_sub_basin === undefined)

editing_sub_basin = UI.viewBasin.mainSubBasin;

let sb = UI.viewBasin.subBasins[editing_sub_basin];

if(sb && sb.designationSystem)

desig_system = sb.designationSystem;

name_list_num = 0;

list_lists_mode = true;

aux_list = false;

refresh_num_section();

refresh_name_section();

};

const list_array = ()=>{

if(desig_system instanceof DesignationSystem){

if(aux_list)

return desig_system.naming.auxiliaryLists;

else

return desig_system.naming.mainLists;

}

};

const get_list_from_index = (i)=>{

let list_arr = list_array();

if(list_arr)

return list_arr[i];

};

const get_list = ()=>{

return get_list_from_index(name_list_num);

};

const name_at = (i)=>{

let txt;

let list = get_list();

if(list && list[i])

txt = list[i];

return txt;

};

const invoke_name_editor = (i,is_new_name)=>{

let list = get_list();

if(list){

name_edit_index = i;

if(is_new_name)

name_edit_box.value = '';

else

name_edit_box.value = list[i];

adding_name = is_new_name;

name_editor.show();

name_edit_box.clicked();

}

};

// title text

desigSystemEditor.append(false,WIDTH/2,HEIGHT/16,0,0,s=>{

fill(COLORS.UI.text);

noStroke();

textAlign(CENTER,CENTER);

textSize(36);

text("Designations Editor",0,0);

});

// sub-basin selector

let sb_selector = desigSystemEditor.append(false,WIDTH/2-section_width/2,HEIGHT/8,section_width,0,s=>{

let txt = 'Editing sub-basin: ';

let sb = UI.viewBasin.subBasins[editing_sub_basin];

if(sb instanceof SubBasin)

txt += sb.getDisplayName();

textAlign(CENTER,CENTER);

textSize(18);

text(txt,section_width/2,section_heights/2);

});

sb_selector.append(false,0,0,30,10,s=>{ // next sub-basin button

s.button('',true);

triangle(15,2,23,8,7,8);

},()=>{

do{

editing_sub_basin++;

if(editing_sub_basin > 255)

editing_sub_basin = 0;

}while(!(UI.viewBasin.subBasins[editing_sub_basin] instanceof SubBasin && UI.viewBasin.subBasins[editing_sub_basin].designationSystem));

refresh_desig_editor();

}).append(false,0,18,30,10,s=>{ // prev sub-basin button

s.button('',true);

triangle(15,8,23,2,7,2);

},()=>{

do{

editing_sub_basin--;

if(editing_sub_basin < 0)

editing_sub_basin = 255;

}while(!(UI.viewBasin.subBasins[editing_sub_basin] instanceof SubBasin && UI.viewBasin.subBasins[editing_sub_basin].designationSystem));

refresh_desig_editor();

});

// numbering enabled/disabled button

let num_button = sb_selector.append(false,0,section_spacing,section_width,section_heights,s=>{

let txt = 'Numbering: ';

let grey = false;

if(desig_system instanceof DesignationSystem){