news page

Infinite-Chess · Jul 17, 2024 · 2eeb7e5 · 2eeb7e5
1 parent fecaef8
commit 2eeb7e5
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 27 deletions.
diff --git a/src/client/css/index.css b/src/client/css/index.css
@@ -95,17 +95,34 @@ main {
 
 .video-thumbnail {
     position: relative;
-    display: inline-block;
     cursor: pointer;
     text-align: center;
 }
 
-.video-thumbnail img {
-    width: 100%;
-    height: auto;
-    display: block;
+
+.video-thumbnail img, .video-iframe {
+    width: var(--videoWidth);
+    height: calc(var(--videoWidth) * 9/16);
+}
+
+.video-thumbnail, .video-iframe {
+    --videoWidth: 38vw;
+}
+@media (max-width: 1200px) {
+    .video-thumbnail, .video-iframe {
+        --videoWidth: 60vw;
+    }
+}
+
+@media (max-width: 900px) {
+    .video-thumbnail, .video-iframe {
+        --videoWidth: 83vw;
+    }
 }
 
+
+
+
 .video-thumbnail .play-button {
     position: absolute;
     top: 50%;
@@ -117,12 +134,6 @@ main {
     background-size: 50% 50%;
 }
 
-.video-iframe {
-
-}
-
-
-
 #content h2 {
     font-size: 30px;
     margin: 35px 0 20px;

diff --git a/src/client/css/news.css b/src/client/css/news.css
@@ -95,6 +95,43 @@ main {
     font-size: 18px;
 }
 
+.video-thumbnail {
+    position: relative;
+    cursor: pointer;
+    text-align: center;
+}
+
+.video-thumbnail .play-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 120px;
+    height: 120px;
+    background: url('/img/play-button.png') no-repeat center center;
+    background-size: 50% 50%;
+}
+
+.video-thumbnail img, .video-iframe {
+    width: var(--videoWidth);
+    height: calc(var(--videoWidth) * 9/16);
+}
+
+.video-thumbnail, .video-iframe {
+    --videoWidth: 38vw;
+}
+@media (max-width: 1200px) {
+    .video-thumbnail, .video-iframe {
+        --videoWidth: 60vw;
+    }
+}
+
+@media (max-width: 900px) {
+    .video-thumbnail, .video-iframe {
+        --videoWidth: 83vw;
+    }
+}
+
 
 
 

diff --git a/src/client/img/now-open-source-thumbnail.webp b/src/client/img/now-open-source-thumbnail.webp
diff --git a/src/client/img/search-for-longest-chess-thumbnail.webp b/src/client/img/search-for-longest-chess-thumbnail.webp
diff --git a/src/client/scripts/index.js b/src/client/scripts/index.js
@@ -3,21 +3,19 @@ document.addEventListener('DOMContentLoaded', createThumbnailClickListener);
 
 function createThumbnailClickListener() {
   const videoThumbnail = document.getElementById('video-thumbnail');
-const videoID = 'rav29N0-h2c';
+  const videoID = 'rav29N0-h2c';
 
-console.log('yooo')
-videoThumbnail.addEventListener('click', function() {
-  console.log('clicked')
-  const iframe = document.createElement('iframe');
-  iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoID + '?autoplay=1');
-  iframe.setAttribute('frameborder', '0');
-  iframe.setAttribute('allowfullscreen', '');
+  videoThumbnail.addEventListener('click', () => {
+    const iframe = document.createElement('iframe');
+    iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoID + '?autoplay=1');
+    iframe.setAttribute('frameborder', '0');
+    iframe.setAttribute('allowfullscreen', '');
 
-  iframe.classList.add('video-iframe');
+    iframe.classList.add('video-iframe');
 
-  videoThumbnail.innerHTML = '';
-  videoThumbnail.appendChild(iframe);
-});
+    videoThumbnail.innerHTML = null;
+    videoThumbnail.appendChild(iframe);
+  });
 
 }
 
diff --git a/src/client/scripts/news.js b/src/client/scripts/news.js
@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', createThumbnailClickListeners);
+
+
+function createThumbnailClickListeners() {
+  const videoThumbnails = document.querySelectorAll('.video-thumbnail')
+
+  videoThumbnails.forEach((thumbnail) => {
+    thumbnail.addEventListener('click', () => {
+      const videoID = thumbnail.getAttribute('video-id');
+      const iframe = document.createElement('iframe');
+      iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoID + '?autoplay=1');
+      iframe.setAttribute('frameborder', '0');
+      iframe.setAttribute('allowfullscreen', '');
+
+      iframe.classList.add('video-iframe');
+
+      thumbnail.innerHTML = null;
+      thumbnail.appendChild(iframe);
+    });
+  });
+}
+
+
diff --git a/src/client/views/news.html b/src/client/views/news.html
@@ -7,6 +7,7 @@
         <title>News</title>
         <link rel='stylesheet' href='/css/news.css'>
         <link rel="icon" type="image/png" href="/img/favicon.png">
+        <script src="/scripts/news.js"></script>
     </head>
     <body>
         <header>
@@ -30,7 +31,7 @@
             </nav>
         </header>
         <main>
-            <div id="content">                  
+            <div id="content">
                 <h1 class="center">News</h1>
 
                 <p class="date">July 13, 2024:</p>
@@ -44,7 +45,10 @@ <h1 class="center">News</h1>
                 <br>
                 <p class="body">Infinite Chess is Now Open Source! See, and contribute, to the project <a href="https://github.com/Infinite-Chess/infinitechess.org" target="_blank">on GitHub!</a></p>
                 <br>
-                <iframe width="350" height="197" src="https://www.youtube.com/embed/fSUEKosgyt0?si=L-blqfVEpPBmQLMn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                <div id="now-open-source-thumbnail" class="video-thumbnail" video-id="fSUEKosgyt0">
+                    <img src="../img/now-open-source-thumbnail.webp" alt="Thumbnail">
+                    <div class="play-button"></div>
+                </div>
 
                 <p class="date">May 27, 2024:</p>
                 <br>
@@ -67,10 +71,14 @@ <h1 class="center">News</h1>
                 <p class="body">An auto-resignation timer will start if you're opponent goes AFK (with an audible warning).</p>
                 <br>
                 <p class="body">And many others! For the full list, check out <a href="https://discord.com/channels/1114425729569017918/1114427288776364132/1240014519061712997" target="_blank">the discord</a>!</p>
-                
+
                 <p class="date">Jan 29, 2024:</p>
                 <p class="body">New video released today!</p>
-                <iframe width="350" height="197" src="https://www.youtube.com/embed/b-Bb_TyhC1A?si=NmCm-RS21E61sA-O" title="YouTube video: The Search for the Longest Infinite Chess Game" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>   
+                <div id="longest-chess-game-thumbnail" class="video-thumbnail" video-id="b-Bb_TyhC1A">
+                    <img src="../img/search-for-longest-chess-thumbnail.webp" alt="Thumbnail">
+                    <div class="play-button"></div>
+                </div>
+
 
 
                 <p class="date">Aug 26, 2023:</p>