Add chess (Oh my gosh big commit)

2025-03-27 13:54:07 -06:00
parent 2edc40fb99
commit fbed5ae789
41 changed files with 1943 additions and 71 deletions
@@ -0,0 +1,106 @@
+html, body {
+    background-color: #2b2c30;
+    color: #d6d6d6;
+    cursor: default;
+    height: 100%;
+    margin: 0;
+}
+
+#startGameBtn {
+    background-color: #8cd5ed;
+    color: #262626;
+    border-radius: 30px;
+    border: 0px;
+    cursor: pointer;
+    order: 1;
+}
+
+#chessContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 100vh;
+    box-sizing: border-box;
+    padding: 5vw;
+}
+
+#chessBoard {
+    aspect-ratio: 1 / 1;
+    width: 90vw; /* use the smaller of width or height */
+    height: auto;
+    max-height: 90vw;
+}
+
+#boardContainer {
+    align-content: center;
+    flex-grow: 1;
+}
+
+.sideContent {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#textContainer {
+    flex-direction: column;
+    order: -1;
+    flex-shrink: 1;
+}
+
+#buttonContainer {
+    flex-grow: 3;
+}
+
+/* Put UI to left/right when screen is short */
+@media (min-aspect-ratio: 1/1) {
+    #chessContainer {
+        display: grid;
+        grid-template-columns: auto, auto;
+        grid-template-rows: auto, auto;
+        align-items: center;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        padding: 0;
+    }
+
+    .sideContent {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        flex-shrink: 0;
+        align-items: center;
+        text-align: center;
+        padding: min(5vw, 5vh);
+    }
+
+    #boardContainer {
+        grid-row: 1 / span 2;
+        grid-column: 1;
+    }
+
+    #textContainer {
+        grid-row: 1;
+        grid-column: 2;
+        text-align: center;
+    }
+
+    #buttonContainer {
+        grid-row: 2;
+        grid-column: 2;
+        text-align: left;
+        align-self: start;
+    }
+
+    #chessBoard {
+        aspect-ratio: 1 / 1;
+        flex-shrink: 1;
+        width: min(90vh, 90vw);
+        max-height: 90vh;
+    }
+}