diff options
| -rw-r--r-- | images/bang.svg | 1 | ||||
| -rw-r--r-- | play.css | 5 | ||||
| -rw-r--r-- | play.js | 84 |
3 files changed, 61 insertions, 29 deletions
diff --git a/images/bang.svg b/images/bang.svg new file mode 100644 index 0000000..36c50d6 --- /dev/null +++ b/images/bang.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#BB1A34" d="M22 0l-4 8.028-5-5.018v7.024L3 8.028l8 8.028-11 6.02h12L6 34.118l12-8.028 11 10.035-3-14.049h10l-8-6.021 8-9.031-12 3.01L22 0z"/><path fill="#FCAB40" d="M22.914 12.924l1.86-.467L30 11.146l-3.381 3.816-1.319 1.49 1.59 1.195 2.925 2.202h-5.918l.473 2.218 1.551 7.26-5.845-5.332-1.056-.964-1.188.795-5.24 3.506 2.406-4.828 1.322-2.655H9.564l3.759-2.059 2.145-1.172-1.727-1.735-3.044-3.053 3.221.646 2.186.439V8.686l1.45 1.455 1.794 1.799 1.133-2.276 1.273-2.556"/><path fill="#F5F8FA" d="M21.512 14.301l.767-.193 2.158-.541-1.396 1.576-.545.615.656.493 1.208.909h-2.443l.195.916.641 2.997-2.413-2.201-.437-.398-.49.328-2.163 1.448.993-1.994.546-1.096H16l1.553-.85.885-.484-.713-.716-1.257-1.261 1.329.267.903.181v-1.745l.599.6.74.743.468-.939.525-1.056"/></svg>
\ No newline at end of file @@ -137,11 +137,10 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) } pointer-events: none; width: 48px; height: 48px; - background-image: url(bang.svg); + background-image: url(images/bang.svg); background-size: contain; background-repeat: no-repeat; - opacity: 75%; - z-index: 2000; + z-index: 0; } .marker { @@ -8,6 +8,10 @@ /* COMMON */ +function lerp(a, b, t) { + return a + t * (b - a) +} + function set_has(set, item) { let a = 0 let b = set.length - 1 @@ -284,22 +288,35 @@ function on_init() { ui.french_alliance = build_piece("marker large french_alliance", 55+2, 55+2) ui.combat = document.createElement("div") - ui.combat.id = "combat" + ui.combat.id = "combat" // "combat" } on_init() /* UPDATE UI */ -function lerp(a, b, t) { - return a + t * (b - a) -} - function show_combat_marker() { - let x = Math.round(lerp(data.spaces[view.move.from].x, data.spaces[view.move.to].x, 0.67)) - let y = Math.round(lerp(data.spaces[view.move.from].y, data.spaces[view.move.to].y, 0.67)) - ui.combat.style.left = x - 20 + "px" - ui.combat.style.top = y - 20 + "px" + let x1 = data.spaces[view.move.from].x + let y1 = data.spaces[view.move.from].y + let x2 = data.spaces[view.move.to].x + let y2 = data.spaces[view.move.to].y + let dx = x2 - x1 + let dy = y2 - y1 + let n = Math.hypot(dx, dy) + let a = Math.atan2(dy, dx) + let x, y + + if (n < 150) { + x = x2 - (dx/n) * 36 + y = y2 - (dy/n) * 36 + } else { + x = lerp(x1, x2, 3/4) + y = lerp(y1, y2, 3/4) + } + + ui.combat.style.left = (x|0) - 24 + "px" + ui.combat.style.top = (y|0) - 24 + "px" + ui.combat.style.transform = "rotate(" + (a + Math.PI/2) + "rad)" ui.pieces_element.appendChild(ui.combat) } @@ -346,7 +363,7 @@ function player_info(player, nc, nq) { function general_offset(g) { let n = 0 for (let i = 0; i < g; ++i) { - if (view.move && view.move.who === i) + if (view.move && view.move.from !== view.move.to && view.move.who === i) continue if (view.react && view.react.who === i) continue @@ -372,23 +389,37 @@ function general_total(g) { function get_army_xy_lerp(s1, s2) { if (s1 === s2) return get_army_xy(s2) - - let dx = data.spaces[s2].x - data.spaces[s1].x - let dy = data.spaces[s2].y - data.spaces[s1].y + //return get_army_xy(s2) let x, y if (s1 >= 66) { - x = data.spaces[s1].x + x = data.spaces[s1].x - 15 y = data.spaces[s1].y - 40 } else { - x = data.spaces[s1].x + (dx * 1/2) | 0 - y = data.spaces[s1].y + (dy * 1/2) | 0 + let x1 = data.spaces[s1].x + let y1 = data.spaces[s1].y + let x2 = data.spaces[s2].x + let y2 = data.spaces[s2].y + let dx = x2 - x1 + let dy = y2 - y1 + let n = Math.hypot(dx, dy) + let a = Math.atan2(dy, dx) + + x = lerp(x1, x2, 1/2) + y = lerp(y1, y2, 1/2) + + if (n < 150) { + if (Math.abs(dx) > Math.abs(dy)) { + if (dx > 0) + x -= 10 + else + x += 10 + y -= 35 + } + } } - if (Math.abs(dx) < 180 && Math.abs(dy) < 60) y -= 20 - if (Math.abs(dx) < 180 && Math.abs(dy) < 40) y -= 20 - - return [ x - 15, y ] + return [ (x|0) , (y|0) ] } function get_army_xy(s) { @@ -497,6 +528,9 @@ function on_update() { else show_marker_at(ui.french_navy, data.layout.sea[view.french_navy][0]-15, data.layout.sea[view.french_navy][1]+42) + if (view.move && view.move.from !== view.move.to) + show_combat_marker() + for (let s = 0; s < data.spaces.length; ++s) { ui.layout_static[s] = layout_all_cu( get_static_acu(s), @@ -512,11 +546,11 @@ function on_update() { if (view.move) { let xy = null if (view.move.from === view.move.to && - view.move.carry_american === count_american_cu(view.move.from) && - view.move.carry_french === count_french_cu(view.move.from) && - view.move.carry_british === count_british_cu(view.move.from) + view.move.carry_american === count_american_cu(view.move.to) && + view.move.carry_french === count_french_cu(view.move.to) && + view.move.carry_british === count_british_cu(view.move.to) ) - xy = get_static_xy(view.move.from) + xy = get_static_xy(view.move.to) else xy = get_army_xy_lerp(view.move.from, view.move.to) @@ -530,8 +564,6 @@ function on_update() { xy ) - if (view.move.from !== view.move.to) - show_combat_marker() } if (view.react) { |
