diff options
| -rw-r--r-- | play.css | 66 | ||||
| -rw-r--r-- | play.js | 3 |
2 files changed, 39 insertions, 30 deletions
@@ -61,7 +61,7 @@ header.your_turn { background-color: orange; } width: 224px; height: 348px; border-radius: 12px; - box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + box-shadow: 1px 1px 4px #0008; display: none; } @@ -123,6 +123,11 @@ header.your_turn { background-color: orange; } #battle_header { background-color: brown; color: lemonchiffon; } #FR, #ER { background-color: #bda27e; } +#battle.sea #battle_header { background-color: hsl(205, 40%, 45%); color: white; } +#battle.sea #FR, #battle.sea #ER { background-color: hsl(205, 30%, 60%); } +#battle.sea { background-color: hsl(205, 30%, 70%); } +#battle.sea #battle_message { background-color: hsl(205, 50%, 85%); } + /* MAP WITH BLOCKS AND SPACES */ #mapwrap { @@ -148,7 +153,6 @@ header.your_turn { background-color: orange; } left: 51px; border-radius: 12px; border: 3px solid white; - box-shadow: 0 0 12px white; } #turn.year_705 { top: 384px; } #turn.year_706 { top: 301px; } @@ -213,34 +217,47 @@ body.shift .block.known:hover { .block.highlight { cursor: pointer; } -.simple-labels .block { width: 48px; height: 48px; border-radius: 6px; } +.simple-labels .block { + width: 48px; + height: 48px; + border: 3px solid black; + box-shadow: 0 0 2px 1px #0002; + border-radius: 6px; +} +.simple-labels .block.Caesar { background-color: #b22; border-color: #822; } +.simple-labels .block.Pompeius { background-color: #eb2; border-color: #862; } +.simple-labels .block.Cleopatra { background-color: #09b; border-color: #067; } +.simple-labels .block.highlight { border-color: white; } +.simple-labels .block.selected { border-color: yellow; } +.simple-labels .hit .block.highlight { border-color: black; } -.simple-labels .block.Caesar { background-color: #b22; border: 2px solid #822; } -.simple-labels .block.Pompeius { background-color: #eb2; border: 2px solid #862; } -.simple-labels .block.Cleopatra { background-color: #09b; border: 2px solid #067; } -.simple-labels .block.highlight { border: 2px solid white; } -.simple-labels .block.selected { border: 2px solid yellow; } -.simple-labels .block.moved { filter: grayscale(70%); } +.columbia-labels .block { + width: 56px; + height: 56px; + border: 3px solid #363639; + box-shadow: 0 0 2px 1px #0002; + border-radius: 6px; +} -.columbia-labels .block{ width: 56px; height: 56px; border-radius: 6px; } +.columbia-labels .block.Caesar { background-color: hsl(358, 69%, 47%); } +.columbia-labels .block.Pompeius { background-color: hsl(43, 87%, 44%); } +.columbia-labels .block.Cleopatra { background-color: hsl(187, 100%, 35%); } -.columbia-labels .block.Caesar { background-color: #c22; border: 3px solid #822; } -.columbia-labels .block.Pompeius { background-color: #c91; border: 3px solid #862; } -.columbia-labels .block.Cleopatra { background-color: #09a; border: 3px solid #067; } -.columbia-labels .block.known.Caesar { background-color: #822; } -.columbia-labels .block.known.Pompeius { background-color: #862; } -.columbia-labels .block.known.Cleopatra { background-color: #067; } -.columbia-labels .block.highlight { border: 3px solid white; } -.columbia-labels .block.selected { border: 3px solid yellow; } -.columbia-labels .block.moved { filter: grayscale(70%); } +.columbia-labels .block.Caesar { border-color: hsl(358, 69%, 32%); } +.columbia-labels .block.Pompeius { border-color: hsl(43, 87%, 30%); } +.columbia-labels .block.Cleopatra { border-color: hsl(187, 100%, 23%); } -.battle_menu.hit .block.highlight { border-color: black; } +.columbia-labels .block.highlight { border-color: white; } +.columbia-labels .block.selected { border-color: yellow; } +.columbia-labels .hit .block.highlight { border-color: black; } .columbia-labels .block.r0 { transform: rotate(0deg); } .columbia-labels .block.r1 { transform: rotate(-90deg); } .columbia-labels .block.r2 { transform: rotate(-180deg); } .columbia-labels .block.r3 { transform: rotate(-270deg); } +.block.moved { filter: grayscale(50%); } + .block.mars { background-image: url("mars.svg"); background-size: 80%; @@ -262,15 +279,6 @@ body.shift .block.known:hover { */ .block.battle { opacity: 0; pointer-events: none; } -body.Observer .simple-labels .known.jupiter.Caesar { border: 2px solid #862; } -body.Observer .simple-labels .known.jupiter.Pompeius { border: 2px solid #822; } -body.Observer .simple-labels .known.jupiter.Cleopatra { border: 2px solid #822; } -body.Observer .columbia-labels .known.jupiter.Caesar { border: 3px solid #862; } -body.Observer .columbia-labels .known.jupiter.Pompeius { border: 3px solid #822; } -body.Observer .columbia-labels .known.jupiter.Cleopatra { border: 3px solid #822; } - -.block { box-shadow: 0px 0px 4px 0px black; } - .block { transition-property: top, left, transform, opacity; transition-duration: 700ms, 700ms, 250ms, 250ms; @@ -483,7 +483,7 @@ function layout_blocks_spread(location, north, south) { function position_block_spread(location, row, n_rows, col, n_cols, element) { let space = SPACES[location] - let block_size = (label_style === 'columbia') ? 56+6 : 48+4 + let block_size = (label_style === 'columbia') ? 56+6 : 48+6 let padding = (location === LEVY || location === DEAD) ? 6 : 3 let offset = block_size + padding let row_size = (n_rows-1) * offset @@ -853,6 +853,7 @@ function on_update() { update_battle() if (!document.getElementById("battle").classList.contains("show")) show_battle() + document.getElementById("battle").classList.toggle("sea", SPACES[view.battle.where].type === "sea") } else { document.getElementById("battle").classList.remove("show") } |