summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--play.css194
-rw-r--r--play.html2
-rw-r--r--play.js28
3 files changed, 113 insertions, 111 deletions
diff --git a/play.css b/play.css
index 4abe0d3..99ff1ca 100644
--- a/play.css
+++ b/play.css
@@ -105,7 +105,6 @@ aside {
#map {
width: 1650px;
height: 2550px;
- background-image: url(map75.png);
background-size: 1650px 2550px;
box-shadow: 1px 1px 8px #0008;
}
@@ -126,33 +125,21 @@ aside {
.marker.turn {
width: 55px;
height: 55px;
- background-image: url(markers.1x/game_turn_regulars.png);
-}
-
-.marker.turn.no-regulars {
- background-image: url(markers.1x/game_turn_no_regulars.png);
}
.marker.french-alliance {
width: 55px;
height: 55px;
- background-image: url(markers.1x/french_alliance.png);
-}
-
-.marker.french-alliance.european-war {
- background-image: url(markers.1x/european_war.png);
}
.marker.congress {
width: 55px;
height: 55px;
- background-image: url(markers.1x/continental_congress.png);
}
.marker.french-navy {
width: 64px;
height: 130px;
- background-image: url(markers.1x/french_navy_tall.png);
}
.marker.control {
@@ -161,24 +148,17 @@ aside {
visibility: hidden;
}
-.marker.control.british {
- visibility: visible;
- background-image: url(markers.1x/colony_british.png);
-}
-
-.marker.control.american {
- visibility: visible;
- background-image: url(markers.1x/colony_american.png);
-}
+.marker.control.british { visibility: visible; }
+.marker.control.american { visibility: visible; }
.pc {
+ border: none;
+ box-shadow: none;
width: 58px;
height: 66px;
+ filter: drop-shadow(1px 1px 2px #0008);
}
-.pc.american { background-image: url(markers.1x/pc_american.png); }
-.pc.british { background-image: url(markers.1x/pc_british.png); }
-
.cu {
width: calc(60px - 6px);
height: 60px;
@@ -191,14 +171,17 @@ aside {
border-radius: 50%;
}
-.cu.american { background-image: url(markers.1x/cu_american.png); }
-.cu.british { background-image: url(markers.1x/cu_british.png); }
-.cu.french { background-image: url(markers.1x/cu_french.png); }
-.general {
+.general.tall {
width: 64px;
height: 130px;
}
+
+.general.small {
+ width: 45px;
+ height: 45px;
+}
+
.general.offmap {
display: none;
}
@@ -206,25 +189,12 @@ aside {
.general.american.action, .general.american.selected { box-shadow: 0 0 5px 5px white; }
.general.french.action, .general.french.selected { box-shadow: 0 0 5px 5px white; }
-.general:hover { z-index: 1; }
-.general.selected { z-index: 2; }
-.marker.congress { z-index: 3 }
-.cu { z-index: 4; }
-.space { z-index: 5; }
-
-.general.Arnold { background-image: url(markers.1x/general_arnold_tall.png); }
-.general.Gates { background-image: url(markers.1x/general_gates_tall.png); }
-.general.Greene { background-image: url(markers.1x/general_greene_tall.png); }
-.general.Lafayette { background-image: url(markers.1x/general_lafayette_tall.png); }
-.general.Lee { background-image: url(markers.1x/general_lee_tall.png); }
-.general.Lincoln { background-image: url(markers.1x/general_lincoln_tall.png); }
-.general.Rochambeau { background-image: url(markers.1x/general_rochambeau_tall.png); }
-.general.Washington { background-image: url(markers.1x/general_washington_tall.png); }
-.general.Burgoyne { background-image: url(markers.1x/general_burgoyne_tall.png); }
-.general.Carleton { background-image: url(markers.1x/general_carleton_tall.png); }
-.general.Clinton { background-image: url(markers.1x/general_clinton_tall.png); }
-.general.Cornwallis { background-image: url(markers.1x/general_cornwallis_tall.png); }
-.general.Howe { background-image: url(markers.1x/general_howe_tall.png); }
+.general { z-index: 2; }
+.general:hover { z-index: 3; }
+.general.selected { z-index: 4; }
+.marker.congress { z-index: 5 }
+.cu { z-index: 1; }
+.space { z-index: 6; }
.space {
position: absolute;
@@ -258,8 +228,9 @@ aside {
.card {
width: 250px;
height: 350px;
- background-size: 250px 350px;
- border-radius: 15px;
+ background-size: 100%;
+ border-radius: 16px;
+ border: 1px solid black;
box-shadow: var(--piece-shadow);
display: none;
}
@@ -267,6 +238,7 @@ aside {
#turn_info .card {
width: 125px;
height: 175px;
+ border-radius: 8px;
}
.card.show {
@@ -281,70 +253,99 @@ aside {
border-radius: 20px;
}
-.shift .hand .card:hover, .shift .hand .card.selected {
- transform: scale(1.5) translate(0,-30px);
- z-index: 10;
-}
-
#war_ends {
- left:1074px;
+ left:1073px;
top:1647px;
position:absolute;
width: 187px;
height: 262px;
- //transform: rotate(90deg);
+ transform: rotate(90deg);
background-size: 187px 262px;
- border-radius: 10px;
- //box-shadow: 2px -2px 8px rgba(0,0,0,0.5);
+ border-radius: 12px;
display: none;
+ border: 1px solid black;
}
-#war_ends.year_1779 {
- background-image:url(cards75/WWcard-071.png);
- display: block;
-}
-#war_ends.year_1780 {
- background-image:url(cards75/WWcard-072.png);
- display: block;
-}
-#war_ends.year_1781 {
- background-image:url(cards75/WWcard-073.png);
- display: block;
-}
-#war_ends.year_1782 {
- background-image:url(cards75/WWcard-074.png);
- display: block;
-}
-#war_ends.year_1783 {
- background-image:url(cards75/WWcard-075.png);
- display: block;
-}
+#war_ends.year_1779 { display: block; }
+#war_ends.year_1780 { display: block; }
+#war_ends.year_1781 { display: block; }
+#war_ends.year_1782 { display: block; }
+#war_ends.year_1783 { display: block; }
-#played_british_reinforcements { left: 911px; }
-#played_american_reinforcements_1 { left: 1144px; }
-#played_american_reinforcements_2 { left: 1376px; }
+#played_british_reinforcements { left: 909px; }
+#played_american_reinforcements_1 { left: 1142px; }
+#played_american_reinforcements_2 { left: 1375px; }
.reinforcements {
position:absolute;
top: 1922px;
width: 187px;
height: 262px;
- border-radius: 10px;
+ border-radius: 12px;
display: none;
+ border: 1px solid black;
}
-.reinforcements.ops_1 {
- background-image:url(cards75/WWcard-045.png);
- display: block;
-}
-.reinforcements.ops_2 {
- background-image:url(cards75/WWcard-023.png);
- display: block;
-}
-.reinforcements.ops_3 {
- background-image:url(cards75/WWcard-001.png);
- display: block;
-}
+.reinforcements.ops_1 { display: block; }
+.reinforcements.ops_2 { display: block; }
+.reinforcements.ops_3 { display: block; }
/* IMAGES */
+#map { background-image: url(map75.jpg); }
+
+.marker.french-navy { background-image: url(markers.1x/french_navy_tall.png); }
+
+.marker.turn { background-image: url(markers.1x/game_turn_regulars.png); }
+.marker.turn.no-regulars { background-image: url(markers.1x/game_turn_no_regulars.png); }
+.marker.french-alliance { background-image: url(markers.1x/french_alliance.png); }
+.marker.french-alliance.european-war { background-image: url(markers.1x/european_war.png); }
+.marker.congress { background-image: url(markers.1x/continental_congress.png); }
+.marker.congress { background-image: url(markers.1x/continental_congress.png); }
+.marker.control.british { background-image: url(markers.1x/colony_british.png); }
+.marker.control.american { background-image: url(markers.1x/colony_american.png); }
+.cu.american { background-image: url(markers.1x/cu_american.png); }
+.cu.british { background-image: url(markers.1x/cu_british.png); }
+.cu.french { background-image: url(markers.1x/cu_french.png); }
+
+.pc.american { background-image: url(markers.1x/pc_american.svg); }
+.pc.british { background-image: url(markers.1x/pc_british.svg); }
+
+.general.tall.Arnold { background-image: url(markers.1x/general_arnold_tall.png); }
+.general.tall.Gates { background-image: url(markers.1x/general_gates_tall.png); }
+.general.tall.Greene { background-image: url(markers.1x/general_greene_tall.png); }
+.general.tall.Lafayette { background-image: url(markers.1x/general_lafayette_tall.png); }
+.general.tall.Lee { background-image: url(markers.1x/general_lee_tall.png); }
+.general.tall.Lincoln { background-image: url(markers.1x/general_lincoln_tall.png); }
+.general.tall.Rochambeau { background-image: url(markers.1x/general_rochambeau_tall.png); }
+.general.tall.Washington { background-image: url(markers.1x/general_washington_tall.png); }
+.general.tall.Burgoyne { background-image: url(markers.1x/general_burgoyne_tall.png); }
+.general.tall.Carleton { background-image: url(markers.1x/general_carleton_tall.png); }
+.general.tall.Clinton { background-image: url(markers.1x/general_clinton_tall.png); }
+.general.tall.Cornwallis { background-image: url(markers.1x/general_cornwallis_tall.png); }
+.general.tall.Howe { background-image: url(markers.1x/general_howe_tall.png); }
+
+.general.small.Arnold { background-image: url(markers.1x/general_arnold.png); }
+.general.small.Gates { background-image: url(markers.1x/general_gates.png); }
+.general.small.Greene { background-image: url(markers.1x/general_greene.png); }
+.general.small.Lafayette { background-image: url(markers.1x/general_lafayette.png); }
+.general.small.Lee { background-image: url(markers.1x/general_lee.png); }
+.general.small.Lincoln { background-image: url(markers.1x/general_lincoln.png); }
+.general.small.Rochambeau { background-image: url(markers.1x/general_rochambeau.png); }
+.general.small.Washington { background-image: url(markers.1x/general_washington.png); }
+.general.small.Burgoyne { background-image: url(markers.1x/general_burgoyne.png); }
+.general.small.Carleton { background-image: url(markers.1x/general_carleton.png); }
+.general.small.Clinton { background-image: url(markers.1x/general_clinton.png); }
+.general.small.Cornwallis { background-image: url(markers.1x/general_cornwallis.png); }
+.general.small.Howe { background-image: url(markers.1x/general_howe.png); }
+
+#war_ends.year_1779 { background-image:url(cards75/WWcard-071.png); }
+#war_ends.year_1780 { background-image:url(cards75/WWcard-072.png); }
+#war_ends.year_1781 { background-image:url(cards75/WWcard-073.png); }
+#war_ends.year_1782 { background-image:url(cards75/WWcard-074.png); }
+#war_ends.year_1783 { background-image:url(cards75/WWcard-075.png); }
+
+.reinforcements.ops_1 { background-image:url(cards75/WWcard-045.png); }
+.reinforcements.ops_2 { background-image:url(cards75/WWcard-023.png); }
+.reinforcements.ops_3 { background-image:url(cards75/WWcard-001.png); }
+
.card_back{background-image:url(cards100/WW-CardBack.png)}
.card_1{background-image:url(cards100/WWcard-001.png)}
.card_2{background-image:url(cards100/WWcard-001.png)}
@@ -355,7 +356,7 @@ aside {
.card_7{background-image:url(cards100/WWcard-001.png)}
.card_8{background-image:url(cards100/WWcard-001.png)}
.card_9{background-image:url(cards100/WWcard-001.png)}
-.card_10{background-image:url(cards100/WWcard-01.png)}
+.card_10{background-image:url(cards100/WWcard-001.png)}
.card_11{background-image:url(cards100/WWcard-001.png)}
.card_12{background-image:url(cards100/WWcard-001.png)}
.card_13{background-image:url(cards100/WWcard-001.png)}
@@ -456,3 +457,4 @@ aside {
.card_108{background-image:url(cards100/WWcard-108.png)}
.card_109{background-image:url(cards100/WWcard-109.png)}
.card_110{background-image:url(cards100/WWcard-110.png)}
+
diff --git a/play.html b/play.html
index 7426339..9a69f17 100644
--- a/play.html
+++ b/play.html
@@ -71,8 +71,8 @@
<div id="mapwrap">
<div id="map">
<div id="pc"></div>
- <div id="generals"></div>
<div id="cu"></div>
+ <div id="generals"></div>
<div id="markers"></div>
<div id="spaces"></div>
<div id="war_ends"></div>
diff --git a/play.js b/play.js
index 9d396ec..cd613d8 100644
--- a/play.js
+++ b/play.js
@@ -181,7 +181,7 @@ function build_map() {
e.addEventListener("click", on_space)
ui.spaces[i] = e
document.getElementById("spaces").appendChild(e)
- ui.pc[i] = build_marker("pc", name + "-pc", space.x, space.y, 67, 58.5, [ "pc" ])
+ ui.pc[i] = build_marker("pc", name + "-pc", space.x, space.y, 58, 66, [ "pc" ])
}
}
@@ -193,7 +193,7 @@ function build_map() {
ui.blockade[zone] = e
}
- ui.turn = build_marker("markers", "GameTurn", BOXES["Game Turn 1775"].x, BOXES["Game Turn 1775"].y, 56.5, 56.5, [
+ ui.turn = build_marker("markers", "GameTurn", BOXES["Game Turn 1775"].x, BOXES["Game Turn 1775"].y, 55, 55, [
"turn",
])
@@ -202,8 +202,8 @@ function build_map() {
"FrenchAlliance",
BOXES["French Alliance Track 0"].x,
BOXES["French Alliance Track 0"].y,
- 56.5,
- 56.5,
+ 55,
+ 55,
[ "french-alliance" ]
)
@@ -212,8 +212,8 @@ function build_map() {
"FrenchNavy",
SPACES[data.space_index["French Reinforcements"]].x - 130 / 2 - 10,
SPACES[data.space_index["French Reinforcements"]].y - 32,
- 126 / 2,
- 252 / 2,
+ 64,
+ 130,
[ "french-navy" ]
)
@@ -222,14 +222,14 @@ function build_map() {
"Congress",
SPACES[data.space_index["Philadelphia"]].x,
SPACES[data.space_index["Philadelphia"]].y,
- 113 / 2,
- 113 / 2,
+ 55,
+ 55,
[ "congress" ]
)
for (let c = 0; c <= 13; ++c) {
let name = data.colony_name[c]
- ui.control[c] = build_marker("markers", "control_" + name, BOXES[name].x, BOXES[name].y, 38 + 8, 38 + 8, [ "control" ])
+ ui.control[c] = build_marker("markers", "control_" + name, BOXES[name].x, BOXES[name].y, 45, 45, [ "control" ])
}
for (let c = 1; c <= 110; ++c) {
@@ -240,7 +240,8 @@ function build_map() {
for (let g = 0; g < general_count; ++g) {
let color = GENERALS[g].owner.toLowerCase()
let name = GENERALS[g].name
- ui.generals[g] = build_marker("generals", g, 0, 0, 126 / 2, 252 / 2, [ "general", color, name, "offmap" ])
+ //ui.generals[g] = build_marker("generals", g, 0, 0, 64, 130, [ "general", "tall", color, name, "offmap" ])
+ ui.generals[g] = build_marker("generals", g, 0, 0, 45, 45, [ "general", "small", color, name, "offmap" ])
ui.generals[g].addEventListener("click", on_general)
}
}
@@ -262,8 +263,6 @@ function count_french_cu(s) {
}
function update_units() {
- const unitW = 130 / 2
- const unitH = 263 / 2
const generalX = -22
const generalY = 22
const cuX = 20
@@ -337,7 +336,8 @@ function update_units() {
let space = SPACES[loc] || BOXES[loc]
if (space) {
let o = offset[loc] | 0
- update_marker_xy(e, space.x + o * generalX, space.y + o * generalY - 32)
+ // update_marker_xy(e, space.x + o * generalX, space.y + o * generalY - 32)
+ update_marker_xy(e, space.x + o * generalX + 20, space.y + o * generalY - 20)
e.classList.remove("offmap")
offset[loc] = ++o
} else {
@@ -357,7 +357,7 @@ function update_units() {
let o = offset[s] | 0
let x = space.x + o * cuX
let y = space.y + o * cuY
- let e = build_marker("cu", null, x, y, 122 / 2, 122 / 2, cn)
+ let e = build_marker("cu", null, x, y, 60, 60, cn)
e.textContent = n
offset[s] = ++o
}