close button display changes

diff --git a/site/img/chatroom.svg b/site/img/chatroom.svg
index 5547b38d8ed06eb9607e837cc5616b9ec0c11b59..60bc366fa83b23d4918f0d729b66dda0990bfdcd 100644 (file)
--- a/site/img/chatroom.svg
+++ b/site/img/chatroom.svg
@@ -1,8 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">A</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25">
+    <path d="M 2 2 A 1 1 0 0 0 2 5 H 3 A 1 1 0 0 0 3 2 Z M 2 11 A 1 1 0 0 0 2 14 H 3 A 1 1 0 0 0 3 11 Z M 2 20 A 1 1 0 0 0 2 23 H 3 A 1 1 0 0 0 3 20 Z M 8 2 A 1 1 0 0 0 8 5 H 23 A 1 1 0 0 0 23 2 Z M 8 11 A 1 1 0 0 0 8 14 H 23 A 1 1 0 0 0 23 11 Z M 8 20 A 1 1 0 0 0 8 23 H 23 A 1 1 0 0 0 23 20 Z" fill="black" />
 </svg>

diff --git a/site/modules/socket.js b/site/modules/socket.js
index 270c2f272c192d41a5d94ee197522dab8bb1f7aa..00199b605fb23880193d355e0bf752d3439f7383 100644 (file)
--- a/site/modules/socket.js
+++ b/site/modules/socket.js
@@ -246,7 +246,6 @@ export class Socket {
     close_button() {
         const close = document.createElement("button");
         close.classList.add("game-close");
-        close.innerText = "✗";
         close.onclick = () => this.close();
         return close;
     }

diff --git a/site/style/game.css b/site/style/game.css
index 1e44caaf10ca999f4c32e35563a017c752ce1d01..320305419f66e5bc71e4975be505e8b4e138c1a3 100644 (file)
--- a/site/style/game.css
+++ b/site/style/game.css
@@ -11,7 +11,13 @@
     position: absolute;
     right: 0;
     top: 0;
-    font-size: 5vw;
+    background: center / contain no-repeat url("/img/close.svg"), #e0e0e0;
+    width: 5vw;
+    height: 5vw;
+}
+
+.game-close:hover {
+    background: center / contain no-repeat url("/img/close.svg"), #ffffff;
 }
 
 .chat-control, .close-control {