districtSimulator.html

---
title: District Simulator
layout: default
permalink: /simulator
---
<script type="text/javascript">
var random_base_prices = [
//-x00---  ---x10---  ---x20---  ---x30---  ---x40---  ---x50---  ---x60---  ---x70---  ---x80---  ---x90---
[  0,  0], [  1,  1], [  2,  2], [  3,  3], [  4,  4], [  5,  5], [  6,  7], [  7,  8], [  8, 10], [  9, 11], // 0xx
[ 10, 14], [ 11, 16], [ 12, 17], [ 13, 19], [ 15, 22], [ 17, 25], [ 19, 27], [ 21, 29], [ 23, 31], [ 25, 33], // 1xx
[ 28, 35], [ 30, 37], [ 32, 39], [ 34, 42], [ 37, 44], [ 39, 46], [ 42, 48], [ 44, 51], [ 47, 53], [ 49, 55], // 2xx
[ 52, 58], [ 54, 61], [ 57, 63], [ 59, 66], [ 62, 67], [ 64, 69], [ 66, 72], [ 68, 75], [ 70, 77], [ 72, 79], // 3xx
[ 74, 81], [ 76, 83], [ 78, 85], [ 80, 86], [ 82, 88], [ 84, 90], [ 87, 92], [ 89, 94], [ 91, 96], [ 94, 98], // 4xx
[ 95,100], [ 98,103], [100,106], [102,108], [104,110], [107,113], [109,115], [111,117], [113,119], [116,122], // 5xx
[118,124], [120,126], [122,128], [125,130], [127,132], [129,134], [131,136], [132,138], [134,140], [136,143], // 6xx
[138,145], [140,147], [142,149], [144,151], [146,152], [149,154], [151,156], [153,158], [155,161], [157,163], // 7xx
[159,165], [160,167], [163,170], [165,172], [168,174], [170,176], [173,179], [175,181], [177,183], [179,186], // 8xx
[181,188], [184,191], [186,193], [189,196], [192,198], [195,200], [197,203], [199,205], [202,207], [204,210], // 9xx
[207,214], [211,217], [215,220], [217,223], [219,225], [222,228], [225,231], [228,234], [231,237], [235,240], //10xx
[238,244], [240,247], [242,250], [244,253], [246,256], [249,260], [252,263], [255,266], [258,269], [260,274], //11xx
[263,277], [266,281], [270,285], [273,290], [276,295], [280,300] //------------------------------------------ //12xx
];

var prices_table_vanilla = [
      0,     0,     0,     0,     0,     0,     0,     0,     0,
  0xA6D,0x5F61,0x7265,0x6128,0x3D25,0x7029,0x2069,0x7320,0x6E6F,
 0x7420,0x7661,0x6C69,0x6420,0x706F,0x696E,0x7465,0x722E,     0,
  0x100, 0x200, 0x3C0,     0,     0,     0,     0,     0,     0,
  0x100, 0x140, 0x280, 0x500,     0,     0,     0,     0,     0,
  0x100, 0x140, 0x200, 0x340, 0x600,     0,     0,     0,     0,
  0x100, 0x140, 0x200, 0x2C0, 0x440, 0x6C0,     0,     0,     0,
  0x100, 0x140, 0x1C0, 0x2C0, 0x3C0, 0x540, 0x780,     0,     0,
  0x100, 0x140, 0x1C0, 0x280, 0x380, 0x480, 0x600, 0x800,     0
];
var prices_table_csmm = [
      0,     0,     0,     0,     0,     0,     0,     0,     0,
  0x100,     0,     0,     0,     0,     0,     0,     0,     0,
  0x100, 0x200,     0,     0,     0,     0,     0,     0,     0,
  0x100, 0x180, 0x3C0,     0,     0,     0,     0,     0,     0,
  0x100, 0x140, 0x280, 0x500,     0,     0,     0,     0,     0,
  0x100, 0x140, 0x200, 0x340, 0x600,     0,     0,     0,     0,
  0x100, 0x140, 0x200, 0x2C0, 0x440, 0x6C0,     0,     0,     0,
  0x100, 0x140, 0x1C0, 0x2C0, 0x3C0, 0x540, 0x780,     0,     0,
  0x100, 0x140, 0x1C0, 0x280, 0x380, 0x480, 0x600, 0x800,     0
];
var prices_table = prices_table_csmm
var maxcap_table_vanilla = [
      0,     0,     0,     0,     0,     0,     0,     0,     0,
  0x100,     0,     0,     0,     0,     0,     0,     0,     0,
  0x100, 0x140,     0,     0,     0,     0,     0,     0,     0,
  0x200, 0x300, 0x600,     0,     0,     0,     0,     0,     0,
  0x180, 0x200, 0x400, 0xA00,     0,     0,     0,     0,     0,
  0x180, 0x200, 0x400, 0xA00, 0xC00,     0,     0,     0,     0,
  0x180, 0x200, 0x400, 0xA00, 0xC00, 0xE00,     0,     0,     0,
  0x180, 0x200, 0x400, 0xA00, 0xC00, 0xE00,0x1000,     0,     0,
  0x180, 0x200, 0x400, 0xA00, 0xC00, 0xE00,0x1000,0x1300,     0
];
var maxcap_table_csmm = [
      0,     0,     0,     0,     0,     0,     0,     0,     0,  
  0x200,     0,     0,     0,     0,     0,     0,     0,     0,
  0x180, 0x300,     0,     0,     0,     0,     0,     0,     0,
  0x180, 0x200, 0x600,     0,     0,     0,     0,     0,     0,
  0x180, 0x200, 0x400, 0xA00,     0,     0,     0,     0,     0,
  0x180, 0x200, 0x400, 0xA00, 0xC00,     0,     0,     0,     0,
  0x180, 0x200, 0x400, 0xA00, 0xC00 ,0xE00,     0,     0,     0,
  0x180, 0x200, 0x400, 0xA00, 0xC00, 0xE00,0x1000,     0,     0,
  0x180, 0x200, 0x400, 0xA00, 0xC00, 0xE00,0x1000,0x1300,     0
];
var maxcap_table = maxcap_table_csmm
var price_rank_table = [
  [    0, 1],
  [   50, 2],
  [  100, 3],
  [  300, 4],
  [ 1000, 5],
  [ 3000, 6],
  [ 5000, 7]
];
var district = {};
function get_table_entry(owner) {
	if (owner < 0)
		return (district.numshops * 9);
	return (district.numshops * 9) + district.numshopsowned[owner] - 1;
}

function calc_shop_pri(s, te) {
	var v = ((s.curvalue * 2) - s.basevalue) * s.baseprice;
	var mp = prices_table[te] >> 6;
	v = Math.floor(((v * mp) >> 2) / s.basevalue);
	if (v < 0)
		return 1;
	return v;
}

function recalc() {
	district.stockbase = 0;
	district.numshops = 0;
	district.numshopsowned = [0, 0, 0, 0];

	for (var i = 0; i < 8; ++i) {
		var s = district.shops[i];

		var sval = parseInt(s.tx_svalue.value);
		var spri = parseInt(s.tx_sprice.value);
		if (!sval || !spri) {
			s.active = 0;
			s.basevalue = -1;
			// s.owner = -1;
			continue;
		}
		s.active = 1;
		++district.numshops;
		if (s.owner >= 0 && s.owner <= 3)
			++district.numshopsowned[s.owner];
		if (s.basevalue != sval || s.owner == -1)
			s.basevalue = s.curvalue = sval;
		s.baseprice = spri;
		district.stockbase += s.curvalue;
	}

	district.stockbase = Math.floor(district.stockbase / district.numshops);
	district.stockvalue = (district.stockbase * district.stockmulti) >> 16;

	for (var i = 0; i < 8; ++i) {
		var s = district.shops[i];
		if (!s.active)
			continue;

		var te = get_table_entry(s.owner);
		if (s.owner != -1)
			s.maxcapital = ((s.basevalue * maxcap_table[te]) >> 8) - s.curvalue;
		else
			s.maxcapital = 0;
		if (s.maxcapital < 0)
			s.maxcapital = 0;

		s.curprice = calc_shop_pri(s, te);
	}

	recalc_display();
}

function recalc_display() {
	for (var i = 0; i < 8; ++i) {
		var s = district.shops[i];
		s.tx_boughtbox.className = "hidden";
		s.tx_infobox.className = "hidden";
		if (!s.active)
			continue;

		if (s.owner != -1)
			s.tx_boughtbox.className = "";
		s.tx_infobox.style = "";

		if (s.owner == -1) {
			s.tx_infobox.className = "unowned";
      s.tx_info_img.className = "unowned";
		} else {
			s.tx_infobox.className = "player-"+s.owner;
      s.tx_info_img.className = "player-"+s.owner;
    }

    for (var j = 0; j < price_rank_table.length; j++) {
      let price = price_rank_table[j][0]
      let rank = price_rank_table[j][1]
      if(s.curprice>=price) {
        s.tx_info_img.src = `/assets/images/shop_${rank}.png`
      }
    }

		s.tx_info_price.innerHTML = s.curprice;
		s.tx_info_value.innerHTML = s.curvalue;
		s.tx_info_maxcap.innerHTML = s.maxcapital;

		if (s.maxcapital > 999)
			s.tx_invest.value = 999;
		else
			s.tx_invest.value = s.maxcapital;
	}
	district.tx_stocks.innerHTML = district.stockvalue;
}

function setup() {
	var sl = [];
	for (var i = 1; i <= 8; ++i) {
		sl[i-1] = {};
		sl[i-1].tx_svalue = document.getElementById("shop"+i+"_value");
		sl[i-1].tx_sprice = document.getElementById("shop"+i+"_price");
		sl[i-1].tx_infobox = document.getElementById("shop"+i+"_info");
		sl[i-1].tx_boughtbox = document.getElementById("shop"+i+"_bought");
    sl[i-1].tx_info_img = document.getElementById("shop"+i+"_info_img");
		sl[i-1].tx_info_price = document.getElementById("shop"+i+"_info_price");
		sl[i-1].tx_info_value = document.getElementById("shop"+i+"_info_value");
		sl[i-1].tx_info_maxcap = document.getElementById("shop"+i+"_info_maxcap");
		sl[i-1].tx_invest = document.getElementById("shop"+i+"_invest");

		sl[i-1].owner = -1;
		sl[i-1].basevalue = 0;
		sl[i-1].baseprice = 0;
		sl[i-1].curvalue = 0;
		sl[i-1].curprice = 0;
		sl[i-1].maxcapital = 0;
		sl[i-1].rank = 0;
		sl[i-1].active = 0;
	}
	district.shops = sl;
	district.numshops = 0;
	district.numshopsowned = [0, 0, 0, 0];
	district.stockbase = 0;
	district.stockmulti = 0xB00;
	district.stockvalue = 0;
	district.tx_stocks = document.getElementById("stocks");

	// Force random vars to set amount, then run random
	document.getElementById("r-vmin").value = 90;
	document.getElementById("r-vmax").value = 550;
	document.getElementById("r-smin").value = 4;
	document.getElementById("r-smax").value = 6;
	document.getElementById("r-target").value = 10;
	document.getElementById("r-dupes").checked = false;
	document.getElementById("r-pnorm").checked = true;
	document.getElementById("r-plow").checked = false;
	document.getElementById("r-phi").checked = false;

	randomize();
}

function set_owner(i,j) {
	district.shops[i].owner = j;
	recalc();
}

function invest(i) {
	var s = district.shops[i];
	var parse = parseInt(s.tx_invest.value);
	if (!parse || s.maxcapital <= 0) return;
	if (parse > s.maxcapital)
		parse = s.maxcapital;
	if (parse > 999)
		parse = 999;

	s.curvalue += parse;
	recalc();
}

function set_vanilla() {
	maxcap_table = maxcap_table_vanilla
  prices_table = prices_table_vanilla
	recalc();
}

function set_csmm() {
	maxcap_table = maxcap_table_csmm
  prices_table = prices_table_csmm
	recalc();
}

function randrange(a, b) { return Math.floor((Math.random() * (b-a+1))+a); }

function get_random_price(value, mode) {
	//value = Math.floor(value / 10);
	if (value < 0 || value > 125)
		return 0;
	var a = random_base_prices[value][0];
	var b = random_base_prices[value][1];
	
	var result1 = randrange(a,b);
	if (mode == 0) return result1;
	var result2 = randrange(a,b);
	if ((mode == -1 && result1 < result2) || (mode == 1 && result1 > result2))
		return result1;
	return result2;
}

function get_random_values(vmin, vmax, smin, smax, target, dupes)
{
	var recip = 0x001745D1; // Reciprocal of the starting stock multiplier

	var numshops = randrange(smin, smax);

	var a = ((target * recip) >> 16) + 1;
	var b = (((target + 1) * recip) >> 16);
	a = Math.floor(((a * numshops) + 9) / 10);
	b = Math.floor((b * numshops) / 10);

	var ourtarget = randrange(a,b);
	if ((vmin * numshops) > ourtarget) return -1;
	if ((vmax * numshops) < ourtarget) return -1;

	var numbers = [];
	var buffer = (vmin * (numshops - 1));
	var total = 0;
	var fail = 0;
	var nextnummax;
	var nextnummin;
	var realnumbers = [];

	for (var tries = 10000; tries; --tries)
	{
		numbers = [];
		buffer = (vmin * (numshops - 1));
		total = 0;

		fail = 0;
		for (var i = 0; i < numshops-1; ++i) {
			nextnummin = total + vmin;
			nextnummax = total + vmax;
			if (total + vmax > ourtarget - buffer)
				nextnummax = ourtarget - buffer;
			numbers[i] = randrange(nextnummin, nextnummax);
			total = numbers[i];
			buffer -= vmin;
		}
		numbers[i] = ourtarget;

		realnumbers = [];
		realnumbers[0] = numbers[0];
		for (var i = 1; i < numbers.length; ++i) {
			realnumbers[i] = numbers[i] - numbers[i-1];
			if (realnumbers[i] > vmax) {
				fail = 1;
				break;
			}
			else if (!dupes) {
				for (var j = 0; j < i; ++j) {
					if (realnumbers[j] == realnumbers[i]) {
						fail = 1;
						break;
					}
				}
			}
		}
		if (!fail)
			break;
	}
	if (fail)
		return -2;

	return realnumbers;
}

function randomize() {
	var tx_vmin = document.getElementById("r-vmin");
	var tx_vmax = document.getElementById("r-vmax");
	var tx_smin = document.getElementById("r-smin");
	var tx_smax = document.getElementById("r-smax");
	var tx_target = document.getElementById("r-target");
	var tx_dupes = document.getElementById("r-dupes");
	var tx_plow = document.getElementById("r-plow");
	var tx_phi = document.getElementById("r-phi");
	var tx_error = document.getElementById("r-error");

	var rand_mode = 0;
	if (tx_plow.checked) rand_mode = -1;
	if (tx_phi.checked) rand_mode = 1;

	var dupes = 0;
	if (tx_dupes.checked) dupes = 1;

	var vmin = parseInt(tx_vmin.value);
	var vmax = parseInt(tx_vmax.value);
	var smin = parseInt(tx_smin.value);
	var smax = parseInt(tx_smax.value);
	var target = parseInt(tx_target.value);
	if (!vmin || !vmax || !smin || !smax || !target)
	{
		tx_error.innerHTML="An input is missing.";
		return;
	}

	vmin = Math.floor((vmin + 9) / 10);
	vmax = Math.floor(vmax / 10);

	if (vmin >= vmax) { tx_error.innerHTML="Shop value minimum is greater than (or equal to) maximum."; return; }
  if (prices_table == prices_table_vanilla) {
    if (smin < 3) smin = 3;
	  if (smax > 8) smax = 8;
  } else {
    if (smin < 1) smin = 1;
	  if (smax > 8) smax = 8;
  }
	if (smin > smax) { tx_error.innerHTML="Shop count minimum is greater than maximum."; return; }
	if (target <= 2 || target > 50) { tx_error.innerHTML="Target stock price is constrained from 3 to 50 for sanity purposes."; return; }

	var shop_values = get_random_values(vmin,vmax,smin,smax,target,dupes);
	if (shop_values === -1) { tx_error.innerHTML="Criteria impossible to meet."; return; }
	if (shop_values === -2) { tx_error.innerHTML="Took too long to come up with a reasonable result.<br>Loosen the randomizer's criteria or try again."; return; }
	for (var i = 0; i < 8; ++i) {
		district.shops[i].basevalue = -1;
		// district.shops[i].owner = -1;
		if (i >= shop_values.length)
			district.shops[i].tx_svalue.value = district.shops[i].tx_sprice.value = "";
		else {
			district.shops[i].tx_svalue.value = shop_values[i] * 10;
			district.shops[i].tx_sprice.value = get_random_price(shop_values[i], rand_mode);
		}
	}
	tx_error.innerHTML="";
	recalc();
}
</script>
<style>
.hidden { border:none; visibility:hidden; }
/*
.unowned {	border: 4px solid #606060; }
div.player-0 { border: 4px solid #FF0000; }
div.player-1 { border: 4px solid #00FF00; }
div.player-2 { border: 4px solid #0000FF; }
div.player-3 { border: 4px solid #FFFF00; }

.btn.player-0 { background-color: #FF0000; color: white;}
.btn.player-1 { background-color: #00FF00; color: black;}
.btn.player-2 { background-color: #0000FF; color: white;}
.btn.player-3 { background-color: #FFFF00; color: black;}
*/
.btn.player-0 { background-color: #FF0000; color: white;}
.btn.player-1 { background-color: #00FF00; color: black;}
.btn.player-2 { background-color: #0000FF; color: white;}
.btn.player-3 { background-color: #FFFF00; color: black;}

.ownership { text-align:center; }
.ownership .o-unowned { width:90%; }
.ownership input { width:20%; }

.info-box { text-align:center; }
.info-box div .i-price			 { font-size: smaller; text-align:right; color: white; background-color: rgba(0, 0, 0, 0.5);}
.info-box div .i-price span	 { font-size:  larger; font-weight:bold; color: white; }
.info-box div .i-value			 { font-size: smaller; text-align:right; color: white; background-color: rgba(0, 0, 0, 0.5);}
.info-box div .i-value span	 { font-size:  larger; font-weight:bold; color: white; }
.info-box div .i-maxcap			 { font-size: smaller; text-align:right; color: white; background-color: rgba(0, 0, 0, 0.5);}
.info-box div .i-maxcap span { font-size:  larger; font-weight:bold; color: white; }
.info-box .card-img { background-color: rgba(0, 0, 0, 0.5); }
.info-box img { object-fit:scale-down; height:150px; max-width: 100px; padding: 1rem; object-position: bottom; }
.info-box img.unowned  { filter: grayscale(100%) }
.info-box img.player-0 { filter: hue-rotate(0deg) }
.info-box img.player-1 { filter: hue-rotate(90deg) }
.info-box img.player-2 { filter: hue-rotate(180deg) }
.info-box img.player-3 { filter: contrast(50%) brightness(125%) hue-rotate(53deg) saturate(175%) }

.stock-price span { font-size: larger;font-weight:bold; }

table tr { vertical-align: top; }

</style>


  <!--- Navigation -->
  <section class="jumbotron text-center">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" aria-current="page" href="{% link index.html %}">Home</a>
              </li>
          </div>
        </div>
      </nav>

      <h1 class="jumbotron-heading">District Simulator</h1>
      <p class="lead text-muted">Simulates the prices, values, investments and stock values for districts with various amount of shops.</p>
      <p class="lead text-muted"><a href="http://inuyasha.rustedlogic.net/projects/fs-district-sim/">Original</a> by Kaito Sinclaire</p>
    </div>
  </section>

<main role="main">
	<section class="jumbotron text-center">
		<div class="container">

<div class="d-flex flex-row-reverse bd-highlight">
  <div class="alert alert-dark" aria-label="This only affects districts with 3 or less shops" data-balloon-pos="up" data-balloon-blunt>
    <label for="tables-group" class="form-label">Use Multiplier Table from</label>
    <div class="btn-group" role="group" id="tables-group" aria-label="Basic example">
      <input type="radio" class="btn-check" name="gametype" id="gametype_csmm" value="csmm" autocomplete="off" onclick="set_csmm();" checked>
      <label class="btn btn-outline-primary" for="gametype_csmm">CSMM</label>
    
      <input type="radio" class="btn-check" name="gametype" id="gametype_vanilla" value="vanilla" autocomplete="off" onclick="set_vanilla();">
      <label class="btn btn-outline-primary" for="gametype_vanilla">Vanilla</label>
    </div>
</div>
</div>

<table><tbody><tr>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop1_value" oninput="recalc()" placeholder="Value"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop2_value" oninput="recalc()" placeholder="Value"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop3_value" oninput="recalc()" placeholder="Value"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop4_value" oninput="recalc()" placeholder="Value"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop5_value" oninput="recalc()" placeholder="Value"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop6_value" oninput="recalc()" placeholder="Value"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop7_value" oninput="recalc()" placeholder="Value"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop8_value" oninput="recalc()" placeholder="Value"><span class="input-group-text alert-secondary">g</span></div></td>
</tr><tr>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop1_price" oninput="recalc()" placeholder="Price"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop2_price" oninput="recalc()" placeholder="Price"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop3_price" oninput="recalc()" placeholder="Price"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop4_price" oninput="recalc()" placeholder="Price"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop5_price" oninput="recalc()" placeholder="Price"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop6_price" oninput="recalc()" placeholder="Price"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop7_price" oninput="recalc()" placeholder="Price"><span class="input-group-text alert-secondary">g</span></div></td>
<td class="input-box"><div class="input-group"><input type="text" class="form-control" id="shop8_price" oninput="recalc()" placeholder="Price"><span class="input-group-text alert-secondary">g</span></div></td>
</tr><tr>
<td class="ownership">
<input type="radio" class="btn-check" name="btnradio0" id="btnradio0-0" autocomplete="off" onclick="set_owner(0,-1)" checked>
<label class="btn btn-outline-secondary" for="btnradio0-0">Unowned</label>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio0" id="btnradio0-1" autocomplete="off" onclick="set_owner(0,0)">
  <label class="btn btn-outline-danger" for="btnradio0-1">1</label>
  <input type="radio" class="btn-check" name="btnradio0" id="btnradio0-2" autocomplete="off" onclick="set_owner(0,1)">
  <label class="btn btn-outline-success" for="btnradio0-2">2</label>
  <input type="radio" class="btn-check" name="btnradio0" id="btnradio0-3" autocomplete="off" onclick="set_owner(0,2)">
  <label class="btn btn-outline-primary" for="btnradio0-3">3</label>
  <input type="radio" class="btn-check" name="btnradio0" id="btnradio0-4" autocomplete="off" onclick="set_owner(0,3)">
  <label class="btn btn-outline-warning" for="btnradio0-4">4</label>
</div>
</td>
<td class="ownership">
  <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-0" autocomplete="off" onclick="set_owner(1,-1)" checked>
  <label class="btn btn-outline-secondary" for="btnradio1-0">Unowned</label>
  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-1" autocomplete="off" onclick="set_owner(1,0)">
    <label class="btn btn-outline-danger" for="btnradio1-1">1</label>
    <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-2" autocomplete="off" onclick="set_owner(1,1)">
    <label class="btn btn-outline-success" for="btnradio1-2">2</label>
    <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-3" autocomplete="off" onclick="set_owner(1,2)">
    <label class="btn btn-outline-primary" for="btnradio1-3">3</label>
    <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-4" autocomplete="off" onclick="set_owner(1,3)">
    <label class="btn btn-outline-warning" for="btnradio1-4">4</label>
  </div>
</td>
<td class="ownership">
  <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-0" autocomplete="off" onclick="set_owner(2,-1)" checked>
  <label class="btn btn-outline-secondary" for="btnradio2-0">Unowned</label>
  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-1" autocomplete="off" onclick="set_owner(2,0)">
    <label class="btn btn-outline-danger" for="btnradio2-1">1</label>
    <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-2" autocomplete="off" onclick="set_owner(2,1)">
    <label class="btn btn-outline-success" for="btnradio2-2">2</label>
    <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-3" autocomplete="off" onclick="set_owner(2,2)">
    <label class="btn btn-outline-primary" for="btnradio2-3">3</label>
    <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-4" autocomplete="off" onclick="set_owner(2,3)">
    <label class="btn btn-outline-warning" for="btnradio2-4">4</label>
  </div>
</td>
<td class="ownership">
  <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-0" autocomplete="off" onclick="set_owner(3,-1)" checked>
  <label class="btn btn-outline-secondary" for="btnradio3-0">Unowned</label>
  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-1" autocomplete="off" onclick="set_owner(3,0)">
    <label class="btn btn-outline-danger" for="btnradio3-1">1</label>
    <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-2" autocomplete="off" onclick="set_owner(3,1)">
    <label class="btn btn-outline-success" for="btnradio3-2">2</label>
    <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-3" autocomplete="off" onclick="set_owner(3,2)">
    <label class="btn btn-outline-primary" for="btnradio3-3">3</label>
    <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-4" autocomplete="off" onclick="set_owner(3,3)">
    <label class="btn btn-outline-warning" for="btnradio3-4">4</label>
  </div>
</td>
<td class="ownership">
  <input type="radio" class="btn-check" name="btnradio4" id="btnradio4-0" autocomplete="off" onclick="set_owner(4,-1)" checked>
  <label class="btn btn-outline-secondary" for="btnradio4-0">Unowned</label>
  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio4" id="btnradio4-1" autocomplete="off" onclick="set_owner(4,0)">
    <label class="btn btn-outline-danger" for="btnradio4-1">1</label>
    <input type="radio" class="btn-check" name="btnradio4" id="btnradio4-2" autocomplete="off" onclick="set_owner(4,1)">
    <label class="btn btn-outline-success" for="btnradio4-2">2</label>
    <input type="radio" class="btn-check" name="btnradio4" id="btnradio4-3" autocomplete="off" onclick="set_owner(4,2)">
    <label class="btn btn-outline-primary" for="btnradio4-3">3</label>
    <input type="radio" class="btn-check" name="btnradio4" id="btnradio4-4" autocomplete="off" onclick="set_owner(4,3)">
    <label class="btn btn-outline-warning" for="btnradio4-4">4</label>
  </div>
</td>
<td class="ownership">
  <input type="radio" class="btn-check" name="btnradio5" id="btnradio5-0" autocomplete="off" onclick="set_owner(5,-1)" checked>
  <label class="btn btn-outline-secondary" for="btnradio5-0">Unowned</label>
  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio5" id="btnradio5-1" autocomplete="off" onclick="set_owner(5,0)">
    <label class="btn btn-outline-danger" for="btnradio5-1">1</label>
    <input type="radio" class="btn-check" name="btnradio5" id="btnradio5-2" autocomplete="off" onclick="set_owner(5,1)">
    <label class="btn btn-outline-success" for="btnradio5-2">2</label>
    <input type="radio" class="btn-check" name="btnradio5" id="btnradio5-3" autocomplete="off" onclick="set_owner(5,2)">
    <label class="btn btn-outline-primary" for="btnradio5-3">3</label>
    <input type="radio" class="btn-check" name="btnradio5" id="btnradio5-4" autocomplete="off" onclick="set_owner(5,3)">
    <label class="btn btn-outline-warning" for="btnradio5-4">4</label>
  </div>
</td>
<td class="ownership">
  <input type="radio" class="btn-check" name="btnradio6" id="btnradio6-0" autocomplete="off" onclick="set_owner(6,-1)" checked>
  <label class="btn btn-outline-secondary" for="btnradio6-0">Unowned</label>
  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio6" id="btnradio6-1" autocomplete="off" onclick="set_owner(6,0)">
    <label class="btn btn-outline-danger" for="btnradio6-1">1</label>
    <input type="radio" class="btn-check" name="btnradio6" id="btnradio6-2" autocomplete="off" onclick="set_owner(6,1)">
    <label class="btn btn-outline-success" for="btnradio6-2">2</label>
    <input type="radio" class="btn-check" name="btnradio6" id="btnradio6-3" autocomplete="off" onclick="set_owner(6,2)">
    <label class="btn btn-outline-primary" for="btnradio6-3">3</label>
    <input type="radio" class="btn-check" name="btnradio6" id="btnradio6-4" autocomplete="off" onclick="set_owner(6,3)">
    <label class="btn btn-outline-warning" for="btnradio6-4">4</label>
  </div>
</td>
<td class="ownership">
  <input type="radio" class="btn-check" name="btnradio7" id="btnradio7-0" autocomplete="off" onclick="set_owner(7,-1)" checked>
  <label class="btn btn-outline-secondary" for="btnradio7-0">Unowned</label>
  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio7" id="btnradio7-1" autocomplete="off" onclick="set_owner(7,0)">
    <label class="btn btn-outline-danger" for="btnradio7-1">1</label>
    <input type="radio" class="btn-check" name="btnradio7" id="btnradio7-2" autocomplete="off" onclick="set_owner(7,1)">
    <label class="btn btn-outline-success" for="btnradio7-2">2</label>
    <input type="radio" class="btn-check" name="btnradio7" id="btnradio7-3" autocomplete="off" onclick="set_owner(7,2)">
    <label class="btn btn-outline-primary" for="btnradio7-3">3</label>
    <input type="radio" class="btn-check" name="btnradio7" id="btnradio7-4" autocomplete="off" onclick="set_owner(7,3)">
    <label class="btn btn-outline-warning" for="btnradio7-4">4</label>
  </div>
</td>
</tr><tr>
<td class="info-box"><div id="shop1_info" class="unowned"><div class="card h-100">
  <div class="card-img"><img src="/assets/images/shop_1.png" id="shop1_info_img"></div>
  <div class="card-img-overlay">
    <div class="i-value">Shop value <span id="shop1_info_value">390</span>g</div>
    <div class="i-price">Shop price <span id="shop1_info_price">79</span>g</div>
    <div class="i-maxcap">Max capital <span id="shop1_info_maxcap">0</span>g</div></div></div></div></td>
<td class="info-box"><div id="shop2_info" class="unowned"><div class="card h-100">
  <div class="card-img"><img src="/assets/images/shop_2.png" id="shop2_info_img"></div>
  <div class="card-img-overlay">
    <div class="i-value">Shop value <span id="shop2_info_value">290</span>g</div>
    <div class="i-price">Shop price <span id="shop2_info_price">54</span>g</div>
    <div class="i-maxcap">Max capital <span id="shop2_info_maxcap">0</span>g</div></div></div></div></td>
<td class="info-box"><div id="shop3_info" class="unowned"><div class="card h-100">
  <div class="card-img"><img src="/assets/images/shop_3.png" id="shop3_info_img"></div>
  <div class="card-img-overlay">
    <div class="i-value">Shop value <span id="shop3_info_value">110</span>g</div>
    <div class="i-price">Shop price <span id="shop3_info_price">11</span>g</div>
    <div class="i-maxcap">Max capital <span id="shop3_info_maxcap">0</span>g</div></div></div></div></td>
<td class="info-box"><div id="shop4_info" class="unowned"><div class="card h-100">
  <div class="card-img"><img src="/assets/images/shop_4.png" id="shop4_info_img"></div>
  <div class="card-img-overlay">
    <div class="i-value">Shop value <span id="shop4_info_value">320</span>g</div>
    <div class="i-price">Shop price <span id="shop4_info_price">63</span>g</div>
    <div class="i-maxcap">Max capital <span id="shop4_info_maxcap">0</span>g</div></div></div></div></td>
<td class="info-box"><div id="shop5_info" class="unowned"><div class="card h-100">
  <div class="card-img"><img src="/assets/images/shop_5.png" id="shop5_info_img"></div>
  <div class="card-img-overlay">
    <div class="i-value">Shop value <span id="shop5_info_value">210</span>g</div>
    <div class="i-price">Shop price <span id="shop5_info_price">36</span>g</div>
    <div class="i-maxcap">Max capital <span id="shop5_info_maxcap">0</span>g</div></div></div></div></td>
<td class="info-box"><div id="shop6_info" class="unowned"><div class="card h-100">
  <div class="card-img"><img src="/assets/images/shop_6.png" id="shop6_info_img"></div>
  <div class="card-img-overlay">
    <div class="i-value">Shop value <span id="shop6_info_value">180</span>g</div>
    <div class="i-price">Shop price <span id="shop6_info_price">26</span>g</div>
    <div class="i-maxcap">Max capital <span id="shop6_info_maxcap">0</span>g</div></div></div></div></td>
<td class="info-box"><div id="shop7_info" class="unowned"><div class="card h-100">
  <div class="card-img"><img src="/assets/images/shop_7.png" id="shop7_info_img"></div>
  <div class="card-img-overlay">
    <div class="i-value">Shop value <span id="shop7_info_value">100</span>g</div>
    <div class="i-price">Shop price <span id="shop7_info_price">10</span>g</div>
    <div class="i-maxcap">Max capital <span id="shop7_info_maxcap">0</span>g</div></div></div></div></td>
<td class="info-box"><div id="shop8_info" class="unowned"><div class="card h-100">
  <div class="card-img"><img src="/assets/images/shop_1.png" id="shop8_info_img"></div>
  <div class="card-img-overlay">
    <div class="i-value">Shop value <span id="shop8_info_value">100</span>g</div>
    <div class="i-price">Shop price <span id="shop8_info_price">10</span>g</div>
    <div class="i-maxcap">Max capital <span id="shop8_info_maxcap">0</span>g</div></div></div></div></td>
</tr><tr>
<td class="invest-box"><div id="shop1_bought" class="hidden"><div class="input-group"><input type="text" class="form-control" id="shop1_invest" maxlength="3"><input class="btn btn-secondary" type="button" value="Invest" onclick="invest(0)"></div></div></td>
<td class="invest-box"><div id="shop2_bought" class="hidden"><div class="input-group"><input type="text" class="form-control" id="shop2_invest" maxlength="3"><input class="btn btn-secondary" type="button" value="Invest" onclick="invest(1)"></div></div></td>
<td class="invest-box"><div id="shop3_bought" class="hidden"><div class="input-group"><input type="text" class="form-control" id="shop3_invest" maxlength="3"><input class="btn btn-secondary" type="button" value="Invest" onclick="invest(2)"></div></div></td>
<td class="invest-box"><div id="shop4_bought" class="hidden"><div class="input-group"><input type="text" class="form-control" id="shop4_invest" maxlength="3"><input class="btn btn-secondary" type="button" value="Invest" onclick="invest(3)"></div></div></td>
<td class="invest-box"><div id="shop5_bought" class="hidden"><div class="input-group"><input type="text" class="form-control" id="shop5_invest" maxlength="3"><input class="btn btn-secondary" type="button" value="Invest" onclick="invest(4)"></div></div></td>
<td class="invest-box"><div id="shop6_bought" class="hidden"><div class="input-group"><input type="text" class="form-control" id="shop6_invest" maxlength="3"><input class="btn btn-secondary" type="button" value="Invest" onclick="invest(5)"></div></div></td>
<td class="invest-box"><div id="shop7_bought" class="hidden"><div class="input-group"><input type="text" class="form-control" id="shop7_invest" maxlength="3"><input class="btn btn-secondary" type="button" value="Invest" onclick="invest(6)"></div></div></td>
<td class="invest-box"><div id="shop8_bought" class="hidden"><div class="input-group"><input type="text" class="form-control" id="shop8_invest" maxlength="3"><input class="btn btn-secondary" type="button" value="Invest" onclick="invest(7)"></div></div></td>
</tr>
</tbody></table>
<div class="stock-price alert alert-secondary">Stock prices for the district are currently <span id="stocks">10</span>g.</span></div>

<br>

<br>

</section>
<section class="jumbotron text-center">
  <div class="container">
    <h3 class="jumbotron-heading">Random district creation</h1>

<table>
<tbody><tr><td style="text-align:left;">
<div>
  <label for="shop-values" class="form-label">Shop values:</label>
  <div class="input-group" id="shop-values"><span class="input-group-text alert-secondary">min</span><input style="text-align:right; width:100px" class="form-control" type="text" id="r-vmin" value="90" maxlength="4"><span class="input-group-text alert-secondary">/</span><input class="form-control" style="width:100px" type="text" id="r-vmax" value="550" maxlength="4"><span class="input-group-text alert-secondary">max</span></div>
</div>
<div>
  <label for="number-of-shops" class="form-label">Number of shops:</label>
  <div class="input-group" id="number-of-shops"><span class="input-group-text alert-secondary">min</span><input style="text-align:right; width:100px" class="form-control" type="text" id="r-smin" value="4" maxlength="1"><span class="input-group-text alert-secondary">/</span><input class="form-control" style="width:100px" type="text" id="r-smax" value="6" maxlength="1"><span class="input-group-text alert-secondary">max</span></div>
</div>
<div>
  <label for="target-stock-value" class="form-label">Target stock value:</label>
  <div class="input-group" id="target-stock-value"><input class="form-control" style="text-align:right; width:100px" type="text" id="r-target" value="10" maxlength="2"><span class="input-group-text alert-secondary">g</span></div>
</div>
</td>
<td>
  <div class="btn-group-vertical" role="group" aria-label="Basic radio toggle button group">
    <div><label><input type="radio" class="form-check-input" name="pri" value="0" id="r-pnorm" checked="checked"> Normal shop prices</label></div>
    <div><label><input type="radio" class="form-check-input" name="pri" value="-1" id="r-plow"> Bias lower prices</label></div>
    <div><label><input type="radio" class="form-check-input" name="pri" value="1" id="r-phi"> Bias higher prices</label></div>
  </div>
</td>
<td>
<div><label><input type="checkbox" class="form-check-input" id="r-dupes"> Allow duplicates</label></div>
<input type="button" class="btn btn-primary" value="Randomize" onclick="randomize()">
</td>
</tr></tbody></table>
<span style="color:#d00000" id="r-error"></span>

<script>setup();</script>

    </div>
  </section>
</main>