brick-engine-js 1.0.2 → 1.0.4

package/public/style/sessionModal.css

@@ -0,0 +1,155 @@
+#modal-background {
+    position: absolute;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#modal-background.hidden {
+    display: none;
+}
+
+#session-modal {
+    width: 80%;
+    max-width: 500px;
+    height: 44%;
+    max-height: 360px;
+    min-width: 320px;
+    min-height: 280px;
+    position: relative;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 1rem 0;
+
+    background-color: var(--main-color);
+
+    border-radius: var(--border-radius);
+    border: var(--border);
+
+    box-shadow:
+        calc(var(--width) * -0.03) calc(var(--width) * 0.03) var(--dispersion) black,
+        calc(var(--width) * -0.02) calc(var(--width) * 0.02) var(--dispersion) var(--color-shadow-reflexion) inset,
+        calc(var(--width) * 0.01) calc(var(--width) * -0.01) var(--dispersion) var(--color-shadow) inset;
+}
+
+#session-modal-frame {
+    border: var(--border);
+    border-radius: var(--border-radius);
+
+    position: relative;
+
+    width: 90%;
+    flex: 1;
+    margin: 1rem 0;
+    min-height: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#session-modal-frame > p {
+    position: absolute;
+    top: 0;
+    transform: translateY(-50%);
+
+    text-align: center;
+
+    font-family: 'retro-gamming';
+    font-weight: bold;
+    font-size: clamp(1rem, calc(var(--height) * 0.03), 1.4rem);
+
+    background-color: var(--main-color);
+    padding: 0 calc(var(--width) * 0.02);
+
+    text-shadow:
+        calc(var(--width) * -0.003) calc(var(--width) * 0.003) 0 var(--color-shadow),
+        calc(var(--width) * 0.002) calc(var(--width) * -0.002) 0 var(--color-shadow-reflexion);
+}
+
+#session-modal-screen {
+    width: 90%;
+    height: 80%;
+
+    border: var(--border);
+    box-shadow:
+        calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--color-shadow),
+        calc(var(--width) * 0.01) calc(var(--width) * -0.01) var(--dispersion) var(--color-shadow-reflexion);
+
+    background-image: url('../images/cell.svg');
+    background-size: 3.7%;
+    background-repeat: repeat;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#session-modal-screen > p {
+    text-align: center;
+
+    font-family: 'retro-gamming';
+    font-size: 1.5rem;
+
+    padding: 0 calc(var(--width) * 0.02);
+}
+
+#session-modal-screen > p > span {
+    font-size: 1.8rem;
+    padding: 0 calc(var(--width) * 0.02);
+}
+
+#session-modal-buttons {
+    width: 100%;
+    padding-bottom: 0.5rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    gap: clamp(1rem, 5vw, 2.5rem);
+}
+
+.session-modal-button:active {
+    box-shadow:
+        calc(var(--width) * -0.005) calc(var(--width) * 0.005) var(--dispersion) var(--color-shadow),
+        calc(var(--width) * -0.004) calc(var(--width) * 0.004) var(--dispersion) var(--button-color-reflexion) inset;
+    transform: translate(calc(var(--width) * -0.005), calc(var(--width) * 0.005));
+}
+
+.session-modal-button {
+    width: 35%;
+    max-width: 150px;
+    padding: 0.8rem 0;
+
+    border: var(--border);
+    border-radius: var(--border-radius);
+
+    background-color: var(--button-color);
+    box-shadow:
+        calc(var(--width) * -0.015) calc(var(--width) * 0.015) var(--dispersion) var(--color-shadow),
+        calc(var(--width) * -0.0175) calc(var(--width) * 0.0175) var(--dispersion) var(--button-color-reflexion) inset;
+
+    font-family: 'retro-gamming';
+    color: white;
+    text-align: center;
+
+    user-select: none;
+
+    font-size: 1rem;
+
+    text-shadow:
+        calc(var(--width) * -0.003) calc(var(--width) * 0.003) 0 var(--button-color-shadow),
+        calc(var(--width) * 0.002) calc(var(--width) * -0.002) 0 var(--button-color-reflexion);
+
+    transition:
+        transform var(--button-animation-duration),
+        box-shadow var(--button-animation-duration);
+}

package/public/style/sourceCodeAndCommands.css

@@ -0,0 +1,74 @@
+#source-code {
+    position: absolute;
+    top: 2%;
+    right: 2%;
+}
+
+#controls {
+    position: absolute;
+    top: 2%;
+    left: 2%;
+}
+
+#source-code,
+#controls {
+    background-color: var(--main-color);
+    padding: 0.75rem;
+    border-radius: 1.5rem;
+    cursor: pointer;
+    box-sizing: content-box;
+}
+
+#source-code > #source-code-button,
+#controls > #controls-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#source-code > #source-code-button > img,
+#controls > #controls-button > img {
+    width: 2.5rem;
+    filter: invert();
+}
+#source-code:hover,
+#controls:hover {
+    background-color: var(--color-shadow-reflexion);
+}
+#source-code:active,
+#controls:active {
+    filter: brightness(1.15);
+}
+
+#source-code::after,
+#controls::after {
+    font-family: 'retro-gamming';
+    padding: 0.5rem;
+    width: 6rem;
+    background-color: white;
+    text-align: center;
+    border-radius: 0.25rem;
+    border: 1px black solid;
+    box-shadow: 0.25rem 0.25rem black;
+    opacity: 0;
+    transition: 0.25s opacity;
+}
+
+#source-code:hover::after,
+#controls:hover::after {
+    opacity: 1;
+}
+
+#source-code::after {
+    content: 'source code';
+    position: absolute;
+    top: 75px;
+    left: -65px;
+}
+
+#controls::after {
+    content: 'Controls';
+    position: absolute;
+    top: 75px;
+    left: 15px;
+}

package/public/style/splash.css

@@ -0,0 +1,13 @@
+#splash {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: black;
+    opacity: 0.85;
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

package/public/style/theme.css

@@ -0,0 +1,137 @@
+@font-face {
+    font-family: retro-gamming;
+    src: url(./../fonts/digital-7.monoitalic.ttf);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: content-box;
+    user-select: none;
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background: rgb(0, 158, 247);
+    background: linear-gradient(300deg, rgb(48, 179, 255) 0%, rgba(0, 158, 247, 1) 100%);
+}
+
+#version {
+    font-family: 'retro-gamming';
+    font-size: 1rem;
+    color: white;
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+}
+
+@media only screen and (max-width: 600px) {
+    #source-code,
+    #controls {
+        display: none;
+    }
+
+    body,
+    #container {
+        width: 100% !important;
+        height: 100vh !important;
+        /* height: 100dvh !important; */
+        border-radius: 0px !important;
+    }
+
+    #frame > canvas {
+        width: 85% !important;
+        height: auto !important;
+        aspect-ratio: 9/10 !important;
+    }
+
+    #frame {
+        width: 85% !important;
+        padding: 7.5%¨ !important;
+    }
+
+    #small-button-container {
+        margin-top: 3.5%;
+    }
+    #direction-vertical-container,
+    #direction-horizontal-container {
+        gap: calc(var(--width) * 0.13);
+    }
+
+    #large-button-container {
+        flex-shrink: 1.75;
+    }
+
+    .sm-btn {
+        width: var(--sm-button-size-mobile) !important;
+        height: var(--sm-button-size-mobile) !important;
+    }
+
+    .btn {
+        width: var(--button-size-mobile) !important;
+        height: var(--button-size-mobile) !important;
+        margin: var(--button-size-mobile-spacing) !important;
+        font-size: var(--button-size-mobile-font-size) !important;
+    }
+
+    .lg-btn {
+        width: var(--lg-button-size-mobile) !important;
+        height: var(--lg-button-size-mobile) !important;
+        font-size: var(--lg-button-size-mobile-font-size) !important;
+    }
+
+    .sm-btn-p {
+        font-size: var(--sm-button-size-mobile-font-size) !important;
+        line-height: var(--sm-button-size-mobile-line-height) !important;
+    }
+}
+
+@media only screen and (max-width: 990px) {
+    #wasd {
+        width: 10.5rem !important;
+    }
+
+    .key {
+        width: 3rem !important;
+    }
+
+    .key-description {
+        font-size: 1.5rem !important;
+    }
+
+    .command {
+        gap: 0.5rem !important;
+    }
+}
+
+@media only screen and (max-width: 815px) {
+    #controls-tutorial {
+        gap: 0rem;
+        flex-direction: column !important;
+    }
+}
+
+@media only screen and (max-width: 750px) {
+    .key-description {
+        font-size: 1.2rem !important;
+    }
+}
+
+@media only screen and (max-width: 650px) {
+    #wasd {
+        width: 9rem !important;
+    }
+
+    .key {
+        width: 2.5rem !important;
+    }
+    .key-description {
+        font-size: 1rem !important;
+    }
+}

package/dist/config/env.d.ts

@@ -1,2 +0,0 @@
-export declare function isClientMode(): boolean;
-export declare function isServerMode(): boolean;

package/dist/css/app.743066d8e4172b0e73f9.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"css/app.743066d8e4172b0e73f9.css","mappings":"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","sources":["webpack://BrickEngine/./public/style/body.css","webpack://BrickEngine/./public/style/buttons.css","webpack://BrickEngine/./public/style/debugger.css","webpack://BrickEngine/./public/style/sessionModal.css","webpack://BrickEngine/./public/style/sourceCodeAndCommands.css","webpack://BrickEngine/./public/style/splash.css","webpack://BrickEngine/./public/style/theme.css"],"sourcesContent":["/* MAIN BODY */\n\n#brick-game {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n}\n\n#container {\n    width: var(--width);\n    height: var(--height);\n\n    background-color: var(--main-color);\n\n    border-radius: var(--border-radius);\n    border: var(--border);\n\n    box-sizing: border-box;\n    margin: auto;\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    box-shadow:\n        calc(var(--width) * -0.03) calc(var(--width) * 0.03) var(--dispersion) black,\n        calc(var(--width) * -0.02) calc(var(--width) * 0.02) var(--dispersion) var(--color-shadow-reflexion) inset,\n        calc(var(--width) * 0.01) calc(var(--width) * -0.01) var(--dispersion) var(--color-shadow) inset;\n}\n\n#brick-game-canvas {\n    border: var(--border);\n    box-shadow:\n        calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--color-shadow),\n        calc(var(--width) * 0.01) calc(var(--width) * -0.01) var(--dispersion) var(--color-shadow-reflexion);\n}\n\n/* FRAME */\n\n#frame {\n    border: var(--border);\n    border-radius: var(--border-radius);\n\n    position: relative;\n\n    width: calc(var(--width) * 0.85);\n    height: auto;\n    aspect-ratio: 9/10;\n    margin: 7.5%;\n    margin-bottom: 3.75%;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n#frame div {\n    position: absolute;\n    top: calc(var(--height) * -0.02);\n    left: 27.5%;\n\n    width: 45%;\n    height: calc(var(--height) * 0.03);\n\n    background-color: var(--main-color);\n\n    display: flex;\n    justify-content: center;\n\n    padding-top: calc(var(--height) * 0.005);\n    padding-bottom: 0;\n}\n\n#frame p {\n    text-align: center;\n\n    font-family: 'retro-gamming';\n    font-weight: bold;\n    font-size: calc(var(--height) * 0.03);\n\n    text-shadow:\n        calc(var(--width) * -0.003) calc(var(--width) * 0.003) 0 var(--color-shadow),\n        calc(var(--width) * 0.002) calc(var(--width) * -0.002) 0 var(--color-shadow-reflexion);\n}\n","/* BUTTONS */\n\n.sm-btn,\n.btn,\n.lg-btn {\n    z-index: 999;\n}\n\n.sm-btn {\n    box-shadow:\n        calc(var(--width) * -0.0075) calc(var(--width) * 0.0075) var(--dispersion) var(--color-shadow),\n        calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--button-color-reflexion) inset;\n}\n\n.sm-btn:active {\n    box-shadow:\n        calc(var(--width) * -0.004) calc(var(--width) * 0.004) var(--dispersion) var(--color-shadow),\n        calc(var(--width) * -0.003) calc(var(--width) * 0.003) var(--dispersion) var(--button-color-reflexion) inset;\n    transform: translateX(calc(var(--width) * -0.0025)) translateY(calc(var(--width) * 0.0025));\n}\n\n.btn {\n    box-shadow:\n        calc(var(--width) * -0.015) calc(var(--width) * 0.015) var(--dispersion) var(--color-shadow),\n        calc(var(--width) * -0.0175) calc(var(--width) * 0.0175) var(--dispersion) var(--button-color-reflexion) inset;\n}\n\n.btn:active {\n    box-shadow:\n        calc(var(--width) * -0.004) calc(var(--width) * 0.004) var(--dispersion) var(--color-shadow),\n        calc(var(--width) * -0.003) calc(var(--width) * 0.003) var(--dispersion) var(--button-color-reflexion) inset;\n    transform: translateX(calc(var(--width) * -0.005)) translateY(calc(var(--width) * 0.005));\n}\n\n.lg-btn {\n    box-shadow:\n        calc(var(--width) * -0.02) calc(var(--width) * 0.02) var(--dispersion) var(--color-shadow),\n        calc(var(--width) * -0.0175) calc(var(--width) * 0.0175) var(--dispersion) var(--button-color-reflexion) inset;\n}\n\n.lg-btn:active {\n    box-shadow:\n        calc(var(--width) * -0.005) calc(var(--width) * 0.005) var(--dispersion) var(--color-shadow),\n        calc(var(--width) * -0.004) calc(var(--width) * 0.004) var(--dispersion) var(--button-color-reflexion) inset;\n    transform: translateX(calc(var(--width) * -0.0075)) translateY(calc(var(--width) * 0.0075));\n}\n\n.sm-btn-p,\n.btn-p,\n.lg-btn-p {\n    font-family: 'retro-gamming';\n    color: white;\n    text-align: center;\n\n    user-select: none;\n}\n\n.sm-btn-container,\n.btn-container,\n.lg-btn-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.sm-btn,\n.btn,\n.lg-btn {\n    outline: none;\n\n    border-radius: 50%;\n    border: var(--button-border);\n\n    transition-property: transform box-shadow;\n    transition-duration: var(--button-animation-duration);\n\n    background-color: var(--button-color);\n}\n\n.sm-btn-container {\n    flex-direction: column;\n}\n\n.sm-btn {\n    width: var(--sm-button-size);\n    height: var(--sm-button-size);\n}\n\n.sm-btn-p {\n    font-family: 'retro-gamming';\n    color: white;\n    text-align: center;\n\n    user-select: none;\n\n    font-size: calc(var(--width) * 0.03);\n\n    /* width: calc(var(--width) * 0.08); */\n    margin-top: calc(var(--width) * 0.01);\n\n    line-height: calc(var(--width) * 0.03);\n    height: calc(var(--width) * 0.06);\n\n    text-shadow:\n        calc(var(--width) * -0.003) calc(var(--width) * 0.003) 0 var(--color-shadow),\n        calc(var(--width) * 0.002) calc(var(--width) * -0.002) 0 var(--color-shadow-reflexion);\n}\n\n.btn-container {\n    flex-direction: column-reverse;\n}\n\n.btn {\n    width: var(--button-size);\n    height: var(--button-size);\n}\n\n.btn-p {\n    font-weight: bold;\n    font-size: calc(var(--width) * 0.04);\n    margin-bottom: calc(var(--width) * 0.015);\n    line-height: calc(var(--width) * 0.03);\n}\n\n.lg-btn-container {\n    flex-direction: column;\n}\n\n.lg-btn {\n    width: var(--lg-button-size);\n    height: var(--lg-button-size);\n}\n\n.lg-btn-p {\n    font-weight: bold;\n    font-size: calc(var(--width) * 0.05);\n    margin-bottom: calc(var(--width) * 0.015);\n    line-height: calc(var(--width) * 0.03);\n}\n\n.btn,\n.lg-btn {\n    font-family: 'retro-gamming';\n    font-size: calc(var(--width) * 0.045);\n    font-weight: bold;\n    color: white;\n    text-shadow:\n        calc(var(--width) * -0.003) calc(var(--width) * 0.003) 0 var(--button-color-shadow),\n        calc(var(--width) * 0.002) calc(var(--width) * -0.002) 0 var(--button-color-reflexion);\n}\n\n/* BUTTON CONTAINERS */\n\n#button-container,\n#small-button-container,\n#inner-button-container,\n#medium-button-container,\n#large-button-container {\n    width: 100%;\n    height: auto;\n}\n\n#button-container {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: column;\n}\n\n#small-button-container {\n    display: flex;\n    flex-grow: 0.1;\n    justify-content: space-evenly;\n\n    max-height: 150px;\n\n    position: relative;\n}\n\n.sm-btn-container-top {\n    position: relative;\n    top: -20%;\n}\n\n.sm-btn-container-bottom {\n    position: relative;\n    bottom: -20%;\n}\n\n#inner-button-container {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: row;\n}\n\n#medium-button-container {\n    display: flex;\n    flex-shrink: 1;\n\n    position: relative;\n}\n\n#large-button-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    flex-shrink: 1.5;\n}\n\n#direction-vertical-container,\n#direction-horizontal-container {\n    width: 100%;\n    height: 100%;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: calc(var(--width) * 0.115);\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n}\n\n#direction-vertical-container {\n    flex-direction: column;\n}\n\n#direction-horizontal-container {\n    flex-direction: row;\n}\n","#debugger {\n    font-family: 'retro-gamming', monospace;\n    background-color: rgba(0, 0, 0, 0.9);\n    color: #0f0; /* Green phosphor */\n    border: 2px solid #0f0;\n    box-shadow: 0 0 10px #0f0;\n    padding: 10px;\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    width: 300px;\n    max-height: calc(100vh - 40px);\n    overflow-y: auto;\n    user-select: none;\n    -webkit-user-select: none;\n    z-index: 9999;\n    font-size: 14px;\n    /* text-shadow: 0 0 2px #0f0; */\n}\n\n/* Custom Scrollbar */\n#debugger::-webkit-scrollbar {\n    width: 8px;\n}\n\n#debugger::-webkit-scrollbar-track {\n    background: #001100;\n}\n\n#debugger::-webkit-scrollbar-thumb {\n    background: #0f0;\n    border-radius: 4px;\n}\n\n#debugger::-webkit-scrollbar-thumb:hover {\n    background: #0a0;\n}\n\n/* Summary / Header */\n#debugger-summary {\n    font-weight: bold;\n    font-size: 16px;\n    cursor: pointer;\n    margin-bottom: 10px;\n    /* text-transform: uppercase; */\n    border-bottom: 1px dashed #0f0;\n    padding-bottom: 5px;\n    list-style: none;\n}\n\n/* Module Sections */\n.debugger-module {\n    margin-bottom: 10px;\n    border-left: 1px solid #004400;\n    padding-left: 8px;\n}\n\n.debugger-module-summary {\n    cursor: pointer;\n    font-weight: bold;\n    color: #cfc;\n    margin-bottom: 4px;\n}\n\n.debugger-module-summary:hover {\n    color: #fff;\n    /* text-shadow: 0 0 4px #fff; */\n}\n\n/* Data Rows */\n.debugger-container {\n    display: flex;\n    justify-content: space-between;\n    padding: 2px 0;\n    border-bottom: 1px dotted #003300;\n}\n\n/* Closed State */\n#debugger:not([open]) {\n    width: auto;\n    height: auto;\n    max-height: none;\n    padding: 5px 10px;\n    border: 1px solid #0f0;\n    background-color: rgba(0, 0, 0, 0.5);\n    box-shadow: none;\n}\n\n#debugger:not([open]) #debugger-summary {\n    margin-bottom: 0;\n    border-bottom: none;\n    padding-bottom: 0;\n}\n\n.debugger-container:hover {\n    background-color: rgba(0, 255, 0, 0.05);\n}\n\n.debugger-container.highlight {\n    background-color: transparent;\n    color: #fff;\n    /* text-shadow: 0 0 5px #fff; */\n    border-bottom: 1px solid #fff;\n}\n\n.debugger-container.highlight span {\n    color: #fff;\n}\n\n.debugger-container p {\n    margin: 0;\n    opacity: 0.8;\n}\n\n.debugger-container span {\n    font-weight: bold;\n}\n","#modal-background {\n    position: absolute;\n    inset: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n    z-index: 999;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n#modal-background.hidden {\n    display: none;\n}\n\n#session-modal {\n    width: 80%;\n    max-width: 500px;\n    height: 44%;\n    max-height: 360px;\n    min-width: 320px;\n    min-height: 280px;\n    position: relative;\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    box-sizing: border-box;\n    padding: 1rem 0;\n\n    background-color: var(--main-color);\n\n    border-radius: var(--border-radius);\n    border: var(--border);\n\n    box-shadow:\n        calc(var(--width) * -0.03) calc(var(--width) * 0.03) var(--dispersion) black,\n        calc(var(--width) * -0.02) calc(var(--width) * 0.02) var(--dispersion) var(--color-shadow-reflexion) inset,\n        calc(var(--width) * 0.01) calc(var(--width) * -0.01) var(--dispersion) var(--color-shadow) inset;\n}\n\n#session-modal-frame {\n    border: var(--border);\n    border-radius: var(--border-radius);\n\n    position: relative;\n\n    width: 90%;\n    flex: 1;\n    margin: 1rem 0;\n    min-height: 0;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n#session-modal-frame > p {\n    position: absolute;\n    top: 0;\n    transform: translateY(-50%);\n\n    text-align: center;\n\n    font-family: 'retro-gamming';\n    font-weight: bold;\n    font-size: clamp(1rem, calc(var(--height) * 0.03), 1.4rem);\n\n    background-color: var(--main-color);\n    padding: 0 calc(var(--width) * 0.02);\n\n    text-shadow:\n        calc(var(--width) * -0.003) calc(var(--width) * 0.003) 0 var(--color-shadow),\n        calc(var(--width) * 0.002) calc(var(--width) * -0.002) 0 var(--color-shadow-reflexion);\n}\n\n#session-modal-screen {\n    width: 90%;\n    height: 80%;\n\n    border: var(--border);\n    box-shadow:\n        calc(var(--width) * -0.01) calc(var(--width) * 0.01) var(--dispersion) var(--color-shadow),\n        calc(var(--width) * 0.01) calc(var(--width) * -0.01) var(--dispersion) var(--color-shadow-reflexion);\n\n    background-image: url('../images/cell.svg');\n    background-size: 3.7%;\n    background-repeat: repeat;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n#session-modal-screen > p {\n    text-align: center;\n\n    font-family: 'retro-gamming';\n    font-size: 1.5rem;\n\n    padding: 0 calc(var(--width) * 0.02);\n}\n\n#session-modal-screen > p > span {\n    font-size: 1.8rem;\n    padding: 0 calc(var(--width) * 0.02);\n}\n\n#session-modal-buttons {\n    width: 100%;\n    padding-bottom: 0.5rem;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    gap: clamp(1rem, 5vw, 2.5rem);\n}\n\n.session-modal-button:active {\n    box-shadow:\n        calc(var(--width) * -0.005) calc(var(--width) * 0.005) var(--dispersion) var(--color-shadow),\n        calc(var(--width) * -0.004) calc(var(--width) * 0.004) var(--dispersion) var(--button-color-reflexion) inset;\n    transform: translate(calc(var(--width) * -0.005), calc(var(--width) * 0.005));\n}\n\n.session-modal-button {\n    width: 35%;\n    max-width: 150px;\n    padding: 0.8rem 0;\n\n    border: var(--border);\n    border-radius: var(--border-radius);\n\n    background-color: var(--button-color);\n    box-shadow:\n        calc(var(--width) * -0.015) calc(var(--width) * 0.015) var(--dispersion) var(--color-shadow),\n        calc(var(--width) * -0.0175) calc(var(--width) * 0.0175) var(--dispersion) var(--button-color-reflexion) inset;\n\n    font-family: 'retro-gamming';\n    color: white;\n    text-align: center;\n\n    user-select: none;\n\n    font-size: 1rem;\n\n    text-shadow:\n        calc(var(--width) * -0.003) calc(var(--width) * 0.003) 0 var(--button-color-shadow),\n        calc(var(--width) * 0.002) calc(var(--width) * -0.002) 0 var(--button-color-reflexion);\n\n    transition:\n        transform var(--button-animation-duration),\n        box-shadow var(--button-animation-duration);\n}\n","#source-code {\n    position: absolute;\n    top: 2%;\n    right: 2%;\n}\n\n#controls {\n    position: absolute;\n    top: 2%;\n    left: 2%;\n}\n\n#source-code,\n#controls {\n    background-color: var(--main-color);\n    padding: 0.75rem;\n    border-radius: 1.5rem;\n    cursor: pointer;\n    box-sizing: content-box;\n}\n\n#source-code > #source-code-button,\n#controls > #controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n#source-code > #source-code-button > img,\n#controls > #controls-button > img {\n    width: 2.5rem;\n    filter: invert();\n}\n#source-code:hover,\n#controls:hover {\n    background-color: var(--color-shadow-reflexion);\n}\n#source-code:active,\n#controls:active {\n    filter: brightness(1.15);\n}\n\n#source-code::after,\n#controls::after {\n    font-family: 'retro-gamming';\n    padding: 0.5rem;\n    width: 6rem;\n    background-color: white;\n    text-align: center;\n    border-radius: 0.25rem;\n    border: 1px black solid;\n    box-shadow: 0.25rem 0.25rem black;\n    opacity: 0;\n    transition: 0.25s opacity;\n}\n\n#source-code:hover::after,\n#controls:hover::after {\n    opacity: 1;\n}\n\n#source-code::after {\n    content: 'source code';\n    position: absolute;\n    top: 75px;\n    left: -65px;\n}\n\n#controls::after {\n    content: 'Controls';\n    position: absolute;\n    top: 75px;\n    left: 15px;\n}\n","#splash {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: black;\n    opacity: 0.85;\n    z-index: 1000;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n","@font-face {\n    font-family: retro-gamming;\n    src: url(./../fonts/digital-7.monoitalic.ttf);\n}\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: content-box;\n    user-select: none;\n}\n\nbody {\n    width: 100vw;\n    height: 100vh;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background: rgb(0, 158, 247);\n    background: linear-gradient(300deg, rgb(48, 179, 255) 0%, rgba(0, 158, 247, 1) 100%);\n}\n\n#version {\n    font-family: 'retro-gamming';\n    font-size: 1rem;\n    color: white;\n    position: absolute;\n    bottom: 1rem;\n    right: 1rem;\n}\n\n@media only screen and (max-width: 600px) {\n    #source-code,\n    #controls {\n        display: none;\n    }\n\n    body,\n    #container {\n        width: 100% !important;\n        height: 100vh !important;\n        /* height: 100dvh !important; */\n        border-radius: 0px !important;\n    }\n\n    #frame > canvas {\n        width: 85% !important;\n        height: auto !important;\n        aspect-ratio: 9/10 !important;\n    }\n\n    #frame {\n        width: 85% !important;\n        padding: 7.5%¨ !important;\n    }\n\n    #small-button-container {\n        margin-top: 3.5%;\n    }\n    #direction-vertical-container,\n    #direction-horizontal-container {\n        gap: calc(var(--width) * 0.13);\n    }\n\n    #large-button-container {\n        flex-shrink: 1.75;\n    }\n\n    .sm-btn {\n        width: var(--sm-button-size-mobile) !important;\n        height: var(--sm-button-size-mobile) !important;\n    }\n\n    .btn {\n        width: var(--button-size-mobile) !important;\n        height: var(--button-size-mobile) !important;\n        margin: var(--button-size-mobile-spacing) !important;\n        font-size: var(--button-size-mobile-font-size) !important;\n    }\n\n    .lg-btn {\n        width: var(--lg-button-size-mobile) !important;\n        height: var(--lg-button-size-mobile) !important;\n        font-size: var(--lg-button-size-mobile-font-size) !important;\n    }\n\n    .sm-btn-p {\n        font-size: var(--sm-button-size-mobile-font-size) !important;\n        line-height: var(--sm-button-size-mobile-line-height) !important;\n    }\n}\n\n@media only screen and (max-width: 990px) {\n    #wasd {\n        width: 10.5rem !important;\n    }\n\n    .key {\n        width: 3rem !important;\n    }\n\n    .key-description {\n        font-size: 1.5rem !important;\n    }\n\n    .command {\n        gap: 0.5rem !important;\n    }\n}\n\n@media only screen and (max-width: 815px) {\n    #controls-tutorial {\n        gap: 0rem;\n        flex-direction: column !important;\n    }\n}\n\n@media only screen and (max-width: 750px) {\n    .key-description {\n        font-size: 1.2rem !important;\n    }\n}\n\n@media only screen and (max-width: 650px) {\n    #wasd {\n        width: 9rem !important;\n    }\n\n    .key {\n        width: 2.5rem !important;\n    }\n    .key-description {\n        font-size: 1rem !important;\n    }\n}\n"],"names":[],"sourceRoot":""}

package/dist/main.test.d.ts

@@ -1 +0,0 @@
-export {};