summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/common/columbia.css105
-rw-r--r--public/common/play.css80
-rw-r--r--public/common/play.js2
3 files changed, 129 insertions, 58 deletions
diff --git a/public/common/columbia.css b/public/common/columbia.css
index 1a646b6..78bb61c 100644
--- a/public/common/columbia.css
+++ b/public/common/columbia.css
@@ -2,56 +2,55 @@
#battle {
position: absolute;
- left: 100px;
- top: 100px;
+ min-width: 450px;
+ left: 10px;
+ top: 55px;
z-index: 50;
- border-collapse: collapse;
- border: 1px solid black;
- background-color: white;
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
- visibility: hidden;
-}
-
-#battle.show {
- visibility: visible;
-}
-
-#battle th {
- padding: 0;
+ background-color: white;
border: 1px solid black;
+ display: none;
}
-#battle td {
- padding: 0;
- border: 1px solid black;
- vertical-align: top;
+#battle.show {
+ display: block;
}
#battle_header {
- font-weight: bold;
- height: 2em;
- line-height: 2em;
+ padding: 2px 8px;
+ line-height: 24px;
+ min-height: 24px;
font-weight: bold;
user-select: none;
cursor: move;
+ text-align: center;
+ border-bottom: 1px solid black;
+ overflow: hidden;
}
#battle_message {
- font-weight: normal;
- height: 2em;
- line-height: 2em;
- padding: 0 8px;
+ padding: 2px 8px;
+ line-height: 24px;
+ min-height: 24px;
+ text-align: center;
+ border-top: 1px solid black;
}
-#FA, #FB, #FC, #FD, #FF, #FR, #EA, #EB, #EC, #ED, #EF, #ER {
+#FC, #FF, #FR, #EC, #EF, #ER {
display: flex;
flex-wrap: wrap;
justify-content: center;
- margin: 10px;
+ padding: 15px;
+ gap: 5px
+}
+
+#FR, #ER {
+ padding: 10px 15px;
+ min-height: 10px;
}
-.battle_separator {
- height: 15px;
+#FR .battle_menu_list, #ER .battle_menu_list {
+ display: none;
}
.battle_menu .block {
@@ -63,24 +62,19 @@
}
.battle_menu .action {
+ display: none;
width: 20px;
height: 20px;
border-radius: 5px;
padding: 3px;
- display: none;
}
.battle_menu_list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
margin-top: 5px;
min-height: 26px;
- width: 80px;
- text-align: center;
- font-size: 1px;
- line-height: 1px;
-}
-
-.battle_reserves .battle_menu_list {
- display: none;
}
.battle_menu .action:hover { background-color: red; }
@@ -88,13 +82,28 @@
.battle_menu .action.withdraw:hover { background-color: #eee; }
.battle_menu .action.pass:hover { background-color: gray; }
-.battle_menu.fire .action.fire { display: inline; }
-.battle_menu.retreat .action.retreat { display: inline; }
-.battle_menu.pass .action.pass { display: inline; }
-.battle_menu.charge .action.charge { display: inline; }
-.battle_menu.treachery .action.treachery { display: inline; }
-.battle_menu.harry .action.harry { display: inline; }
-.battle_menu.withdraw .action.withdraw { display: inline; }
-.battle_menu.storm .action.storm { display: inline; }
-.battle_menu.sally .action.sally { display: inline; }
-.battle_menu.hit .action.hit { display: inline; }
+.battle_menu.fire .action.fire { display: block; }
+.battle_menu.retreat .action.retreat { display: block; }
+.battle_menu.pass .action.pass { display: block; }
+.battle_menu.charge .action.charge { display: block; }
+.battle_menu.treachery .action.treachery { display: block; }
+.battle_menu.harry .action.harry { display: block; }
+.battle_menu.withdraw .action.withdraw { display: block; }
+.battle_menu.storm .action.storm { display: block; }
+.battle_menu.sally .action.sally { display: block; }
+.battle_menu.hit .action.hit { display: block; }
+
+/* MOBILE PHONE LAYOUT */
+
+@media (max-width: 500px) {
+ #battle {
+ position: static;
+ grid-column: 1;
+ grid-row: 3;
+ min-width: auto !important;
+ box-shadow: none;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ }
+}
diff --git a/public/common/play.css b/public/common/play.css
index 61f1aa3..c19ea6c 100644
--- a/public/common/play.css
+++ b/public/common/play.css
@@ -35,7 +35,6 @@ button {
box-sizing: border-box;
font-size: 16px;
height: 28px;
- margin: 0;
padding: 1px 12px 1px 12px;
background-color: gainsboro;
border: 2px solid;
@@ -74,9 +73,16 @@ header {
grid-column: 1/3;
grid-row: 1;
display: flex;
+ flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid black;
background-color: gainsboro;
+ padding-right: 10px;
+}
+
+#toolbar {
+ display: flex;
+ flex-wrap: wrap;
}
header.disconnected {
@@ -137,7 +143,7 @@ aside {
}
footer {
- position:absolute;
+ position: fixed;
z-index: 500;
bottom: 0;
background-color: white;
@@ -209,24 +215,31 @@ footer {
filter: invert(100%);
}
-header button {
- margin: 0 10px;
+header #actions {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: end;
+ gap: 10px;
+ padding-left: 10px;
+ margin: 5px 0;
}
header .replay {
- margin: 0 10px;
display: flex;
+ flex-wrap: wrap;
+ justify-content: end;
+ padding-left: 10px;
+ margin: 5px 0;
}
header .replay button {
- margin: 0;
+ margin-right: 0;
}
#prompt {
- margin: 0 20px;
+ padding-left: 20px;
font-size: 18px;
- flex: 1 1 0;
- width: 0;
+ flex: 1 1 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@@ -350,3 +363,52 @@ header .replay button {
padding: 5px;
font-size: 1rem;
}
+
+/* MOBILE PHONE LAYOUT */
+
+@media (max-width: 500px) {
+ body {
+ width: 100%;
+ height: auto;
+ grid-template-columns: 1fr;
+ grid-template-rows: min-content;
+ overflow-x: clip;
+ overflow-y: auto;
+ }
+ footer { width: 100%; background-color: rgba(255,255,255,0.5) }
+ header { display: block; }
+ #prompt { padding-left: 10px; display: block; white-space: normal; }
+
+ #chat_window {
+ position: static;
+ grid-column: 1;
+ grid-row: 2;
+ display: none;
+ width: auto;
+ box-shadow: none;
+ border-top: none;
+ }
+ #chat_window.show {
+ display: block;
+ }
+
+ /* game specific dialogs in rows 3-9 */
+
+ main {
+ grid-column: 1;
+ grid-row: 10;
+ }
+ aside {
+ grid-column: 1;
+ grid-row: 11;
+ width: auto !important;
+ border-left: none;
+ border-top: 1px solid black;
+ }
+ #log {
+ height: 50vh;
+ }
+ #replay_button, #rematch_button {
+ display: inline-block;
+ }
+}
diff --git a/public/common/play.js b/public/common/play.js
index a106bcd..d8e4ee1 100644
--- a/public/common/play.js
+++ b/public/common/play.js
@@ -144,7 +144,7 @@ function init_chat() {
chat_button.className = "icon_button";
chat_button.innerHTML = '<img src="/images/chat-bubble.svg">';
chat_button.addEventListener("click", toggle_chat);
- document.querySelector("header").insertBefore(chat_button, document.getElementById("prompt"));
+ document.querySelector("#toolbar").appendChild(chat_button);
chat = {
is_visible: false,