diff --git a/icons/se_frigate.svg b/icons/se_frigate.svg new file mode 100644 index 0000000..69639b9 --- /dev/null +++ b/icons/se_frigate.svg @@ -0,0 +1,3 @@ + diff --git a/icons/tr_corsair.svg b/icons/tr_corsair.svg new file mode 100644 index 0000000..3bff76d --- /dev/null +++ b/icons/tr_corsair.svg @@ -0,0 +1,3 @@ + diff --git a/icons/tr_frigate.svg b/icons/tr_frigate.svg new file mode 100644 index 0000000..bd42d9a --- /dev/null +++ b/icons/tr_frigate.svg @@ -0,0 +1,3 @@ + diff --git a/icons/tr_infantry.svg b/icons/tr_infantry.svg new file mode 100644 index 0000000..67aa142 --- /dev/null +++ b/icons/tr_infantry.svg @@ -0,0 +1,3 @@ + diff --git a/icons/us_frigate.svg b/icons/us_frigate.svg new file mode 100644 index 0000000..8df04b2 --- /dev/null +++ b/icons/us_frigate.svg @@ -0,0 +1,3 @@ + diff --git a/icons/us_gunboat.svg b/icons/us_gunboat.svg new file mode 100644 index 0000000..e43e203 --- /dev/null +++ b/icons/us_gunboat.svg @@ -0,0 +1,3 @@ + diff --git a/icons/us_marine.svg b/icons/us_marine.svg new file mode 100644 index 0000000..a68b207 --- /dev/null +++ b/icons/us_marine.svg @@ -0,0 +1,3 @@ + diff --git a/play.html b/play.html index 61ad59b..439d942 100644 --- a/play.html +++ b/play.html @@ -73,55 +73,60 @@ /* MAP */ +.mapwrap.fit { + box-shadow: 0px 0px 15px rgba(0,0,0,0.8); +} + #map { + position: relative; display: block; width: 2476px; height: 801px; background-color: black; - box-shadow: 0 0 15px rgba(0,0,0,0.8); + box-shadow: 0px 0px 15px rgba(0,0,0,0.8); } -#map.fit { - width: 100%; - height: auto; +svg { + position: absolute; } -#map image { +svg image { pointer-events: none; } -#map use, #map circle { - transition-property: x, y, cx, cy; +svg circle, .piece { + transition-property: x, y, cx, cy, top, left; transition-duration: 700ms; transition-timing-function: ease; } -#map use { +.piece { + position: absolute; pointer-events: none; + background-size: cover; + background-repeat: none; + filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.5)); } -#map use.highlight { +.piece.highlight { pointer-events: all; cursor: pointer; - stroke: white; + filter: brightness(150%) drop-shadow(0 0 3px white); } -#map use.highlight.damaged { - stroke: lightgray; +.piece.damaged { + filter: brightness(60%) drop-shadow(1px 1px 4px rgba(0,0,0,0.5)); } -.us_frigate { fill: #0977bd; } -.us_gunboat { fill: #0977bd; } -.se_frigate { fill: #fdd527; } -.tr_frigate { fill: #de333e; } -.tr_corsair { fill: #de333e; } -.al_corsair { fill: #f39331; } -.us_marine { fill: #0977bd; } -.ar_infantry { fill: #e0e0e0; } -.tr_infantry { fill: #de333e; } - -.us_frigate.damaged { fill: #005577; } -.tr_frigate.damaged { fill: #881111; } +.piece.us_frigate { width: 42px; height: 29px; background-image: url("icons/us_frigate.svg"); } +.piece.se_frigate { width: 42px; height: 29px; background-image: url("icons/se_frigate.svg"); } +.piece.tr_frigate { width: 42px; height: 29px; background-image: url("icons/tr_frigate.svg"); } +.piece.us_gunboat { width: 33px; height: 27px; background-image: url("icons/us_gunboat.svg"); } +.piece.tr_corsair { width: 33px; height: 27px; background-image: url("icons/tr_corsair.svg"); } +.piece.al_corsair { width: 33px; height: 27px; background-image: url("icons/al_corsair.svg"); } +.piece.us_marine { width: 21px; height: 21px; background-image: url("icons/us_marine.svg"); } +.piece.ar_infantry { width: 21px; height: 21px; background-image: url("icons/ar_infantry.svg"); } +.piece.tr_infantry { width: 21px; height: 21px; background-image: url("icons/tr_infantry.svg"); } .harbor { fill-opacity: 0; @@ -275,7 +280,7 @@ -

+ +

diff --git a/ui.js b/ui.js index 32b1a33..77b4cfe 100644 --- a/ui.js +++ b/ui.js @@ -55,7 +55,7 @@ const TRACK_1804 = get_space_id("1804"); const TRACK_1805 = get_space_id("1805"); const TRACK_1806 = get_space_id("1806"); -let map = document.getElementById("map"); +let map = document.getElementById("svgmap"); let ui = { spaces: {}, @@ -99,7 +99,7 @@ function build_map() { } for (let i = 0; i < PIECES.length; ++i) { let piece = PIECES[i]; - let e = map.getElementById(piece); + let e = document.getElementById(piece); if (e) { e.addEventListener("mouseenter", on_focus_piece); e.addEventListener("mouseleave", on_blur); @@ -221,8 +221,8 @@ function update_season_marker(season) { function set_piece_xy(p, x, y) { let e = ui.pieces[p]; - e.setAttribute("x", x); - e.setAttribute("y", y); + e.style.left = Math.round(x - e.offsetWidth/2) + "px"; + e.style.top = Math.round(y - e.offsetHeight/2) + "px"; } function layout_space(location, s, x0, y0, size) { @@ -416,10 +416,7 @@ function on_click_card(evt) { /* INITIALIZE CLIENT */ -function toggle_fit() { - document.getElementById("map").classList.toggle("fit"); -} - build_map(); scroll_with_middle_mouse(".grid_center"); +init_map_zoom(); init_client([ "Tripolitania", "United States" ]); -- cgit v1.2.3