diff options
| -rw-r--r-- | client/index.js | 58 |
1 files changed, 50 insertions, 8 deletions
diff --git a/client/index.js b/client/index.js index fee4870..3f0e6f9 100644 --- a/client/index.js +++ b/client/index.js @@ -30,6 +30,14 @@ const active_colors = [ '#80ff80', // team 4 '#8080ff', // team 5 ] +const team_names = [ + 'Cops', + 'Green', + 'Blue', + '#3', + '#4', + '#5', +] const neighbor_idxs = [ [-1, -1], @@ -306,11 +314,6 @@ function draw(){ ctx.fillRect(x * Px, y * Px, Px - Margin, Px - Margin) } else { ctx.save() - if (agent === selected_agent) { - ctx.strokeStyle = '#000' - ctx.strokeRect((x + Size + 1) * Px, y * Px, Px, Px) - ctx.strokeRect(x * Px, y * Px, Px, Px) - } ctx.fillStyle = view_color(agent) ctx.fillRect((x + Size + 1) * Px, y * Px, Px - Margin, Px - Margin) ctx.fillStyle = sim.color(agent) @@ -318,8 +321,15 @@ function draw(){ ctx.save() } }) + if (selected_agent && !selected_agent.dead && !selected_agent.J) { + const { y, x } = selected_agent + ctx.strokeStyle = '#000000' + ctx.lineWidth = 1 + ctx.strokeRect((x + Size + 1) * Px, y * Px, Px, Px) + ctx.strokeRect(x * Px, y * Px, Px, Px) + } stats.forEach(stat => stat()) - if (selected_agent.dead) { + if (selected_agent && selected_agent.dead) { observe_random_agent() } } @@ -354,6 +364,7 @@ function restart(){ play() } function play(){ + paused = false clearTimeout(stepTimeout) reset() step() @@ -361,8 +372,12 @@ function play(){ function pause(){ paused = !paused if (!paused) { + document.querySelector('#pause').innerText = 'Pause' clearTimeout(stepTimeout) step() + } else { + document.querySelector('#pause').innerText = 'Paused' + clearTimeout(stepTimeout) } } function stride(fn){ @@ -402,6 +417,19 @@ function pick_view(new_view){ view = new_view console.log('viewing', new_view + ':', views[new_view].name) } +function select_from_event(e){ + const Size = nx.Size.value + const bounds = canvas.getBoundingClientRect() + let y = (((e.pageY - bounds.top) / bounds.height) * Size)|0 + let x = (((e.pageX - bounds.left) / bounds.width) * (2 * Size + 1))|0 + console.log(x, y) + if (x >= Size) { + x %= Size + } + selected_agent = board[y][x] + draw() + return board[y][x] +} function build() { build_options(document.querySelector('#sim'), simulations, pick_simulation) @@ -425,7 +453,7 @@ function build() { min: 0, max: 1, step: 0.01, - value: 0.9, + value: 0.89, }, false) nx.T = Slider(parent, 'activation_threshold', 'Grievance threshold', { min: 0, @@ -491,7 +519,8 @@ 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(agent_el, 'Selected Agent #', () => selected_agent && selected_agent.id), + Statistic(agent_el, 'Selected Agent #', () => selected_agent ? selected_agent.id : 'None'), + Statistic(agent_el, 'Team', () => selected_agent && team_names[selected_agent.team]), 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)), @@ -517,6 +546,19 @@ function build() { const observe_button = document.querySelector('button#observe') observe_button.addEventListener('click', () => { observe_random_agent() + draw() + }) + + let clicked = false + canvas.addEventListener('mousemove', e => { + if (clicked) return + select_from_event(e) + }) + canvas.addEventListener('mousedown', e => { + const found = select_from_event(e) + if (found) { + clicked = true + } }) document.querySelector('.loading').classList.remove('loading') |