all features seem to be working

3 files changed, 53 insertions, 33 deletions

diff --git a/client/index.js b/client/index.js
index 644b1ea..fee4870 100644
--- a/client/index.js
+++ b/client/index.js
@@ -16,8 +16,8 @@ const types = { SIM_REBELLION: 0, SIM_GENOCIDE: 1 }
 
 const inactive_colors = [
   '#000000', // cops
-  '#008000', // team 1
-  '#000080', // team 2
+  '#00d020', // team 1
+  '#0000f0', // team 2
   '#008080', // team 3
   '#00ff80', // team 4
   '#0080ff', // team 5
@@ -46,6 +46,9 @@ const simulations = {
     id: types.SIM_REBELLION,
     name: 'Civil Violence Model I: Generalized Rebellion Against Central Authority',
     teams: 1,
+    init: () => {
+      document.querySelector('.governmental_legitimacy').innerText = 'Governmental Legitimacy'
+    },
     update: (agent, N, T) => {
       if (agent.J > 0) return
       const is_active = agent.GN > T
@@ -65,6 +68,9 @@ const simulations = {
     id: types.SIM_GENOCIDE,
     name: 'Civil Violence Model II: Inter-Group Violence',
     teams: 2,
+    init: () => {
+      document.querySelector('.governmental_legitimacy').innerText = 'Empathy'
+    },
     update: (agent, N, T) => {
       if (agent.dead) return
       if (agent.Age-- <= 0) {
@@ -117,7 +123,11 @@ const views = {
   GN: {
     value: 'GN',
     name: 'Distance from threshold',
-  }
+  },
+  id: {
+    value: 'id',
+    name: 'Agent ID',
+  },
 }
 
 const Px = 10
@@ -256,7 +266,13 @@ function move(agent, N){
 }
 function view_color(agent){
   let x, H, S, L
-  if (view === 'GN') {
+  if (view === 'id') {
+    x = agent.id / agent_id
+    H = x * 360
+    S = 1
+    L = 0.5
+  }
+  else if (view === 'GN') {
     x = agent[view]
     H = agent.active ? 0 : 180
     S = 1-x
@@ -378,7 +394,7 @@ function neighbors(agent){
 }
 function pick_simulation(new_sim){
   sim = simulations[new_sim]
-  // console.log(new_sim, sim)
+  sim.init()
   console.log(sim.name)
   reset()
 }
@@ -400,8 +416,8 @@ function build() {
     value: 40,
   }, true, restart)
   nx.Rate = Slider(parent, 'rate', 'Frame rate', {
-    min: 10,
-    max: 1000,
+    min: 100,
+    max: 5000,
     step: 10,
     value: 200,
   }, true, reset)
@@ -455,12 +471,13 @@ function build() {
   }, false, play)
   nx.Cops = Slider(parent, 'cop_density', 'Cop density', {
     min: 0,
-    max: 0.1,
+    max: 0.3,
     step: 0.002,
     value: 0.05
   }, false, play)
 
   const stats_el = document.querySelector('#stats')
+  const agent_el = document.querySelector('#agent')
   const log_el = document.querySelector('#log')
   stats = [
     Statistic(stats_el, 'Time', () => time),
@@ -474,21 +491,20 @@ function build() {
     Statistic(stats_el, 'Died of old age', () => died.old_age),
     Statistic(stats_el, 'Died in jail', () => died.in_jail),
     Statistic(stats_el, 'Murder rate', () => died.murder),
-    Statistic(stats_el, '~ ~ ~', () => ''),
-    Statistic(stats_el, 'Selected Agent #', () => selected_agent && selected_agent.id),
-    Statistic(stats_el, 'Position', () => selected_agent && (selected_agent.x + ',' + selected_agent.y)),
-    Statistic(stats_el, 'Hardship', () => selected_agent && selected_agent.H.toFixed(2)),
-    Statistic(stats_el, 'Risk tolerance', () => selected_agent && selected_agent.R.toFixed(2)),
-    Statistic(stats_el, 'Grievance', () => selected_agent && selected_agent.G.toFixed(2)),
-    Statistic(stats_el, 'Score', () => selected_agent && selected_agent.GN.toFixed(2)),
-    Statistic(stats_el, 'Cop / Active ratio', () => selected_agent && selected_agent.CAv.toFixed(2)),
-    Statistic(stats_el, 'Arrest probability', () => selected_agent && selected_agent.P.toFixed(2)),
-    Statistic(stats_el, 'Net risk', () => selected_agent && selected_agent.NetR.toFixed(2)),
-    Statistic(stats_el, 'Active', () => selected_agent && yesno(selected_agent.active)),
-    Statistic(stats_el, 'Age', () => selected_agent && selected_agent.Age),
-    Statistic(stats_el, 'In Jail?', () => selected_agent && yesno(selected_agent.J)),
-    Statistic(stats_el, 'Dead?', () => selected_agent && yesno(selected_agent.dead)),
-    Statistic(stats_el, 'Jail term', () => selected_agent && (selected_agent.J ? selected_agent.J : '')),
+    Statistic(agent_el, 'Selected Agent #', () => selected_agent && selected_agent.id),
+    Statistic(agent_el, 'Position', () => selected_agent && (selected_agent.x + ',' + selected_agent.y)),
+    Statistic(agent_el, 'Hardship', () => selected_agent && selected_agent.H.toFixed(2)),
+    Statistic(agent_el, 'Risk tolerance', () => selected_agent && selected_agent.R.toFixed(2)),
+    Statistic(agent_el, 'Grievance', () => selected_agent && selected_agent.G.toFixed(2)),
+    Statistic(agent_el, 'Score', () => selected_agent && selected_agent.GN.toFixed(2)),
+    Statistic(agent_el, 'Cop / Active ratio', () => selected_agent && selected_agent.CAv.toFixed(2)),
+    Statistic(agent_el, 'Arrest probability', () => selected_agent && selected_agent.P.toFixed(2)),
+    Statistic(agent_el, 'Net risk', () => selected_agent && selected_agent.NetR.toFixed(2)),
+    Statistic(agent_el, 'Active', () => selected_agent && yesno(selected_agent.active)),
+    Statistic(agent_el, 'Age', () => selected_agent && selected_agent.Age),
+    Statistic(agent_el, 'Dead?', () => selected_agent && yesno(selected_agent.dead)),
+    Statistic(agent_el, 'In Jail?', () => selected_agent && yesno(selected_agent.J)),
+    Statistic(agent_el, 'Jail term', () => selected_agent && selected_agent.J),
     Statistic(log_el, 'Log', () => selected_agent && (selected_agent.log.join('\n'))),
   ]
 
diff --git a/client/lib/util.js b/client/lib/util.js
index 35a537d..824c955 100644
--- a/client/lib/util.js
+++ b/client/lib/util.js
@@ -159,6 +159,7 @@ function Slider(parent, tag, title, options, is_int, fn){
   const val = document.createElement('span')
   val.classList.add('val')
   const label = document.createElement('label')
+  label.classList = tag
   label.innerHTML = title
   block.appendChild(label)
   block.appendChild(el)
diff --git a/index.html b/index.html
index ee85962..0719f78 100644
--- a/index.html
+++ b/index.html
@@ -105,21 +105,23 @@ select {
 	flex-direction: row;
 	width: 400px;
 }
-#stats {
+.stats {
 	display: flex;
 	flex-direction: column;
+	margin-right: 10px;
 }
-#stats .stat {
+.stats .stat {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 }
-#stats .key {
+.stats .key {
 	font-weight: normal;
 }
-#stats .val {
+.stats .val {
 	width: 40px;
 	white-space: pre;
+	text-align: right;
 }
 canvas {
 	width: calc(100vh - 200px);
@@ -129,9 +131,9 @@ canvas {
 	display: none;
 }
 #log .val {
-	margin-left: 10px;
-	margin-top: 40px;
+	text-align: left;
 }
+select#view { max-width: 260px; }
 </style>
 </head>
 <body class='loading'>
@@ -161,10 +163,11 @@ canvas {
 		</div>
 		<div class='column'>
 			<select id="view"></select>
-			<div id="stats"></div>
-		</div>
-		<div class='column'>
-			<div id="log"></div>
+			<div class='row'>
+				<div id="stats" class="stats"></div>
+				<div id="agent" class="stats"></div>
+				<div id="log" class="stats"></div>
+			</div>
 		</div>
 </div>
 <div class="corner left">