Merge pull request #4 from jacob-medina/socket

added responsiveness to title and board text
jacob-medina · Sep 6, 2023 · 7ee04ca · 7ee04ca
2 parents d8e950a + 2fdfb5d
commit 7ee04ca
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
@@ -314,6 +314,14 @@ div:has( > #share-url) {
 
 /* MAIN CONTENT */
 
+.title-rel {
+    position: relative;
+}
+
+.title-rel-loaded {
+    right: calc(40vw - 10px);
+}
+
 .title-container {
     position: absolute;
     top: 35vh;
@@ -486,7 +494,7 @@ h1 {
 }
 
 .item-text {
-    font-size: 90%;
+    font-size: 70%;
     line-height: 1.1rem;
     /* font-weight: bold; */
 }
@@ -596,6 +604,16 @@ footer {
 
 /* MEDIA QUERIES */
 
-/* @media screen and (min-width: 680px) {
-    
-} */
+@media screen and (min-width: 650px) {
+
+    .item-text {
+        font-size: 90%;
+    }
+}
+
+@media screen and (min-width: 1025px) {
+
+    .title-rel-loaded {
+        right: 0;
+    }
+}
diff --git a/public/assets/modules/board.js b/public/assets/modules/board.js
@@ -177,6 +177,7 @@ function getChallenge({category, id, name, edible, amount, challengeType}) {
 function endLoading() {
     $('.title-container').css('animation-name', 'loading-end');
     $('.title').attr('data-loading', 'false');
+    $('.title-rel').addClass('title-rel-loaded');
 
     showElement('main');
     showElement('footer');

diff --git a/public/assets/modules/race.js b/public/assets/modules/race.js
@@ -193,6 +193,14 @@ function handleReadyBtn(socket) {
 function beginRace() {
     $('.race-menu').addClass('hide');
     $('.bingo-board').removeClass('hide');
+
+    const color = `<span class="player-${clientNum}" style="font-family: 'Hylia Serif';">${clientNum === 1 ? 'Green' : 'Orange'}</span>`;
+    // <span class="material-symbols-outlined">person</span>
+    $(
+    `<div class="justify-center align-center mt-4">
+        <span>You are&nbsp;</span>
+        ${color}
+    </div>`).insertAfter('.bingo-board');
 }
 
 export { onConnect, createRoom, joinRoom, room, clientNum, handleReadyBtn, generatePlayerMenu, leaveRoom };
diff --git a/public/index.html b/public/index.html
@@ -18,7 +18,7 @@
 
 <body data-color-mode="dark">
     <header>
-        <div style="position: relative">
+        <div class="title-rel">
             <div class="title-container">
                 <hgroup class="title" data-loading="true">
                     <p class="pretitle">Totk</p>
@@ -199,7 +199,7 @@ <h5 class="options-header">Join a Room</h5>
     </div>
 
     <main class="hide">
-        <div class="wrapper justify-center align-center">
+        <div class="wrapper justify-center align-center flex-column">
             <div class="bingo-board"></div>
 
             <div class="race-menu hide">