summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--blocks_columbia.css2
-rw-r--r--blocks_simple.css2
-rw-r--r--info/cards.html54
-rw-r--r--play.css61
4 files changed, 76 insertions, 43 deletions
diff --git a/blocks_columbia.css b/blocks_columbia.css
index 164b19f..30935ad 100644
--- a/blocks_columbia.css
+++ b/blocks_columbia.css
@@ -1,5 +1,5 @@
.columbia-labels .known.block {
- background-image: url('blocks_columbia.webp');
+ background-image: url('blocks_columbia.jpg');
background-repeat: no-repeat;
background-size: 496px 496px;
}
diff --git a/blocks_simple.css b/blocks_simple.css
index 8856cb6..c3d4523 100644
--- a/blocks_simple.css
+++ b/blocks_simple.css
@@ -1,5 +1,5 @@
.simple-labels .block.known {
- background-image: url('blocks_simple.webp');
+ background-image: url('blocks_simple.opt.png');
background-repeat: no-repeat;
background-size: 600% 3100%;
}
diff --git a/info/cards.html b/info/cards.html
index c433480..8a7ce6a 100644
--- a/info/cards.html
+++ b/info/cards.html
@@ -8,30 +8,30 @@ img { margin: 12px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); width: 224px; heig
<body>
<h1>Julius Caesar - Cards</h1>
<div class="list">
-<img src="../cards/card_apollo.webp">
-<img src="../cards/card_jupiter.webp">
-<img src="../cards/card_mars.webp">
-<img src="../cards/card_mercury.webp">
-<img src="../cards/card_neptune.webp">
-<img src="../cards/card_pluto.webp">
-<img src="../cards/card_vulcan.webp">
-<img src="../cards/card_41.webp">
-<img src="../cards/card_32.webp">
-<img src="../cards/card_32.webp">
-<img src="../cards/card_31.webp">
-<img src="../cards/card_31.webp">
-<img src="../cards/card_31.webp">
-<img src="../cards/card_23.webp">
-<img src="../cards/card_23.webp">
-<img src="../cards/card_23.webp">
-<img src="../cards/card_23.webp">
-<img src="../cards/card_22.webp">
-<img src="../cards/card_22.webp">
-<img src="../cards/card_22.webp">
-<img src="../cards/card_22.webp">
-<img src="../cards/card_21.webp">
-<img src="../cards/card_21.webp">
-<img src="../cards/card_21.webp">
-<img src="../cards/card_13.webp">
-<img src="../cards/card_12.webp">
-<img src="../cards/card_12.webp">
+<img src="../cards/card_apollo.jpg">
+<img src="../cards/card_jupiter.jpg">
+<img src="../cards/card_mars.jpg">
+<img src="../cards/card_mercury.jpg">
+<img src="../cards/card_neptune.jpg">
+<img src="../cards/card_pluto.jpg">
+<img src="../cards/card_vulcan.jpg">
+<img src="../cards/card_41.jpg">
+<img src="../cards/card_32.jpg">
+<img src="../cards/card_32.jpg">
+<img src="../cards/card_31.jpg">
+<img src="../cards/card_31.jpg">
+<img src="../cards/card_31.jpg">
+<img src="../cards/card_23.jpg">
+<img src="../cards/card_23.jpg">
+<img src="../cards/card_23.jpg">
+<img src="../cards/card_23.jpg">
+<img src="../cards/card_22.jpg">
+<img src="../cards/card_22.jpg">
+<img src="../cards/card_22.jpg">
+<img src="../cards/card_22.jpg">
+<img src="../cards/card_21.jpg">
+<img src="../cards/card_21.jpg">
+<img src="../cards/card_21.jpg">
+<img src="../cards/card_13.jpg">
+<img src="../cards/card_12.jpg">
+<img src="../cards/card_12.jpg">
diff --git a/play.css b/play.css
index a81f79b..c060369 100644
--- a/play.css
+++ b/play.css
@@ -1,5 +1,9 @@
/* MAIN */
+html {
+ image-rendering: -webkit-optimize-contrast; /* try to fix chromium's terrible image rescaling */
+}
+
main { background-color: #461145; }
#roles { background-color: tan; }
header { background-color: tan; }
@@ -7,8 +11,10 @@ header.your_turn { background-color: orange; }
#role_Caesar .role_name { background-color: salmon; }
#role_Pompeius .role_name { background-color: #eb5; }
#turn_info { background-color: burlywood; }
+.role_vp { float: right; }
#log { background-color: wheat; }
+#log div { padding-left: 20px; text-indent: -12px; }
#log .st { background-color: brown; color: gold; font-weight: bold; }
#log .C { background-color: salmon; }
#log .P { background-color: #eb5; }
@@ -17,6 +23,15 @@ header.your_turn { background-color: orange; }
/* CARDS */
+.hand {
+ margin: 25px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ min-height: 348px;
+ gap: 16px;
+}
+
.card_back { background-image: url('cards/card_back.jpg'); }
.card_apollo { background-image: url('cards/card_apollo.jpg'); }
.card_jupiter { background-image: url('cards/card_jupiter.jpg'); }
@@ -35,9 +50,11 @@ header.your_turn { background-color: orange; }
.card_41 { background-image: url('cards/card_41.jpg'); }
.card {
+ background-size: cover;
+ background-repeat: no-repeat;
background-color: white;
- width: 225px;
- height: 350px;
+ width: 224px;
+ height: 348px;
border-radius: 12px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
transition: 100ms;
@@ -49,7 +66,15 @@ header.your_turn { background-color: orange; }
}
.card.enabled:hover {
- transform: scale(1.1);
+ transform: translateY(-8px);
+}
+
+.card.enabled {
+ cursor: pointer;
+}
+
+.card.disabled {
+ filter: grayscale(100%);
}
.card.prior {
@@ -60,19 +85,23 @@ header.your_turn { background-color: orange; }
background-color: #822c1f;
}
-.role_info { padding: 15px; }
-.role_info .card { margin: 0 auto; }
-.role_info .card { width: 90px; height: 140px; border-radius: 5px; }
-.role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; }
+.role_info {
+ overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */
+ padding-top: 16px;
+}
-@media (max-height: 800px) {
- .role_info { padding: 15px 0 0 0; }
- .role_info .card { width: 135px; height: 80px; border-radius: 8px 8px 0 0; }
- .role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; }
+.role_info .card {
+ width: 168px;
+ height: 261px;
+ border-radius: 9px;
+ margin: 0 auto 16px auto;
}
-@media (min-height: 1200px) {
- .role_info .card { width: 180px; height: 280px; border-radius: 10px; }
+.role_info .card:not(:hover) {
+ margin: 0 auto;
+ height: 96px;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
}
/* BATTLE BOARD */
@@ -100,10 +129,14 @@ body:not(.replay) .battle_line.enemy .battle_menu_list { min-height: 0; }
#map {
width: 2475px;
height: 1275px;
- background-image: url("map.jpg");
background-size: cover;
}
+#map { background-image: url("map75.jpg") }
+@media (min-resolution: 97dpi) {
+ #map { background-image: url("map150.jpg") }
+}
+
#turn {
position: absolute;
width: 75px;