From 3820856482017e0f206b0481856a86a2b4fc589c Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 24 Aug 2024 01:17:17 +0200 Subject: Start client. --- play.css | 436 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 436 insertions(+) create mode 100644 play.css (limited to 'play.css') diff --git a/play.css b/play.css new file mode 100644 index 0000000..f33c156 --- /dev/null +++ b/play.css @@ -0,0 +1,436 @@ +main { background-color: #777; } + +#role_DS { background-color: silver } +#role_BK { background-color: turquoise } +#role_VK { background-color: gold } +#role_Solo { background-image: linear-gradient(120deg, gray, turquoise, gold) } + +.role.active span { text-decoration: underline; } + +/* LAYOUT */ + +#card_tip { + position: fixed; + z-index: 100; + right: 240px; + top: 60px; +} + +#card_panel { + display: flex; + flex-wrap: wrap; + align-content: start; + justify-content: center; + gap: 16px; + padding: 16px; +} + +@media (max-width: 800px) { + #card_panel { + justify-content: start; + } +} + +#table { + display: grid; + width: 100%; + grid-template-columns: 1fr min-content min-content 1fr; + grid-template-rows: min-content max-content; +} + +#mapwrap { + grid-column: 2; + grid-row: 1; +} + +#card_panel { + grid-column: 2; + grid-row: 2; +} + +#mapwrap[data-fit="both"] + #card_panel { + max-width: 250px; + grid-column: 3; + grid-row: 1; +} + +@media (min-width: 2000px) { + #card_panel { + max-width: 250px; + grid-column: 3; + grid-row: 1; + } +} + +/* LOG */ + +#log .h1 { background-image: linear-gradient(60deg, gray, turquoise, gold); text-shadow: 0 0 4px white; } + +#log { font-variant-numeric: tabular-nums; } + +/* MAP */ + +#mapwrap { + box-shadow: 0px 1px 10px #0008; + width: 1275px; + height: 1650px; + margin-bottom: 24px; +} + +#mapwrap[data-fit="width"], #mapwrap[data-fit="both"] { + margin-bottom: 0; +} + +#map { + width: 1275px; + height: 1650px; + background-repeat: no-repeat; + background-size: cover; +} + +#map { background-image: url("map75.jpg") } +@media (min-resolution: 97dpi) { + #map { background-image: url("map150.jpg") } +} + +#svgmap { position: absolute; } +#tokens { position: absolute; } +#pieces { position: absolute; } +#boxes { position: absolute; } + +#map.hide_pieces #pieces { display: none; } +#map.hide_tokens #tokens { display: none; } + +/* SPACES */ + +path { fill: transparent; stroke-width: 4; } +path.action { fill: white; fill-opacity: 0.3; stroke: white; } +path.selected { stroke: yellow; } +path.tip { stroke: white; stroke-dasharray: 4 4; } + +.space { + position: absolute; + border: 2px solid lime; +} + +.space.province { + border-radius: 50%; +} + +.box{position:absolute;box-sizing:border-box;border:4px solid transparent} +.box.action{border-color:lemonchiffon;} +.box.selected{border-color:yellow;} +.box.tip { border-color: white; } + +/* PIECES */ + +.piece { + position: absolute; + pointer-events: none; + background-position: center; + background-repeat: no-repeat; + background-size: contain; + transition-property: top, left; + transition-duration: 700ms; + transition-timing-function: ease; + filter: drop-shadow(0 1px 1px #0006); +} +.piece.action { + pointer-events: auto; + filter: + drop-shadow(0 -2px 0 white) + drop-shadow(0 2px 0 white) + drop-shadow(-2px 0 0 white) + drop-shadow(2px 0 0 white) + ; +} +.piece.selected { + pointer-events: auto; + filter: + drop-shadow(0 -2px 0 yellow) + drop-shadow(0 2px 0 yellow) + drop-shadow(-2px 0 0 yellow) + drop-shadow(2px 0 0 yellow) + ; +} + +.cylinder { width: 44px; height: 48px; } +.disk { width: 44px; height: 38px; } +.governor, .amir, .raja { width: 29px; height: 36px; } +.cube { width: 29px; height: 36px; } + +.ds.cylinder { background-image: url(pieces/ds_cylinder.svg) } +.ds.cube { background-image: url(pieces/ds_troop.svg) } +.ds.disk { background-image: url(pieces/ds_disk.svg) } +.ds.governor { background-image: url(pieces/ds_governor.svg) } +.bk.cylinder { background-image: url(pieces/bk_cylinder.svg) } +.bk.amir { background-image: url(pieces/bk_amir.svg) } +.bk.amir.rebel { background-image: url(pieces/bk_amir_rebel.svg) } +.bk.disk { background-image: url(pieces/bk_disk.svg) } +.ve.cylinder { background-image: url(pieces/ve_cylinder.svg) } +.ve.raja { background-image: url(pieces/ve_raja.svg) } +.ve.raja.rebel { background-image: url(pieces/ve_raja_rebel.svg) } +.ve.disk { background-image: url(pieces/ve_disk.svg) } +.mongol.cube { background-image: url(pieces/mongol_invader.svg) } + +.disk { border-radius: 15px; } +.noble { border-radius: 8px; } +.cube { border-radius: 14px 14px / 10px 10px; } + +/* TOKENS */ + +.token { + pointer-events: none; + position: absolute; + transition-property: top, left; + transition-duration: 700ms; + transition-timing-function: ease; + background-repeat: no-repeat; + border-radius: 8px; + border: 2px outset gray; + box-shadow: 0 0 0px 1px #222; + background-size: 45px 45px; + width: 45px; + height: 45px; +} + +.token.action { + pointer-events: auto; +} + +.token.tributary, .token.ds_ctl, .token.bk_ctl, .token.ve_ctl { border-radius: 50% } + +/* CARDS */ + +.card { + width: 250px; + height: 350px; + border-radius: 16px; + background-color: #c6bb8d; + background-size: cover; + background-repeat: no-repeat; + box-shadow: 0 0 0 1px #223f21, 1px 1px 4px #0008; +} + +.card.card_back { + background-color: orange; +} + +.card.action { + box-shadow: 0 0 0 3px white; +} + +.card.momentum { + width: 186px; + height: 261px; + border-radius: 12px; +} + +#deck_outer { position: relative; } +#deck_size { + position: absolute; + right: 24px; + bottom: 16px; + font-size: 24px; + font-weight: bold; + color: white; +} + +#of_gods_and_kings { position: relative; } +#of_gods_and_kings_label { + position: absolute; + top: 6px; + left: 6px; + right: 6px; + border-radius: 16px; + text-align: center; + background-color: #5c4f23; + font-size: 16px; + font-weight: bold; + color: white; +} + +#this_card { position: relative; } + +#this_card.c #shaded_event { border-top-color: transparent; } +#this_card.c #unshaded_event { border-image: radial-gradient(100px 30px at bottom, transparent 65%, white) 3 } + +#unshaded_event, #shaded_event { + display: none; + position: absolute; + box-sizing: border-box; + border: 3px solid white; +} + +#shaded_event.action, #unshaded_event.action { + display: block; +} + +#unshaded_event { + left: 3px; + right: 3px; + top: 200px; + height: 70px; + border-radius: 12px; +} + +#shaded_event { + left: 3px; + right: 3px; + bottom: 4px; + height: 80px; + border-radius: 12px; +} + +/* TOKEN IMAGES */ + +.token.tributary { background-color: #2a2c26 } +.token.ds_ctl { background-color: #433e1d } +.token.bk_ctl { background-color: #15908a } +.token.ve_ctl { background-color: #fc7b0d } +#token_ds_vp { background-color: #2a2c26 } +#token_bk_vp { background-color: #15908a } +#token_ve_vp { background-color: #fc7b0d } +#token_bk_influence { background-color: #02766f } +#token_ve_influence { background-color: #fdbb47 } +#token_mongol_cavalry { background-color: #58291f } +.token.cavalry.charge { background-color: #6c4a2f } +.token.cavalry.screen { background-color: #363d29 } + +.token.tributary { border-color: #2a2c26 } +.token.ds_ctl { border-color: #433e1d } +.token.bk_ctl { border-color: #15908a } +.token.ve_ctl { border-color: #fc7b0d } +#token_ds_vp { border-color: #2a2c26 } +#token_bk_vp { border-color: #15908a } +#token_ve_vp { border-color: #fc7b0d } +#token_bk_influence { border-color: #02766f } +#token_ve_influence { border-color: #fdbb47 } +#token_mongol_cavalry { border-color: #58291f } +.token.cavalry.charge { border-color: #6c4a2f } +.token.cavalry.screen { border-color: #363d29 } + +.token.tributary { background-image: url(pieces/Tributary.png) } +.token.ds_ctl { background-image: url(pieces/Flag_DS.png) } +.token.bk_ctl { background-image: url(pieces/Flag_BK.png) } +.token.ve_ctl { background-image: url(pieces/Flag_VE.png) } +#token_ds_vp { background-image: url(pieces/Victory_DS.png) } +#token_bk_vp { background-image: url(pieces/Victory_BK.png) } +#token_ve_vp { background-image: url(pieces/Victory_VE.png) } +#token_bk_influence { background-image: url(pieces/Influence_BK.png) } +#token_ve_influence { background-image: url(pieces/Influence_VE.png) } +#token_mongol_cavalry { background-image: url(pieces/Cavalry_Mongol.png) } +.token.cavalry.charge { background-image: url(pieces/Cavalry_Charge.png) } +.token.cavalry.screen { background-image: url(pieces/Cavalry_Screen.png) } + +/* CARD IMAGES */ + +.card.card_back{background-image:url(cards100/card_back.jpg)} +.card.card_1{background-image:url(cards100/event_1.jpg)} +.card.card_2{background-image:url(cards100/event_2.jpg)} +.card.card_3{background-image:url(cards100/event_3.jpg)} +.card.card_4{background-image:url(cards100/event_4.jpg)} +.card.card_5{background-image:url(cards100/event_5.jpg)} +.card.card_6{background-image:url(cards100/event_6.jpg)} +.card.card_7{background-image:url(cards100/event_7.jpg)} +.card.card_8{background-image:url(cards100/event_8.jpg)} +.card.card_9{background-image:url(cards100/event_9.jpg)} +.card.card_10{background-image:url(cards100/event_10.jpg)} +.card.card_11{background-image:url(cards100/event_11.jpg)} +.card.card_12{background-image:url(cards100/event_12.jpg)} +.card.card_13{background-image:url(cards100/event_13.jpg)} +.card.card_14{background-image:url(cards100/event_14.jpg)} +.card.card_15{background-image:url(cards100/event_15.jpg)} +.card.card_16{background-image:url(cards100/event_16.jpg)} +.card.card_17{background-image:url(cards100/event_17.jpg)} +.card.card_18{background-image:url(cards100/event_18.jpg)} +.card.card_19{background-image:url(cards100/event_19.jpg)} +.card.card_20{background-image:url(cards100/event_20.jpg)} +.card.card_21{background-image:url(cards100/event_21.jpg)} +.card.card_22{background-image:url(cards100/event_22.jpg)} +.card.card_23{background-image:url(cards100/event_23.jpg)} +.card.card_24{background-image:url(cards100/event_24.jpg)} +.card.card_25{background-image:url(cards100/event_25.jpg)} +.card.card_26{background-image:url(cards100/event_26.jpg)} +.card.card_27{background-image:url(cards100/event_27.jpg)} +.card.card_28{background-image:url(cards100/event_28.jpg)} +.card.card_29{background-image:url(cards100/event_29.jpg)} +.card.card_30{background-image:url(cards100/event_30.jpg)} +.card.card_31{background-image:url(cards100/event_31.jpg)} +.card.card_32{background-image:url(cards100/event_32.jpg)} +.card.card_33{background-image:url(cards100/event_33.jpg)} +.card.card_34{background-image:url(cards100/event_34.jpg)} +.card.card_35{background-image:url(cards100/event_35.jpg)} +.card.card_36{background-image:url(cards100/event_36.jpg)} +.card.card_37{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)} +.card.card_38{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)} +.card.card_39{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)} +.card.card_40{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)} +.card.card_41{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)} +.card.card_42{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)} +.card.card_43{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)} +.card.card_44{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)} +.card.card_45{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)} +.card.card_46{background-image:url(cards100/Timurid_Empire_front.jpg)} +.card.card_47{background-image:url(cards100/Timurid_Empire_front.jpg)} +.card.card_48{background-image:url(cards100/Succession1_front.jpg)} +.card.card_49{background-image:url(cards100/Succession2_front.jpg)} +.card.card_50{background-image:url(cards100/Succession3_front.jpg)} +.card.card_dynasty_khalji{background-image:url(cards100/Dynasty_front.jpg)} +.card.card_dynasty_khalji{background-image:url(cards100/Dynasty_back.jpg)} + +@media (min-resolution: 97dpi) { +.card.card_back{background-image:url(cards200/card_back.jpg)} +.card.card_1{background-image:url(cards200/event_1.jpg)} +.card.card_2{background-image:url(cards200/event_2.jpg)} +.card.card_3{background-image:url(cards200/event_3.jpg)} +.card.card_4{background-image:url(cards200/event_4.jpg)} +.card.card_5{background-image:url(cards200/event_5.jpg)} +.card.card_6{background-image:url(cards200/event_6.jpg)} +.card.card_7{background-image:url(cards200/event_7.jpg)} +.card.card_8{background-image:url(cards200/event_8.jpg)} +.card.card_9{background-image:url(cards200/event_9.jpg)} +.card.card_10{background-image:url(cards200/event_10.jpg)} +.card.card_11{background-image:url(cards200/event_11.jpg)} +.card.card_12{background-image:url(cards200/event_12.jpg)} +.card.card_13{background-image:url(cards200/event_13.jpg)} +.card.card_14{background-image:url(cards200/event_14.jpg)} +.card.card_15{background-image:url(cards200/event_15.jpg)} +.card.card_16{background-image:url(cards200/event_16.jpg)} +.card.card_17{background-image:url(cards200/event_17.jpg)} +.card.card_18{background-image:url(cards200/event_18.jpg)} +.card.card_19{background-image:url(cards200/event_19.jpg)} +.card.card_20{background-image:url(cards200/event_20.jpg)} +.card.card_21{background-image:url(cards200/event_21.jpg)} +.card.card_22{background-image:url(cards200/event_22.jpg)} +.card.card_23{background-image:url(cards200/event_23.jpg)} +.card.card_24{background-image:url(cards200/event_24.jpg)} +.card.card_25{background-image:url(cards200/event_25.jpg)} +.card.card_26{background-image:url(cards200/event_26.jpg)} +.card.card_27{background-image:url(cards200/event_27.jpg)} +.card.card_28{background-image:url(cards200/event_28.jpg)} +.card.card_29{background-image:url(cards200/event_29.jpg)} +.card.card_30{background-image:url(cards200/event_30.jpg)} +.card.card_31{background-image:url(cards200/event_31.jpg)} +.card.card_32{background-image:url(cards200/event_32.jpg)} +.card.card_33{background-image:url(cards200/event_33.jpg)} +.card.card_34{background-image:url(cards200/event_34.jpg)} +.card.card_35{background-image:url(cards200/event_35.jpg)} +.card.card_36{background-image:url(cards200/event_36.jpg)} +.card.card_37{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)} +.card.card_38{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)} +.card.card_39{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)} +.card.card_40{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)} +.card.card_41{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)} +.card.card_42{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)} +.card.card_43{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)} +.card.card_44{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)} +.card.card_45{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)} +.card.card_46{background-image:url(cards200/Timurid_Empire_front.jpg)} +.card.card_47{background-image:url(cards200/Timurid_Empire_front.jpg)} +.card.card_48{background-image:url(cards200/Succession1_front.jpg)} +.card.card_49{background-image:url(cards200/Succession2_front.jpg)} +.card.card_50{background-image:url(cards200/Succession3_front.jpg)} +.card.card_dynasty_khalji{background-image:url(cards200/Dynasty_front.jpg)} +.card.card_dynasty_khalji{background-image:url(cards200/Dynasty_back.jpg)} +} -- cgit v1.2.3