add simple splash screen

diff --git a/site/index.html b/site/index.html
index 837abcfc9da5f554e6da623dc9ea028c9c57aeca..f608a7cca70593970b650f018b01ee49c39cb005 100644 (file)
--- a/site/index.html
+++ b/site/index.html
@@ -21,7 +21,7 @@
                 </div>
             </div>
         </div>
-        <div id="game-tile-background">
-        </div>
+        <div id="game-tile-background"></div>
+        <div id="splash-background"></div>
     </body>
 </html>

diff --git a/site/main.js b/site/main.js
index 3edbdda2640f9854becfe8daf2def2cf04a93459..5f065bbe0f3f47ec2fd6320b3e5c5dc9b6994f0c 100644 (file)
--- a/site/main.js
+++ b/site/main.js
@@ -1,5 +1,6 @@
 import { Auth } from "./modules/auth.js";
 import { Socket } from "./modules/socket.js";
+import { SplashScreen } from "./modules/splash.js";
 
 const sockets = [];
 
@@ -16,6 +17,8 @@ function login() {
 
 window.onload = function() {
     const container = document.getElementById("game-tile-background");
+    const splash_container = document.getElementById("splash-background");
+    const splash = new SplashScreen(splash_container);
     sockets.push(new Socket(container, login));
     sockets[0].show_login();
 };

diff --git a/site/modules/splash.js b/site/modules/splash.js
new file mode 100644 (file)
index 0000000..e4157dc
--- /dev/null
+++ b/site/modules/splash.js
@@ -0,0 +1,32 @@
+import { create_svg_element } from "./svg.js";
+import { card_href, FIFTY_TWO_CARD_DECK } from "./card.js";
+import { random_int } from "./random.js";
+
+export class SplashScreen {
+    constructor(container) {
+        this.container = container;
+        this.svg = create_svg_element(container, "svg", ["splash-screen"], [["viewBox", "0 0 2000 500"]]);
+        this.hidden = false;
+
+        this.upper_bar = create_svg_element(this.svg, "rect", ["splash-upper-bar"], [["x", "0"], ["y", "0"], ["width", "2000"], ["height", "100"], ["fill", "blue"]]);
+        this.banner = create_svg_element(this.svg, "rect", [], [["x", "0"], ["y", "100"], ["width", "2000"], ["height", "300"], ["fill", "skyblue"]]);
+        this.lower_bar = create_svg_element(this.svg, "rect", ["splash-lower-bar"], [["x", "0"], ["y", "400"], ["width", "2000"], ["height", "100"], ["fill", "blue"]]);
+
+        this.logo = create_svg_element(this.svg, "text", ["splash-logo"], [["x", "1000"], ["y", "250"]]);
+        this.logo_text = document.createTextNode("POKERWAVE");
+        this.logo.append(this.logo_text);
+
+        this.svg.onclick = () => this.hide();
+    }
+
+    hide() {
+        if (!this.hidden) {
+            this.hidden = true;
+            this.container.classList.add("no-pointer");
+            this.upper_bar.classList.add("retract");
+            this.banner.classList.add("hidden");
+            this.lower_bar.classList.add("retract");
+            this.logo.classList.add("hidden");
+        }
+    }
+}

diff --git a/site/style.css b/site/style.css
index b614cf9b1dc2f2ce07476190c4ec3e648dabbd12..bd9b031e5e9513c9eb42756543f6c4befbccbeba 100644 (file)
--- a/site/style.css
+++ b/site/style.css
@@ -5,6 +5,7 @@
 @import url("style/chatroom.css");
 @import url("style/cribbage.css");
 @import url("style/poker.css");
+@import url("style/splash.css");
 @import url("style/whist.css");
 @import url("style/winner.css");
 
@@ -19,6 +20,10 @@ html, body {
     display: none !important;
 }
 
+.no-pointer {
+    pointer-events: none;
+}
+
 #game-tile-background {
     width: 100%;
     height: 100%;
@@ -27,3 +32,14 @@ html, body {
     overflow: clip;
     background-color: #404040;
 }
+
+#splash-background {
+    width: 700%;
+    height: 100%;
+    display: grid;
+    grid: 1fr / 1fr;
+    top: 0;
+    left: -300%;
+    position: absolute;
+    overflow: clip;
+}

diff --git a/site/style/splash.css b/site/style/splash.css
new file mode 100644 (file)
index 0000000..ce5f683
--- /dev/null
+++ b/site/style/splash.css
@@ -0,0 +1,36 @@
+.splash-screen {
+    height: 100%;
+    min-height: 1vh;
+    min-width: 1vw;
+}
+
+@keyframes fade-in {
+    from { opacity: 0%; }
+    to { opacity: 100%; }
+}
+
+.splash-logo {
+    animation: fade-in 3s;
+    font-size: 30pt;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    font-family: monospace;
+}
+
+.splash-upper-bar {
+    transform: none;
+    transition: transform 1s;
+}
+
+.splash-upper-bar.retract {
+    transform: translateY(-100px);
+}
+
+.splash-lower-bar {
+    transform: none;
+    transition: transform 1s;
+}
+
+.splash-lower-bar.retract {
+    transform: translateY(100px);
+}