mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
resource bonus UI basic
This commit is contained in:
Azgaar
parent
b59e69aa7c
commit
0e2a80256a
4 changed files with 186 additions and 147 deletions
10
.prettierrc.json
Normal file
10
.prettierrc.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"bracketSpacing": false,
|
||||
"semi": true,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"printWidth": 220,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
|
|
@ -3006,10 +3006,11 @@
|
|||
<div id="resourcesHeader" class="header">
|
||||
<div style="left:2.8em" data-tip="Click to sort by resource name" class="sortable alphabetically" data-sortby="name">Resource </div>
|
||||
<div style="left:8.8em" data-tip="Click to sort by resource category" class="sortable alphabetically" data-sortby="category">Category </div>
|
||||
<div style="left:14em" data-tip="Click to sort spread model" class="sortable alphabetically" data-sortby="model">Spread model </div>
|
||||
<div style="left:21em" data-tip="Click to sort by resource basic value" class="sortable" data-sortby="value">Value </div>
|
||||
<div style="left:24.2em" data-tip="Click to sort by generation chance" class="sortable" data-sortby="chance">Chance </div>
|
||||
<div style="left:29em" data-tip="Click to sort by number of cells" class="sortable icon-sort-number-down" data-sortby="cells">Cells </div>
|
||||
<div style="left:14em" data-tip="Click to sort by resource basic value" class="sortable" data-sortby="value">Value </div>
|
||||
<div style="left:21em" data-tip="Click to sort bonuses" class="sortable alphabetically" data-sortby="bonuses">Bonuses </div>
|
||||
<div style="left:26em" data-tip="Click to sort spread model" class="sortable alphabetically" data-sortby="model">Spread model </div>
|
||||
<div style="left:28em" data-tip="Click to sort by generation chance" class="sortable" data-sortby="chance">Chance </div>
|
||||
<div style="left:33em" data-tip="Click to sort by number of cells" class="sortable icon-sort-number-down" data-sortby="cells">Cells </div>
|
||||
</div>
|
||||
<div id="resourcesBody" class="table" data-type="absolute"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
(function (global, factory) {
|
||||
typeof exports === "object" && typeof module !== "undefined" ? (module.exports = factory()) : typeof define === "function" && define.amd ? define(factory) : (global.Resources = factory());
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? (module.exports = factory()) : typeof define === 'function' && define.amd ? define(factory) : (global.Resources = factory());
|
||||
})(this, function () {
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
// TO-DO
|
||||
// apply logic on heightmap edit
|
||||
|
|
@ -15,46 +15,46 @@
|
|||
const getDefault = function () {
|
||||
// model: cells eligibility function; chance: chance to get rosource in model-eligible cell
|
||||
return [
|
||||
{i: 1, name: "Wood", category: "Construction", icon: "resource-wood", color: "#966F33", value: 5, chance: 10, model: "Any_forest", bonus: {fleet: 2, defence: 1}},
|
||||
{i: 2, name: "Stone", category: "Construction", icon: "resource-stone", color: "#979EA2", value: 4, chance: 7, model: "Hills", bonus: {prestige: 1, defence: 2}},
|
||||
{i: 3, name: "Marble", category: "Construction", icon: "resource-marble", color: "#d6d0bf", value: 15, chance: 1, model: "Mountains", bonus: {prestige: 2}},
|
||||
{i: 4, name: "Iron", category: "Ore", icon: "resource-iron", color: "#5D686E", value: 8, chance: 8, model: "Mountains_and_wetlands", bonus: {artillery: 1, infantry: 1, defence: 1}},
|
||||
{i: 5, name: "Copper", category: "Ore", icon: "resource-copper", color: "#b87333", value: 10, chance: 3, model: "Mountains", bonus: {artillery: 2, defence: 1, prestige: 1}},
|
||||
{i: 6, name: "Lead", category: "Ore", icon: "resource-lead", color: "#454343", value: 8, chance: 3, model: "Mountains", bonus: {artillery: 1, defence: 1}},
|
||||
{i: 7, name: "Silver", category: "Ore", icon: "resource-silver", color: "#C0C0C0", value: 15, chance: 3, model: "Mountains", bonus: {prestige: 2}},
|
||||
{i: 8, name: "Gold", category: "Ore", icon: "resource-gold", color: "#d4af37", value: 30, chance: 1, model: "Headwaters", bonus: {prestige: 3}},
|
||||
{i: 9, name: "Grain", category: "Food", icon: "resource-grain", color: "#F5DEB3", value: 1, chance: 15, model: "Biome_habitability", bonus: {population: 4}},
|
||||
{i: 10, name: "Cattle", category: "Food", icon: "resource-cattle", color: "#56b000", value: 2, chance: 10, model: "Pastures_and_temperate_forest", bonus: {population: 2}},
|
||||
{i: 11, name: "Fish", category: "Food", icon: "resource-fish", color: "#7fcdff", value: 1, chance: 5, model: "Marine_and_rivers", bonus: {population: 2}},
|
||||
{i: 12, name: "Game", category: "Food", icon: "resource-game", color: "#c38a8a", value: 2, chance: 3, model: "Any_forest", bonus: {archers: 2, population: 1}},
|
||||
{i: 13, name: "Wine", category: "Food", icon: "resource-wine", color: "#963e48", value: 3, chance: 4, model: "Tropical_forests", bonus: {population: 1, prestige: 1}},
|
||||
{i: 14, name: "Olives", category: "Food", icon: "resource-olives", color: "#BDBD7D", value: 3, chance: 4, model: "Tropical_forests", bonus: {population: 1}},
|
||||
{i: 15, name: "Honey", category: "Food", icon: "resource-honey", color: "#DCBC66", value: 4, chance: 3, model: "Temperate_and_boreal_forests", bonus: {population: 1}},
|
||||
{i: 16, name: "Salt", category: "Food", icon: "resource-salt", color: "#E5E4E5", value: 5, chance: 4, model: "Arid_land_and_salt_lakes", bonus: {population: 1, defence: 1}},
|
||||
{i: 17, name: "Dates", category: "Food", icon: "resource-dates", color: "#dbb2a3", value: 3, chance: 3, model: "Hot_desert", bonus: {population: 1}},
|
||||
{i: 18, name: "Horses", category: "Supply", icon: "resource-horses", color: "#ba7447", value: 10, chance: 6, model: "Grassland_and_cold_desert", bonus: {cavalry: 2}},
|
||||
{i: 19, name: "Elephants", category: "Supply", icon: "resource-elephants", color: "#C5CACD", value: 15, chance: 2, model: "Hot_biomes", bonus: {cavalry: 1}},
|
||||
{i: 20, name: "Camels", category: "Supply", icon: "resource-camels", color: "#C19A6B", value: 13, chance: 4, model: "Deserts", bonus: {cavalry: 1}},
|
||||
{i: 21, name: "Hemp", category: "Material", icon: "resource-hemp", color: "#069a06", value: 2, chance: 4, model: "Deciduous_forests", bonus: {fleet: 2}},
|
||||
{i: 22, name: "Pearls", category: "Luxury", icon: "resource-pearls", color: "#EAE0C8", value: 35, chance: 3, model: "Tropical_waters", bonus: {prestige: 1}},
|
||||
{i: 23, name: "Gemstones", category: "Luxury", icon: "resource-gemstones", color: "#e463e4", value: 35, chance: 2, model: "Mountains", bonus: {prestige: 1}},
|
||||
{i: 24, name: "Dyes", category: "Luxury", icon: "resource-dyes", color: "#fecdea", value: 15, chance: 0.5, model: "Habitable_biome_or_marine", bonus: {prestige: 1}},
|
||||
{i: 25, name: "Incense", category: "Luxury", icon: "resource-incense", color: "#ebe5a7", value: 25, chance: 2, model: "Hot_desert_and_tropical_forest", bonus: {prestige: 2}},
|
||||
{i: 26, name: "Silk", category: "Luxury", icon: "resource-silk", color: "#e0f0f8", value: 30, chance: 1, model: "Tropical_rainforest", bonus: {prestige: 2}},
|
||||
{i: 27, name: "Spices", category: "Luxury", icon: "resource-spices", color: "#e99c75", value: 30, chance: 2, model: "Tropical_rainforest", bonus: {prestige: 2}},
|
||||
{i: 28, name: "Amber", category: "Luxury", icon: "resource-amber", color: "#e68200", value: 15, chance: 2, model: "Foresty_seashore", bonus: {prestige: 1}},
|
||||
{i: 29, name: "Furs", category: "Material", icon: "resource-furs", color: "#8a5e51", value: 13, chance: 2, model: "Boreal_forests", bonus: {prestige: 1}},
|
||||
{i: 30, name: "Sheep", category: "Material", icon: "resource-sheeps", color: "#53b574", value: 2, chance: 5, model: "Pastures_and_temperate_forest", bonus: {infantry: 1}},
|
||||
{i: 31, name: "Slaves", category: "Supply", icon: "resource-slaves", color: "#757575", value: 10, chance: 3, model: "Less_habitable_seashore", bonus: {population: 2}},
|
||||
{i: 32, name: "Tar", category: "Material", icon: "resource-tar", color: "#727272", value: 3, chance: 3, model: "Any_forest", bonus: {fleet: 1}},
|
||||
{i: 33, name: "Saltpeter", category: "Material", icon: "resource-saltpeter", color: "#e6e3e3", value: 8, chance: 2, model: "Biome_habitability", bonus: {artillery: 3}},
|
||||
{i: 34, name: "Coal", category: "Material", icon: "resource-coal", color: "#36454f", value: 2, chance: 7, model: "Hills", bonus: {artillery: 2}},
|
||||
{i: 35, name: "Oil", category: "Material", icon: "resource-oil", color: "#565656", value: 5, chance: 2, model: "Less_habitable_biomes", bonus: {artillery: 1}},
|
||||
{i: 36, name: "Tropical timber", category: "Luxury", icon: "resource-tropicalTimber", color: "#a45a52", value: 20, chance: 2, model: "Tropical_rainforest", bonus: {prestige: 1}},
|
||||
{i: 37, name: "Whales", category: "Food", icon: "resource-whales", color: "#cccccc", value: 2, chance: 2, model: "Arctic_waters", bonus: {population: 1}},
|
||||
{i: 38, name: "Sugar", category: "Food", icon: "resource-sugar", color: "#7abf87", value: 3, chance: 3, model: "Tropical_rainforest", bonus: {population: 1}},
|
||||
{i: 39, name: "Tea", category: "Luxury", icon: "resource-tea", color: "#d0f0c0", value: 10, chance: 3, model: "Hilly_tropical_rainforest", bonus: {prestige: 1}},
|
||||
{i: 40, name: "Tobacco", category: "Luxury", icon: "resource-tobacco", color: "#6D5843", value: 10, chance: 2, model: "Tropical_rainforest", bonus: {prestige: 1}}
|
||||
{i: 1, name: 'Wood', category: 'Construction', icon: 'resource-wood', color: '#966F33', value: 5, chance: 10, model: 'Any_forest', bonus: {fleet: 2, defence: 1}},
|
||||
{i: 2, name: 'Stone', category: 'Construction', icon: 'resource-stone', color: '#979EA2', value: 4, chance: 7, model: 'Hills', bonus: {prestige: 1, defence: 2}},
|
||||
{i: 3, name: 'Marble', category: 'Construction', icon: 'resource-marble', color: '#d6d0bf', value: 15, chance: 1, model: 'Mountains', bonus: {prestige: 2}},
|
||||
{i: 4, name: 'Iron', category: 'Ore', icon: 'resource-iron', color: '#5D686E', value: 8, chance: 8, model: 'Mountains_and_wetlands', bonus: {artillery: 1, infantry: 1, defence: 1}},
|
||||
{i: 5, name: 'Copper', category: 'Ore', icon: 'resource-copper', color: '#b87333', value: 10, chance: 3, model: 'Mountains', bonus: {artillery: 2, defence: 1, prestige: 1}},
|
||||
{i: 6, name: 'Lead', category: 'Ore', icon: 'resource-lead', color: '#454343', value: 8, chance: 3, model: 'Mountains', bonus: {artillery: 1, defence: 1}},
|
||||
{i: 7, name: 'Silver', category: 'Ore', icon: 'resource-silver', color: '#C0C0C0', value: 15, chance: 3, model: 'Mountains', bonus: {prestige: 2}},
|
||||
{i: 8, name: 'Gold', category: 'Ore', icon: 'resource-gold', color: '#d4af37', value: 30, chance: 1, model: 'Headwaters', bonus: {prestige: 3}},
|
||||
{i: 9, name: 'Grain', category: 'Food', icon: 'resource-grain', color: '#F5DEB3', value: 1, chance: 15, model: 'Biome_habitability', bonus: {population: 4}},
|
||||
{i: 10, name: 'Cattle', category: 'Food', icon: 'resource-cattle', color: '#56b000', value: 2, chance: 10, model: 'Pastures_and_temperate_forest', bonus: {population: 2}},
|
||||
{i: 11, name: 'Fish', category: 'Food', icon: 'resource-fish', color: '#7fcdff', value: 1, chance: 5, model: 'Marine_and_rivers', bonus: {population: 2}},
|
||||
{i: 12, name: 'Game', category: 'Food', icon: 'resource-game', color: '#c38a8a', value: 2, chance: 3, model: 'Any_forest', bonus: {archers: 2, population: 1}},
|
||||
{i: 13, name: 'Wine', category: 'Food', icon: 'resource-wine', color: '#963e48', value: 3, chance: 4, model: 'Tropical_forests', bonus: {population: 1, prestige: 1}},
|
||||
{i: 14, name: 'Olives', category: 'Food', icon: 'resource-olives', color: '#BDBD7D', value: 3, chance: 4, model: 'Tropical_forests', bonus: {population: 1}},
|
||||
{i: 15, name: 'Honey', category: 'Food', icon: 'resource-honey', color: '#DCBC66', value: 4, chance: 3, model: 'Temperate_and_boreal_forests', bonus: {population: 1}},
|
||||
{i: 16, name: 'Salt', category: 'Food', icon: 'resource-salt', color: '#E5E4E5', value: 5, chance: 4, model: 'Arid_land_and_salt_lakes', bonus: {population: 1, defence: 1}},
|
||||
{i: 17, name: 'Dates', category: 'Food', icon: 'resource-dates', color: '#dbb2a3', value: 3, chance: 3, model: 'Hot_desert', bonus: {population: 1}},
|
||||
{i: 18, name: 'Horses', category: 'Supply', icon: 'resource-horses', color: '#ba7447', value: 10, chance: 6, model: 'Grassland_and_cold_desert', bonus: {cavalry: 2}},
|
||||
{i: 19, name: 'Elephants', category: 'Supply', icon: 'resource-elephants', color: '#C5CACD', value: 15, chance: 2, model: 'Hot_biomes', bonus: {cavalry: 1}},
|
||||
{i: 20, name: 'Camels', category: 'Supply', icon: 'resource-camels', color: '#C19A6B', value: 13, chance: 4, model: 'Deserts', bonus: {cavalry: 1}},
|
||||
{i: 21, name: 'Hemp', category: 'Material', icon: 'resource-hemp', color: '#069a06', value: 2, chance: 4, model: 'Deciduous_forests', bonus: {fleet: 2}},
|
||||
{i: 22, name: 'Pearls', category: 'Luxury', icon: 'resource-pearls', color: '#EAE0C8', value: 35, chance: 3, model: 'Tropical_waters', bonus: {prestige: 1}},
|
||||
{i: 23, name: 'Gemstones', category: 'Luxury', icon: 'resource-gemstones', color: '#e463e4', value: 35, chance: 2, model: 'Mountains', bonus: {prestige: 1}},
|
||||
{i: 24, name: 'Dyes', category: 'Luxury', icon: 'resource-dyes', color: '#fecdea', value: 15, chance: 0.5, model: 'Habitable_biome_or_marine', bonus: {prestige: 1}},
|
||||
{i: 25, name: 'Incense', category: 'Luxury', icon: 'resource-incense', color: '#ebe5a7', value: 25, chance: 2, model: 'Hot_desert_and_tropical_forest', bonus: {prestige: 2}},
|
||||
{i: 26, name: 'Silk', category: 'Luxury', icon: 'resource-silk', color: '#e0f0f8', value: 30, chance: 1, model: 'Tropical_rainforest', bonus: {prestige: 2}},
|
||||
{i: 27, name: 'Spices', category: 'Luxury', icon: 'resource-spices', color: '#e99c75', value: 30, chance: 2, model: 'Tropical_rainforest', bonus: {prestige: 2}},
|
||||
{i: 28, name: 'Amber', category: 'Luxury', icon: 'resource-amber', color: '#e68200', value: 15, chance: 2, model: 'Foresty_seashore', bonus: {prestige: 1}},
|
||||
{i: 29, name: 'Furs', category: 'Material', icon: 'resource-furs', color: '#8a5e51', value: 13, chance: 2, model: 'Boreal_forests', bonus: {prestige: 1}},
|
||||
{i: 30, name: 'Sheep', category: 'Material', icon: 'resource-sheeps', color: '#53b574', value: 2, chance: 5, model: 'Pastures_and_temperate_forest', bonus: {infantry: 1}},
|
||||
{i: 31, name: 'Slaves', category: 'Supply', icon: 'resource-slaves', color: '#757575', value: 10, chance: 3, model: 'Less_habitable_seashore', bonus: {population: 2}},
|
||||
{i: 32, name: 'Tar', category: 'Material', icon: 'resource-tar', color: '#727272', value: 3, chance: 3, model: 'Any_forest', bonus: {fleet: 1}},
|
||||
{i: 33, name: 'Saltpeter', category: 'Material', icon: 'resource-saltpeter', color: '#e6e3e3', value: 8, chance: 2, model: 'Biome_habitability', bonus: {artillery: 3}},
|
||||
{i: 34, name: 'Coal', category: 'Material', icon: 'resource-coal', color: '#36454f', value: 2, chance: 7, model: 'Hills', bonus: {artillery: 2}},
|
||||
{i: 35, name: 'Oil', category: 'Material', icon: 'resource-oil', color: '#565656', value: 5, chance: 2, model: 'Less_habitable_biomes', bonus: {artillery: 1}},
|
||||
{i: 36, name: 'Tropical timber', category: 'Luxury', icon: 'resource-tropicalTimber', color: '#a45a52', value: 20, chance: 2, model: 'Tropical_rainforest', bonus: {prestige: 1}},
|
||||
{i: 37, name: 'Whales', category: 'Food', icon: 'resource-whales', color: '#cccccc', value: 2, chance: 2, model: 'Arctic_waters', bonus: {population: 1}},
|
||||
{i: 38, name: 'Sugar', category: 'Food', icon: 'resource-sugar', color: '#7abf87', value: 3, chance: 3, model: 'Tropical_rainforest', bonus: {population: 1}},
|
||||
{i: 39, name: 'Tea', category: 'Luxury', icon: 'resource-tea', color: '#d0f0c0', value: 10, chance: 3, model: 'Hilly_tropical_rainforest', bonus: {prestige: 1}},
|
||||
{i: 40, name: 'Tobacco', category: 'Luxury', icon: 'resource-tobacco', color: '#6D5843', value: 10, chance: 2, model: 'Tropical_rainforest', bonus: {prestige: 1}}
|
||||
];
|
||||
};
|
||||
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
};
|
||||
|
||||
const methods = {
|
||||
random: (number) => number >= 100 || number > 0 && number / 100 > Math.random(),
|
||||
random: (number) => number >= 100 || (number > 0 && number / 100 > Math.random()),
|
||||
nth: (number) => !(cellId % number),
|
||||
habitable: () => biomesData.habitability[pack.cells.biome[cellId]],
|
||||
habitability: () => biomesData.habitability[cells.biome[cellId]] / 100 > Math.random(),
|
||||
|
|
@ -102,19 +102,19 @@
|
|||
shore: (...rings) => rings.includes(pack.cells.t[cellId]),
|
||||
type: (...types) => types.includes(pack.features[cells.f[cellId]].group),
|
||||
river: () => pack.cells.r[cellId]
|
||||
}
|
||||
const allMethods = "{" + Object.keys(methods).join(", ") + "}";
|
||||
};
|
||||
const allMethods = '{' + Object.keys(methods).join(', ') + '}';
|
||||
|
||||
const generate = function () {
|
||||
console.time("generateResources");
|
||||
console.time('generateResources');
|
||||
cells = pack.cells;
|
||||
cells.resource = new Uint8Array(cells.i.length); // resources array [0, 255]
|
||||
const resourceMaxCells = Math.ceil((200 * cells.i.length) / 5000);
|
||||
if (!pack.resources) pack.resources = getDefault();
|
||||
pack.resources.forEach(r => {
|
||||
pack.resources.forEach((r) => {
|
||||
r.cells = 0;
|
||||
const model = r.custom || defaultModels[r.model];
|
||||
r.fn = new Function(allMethods, "return " + model);
|
||||
r.fn = new Function(allMethods, 'return ' + model);
|
||||
});
|
||||
|
||||
const skipGlaciers = biomesData.habitability[11] === 0;
|
||||
|
|
@ -136,13 +136,13 @@
|
|||
break;
|
||||
}
|
||||
}
|
||||
pack.resources.sort((a, b) => (a.i > b.i ? 1 : -1)).forEach(r => delete r.fn);
|
||||
pack.resources.sort((a, b) => (a.i > b.i ? 1 : -1)).forEach((r) => delete r.fn);
|
||||
|
||||
console.timeEnd("generateResources");
|
||||
console.timeEnd('generateResources');
|
||||
};
|
||||
|
||||
const getStroke = color => d3.color(color).darker(2).hex();
|
||||
const get = i => pack.resources.find(resource => resource.i === i);
|
||||
const getStroke = (color) => d3.color(color).darker(2).hex();
|
||||
const get = (i) => pack.resources.find((resource) => resource.i === i);
|
||||
|
||||
return {generate, getDefault, defaultModels, methods, getStroke, get};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,71 +1,86 @@
|
|||
"use strict";
|
||||
'use strict';
|
||||
function editResources() {
|
||||
if (customization) return;
|
||||
closeDialogs("#resourcesEditor, .stable");
|
||||
if (!layerIsOn("toggleResources")) toggleResources();
|
||||
const body = document.getElementById("resourcesBody");
|
||||
closeDialogs('#resourcesEditor, .stable');
|
||||
if (!layerIsOn('toggleResources')) toggleResources();
|
||||
const body = document.getElementById('resourcesBody');
|
||||
|
||||
resourcesEditorAddLines();
|
||||
|
||||
if (modules.editResources) return;
|
||||
modules.editResources = true;
|
||||
|
||||
$("#resourcesEditor").dialog({
|
||||
title: "Resources Editor",
|
||||
$('#resourcesEditor').dialog({
|
||||
title: 'Resources Editor',
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
close: closeResourcesEditor,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg"}
|
||||
position: {my: 'right top', at: 'right-10 top+10', of: 'svg'}
|
||||
});
|
||||
|
||||
// add listeners
|
||||
document.getElementById("resourcesEditorRefresh").addEventListener("click", resourcesEditorAddLines);
|
||||
document.getElementById("resourcesRegenerate").addEventListener("click", regenerateResources);
|
||||
document.getElementById("resourcesLegend").addEventListener("click", toggleLegend);
|
||||
document.getElementById("resourcesPercentage").addEventListener("click", togglePercentageMode);
|
||||
document.getElementById("resourcesExport").addEventListener("click", downloadResourcesData);
|
||||
document.getElementById('resourcesEditorRefresh').addEventListener('click', resourcesEditorAddLines);
|
||||
document.getElementById('resourcesRegenerate').addEventListener('click', regenerateResources);
|
||||
document.getElementById('resourcesLegend').addEventListener('click', toggleLegend);
|
||||
document.getElementById('resourcesPercentage').addEventListener('click', togglePercentageMode);
|
||||
document.getElementById('resourcesExport').addEventListener('click', downloadResourcesData);
|
||||
|
||||
body.addEventListener("click", function (ev) {
|
||||
body.addEventListener('click', function (ev) {
|
||||
const el = ev.target,
|
||||
cl = el.classList,
|
||||
line = el.parentNode,
|
||||
i = +line.dataset.id;
|
||||
const resource = Resources.get(+line.dataset.id);
|
||||
if (cl.contains("resourceCategory")) return changeCategory(resource, line, el);
|
||||
if (cl.contains("resourceModel")) return changeModel(resource, line, el);
|
||||
if (cl.contains('resourceCategory')) return changeCategory(resource, line, el);
|
||||
if (cl.contains('resourceModel')) return changeModel(resource, line, el);
|
||||
});
|
||||
|
||||
body.addEventListener("change", function (ev) {
|
||||
body.addEventListener('change', function (ev) {
|
||||
const el = ev.target,
|
||||
cl = el.classList,
|
||||
line = el.parentNode;
|
||||
const resource = Resources.get(+line.dataset.id);
|
||||
if (cl.contains("resourceName")) return changeName(resource, el.value, line);
|
||||
if (cl.contains('resourceName')) return changeName(resource, el.value, line);
|
||||
if (cl.contains('resourceValue')) return changeValue(resource, el.value, line);
|
||||
if (cl.contains('resourceChance')) return changeChance(resource, el.value, line);
|
||||
});
|
||||
|
||||
function getBonusIcon(bonus) {
|
||||
if (bonus === 'fleet') return `<span data-tip="Fleet bonus" class="icon-anchor"/>`;
|
||||
if (bonus === 'defence') return `<span data-tip="Defence bonus" class="icon-chess-rook"/>`;
|
||||
if (bonus === 'prestige') return `<span data-tip="Prestige bonus" class="icon-star"/>`;
|
||||
if (bonus === 'artillery') return `<span data-tip="Artillery bonus" class="icon-rocket"/>`;
|
||||
if (bonus === 'infantry') return `<span data-tip="Infantry bonus" class="icon-pawn"/>`;
|
||||
if (bonus === 'population') return `<span data-tip="Population bonus" class="icon-male"/>`;
|
||||
if (bonus === 'archers') return `<span data-tip="Archers bonus" class="icon-dot-circled"/>`;
|
||||
if (bonus === 'cavalry') return `<span data-tip="Cavalry bonus" class="icon-knight"/>`;
|
||||
}
|
||||
|
||||
// add line for each resource
|
||||
function resourcesEditorAddLines() {
|
||||
const addTitle = (string, max) => (string.length < max ? "" : `title="${string}"`);
|
||||
let lines = "";
|
||||
const addTitle = (string, max) => (string.length < max ? '' : `title="${string}"`);
|
||||
let lines = '';
|
||||
|
||||
// // {i: 33, name: "Saltpeter", icon: "resource-saltpeter", color: "#e6e3e3", value: 8, chance: 2, model: "habitability", bonus: {artillery: 3}}
|
||||
for (const r of pack.resources) {
|
||||
const stroke = Resources.getStroke(r.color);
|
||||
const model = r.model.replaceAll("_", " ");
|
||||
const model = r.model.replaceAll('_', ' ');
|
||||
const bonusArray = Object.entries(r.bonus).map((e) => Array(e[1]).fill(e[0])).flat(); //prettier-ignore
|
||||
const bonusHTML = bonusArray.map((bonus) => getBonusIcon(bonus)).join('');
|
||||
|
||||
lines += `<div class="states resources" data-id=${r.i} data-name="${r.name}" data-color="${r.color}"
|
||||
data-category="${r.category}" data-chance="${r.chance}"
|
||||
data-value="${r.value}" data-model="${r.model}" data-cells="${r.cells}">
|
||||
lines += `<div class="states resources"
|
||||
data-id=${r.i} data-name="${r.name}" data-color="${r.color}"
|
||||
data-category="${r.category}" data-chance="${r.chance}" data-bonus="${bonusArray.join(', ')}"
|
||||
data-value="${r.value}" data-model="${r.model}" data-cells="${r.cells}">
|
||||
<svg data-tip="Resource icon. Click to change" width="2em" height="2em" class="icon">
|
||||
<circle cx="50%" cy="50%" r="42%" fill="${r.color}" stroke="${stroke}"/>
|
||||
<use href="#${r.icon}" x="10%" y="10%" width="80%" height="80%"/>
|
||||
</svg>
|
||||
<input data-tip="Resource name. Click and category to change" class="resourceName" value="${r.name}" autocorrect="off" spellcheck="false">
|
||||
<div data-tip="Resource category. Select to change" class="resourceCategory" ${addTitle(r.category, 8)}">${r.category}</div>
|
||||
<div data-tip="Resource spread model. Select to change" class="resourceModel" ${addTitle(model, 8)}">${model}</div>
|
||||
|
||||
<input data-tip="Resource basic value. Click and type to change" value="${r.value}" type="number" min=0 max=100 step=1 />
|
||||
<input data-tip="Resource generation chance in eligible cell. Click and type to change" value="${r.chance}" type="number" min=0 max=100 step=.1 />
|
||||
<input data-tip="Resource basic value. Click and type to change" class="resourceValue" value="${r.value}" type="number" min=0 max=100 step=1 />
|
||||
<div data-tip="Resource bonus. Click to change" class="resourceBonus">${bonusHTML}</div>
|
||||
<div data-tip="Resource spread model. Click to change" class="resourceModel" ${addTitle(model, 8)}">${model}</div>
|
||||
<input data-tip="Resource generation chance in eligible cell. Click and type to change" class="resourceChance" value="${r.chance}" type="number" min=0 max=100 step=.1 />
|
||||
<div data-tip="Number of cells with resource" class="cells">${r.cells}</div>
|
||||
|
||||
<span data-tip="Remove resource" class="icon-trash-empty hide"></span>
|
||||
|
|
@ -74,29 +89,25 @@ function editResources() {
|
|||
body.innerHTML = lines;
|
||||
|
||||
// update footer
|
||||
document.getElementById("resourcesNumber").innerHTML = pack.resources.length;
|
||||
document.getElementById('resourcesNumber').innerHTML = pack.resources.length;
|
||||
|
||||
// add listeners
|
||||
// body.querySelectorAll("div.resources").forEach(el => el.addEventListener("mouseenter", ev => resourceHighlightOn(ev)));
|
||||
// body.querySelectorAll("div.resources").forEach(el => el.addEventListener("mouseleave", ev => resourceHighlightOff(ev)));
|
||||
// body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectResourceOnLineClick));
|
||||
body.querySelectorAll("svg.icon").forEach(el => el.addEventListener("click", resourceChangeColor));
|
||||
body.querySelectorAll('svg.icon').forEach((el) => el.addEventListener('click', resourceChangeColor));
|
||||
|
||||
if (body.dataset.type === "percentage") {
|
||||
body.dataset.type = "absolute";
|
||||
if (body.dataset.type === 'percentage') {
|
||||
body.dataset.type = 'absolute';
|
||||
togglePercentageMode();
|
||||
}
|
||||
applySorting(resourcesHeader);
|
||||
$("#resourcesEditor").dialog({width: fitContent()});
|
||||
}
|
||||
|
||||
function changeName(resource, name, line) {
|
||||
resource.name = line.dataset.name = name;
|
||||
$('#resourcesEditor').dialog({width: fitContent()});
|
||||
}
|
||||
|
||||
function changeCategory(resource, line, el) {
|
||||
const categories = [...new Set(pack.resources.map(r => r.category))].sort();
|
||||
const categoryOptions = category => categories.map(c => `<option ${c === category ? "selected" : ""} value="${c}">${c}</option>`).join("");
|
||||
const categories = [...new Set(pack.resources.map((r) => r.category))].sort();
|
||||
const categoryOptions = (category) => categories.map((c) => `<option ${c === category ? 'selected' : ''} value="${c}">${c}</option>`).join('');
|
||||
|
||||
alertMessage.innerHTML = `
|
||||
<div style="margin-bottom:.2em" data-tip="Select category from the list">
|
||||
|
|
@ -110,23 +121,23 @@ function editResources() {
|
|||
</div>
|
||||
`;
|
||||
|
||||
$("#alert").dialog({
|
||||
$('#alert').dialog({
|
||||
resizable: false,
|
||||
title: "Change category",
|
||||
title: 'Change category',
|
||||
buttons: {
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
$(this).dialog('close');
|
||||
},
|
||||
Apply: function () {
|
||||
applyChanges();
|
||||
$(this).dialog("close");
|
||||
$(this).dialog('close');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function applyChanges() {
|
||||
const custom = document.getElementById("resouceCategoryAdd").value;
|
||||
const select = document.getElementById("resouceCategorySelect").value;
|
||||
const custom = document.getElementById('resouceCategoryAdd').value;
|
||||
const select = document.getElementById('resouceCategorySelect').value;
|
||||
const category = custom ? capitalize(custom) : select;
|
||||
resource.category = line.dataset.category = el.innerHTML = category;
|
||||
}
|
||||
|
|
@ -135,8 +146,11 @@ function editResources() {
|
|||
function changeModel(resource, line, el) {
|
||||
const defaultModels = Resources.defaultModels;
|
||||
const model = line.dataset.model;
|
||||
const modelOptions = Object.keys(defaultModels).sort().map(m => `<option ${m === model ? "selected" : ""} value="${m}">${m.replaceAll("_", " ")}</option>`).join("");
|
||||
const wikiURL = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Resources:-spread-functions";
|
||||
const modelOptions = Object.keys(defaultModels)
|
||||
.sort()
|
||||
.map((m) => `<option ${m === model ? 'selected' : ''} value="${m}">${m.replaceAll('_', ' ')}</option>`)
|
||||
.join('');
|
||||
const wikiURL = 'https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Resources:-spread-functions';
|
||||
const onSelect = "resouceModelFunction.innerHTML = Resources.defaultModels[this.value] || ' '; resouceModelCustomName.value = ''; resouceModelCustomFunction.value = ''";
|
||||
|
||||
alertMessage.innerHTML = `
|
||||
|
|
@ -153,7 +167,7 @@ function editResources() {
|
|||
<div style="margin-bottom:.2em">
|
||||
<div style="display: inline-block; width: 6em">Function:</div>
|
||||
<div id="resouceModelFunction" style="display: inline-block; width: 18em; font-family: monospace; border: 1px solid #ccc; padding: 3px; font-size: .95em;vertical-align: middle">
|
||||
${defaultModels[model] || " "}
|
||||
${defaultModels[model] || ' '}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -174,13 +188,13 @@ function editResources() {
|
|||
<div id="resourceModelMessage" style="color: #b20000; margin: .4em 1em 0"></div>
|
||||
`;
|
||||
|
||||
$("#alert").dialog({
|
||||
$('#alert').dialog({
|
||||
resizable: false,
|
||||
title: "Change spread model",
|
||||
title: 'Change spread model',
|
||||
buttons: {
|
||||
Help: () => openURL(wikiURL),
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
$(this).dialog('close');
|
||||
},
|
||||
Apply: function () {
|
||||
applyChanges(this);
|
||||
|
|
@ -189,96 +203,110 @@ function editResources() {
|
|||
});
|
||||
|
||||
function applyChanges(dialog) {
|
||||
const customName = document.getElementById("resouceModelCustomName").value;
|
||||
const customFn = document.getElementById("resouceModelCustomFunction").value;
|
||||
const customName = document.getElementById('resouceModelCustomName').value;
|
||||
const customFn = document.getElementById('resouceModelCustomFunction').value;
|
||||
|
||||
const message = document.getElementById("resourceModelMessage");
|
||||
if (customName && !customFn) return (message.innerHTML = "Error. Custom model function is required");
|
||||
if (!customName && customFn) return (message.innerHTML = "Error. Custom model name is required");
|
||||
message.innerHTML = "";
|
||||
const message = document.getElementById('resourceModelMessage');
|
||||
if (customName && !customFn) return (message.innerHTML = 'Error. Custom model function is required');
|
||||
if (!customName && customFn) return (message.innerHTML = 'Error. Custom model name is required');
|
||||
message.innerHTML = '';
|
||||
|
||||
if (customName && customFn) {
|
||||
try {
|
||||
const allMethods = "{" + Object.keys(Resources.methods).join(", ") + "}";
|
||||
const fn = new Function(allMethods, "return " + customFn);
|
||||
const allMethods = '{' + Object.keys(Resources.methods).join(', ') + '}';
|
||||
const fn = new Function(allMethods, 'return ' + customFn);
|
||||
fn({...Resources.methods});
|
||||
} catch (err) {
|
||||
message.innerHTML = "Error. " + err.message || err;
|
||||
message.innerHTML = 'Error. ' + err.message || err;
|
||||
return;
|
||||
}
|
||||
|
||||
resource.model = line.dataset.model = el.innerHTML = customName;
|
||||
resource.custom = customFn;
|
||||
$(dialog).dialog("close");
|
||||
$(dialog).dialog('close');
|
||||
return;
|
||||
}
|
||||
|
||||
const model = document.getElementById("resouceModelSelect").value;
|
||||
if (!model) return (message.innerHTML = "Error. Model is not set");
|
||||
const model = document.getElementById('resouceModelSelect').value;
|
||||
if (!model) return (message.innerHTML = 'Error. Model is not set');
|
||||
|
||||
resource.model = line.dataset.model = el.innerHTML = model;
|
||||
$(dialog).dialog("close");
|
||||
$(dialog).dialog('close');
|
||||
}
|
||||
}
|
||||
|
||||
function changeName(resource, name, line) {
|
||||
resource.name = line.dataset.name = name;
|
||||
}
|
||||
|
||||
function changeValue(resource, value, line) {
|
||||
resource.value = line.dataset.value = +value;
|
||||
}
|
||||
|
||||
function changeChance(resource, chance, line) {
|
||||
resource.chance = line.dataset.chance = +chance;
|
||||
}
|
||||
|
||||
function resourceChangeColor() {
|
||||
const circle = this.querySelector("circle");
|
||||
const circle = this.querySelector('circle');
|
||||
const resource = Resources.get(+this.parentNode.dataset.id);
|
||||
|
||||
const callback = function (fill) {
|
||||
const stroke = Resources.getStroke(fill);
|
||||
circle.setAttribute("fill", fill);
|
||||
circle.setAttribute("stroke", stroke);
|
||||
circle.setAttribute('fill', fill);
|
||||
circle.setAttribute('stroke', stroke);
|
||||
resource.color = fill;
|
||||
resource.stroke = stroke;
|
||||
goods.selectAll(`circle[data-i='${resource.i}']`).attr("fill", fill).attr("stroke", stroke);
|
||||
goods.selectAll(`circle[data-i='${resource.i}']`).attr('fill', fill).attr('stroke', stroke);
|
||||
};
|
||||
|
||||
openPicker(resource.color, callback, {allowHatching: false});
|
||||
}
|
||||
|
||||
function toggleLegend() {
|
||||
if (legend.selectAll("*").size()) {
|
||||
if (legend.selectAll('*').size()) {
|
||||
clearLegend();
|
||||
return;
|
||||
} // hide legend
|
||||
}
|
||||
|
||||
const data = pack.resources
|
||||
.filter(r => r.i && r.cells)
|
||||
.filter((r) => r.i && r.cells)
|
||||
.sort((a, b) => b.cells - a.cells)
|
||||
.map(r => [r.i, r.color, r.name]);
|
||||
drawLegend("Resources", data);
|
||||
.map((r) => [r.i, r.color, r.name]);
|
||||
drawLegend('Resources', data);
|
||||
}
|
||||
|
||||
function togglePercentageMode() {
|
||||
if (body.dataset.type === "absolute") {
|
||||
body.dataset.type = "percentage";
|
||||
const totalCells = pack.cells.resource.filter(r => r !== 0).length;
|
||||
if (body.dataset.type === 'absolute') {
|
||||
body.dataset.type = 'percentage';
|
||||
const totalCells = pack.cells.resource.filter((r) => r !== 0).length;
|
||||
|
||||
body.querySelectorAll(":scope > div").forEach(function (el) {
|
||||
el.querySelector(".cells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
|
||||
body.querySelectorAll(':scope > div').forEach(function (el) {
|
||||
el.querySelector('.cells').innerHTML = rn((+el.dataset.cells / totalCells) * 100) + '%';
|
||||
});
|
||||
} else {
|
||||
body.dataset.type = "absolute";
|
||||
body.dataset.type = 'absolute';
|
||||
resourcesEditorAddLines();
|
||||
}
|
||||
}
|
||||
|
||||
function downloadResourcesData() {
|
||||
let data = "Id,Resource,Category,Color,Icon,Value,Chance,Model,Cells\n"; // headers
|
||||
let data = 'Id,Resource,Color,Icon,Category,Value,Bonus,Chance,Model,Cells\n'; // headers
|
||||
|
||||
body.querySelectorAll(":scope > div").forEach(function (el) {
|
||||
data += el.dataset.id + ",";
|
||||
data += el.dataset.name + ",";
|
||||
data += el.dataset.category + ",";
|
||||
data += el.dataset.color + ",";
|
||||
data += el.dataset.icon + ",";
|
||||
data += el.dataset.value + ",";
|
||||
data += el.dataset.chance + ",";
|
||||
data += el.dataset.model + ",";
|
||||
data += el.dataset.cells + "\n";
|
||||
body.querySelectorAll(':scope > div').forEach(function (el) {
|
||||
data += el.dataset.id + ',';
|
||||
data += el.dataset.name + ',';
|
||||
data += el.dataset.color + ',';
|
||||
data += el.dataset.icon + ',';
|
||||
data += el.dataset.category + ',';
|
||||
data += el.dataset.value + ',';
|
||||
data += el.dataset.bonus + ',';
|
||||
data += el.dataset.chance + ',';
|
||||
data += el.dataset.model + ',';
|
||||
data += el.dataset.cells + '\n';
|
||||
});
|
||||
|
||||
const name = getFileName("Resources") + ".csv";
|
||||
const name = getFileName('Resources') + '.csv';
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue