From 5b8c5a7a788d9650b54fc9c6168eb22d6f889042 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sat, 7 Aug 2021 16:01:40 +0300
Subject: [PATCH] show production in burgs editor

---
 index.css                       | 17 ++++++++++-
 index.html                      | 32 ++++++++++++++++----
 modules/production-generator.js | 52 ++++++++++++++++-----------------
 modules/ui/burg-editor.js       | 25 ++++++++++++----
 4 files changed, 89 insertions(+), 37 deletions(-)

diff --git a/index.css b/index.css
index 58b824a5..f59b0a94 100644
--- a/index.css
+++ b/index.css
@@ -1548,15 +1548,30 @@ div.states > div.resourceBonus > span.icon-male {
   line-height: 1.4em;
 }
 
+#burgBody {
+  display: flex;
+  padding-bottom: 0.3em;
+}
+
+#burgBody > div {
+  width: 18em;
+}
+
 #burgBody div.label {
   display: inline-block;
   width: 6em;
 }
 
+#burgBody svg.resIcon {
+  vertical-align: top;
+  width: 1.6em;
+  height: 1.6em;
+}
+
 #burgBody > div > div,
 #riverBody > div,
 #lakeBody > div {
-  padding: 0.1em;
+  line-height: 1.8em;
 }
 
 #riverBody div.label,
diff --git a/index.html b/index.html
index 7920df17..12cc7860 100644
--- a/index.html
+++ b/index.html
@@ -1966,12 +1966,12 @@
     </div>
 
     <div id="burgEditor" class="dialog" style="display: none">
+      <div id="burgBody">
+        <div style="width:12em; height:100%">
+          <svg viewBox="0 0 200 200"><use id="burgEmblem"></use></svg>
+        </div>
 
-      <div id="burgBody" style="padding-bottom: .3em">
-        <svg viewBox="0 0 200 200" width="14em" height="14em"><use id="burgEmblem"></use></svg>
-        <div style="float: right">
-          <div id="burgProvinceAndState" style="font-style: italic; max-width: 16em"></div>
-
+        <div>
           <div>
             <div class="label">Name:</div>
             <input id="burgName" data-tip="Type to rename the burg" autocorrect="off" spellcheck="false" style="width: 8em">
@@ -2003,6 +2003,16 @@
             <input id="burgPopulation" type="number" min=0 step=1 style="width: 8em">
           </div>
 
+          <div id="Burg state. Can be changed via States Editor">
+            <div class="label">State:</div>
+            <span id="burgState"></span>
+          </div>
+
+          <div id="Burg province. Can be changed via Provinces Editor">
+            <div class="label">Province:</div>
+            <span id="burgProvince"></span>
+          </div>
+
           <div>
             <div class="label">Features:</div>
             <span id="burgCapital" data-tip="Shows whether the burg is a state capital. Click to toggle" data-feature="capital" class="burgFeature icon-star"></span>
@@ -2013,6 +2023,18 @@
             <span id="burgTemple" data-tip="Shows whether the burg is a religious center. Click to toggle" data-feature="temple" class="burgFeature icon-chess-bishop" style="font-size: 1.1em; margin-left: 3px"></span>
             <span id="burgShanty" data-tip="Shows whether the burg has a shanty town. Click to toggle" data-feature="shanty" class="burgFeature icon-campground" style="font-size: 1em"></span>
           </div>
+        </div>
+
+        <div>
+          <div>
+            <div class="label">Production:</div>
+            <span id="burgProduction"></span>
+          </div>
+
+          <div>
+            <div class="label">Export:</div>
+            <span id="burgExport"></span>
+          </div>
 
           <div data-tip="Burg mean annual temperature and real-world city for comparison">
             <div class="label">Temperature:</div>
diff --git a/modules/production-generator.js b/modules/production-generator.js
index 1ce02033..61c846b8 100644
--- a/modules/production-generator.js
+++ b/modules/production-generator.js
@@ -1,42 +1,42 @@
 'use strict';
 
 window.Production = (function () {
-  const BONUS_PRODUCTION = 5;
+  const BONUS_PRODUCTION = 4;
   const BIOME_PRODUCTION = [
-    [{resource: 11, production: 1}], // marine: fish 1
-    [{resource: 2, production: 0.5}], // hot desert: stone 0.5
-    [{resource: 2, production: 0.5}], // cold desert: stone 0.5
+    [{resource: 11, production: 0.75}], // marine: fish
+    [{resource: 2, production: 0.5}], // hot desert: stone
+    [{resource: 2, production: 0.5}], // cold desert: stone
     [
-      {resource: 12, production: 0.75},
-      {resource: 10, production: 0.75}
+      {resource: 12, production: 0.4},
+      {resource: 10, production: 0.4}
     ], // savanna: game 0.75, cattle 0.75
-    [{resource: 10, production: 1}], // grassland: cattle 1
-    [{resource: 9, production: 1}], // tropical seasonal forest: grain 1
+    [{resource: 10, production: 0.5}], // grassland: cattle
+    [{resource: 9, production: 0.5}], // tropical seasonal forest: grain
     [
-      {resource: 9, production: 1},
-      {resource: 1, production: 1}
-    ], // temperate deciduous forest: grain 1, wood 1
+      {resource: 9, production: 0.5},
+      {resource: 1, production: 0.5}
+    ], // temperate deciduous forest: grain, wood
     [
-      {resource: 9, production: 1},
-      {resource: 1, production: 1}
-    ], // tropical rainforest: grain 1, wood 1
+      {resource: 9, production: 0.5},
+      {resource: 1, production: 0.5}
+    ], // tropical rainforest: grain, wood
     [
-      {resource: 9, production: 1},
-      {resource: 1, production: 1}
-    ], // temperate rainforest: grain 1, wood 1
+      {resource: 9, production: 0.5},
+      {resource: 1, production: 0.5}
+    ], // temperate rainforest: grain, wood
     [
-      {resource: 1, production: 1},
-      {resource: 12, production: 0.75}
-    ], // taiga: wood 1, game 0.75
-    [{resource: 29, production: 0.5}], // tundra: furs 0.5
+      {resource: 1, production: 0.5},
+      {resource: 12, production: 0.4}
+    ], // taiga: wood, game
+    [{resource: 29, production: 0.5}], // tundra: furs
     [], // glacier: nothing
     [
-      {resource: 4, production: 0.5},
-      {resource: 12, production: 0.75}
-    ] // wetland: iron .5, game .75
+      {resource: 4, production: 0.4},
+      {resource: 12, production: 0.4}
+    ] // wetland: iron, game
   ];
-  const RIVER_PRODUCTION = [{resource: 11, production: 1.5}]; // fish 1.5
-  const HILLS_PRODUCTION = [{resource: 34, production: 1}]; // coal 1
+  const RIVER_PRODUCTION = [{resource: 11, production: 0.5}]; // fish
+  const HILLS_PRODUCTION = [{resource: 34, production: 0.5}]; // coal
   const FOOD_MULTIPLIER = 3;
 
   const collectResources = () => {
diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js
index 90e92c4d..06343d42 100644
--- a/modules/ui/burg-editor.js
+++ b/modules/ui/burg-editor.js
@@ -10,7 +10,7 @@ function editBurg(id) {
   burgLabels.selectAll('text').call(d3.drag().on('start', dragBurgLabel)).classed('draggable', true);
   updateBurgValues();
 
-  const my = id || d3.event.target.tagName === 'text' ? 'center bottom-20' : 'center top+20';
+  const my = id || d3.event.target.tagName === 'text' ? 'center bottom-40' : 'center top+40';
   const at = id ? 'center' : d3.event.target.tagName === 'text' ? 'top' : 'bottom';
   const of = id ? 'svg' : d3.event.target;
 
@@ -57,14 +57,17 @@ function editBurg(id) {
   function updateBurgValues() {
     const id = +elSelected.attr('data-id');
     const b = pack.burgs[id];
-    const province = pack.cells.province[b.cell];
-    const provinceName = province ? pack.provinces[province].fullName + ', ' : '';
-    const stateName = pack.states[b.state].fullName || pack.states[b.state].name;
-    document.getElementById('burgProvinceAndState').innerHTML = provinceName + stateName;
 
     document.getElementById('burgName').value = b.name;
     document.getElementById('burgType').value = b.type || 'Generic';
     document.getElementById('burgPopulation').value = rn(b.population * populationRate * urbanization);
+
+    const stateName = pack.states[b.state].fullName || pack.states[b.state].name;
+    const province = pack.cells.province[b.cell];
+    const provinceName = province ? pack.provinces[province].fullName : '';
+    document.getElementById('burgState').innerHTML = stateName;
+    document.getElementById('burgProvince').innerHTML = provinceName;
+
     document.getElementById('burgEditAnchorStyle').style.display = +b.port ? 'inline-block' : 'none';
 
     // update list and select culture
@@ -94,6 +97,18 @@ function editBurg(id) {
     if (b.shanty) document.getElementById('burgShanty').classList.remove('inactive');
     else document.getElementById('burgShanty').classList.add('inactive');
 
+    // economics block
+    let productionHTML = '';
+    for (const resourceId in b.production) {
+      const {name, icon} = Resources.get(+resourceId);
+      const production = b.production[resourceId];
+      productionHTML += `<span data-tip="${name}: ${production}">
+        <svg class="resIcon"><use href="#${icon}"></svg>
+        <span style="margin: 0 0.2em 0 -0.2em">${production}</span>
+      </span>`;
+    }
+    document.getElementById('burgProduction').innerHTML = productionHTML;
+
     //toggle lock
     updateBurgLockIcon();