From dd353be48c36c312647070661d2a663e17ba7ef9 Mon Sep 17 00:00:00 2001 From: "tsevasa@gmail.com" Date: Thu, 11 Jul 2024 03:50:47 +0200 Subject: [PATCH 1/2] Previous dev.html is now play.html. Now there is no more devversion --- src/client/css/dev.css | 1496 ---------------------- src/client/views/dev.html | 596 --------- src/client/views/play.html | 151 ++- src/server/routes/root.js | 5 - src/server/utility/HTMLScriptInjector.js | 6 - 5 files changed, 145 insertions(+), 2109 deletions(-) delete mode 100644 src/client/css/dev.css delete mode 100644 src/client/views/dev.html diff --git a/src/client/css/dev.css b/src/client/css/dev.css deleted file mode 100644 index b98026a20..000000000 --- a/src/client/css/dev.css +++ /dev/null @@ -1,1496 +0,0 @@ -* { - margin: 0; - padding: 0; - font-family: Verdana; - border: 0; - /* Enable temporarily during dev to see the borders of all elements */ - /* outline: 1px solid rgba(0, 0, 0, 0.191); */ -} - -html { - background-color: rgb(33, 33, 33); -} - -/* Variables */ -:root { - /* 100vw, but with a maximum, so some UIs don't get too big. */ - --vw-capped: clamp(0px, 100vw, 1086px); - --nav-bar-height: 40px; - /* The viewport height, subtract the navigation bar height. */ - --vh-sub-nav: calc(100vh - var(--nav-bar-height)); - /* The minimum between the viewport width and height */ - --vwh: min(var(--vh-sub-nav), var(--vw-capped)); -} - - - -/* Header along the very top of the page */ - -header { - position: fixed; - left: 0; - top: 0; - right: 0; - box-shadow: 0px 1px 5px rgb(107, 107, 107); - height: var(--nav-bar-height); - font-size: 0; - overflow: scroll; - white-space: nowrap; - text-align: center; - background-color: white; - z-index: 1; -} - -header a { - display: inline-block; - text-decoration: none; - line-height: var(--nav-bar-height); - margin-left: 4px; - min-width: 70px; - font-size: 16px; - color: black; -} - -header a:hover { - background-color: rgb(211, 235, 255); -} - -header p { - padding: 0 10px; -} - -/* Start increasing header links width */ -@media only screen and (min-width: 450px) { - - header { - overflow: unset; - } - - header a { - min-width: calc(70px + (100vw - 450px) * 0.15); - } -} - -/* Stop increasing header links width */ -@media only screen and (min-width: 715px) { - - header a { - min-width: 110px; - } -} - - - -/* Everything besides the top navigation bar */ - -main { - position: fixed; - top: var(--nav-bar-height); - bottom: 0; - left: 0; - right: 0; -} - - - -/* Loading Page */ - -.animation-container { - display: flex; - background-color: black; - justify-content: center; /* Center horizontally */ - align-items: center; /* Center vertically */ - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: -1; - overflow: hidden; -} - -.loading-glow { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - --ring-color: rgb(60,60,60,1); - background: radial-gradient(circle, var(--ring-color) 0%, black 70%); - color: red; - z-index: -1; /* Render below checkers */ - transition: 0.5s; -} - -.loadingGlowAnimation { - animation: loadingGlow 1.2s alternate infinite cubic-bezier(.42,0,.58,1); -} - -@keyframes loadingGlow { - 0% { - transform: scale(1.2); - opacity: 70%; - } - 100% { - transform: scale(2); - } -} - -.loading-glow.loading-glow-error { - --ring-color-error: rgb(60, 45, 45); - background: radial-gradient(circle, var(--ring-color-error) 0%, black 70%); -} - -.loading-text { - color: white; - position: absolute; - font-family: Verdana; - font-size: calc(30px + 1.2vw); - letter-spacing: 0.05em; - font-weight: bold; - animation: 0.6s infinite cubic-bezier(.42,0,.58,1) alternate loadingPulsing, - 1.2s infinite cubic-bezier(.42,0,.58,1) alternate loadingExpand; -} - -@keyframes loadingPulsing { - from { - opacity: 100%; - } - to { - opacity: 60%; - } -} - -@keyframes loadingExpand { - from { - - } - to { - transform: scale(1.04); - } -} - -.loading-error { - color: red; - position: absolute; - font-family: Verdana; - text-align: center; -} - -.loading-error h1 { - font-size: calc(30px + 1.2vw); - letter-spacing: 0.05em; - font-weight: bold; - margin-bottom: 0.1em; -} - -.loading-error p { - font-size: 16px; - padding: 0 1em; -} - -.checkerboard { - width: 100vw; - height: 100svh; - background: repeating-conic-gradient(black 0% 25%, transparent 0% 50%) - 50% / 20vmin 20vmin; -} - -/* Canvas and the Overlay containing all html elements above the canvas */ - -canvas { - position: absolute; - width: 100%; - height: 100%; -} - -#overlay { - position: absolute; - width: 100%; - height: 100%; -} - - - -/* Discord & Game Credits external links on title screen and invite creation screen */ - -.menu-external-links { - position: absolute; - bottom: 0; - right: 0; - left: 0; - z-index: 1; -} - -.menu-external-links .discord-icon { - position: absolute; - left: 0; - bottom: 0; - width: calc(30px + var(--vw-capped) * 0.03); - margin: 8px 17px; - opacity: 0.4; -} - -.menu-external-links .discord-icon:hover { - opacity: 0.55; -} - -.menu-external-links .github-icon { - position: absolute; - left: 0; - bottom: 0; - width: calc(30px + var(--vw-capped) * 0.03); - margin: 10px calc(40px + var(--vw-capped) * 0.054); - opacity: 0.4; -} - -.menu-external-links .github-icon:hover { - opacity: 0.55; -} - -.menu-external-links .credits { - opacity: 0.5; - font-weight: bold; - position: absolute; - right: 0; - bottom: 0; - color: black; - text-decoration: none; - margin: 12px 17px; - font-size: calc(16px + var(--vw-capped) * 0.012) -} - -.menu-external-links .credits:hover { - opacity: 0.7; -} - - - -/* Title Screen: Play, guide, board editor */ - -.title { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: grid; - grid-template: min(16vw, 173px, calc(var(--vh-sub-nav) * 0.184)) repeat(3, min(8vw, 86px, calc(var(--vh-sub-nav) * 0.092))) / 1fr min(50vw, 542px, calc(var(--vh-sub-nav) * 0.575)) 1fr; - gap: min(2vw, 22px, calc(var(--vh-sub-nav) * 0.023)); - padding-bottom: min(10vw, 108px, calc(var(--vh-sub-nav) * 0.115)); - justify-content: center; - align-content: center; -} - -.title h1 { - font-size: min(10vw, 108px, calc(var(--vh-sub-nav) * 0.115)); - font-family: Georgia; - color: rgb(0, 0, 0); - text-shadow: 1px 2px 3px rgb(255, 255, 255); - text-align: center; - overflow: visible; - grid-column: 1 / 4; -} - -/* All bubble buttons on title screen have similar design */ -.titlebubble { - box-shadow: 2px 4px 6px 0px rgb(0, 0, 0); - border: 2px solid rgb(139, 139, 139); - border-radius: min(1.3vw, 14px, calc(var(--vh-sub-nav) * 0.015)); - color: rgb(0, 0, 0); - background-color: rgb(255, 255, 255); - background: linear-gradient(to bottom, white, rgb(226, 226, 226), white); -} - -.title button { - font-size: min(2.5vw, 27px, calc(var(--vh-sub-nav) * 0.029)); - grid-column: 2 / 3; -} - -.title button:hover { - /* box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.51); */ - background: linear-gradient(to bottom, white, rgb(242, 242, 242), white); -} - -.title button:active { - /* background-color: rgb(255, 255, 255); */ - background: linear-gradient(to bottom, white, rgb(255, 255, 255), white); -} - - - -/* Guide */ - -.guide { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: grid; - grid-template-rows: calc((var(--vh-sub-nav) - var(--gap)) * 0.85) min(calc(var(--vw-capped) * 0.08), var(--vh-sub-nav) * 0.08); - grid-template-columns: calc(var(--vwh) * 0.86); - --gap: min(1.5vw, 16px, calc(var(--vh-sub-nav) * 0.0173)); - gap: var(--gap); - justify-content: center; - align-content: center; -} - -.guide .guide-contents { - padding: 5%; - overflow-y: scroll; -} - -.guide button { - font-size: calc(var(--vwh) * 0.03); -} - -.guide button:hover { - background: linear-gradient(to bottom, white, rgb(242, 242, 242), white); -} - -.guide button:active { - background: linear-gradient(to bottom, white, rgb(255, 255, 255), white); -} - -.guide h1 { - margin: 0 0 1em; - font-weight: normal; - --edge-color: rgb(249, 249, 249); - background: linear-gradient(to right, var(--edge-color), rgb(228, 228, 228), var(--edge-color)); - border-radius: 0.25em; - padding: 0.25em; -} - -.guide h2 { - margin: 2.25em 0 0; - font-weight: normal; -} - -.guide .line-break { - border: 0; - border-top: 1px solid #adadad; /* Adjust the color as needed */ - margin: 0.5em 0 1em; /* Adjust the spacing as needed */ -} - -.guide p { - margin: 1.5em 0; -} - -.guide li { - margin: 0.75em 0 0.5em 0.5em; -} - -.guide .clear-float { - clear: both; -} - -.guide img { - box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.157); - border-radius: 0.7em; - border: 2px solid rgb(101, 101, 101); - box-sizing: content-box; -} - -.guide .img-promotionlines { - margin: 0.75em 0 0.75em 1.5em; - width: 50%; - aspect-ratio: 1.789 / 1; /* width / height */ - float: right; -} - -.guide .img-kingrookfork { - margin: 0.75em 1.5em 0.75em 0; - float: left; - width: 42%; - aspect-ratio: 1.077 / 1; /* width / height */ -} - -.guide .img-arrowindicators { - margin: 0.75em 0 0.75em 1.5em; - width: 25%; - float: right; - aspect-ratio: 1 / 1; /* width / height */ -} - -.guide .fairy-pieces { - display: flex; - height: min(var(--vwh) * 0.35); - align-items: stretch; - justify-content: center; -} - -.guide .img-fairymoveset { - box-sizing: border-box; - margin: 0 1em 0 0; - height: 100%; - aspect-ratio: 1 / 1; /* width / height */ -} - -.guide .fairy-card-container { - font-size: min(var(--vwh) * 0.02); - display: flex; - box-sizing: border-box; -} - -.guide .left-arrow, .guide .right-arrow { - display: flex; - width: 13%; - flex-shrink: 0; -} - -.guide svg { - box-sizing: border-box; - width: 100%; - padding: 5%; - border-radius: 0.5em; - /* margin: 0.75em 0; */ -} - -.guide svg:hover { - background-color: rgb(224, 224, 224); -} - -.guide svg:active { - background-color: rgb(218, 218, 218); -} - -.guide .fairy-card { - margin: 0 1em; - display: flex; - flex-direction: column; -} - -.guide .space-1 { - flex-grow: 1; -} - -.guide .fairy-card-title { - text-align: center; - font-size: 1.6em; - font-weight: bold; - margin: 0 0 1em; - text-shadow: 0 0.12em 0.2em rgba(0, 0, 0, 0.203); - flex-grow: 0; -} - -.guide .fairy-card-description { - margin: 0; - font-size: 1em; - flex-grow: 0; -} - -.guide .space-2 { - flex-grow: 2; -} - -@media only screen and (max-width: 700px) { - .guide .img-promotionlines, .guide .img-kingrookfork { - float: none; - width: 95%; - margin: 0 auto; - display: block; /* Ensures the image is a block element */ - } -} - -@media only screen and (max-width: 500px) { - .guide .img-arrowindicators { - width: 96px; - } -} - -@media only screen and (max-width: 600px), (max-height: 648px) { - .guide .img-fairymoveset { - width: 95%; - height: unset; - margin: 0 0 0.75em; - } - - .guide .fairy-card-container { - padding-bottom: 0.75em; - min-height: 18em; - } - - .guide .left-arrow, .guide .right-arrow { - display: flex; - max-width: 50px; - } - - .guide .fairy-pieces { - flex-wrap: wrap; - height: unset; - } - - .guide .fairy-card-title { - font-size: 2.4em; - } - - .guide .fairy-card-description { - font-size: 1.5em; - } -} - - - -/* Play Page: Invite creation screen */ - -.play-selection { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: grid; - grid-template: repeat(2, min(8vw, 86px, calc(var(--vh-sub-nav) * 0.092))) min(50vw, 542px, calc(var(--vh-sub-nav) * 0.575)) min(8vw, 86px, calc(var(--vh-sub-nav) * 0.092)) / repeat(6, min(13vw, 141px, calc(var(--vh-sub-nav) * 0.15))); - gap: min(1.5vw, 16px, calc(var(--vh-sub-nav) * 0.0173)); - justify-content: center; - align-content: center; - margin-bottom: 8vh; -} - -.play-selection button { - font-size: min(2.5vw, 27px, calc(var(--vh-sub-nav) * 0.029)); -} - -.play-selection button:hover { - background: linear-gradient(to bottom, white, rgb(242, 242, 242), white); -} - -.play-selection button:active { - background: linear-gradient(to bottom, white, rgb(255, 255, 255), white); -} - -.play-selection .play-name { - grid-column: 1 / 7; - align-self: center; - justify-self: center; - font-size: min(2.5vw, 27px, calc(var(--vh-sub-nav) * 0.029)); -} - -.play-selection .online { - grid-column: 1 / 3; -} - -.play-selection .local { - grid-column: 3 / 5; -} - -.play-selection .computer { - grid-column: 5 / 7; -} - -.play-selection .create-invite { - grid-column: 1 / 4; - background: linear-gradient(to bottom, white, rgb(226, 226, 226), white); -} - -.play-selection .play-back { - grid-column: 4 / 7; -} - -.play-selection .selected { - box-shadow: none; -} - -.play-selection .game-options { - font-size: min(2.5vw, 27px, calc(var(--vh-sub-nav) * 0.029)); - grid-column: 1 / 7; - overflow-y: auto; - display: flex; - flex-direction: column; -} - -/* Target the scrollbar */ -.game-options::-webkit-scrollbar { - width: 9px; /* Set the width of the scrollbar */ -} - -/* Set the background color of the scrollbar track */ -.game-options::-webkit-scrollbar-track { - background-color: #f1f1f1; - border-radius: 5px; /* Set the border radius of the track */ -} - -/* Set the color and border radius of the scrollbar thumb */ -.game-options::-webkit-scrollbar-thumb { - background-color: rgb(174, 174, 174); - border-radius: 5px; /* Set the border radius of the thumb */ -} - -.game-options .options { - background: linear-gradient(to bottom, white, rgb(229, 229, 229), white); - border-bottom: 2px solid rgb(168, 168, 168); - /* border-radius: min(1.3vw, 30px) min(1.3vw, 30px) 0 0; */ - border-radius: min(1.3vw, 30px, calc(var(--vh-sub-nav) * 0.015)); - display: flex; - justify-content: center; -} - -.option-card { - display: flex; - flex-flow: column; - align-items: center; - padding: 0.35em 1.1em; -} - -.game-options .option-card p { - font-size: min(1.5vw, 16px, calc(var(--vh-sub-nav) * 0.017)); - text-align: center; - padding-bottom: 0.3em; -} - -.game-options select { - border: 1.5px solid grey; - border-radius: 0.75em; - padding: 0.6em 0.9em; - font-size: min(1.5vw, 16px, calc(var(--vh-sub-nav) * 0.017)); - box-sizing: content-box; - min-width: 3em; - max-width: 6em; - text-align: center; - - /* Remove arrow */ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -#option-clock { - max-width: 5em; -} - -.invite-list { - flex-grow: 1; -} - -.game-options .join-existing { - text-align: center; - font-size: min(1.7vw, 18px, calc(var(--vh-sub-nav) * 0.020)); - padding: 0.5em; -} - -.game-options .invite { - background-color: rgba(0, 0, 255, 0.227); - height: 3em; - display: flex; - align-items: center; - font-size: min(1.7vw, 18px, calc(var(--vh-sub-nav) * 0.020)); - justify-content: space-between; - margin: 0.4em; - border-radius: 0.3em; -} - -.invite .invite-child { - padding: 0 0.6em; -} - -.invite .invite-child.accept { - margin-right: 0.8em; - padding: 0.5em 0.8em; - border-radius: 0.5em; -} - -.invite.hover { - background-color: rgba(48, 145, 255, 0.442); -} - -.invite.hover .accept { - background-color: rgba(255, 255, 255, 0.299); -} - -.invite.ours { - background-color: rgba(156, 36, 255, 0.303); -} - -.invite.ours.hover { - background-color: rgba(255, 36, 178, 0.266); -} - -.invite.private { - background-color: rgba(0, 0, 0, 0.266); -} - -.invite.private.hover { - background-color: rgba(0, 0, 0, 0.22); -} - -.join-private, .invite-code { - display: flex; - justify-content: center; - align-items: center; - font-size: 0.9em; - background: linear-gradient(to bottom, white, rgb(229, 229, 229), white); - padding: 0.5em 0; - border-top: 2px solid rgb(168, 168, 168); - border-radius: min(1.3vw, 30px, calc(var(--vh-sub-nav) * 0.015)); -} - -.textbox-private { - font-size: 0.8em; - margin: 0 1.8em 0 1em; - text-align: center; - background-color: rgba(255, 255, 255, 0.291); - border: 0; - border-radius: 0.5em; - padding: 0.4em 0; - box-shadow: 0 0 0.4em rgba(0, 0, 0, 0.398); - width: 4.6em; -} - -.textbox-private:hover { - box-shadow: 0 0 0.4em rgba(0, 0, 0, 0.631); -} - -.textbox-private:focus { - outline: solid 1px black; -} - -.invite-code-code { - font-size: 1.1em; - margin: 0 1.1em 0 0.7em; - text-shadow: 0.05em 0.1em 0.15em rgba(0, 0, 0, 0.175); - font-weight: bold; -} - -button.join-button, button.copy-button { - font-size: 0.8em; - background-color: white; - padding: 0.45em 0.65em; - border-radius: 0.6em; - box-shadow: 0 0 0.4em rgba(0, 0, 0, 0.649); - background: linear-gradient(to bottom, white, rgb(226, 226, 226), white); -} - - - -/* Top Navigation: Zoom buttons, coordinates, rewind/forward game, pause */ - -.navigation { - position: absolute; - top: 0; - width: 100%; - font-size: 84px; /* Update with doc!! */ - height: 1em; - display: flex; - box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.659); - background: linear-gradient(to top, rgba(255, 255, 255, 0.104), rgba(255, 255, 255, 0.552), rgba(255, 255, 255, 0.216)); - backdrop-filter: blur(8px); /* Apply a blur effect to the background */ - -webkit-backdrop-filter: blur(5px); /* Fixes blur for Safari */ -} - -.teleport, .coords, .right-nav { - display: flex; - align-items: center; -} - -.teleport { - justify-content: flex-start; - padding-left: 0.14em; -} - -.coords { - justify-content: center; - flex-grow: 1; -} - -.right-nav { - justify-content: flex-end; - padding-right: 0.14em; -} - -#position { - box-sizing: border-box; - font-size: 0.19em; - height: 4em; - margin: 0.44em; - border-radius: 0.5em; - background-color: rgb(255, 255, 255); - box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.878); - display: flex; - flex-direction: column; - justify-content: center; -} - -.x, .y { - height: 50%; - display: flex; - align-items: center; - justify-content: space-between; -} - -.x { - padding: 0.13em 0 0 0.44em; - border-radius: 0.5em 0.5em 0 0; - border-bottom: 1px solid rgb(161, 161, 161); -} - -.y { - padding: 0 0 0.13em 0.44em; - border-radius: 0 0 0.5em 0.5em; -} - -#x, #y { - margin-right: 0.31em; - padding: 0.06em 0.19em; - border-radius: 0.19em; - min-width: 7.5em; - max-width: 8.75em; - background-color: rgb(245, 245, 245); - color: rgb(37, 37, 37); -} - -.navigation .button { - position: relative; - width: 0.74em; - height: 0.74em; - margin: 0.07em; - border-radius: 0.16em; - background-color: rgb(255, 255, 255); - box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.878); - transition: transform 0.15s; - cursor: pointer; - -webkit-tap-highlight-color: transparent; /* No more blue highlight when tapping buttons on mobile */ -} - -.navigation .button:hover { - transform: scale(1.07); -} - -.navigation .button:active { - transform: scale(1); -} - -.navigation svg { - position: absolute; -} - -/* Start shrinking top navigation bar */ -@media only screen and (max-width: 700px) { /* 700px needs to be updated within camera.updatePIXEL_HEIGHT_OF_NAVS() !!! */ - .navigation { - font-size: 12vw; /* Update with doc!! */ - } -} - -/* Small screens. HIDE the coords and make the buttons bigger! */ -@media only screen and (max-width: 550px) { /* 550 needs to be updated within camera.updatePIXEL_HEIGHT_OF_NAVS() !!! */ - .navigation { - justify-content: space-between; - font-size: 66px; /* Update with doc!! */ - } - - .coords { - display: none; - } -} - -/* Mobile screen, start shrinking the size again */ -@media only screen and (max-width: 368px) { /* 368 needs to be updated within camera.updatePIXEL_HEIGHT_OF_NAVS() !!! */ - .navigation { - font-size: 17.9vw; /* Update with doc!! */ - } -} - - - -/* Bottom Navigation: Color to move, clocks, player names */ - -.footer { - position: absolute; - bottom: 0; - width: 100%; - height: 84px; - box-shadow: 0px -1px 7px 0px rgba(0, 0, 0, 0.659); - display: flex; - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.307), white, rgba(255, 255, 255, 0.84)); - backdrop-filter: blur(8px); /* Apply a blur effect to the background */ - -webkit-backdrop-filter: blur(5px); /* Fixes blur for Safari */ -} - -.timerwhitecontainer, .timerblackcontainer { - display: flex; - align-items: center; -} - -.timerwhitecontainer { - padding: 25px 0 25px 25px; -} - -.timerblackcontainer { - padding: 25px 25px 25px 0; -} - -.timerwhite, .timerblack { - background-color: rgba(121, 121, 121, 0.474); - padding: 15px; - font-size: 20px; - border-radius: 10px; - z-index: 1; -} - -.timerwhite { - background-color: rgb(255, 255, 255); - color: rgb(0, 0, 0); - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.878); -} - -.timerblack { - background-color: rgb(0, 0, 0); - color: white; - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.571); -} - -.playerwhite, .playerblack { - display: flex; - align-items: center; - font-size: 18px; -} - -.playerwhite { - padding: 0 10px 0 25px; -} - -.playerblack { - text-align: right; - padding: 0 25px 0 10px; -} - -.whosturn { - flex-grow: 1; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - font-size: 30px; - font-family: "Open Sans"; - font-weight: bold; -} - -.dotwhite, .dotblack { - border: 1px solid black; - width: 22px; - height: 22px; - border-radius: 100%; - margin: 12px; - transition: 0.25s; - flex-shrink: 0; -} - -.dotwhite { - background-color: white; - box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.491); -} - -.dotblack { - background-color: black; - box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.259); -} - -@media only screen and (max-width: 850px) { - .dotwhite, .dotblack { - display: none; - } - .whosturn { - font-size: 24px; - } - .playerwhite, .playerblack { - font-size: 16px; - } - .playerwhite { - padding-left: 20px; - } - .playerblack { - padding-right: 20px; - } - .timerwhitecontainer { - padding: 20px 0 20px 20px; - } - - .timerblackcontainer { - padding: 20px 20px 20px 0; - } - .timerwhite, .timerblack { - padding: 14px 12px; - font-size: 18px; - border-radius: 9px; - } - -} - -@media only screen and (max-width: 502px) { - - .playerwhite, .playerblack { - display: none; - } -} - - - -/* Promotion UI */ - -#promote { - min-width: 280px; - max-width: 400px; - padding: 10px; - border-radius: 10px; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - background-color: rgba(255, 255, 255, 0.949); - box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.918); - background-image: url("/img/game/promotions.png"); /* New pieces */ - background-repeat: no-repeat; - background-size: 0; -} - -.promotecolor { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - background-image: inherit; - background-repeat: no-repeat; - background-size: 0; -} - -.promotepiececontainer { - background-image: inherit; - background-repeat: no-repeat; - background-size: 0; - width: 80px; - height: 80px; - padding: 3px; - margin: 3px; - border-radius: 10px; -} - -.promotepiececontainer:hover { - background-color: rgba(0, 0, 0, 0.099); -} - -.promotepiececontainer:active { - background-color: rgba(0, 0, 0, 0.158); -} - -.promotepiece { - width: 80px; - height: 80px; - background-image: inherit; - background-repeat: no-repeat; - /* NEEDS TO BE as many times greater than 100% as there are pieces in the promotions spritesheet! 30 pieces => 3000% */ - background-size: 3000%; -} - -.knightsW { - background-position-x: calc(100%/29 * 0); -} - -.knightsB { - background-position-x: calc(100%/29 * 1); -} - -.guardsW { - background-position-x: calc(100%/29 * 2); -} - -.guardsB { - background-position-x: calc(100%/29 * 3); -} - -.bishopsW { - background-position-x: calc(100%/29 * 4); -} - -.bishopsB { - background-position-x: calc(100%/29 * 5); -} - -.rooksW { - background-position-x: calc(100%/29 * 6); -} - -.rooksB { - background-position-x: calc(100%/29 * 7); -} - -.queensW { - background-position-x: calc(100%/29 * 8); -} - -.queensB { - background-position-x: calc(100%/29 * 9); -} - -.archbishopsW { - background-position-x: calc(100%/29 * 10); -} - -.archbishopsB { - background-position-x: calc(100%/29 * 11); -} - -.chancellorsW { - background-position-x: calc(100%/29 * 12); -} - -.chancellorsB { - background-position-x: calc(100%/29 * 13); -} - -.amazonsW { - background-position-x: calc(100%/29 * 14); -} - -.amazonsB { - background-position-x: calc(100%/29 * 15); -} - -.hawksW { - background-position-x: calc(100%/29 * 16); -} - -.hawksB { - background-position-x: calc(100%/29 * 17); -} - -.camelsW { - background-position-x: calc(100%/29 * 18); -} - -.camelsB { - background-position-x: calc(100%/29 * 19); -} - -.giraffesW { - background-position-x: calc(100%/29 * 20); -} - -.giraffesB { - background-position-x: calc(100%/29 * 21); -} - -.zebrasW { - background-position-x: calc(100%/29 * 22); -} - -.zebrasB { - background-position-x: calc(100%/29 * 23); -} - -.centaursW { - background-position-x: calc(100%/29 * 24); -} - -.centaursB { - background-position-x: calc(100%/29 * 25); -} - -.knightridersW { - background-position-x: calc(100%/29 * 26); -} - -.knightridersB { - background-position-x: calc(100%/29 * 27); -} - -.rosesW { - background-position-x: calc(100%/29 * 28); -} - -.rosesB { - background-position-x: calc(100%/29 * 29); -} - - - -/* Pause UI */ - -.pauseUI { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(0, 0, 0, 0.849); - padding-bottom: 15vh; - display: grid; - grid-template: repeat(5, min(8vw, 86px)) / repeat(2, min(30vw, 320px)); - gap: min(3vw, 32px); - justify-content: center; - align-content: center; -} - -.pauseUI p.paused, .pauseUI button { - font-size: min(2.5vw, 27px); -} - -.pauseUI p.paused { - color: white; - text-align: center; - align-self: center; -} - -.pauseUI button { - background-color: rgb(228, 228, 228); - box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.27); - border-radius: min(0.9vw, 10px); - color: rgb(0, 0, 0); - background: linear-gradient(to bottom, white, rgb(199, 199, 199), white); -} - -.pauseUI button:hover { - /* background-color: rgb(255, 255, 255); */ - background: linear-gradient(to bottom, white, rgb(219, 219, 219), white); -} - -.pauseUI button:active { - /* box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.51); */ - background: linear-gradient(to bottom, white, rgb(230, 230, 230), white); -} - -.pauseUI p.paused, button.paused, button.resume, button.mainmenu { - grid-column: 1 / 3; -} - - - -/* Status text showing alerts and errors */ - -.statusmessage { - position: absolute; - bottom: 84px; - left: 0; - right: 0; - padding: 1em 8%; - z-index: 1; - pointer-events: none; -} - -.statusmessage .statustext { - margin: 0 auto; - padding: 0.4em 3em; - width: fit-content; - font-size: 18px; - text-align: center; - opacity: 0; - white-space: pre-wrap; - line-height: 1.5; -} - -.statustext.ok { - opacity: 1; - color: black; - --color: white; - background: linear-gradient(to right, transparent, var(--color), var(--color), var(--color), var(--color), transparent); -} - -.statustext.error { - opacity: 1; - color: white; - --color: rgb(255, 0, 0); - background: linear-gradient(to right, transparent, var(--color), var(--color), var(--color), var(--color), transparent); -} - - - -/* Status messages along the top-right showing detailed information (move count, fps meter) */ - -#stats { - position: absolute; - top: 0; - width: 100%; - font-size: 22px; -} - -.status { - text-align: right; - margin: 0.4em 0.6em; - word-break: break-all; -} - - - -/* General classes with basic properties */ - -.currPage { - background-color: rgb(236, 236, 236); -} - -.center { - text-align: center; -} - -a { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0.099); -} - -.unavailable { - color: rgb(190, 190, 190); -} - -.flex { - display: flex; -} - -.hidden { - display: none; -} - -.opacity-0_5 { - opacity: 0.5; -} - -.opacity-0_25 { - opacity: 0.25; -} - -.rotate-180 { - transform: rotate(180deg); -} - -.unselectable { - user-select: none; /* Makes the whole div unselectable (would ruin the experience) */ - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} - -.selectable { - user-select: text; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - - - -/* Animations */ - -@keyframes fade-in { - from { - opacity: 0%; - } - to { - opacity: 100%; - } -} - -@keyframes fade-out { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -.fade-in-1s { - animation: fade-in 1s; -} - -.fade-out-1s { - animation: fade-out 1s; /* UPDATE 1s within the document in the statustext module! */ -} - -.fade-in-2_3s { - animation: fade-in 0.67s; -} - -.fade-out-2_3s { - animation: fade-out 0.67s; /* UPDATE 1s within the document in the statustext module! */ -} - - - -/* Tooltips */ - -.tooltip-dl, .tooltip-d, .tooltip-dr { - position: relative; -} - -/* The main tooltip black box */ -.tooltip-dl::before, .tooltip-d::before, .tooltip-dr::before { - content: attr(data-tooltip); - position: absolute; - top: calc(100% + 8px); - background-color: black; - color: rgb(236, 236, 236); - text-align: center; - border-radius: 6px; - font-size: 12px; - width: max-content; /* Width based on content size */ - max-width: 100px; - padding: 5px 5px; - visibility: hidden; /* Hidden by default */ - opacity: 0; - transition: opacity 0.1s ease-in-out; - /* Hovering over the tooltip won't count as hovering over its parent */ - pointer-events: none; -} - -/* down-left */ -.tooltip-dl::before { - right: 0; -} - -/* down */ -.tooltip-d::before { - left: 50%; - transform: translateX(-50%); /* Shift it left by half of its width */ -} - -/* down-right */ -.tooltip-dr::before { - left: 0; -} - -/* The arrow on the top of the tooltip box */ -.tooltip-dl::after, .tooltip-d::after, .tooltip-dr::after { - content: ""; - position: absolute; - top: calc(100% + 8.5px);; /* Position right below the tooltip */ - left: 50%; - border-width: 5px; - border-style: solid; - border-color: transparent transparent black transparent; - transform: translate(-50%, -100%); - visibility: hidden; /* Hidden by default */ - opacity: 0; - transition: opacity 0.1s ease-in-out; - z-index: 1; - /* Hovering over the tooltip won't count as hovering over its parent */ - pointer-events: none; -} - -/* After 1s of hovering, the tooltip becomes visible */ -.tooltip-dl:hover::before, .tooltip-d:hover::before, .tooltip-dr:hover::before, -.tooltip-dl:hover::after, .tooltip-d:hover::after, .tooltip-dr:hover::after { - visibility: visible; - opacity: 1; - transition-delay: 1s; /* Delay the tooltip appearance */ - z-index: 1; -} - -/* Overwriting styles after you've already started hovering (no delay) */ -.tooltip-dl.fast-transition:hover::before, .tooltip-d.fast-transition:hover::before, .tooltip-dr.fast-transition:hover::before, -.tooltip-dl.fast-transition:hover::after, .tooltip-d.fast-transition:hover::after, .tooltip-dr.fast-transition:hover::after { - transition-delay: 0s; /* Delay the tooltip appearance */ -} - -/* Mobile devices should NOT show the tooltips on hover.. perhaps on active though? */ -@media not (pointer: fine) { - .tooltip-dl:hover::before, .tooltip-d:hover::before, .tooltip-dr:hover::before, - .tooltip-dl:hover::after, .tooltip-d:hover::after, .tooltip-dr:hover::after { - visibility: hidden; - opacity: 0; - transition-delay: 0; /* Delay the tooltip appearance */ - z-index: 0; - } - - .tooltip-dl:active::before, .tooltip-d:active::before, .tooltip-dr:active::before, - .tooltip-dl:active::after, .tooltip-d:active::after, .tooltip-dr:active::after { - visibility: visible; - opacity: 1; - transition-delay: 0.5s; /* Delay the tooltip appearance */ - z-index: 1; - } -} \ No newline at end of file diff --git a/src/client/views/dev.html b/src/client/views/dev.html deleted file mode 100644 index a71e8002a..000000000 --- a/src/client/views/dev.html +++ /dev/null @@ -1,596 +0,0 @@ - - - - - - - - - - - - - Infinite Chess - Try the Dev - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - - -
-
- LOADING - -
-
- - - - -
- - - - - - - - - - - - - - - -
- - - - - -
- - - - - - - - - - - - - -
- - - - - - - -
- - \ No newline at end of file diff --git a/src/client/views/play.html b/src/client/views/play.html index 0a527d275..c972d8b73 100644 --- a/src/client/views/play.html +++ b/src/client/views/play.html @@ -1,7 +1,7 @@ - + @@ -10,7 +10,7 @@ - Infinite Chess - Play + Infinite Chess - Try the Dev @@ -18,9 +18,145 @@ - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +