save

Co-authored-by: Cobalt-60 <plastics-eater@users.noreply.github.com>
Co-authored-by: fowntain <dean@skool.gq>

static/assets/css/main.css

@@ -80,7 +80,8 @@ h1 {
     text-align: center;
 }
 
-input {
+
+.settings-input {
     text-align: center;
     box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
     border: none;
@@ -122,14 +123,6 @@ button {
     opacity: 1;
 }
 
-.mainpageimage-button img {
-    display: block;
-    width: 100%;
-    height: auto;
-    border-radius: 4vh;
-    box-shadow: 0vh 0.75vh 1.5vh 0vh black;
-}
-
 .mainpage-text {
     box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
     background-color: var(--background-color);
@@ -470,7 +463,7 @@ input:checked+.slider:before {
     background: rgba(0, 0, 0);
 }
 
-.featuredcontainer{
+.featuredcontainer {
   background-color: var(--background-color);
   width: 60vh;
   margin: auto;

static/assets/js/games.js

@@ -8,28 +8,54 @@ const tiltEffectSettings = {
   easing: 'cubic-bezier(.03,.98,.52,.99)' // easing (transition-timing-function) of the enter/exit transition
 };
 
+let games = []; // store all games
+let filteredGames = []; // store filtered games
+
 const load = () => {
   fetch('/assets/JSON/games.json')
     .then(res => res.json())
-    .then(games => {
-      games.forEach(game => {
-        const el = document.createElement('div');
-        el.classList = 'game';
-        el.innerHTML = `<img src="${game.image}"><h3>${game.name}</h3>`;
-        document.querySelector('.games').appendChild(el);
+    .then(data => {
+      games = data;
+      filteredGames = games; // initialize filtered games with all games
 
-        el.addEventListener('click', () => location.href = `/play?id=${games.indexOf(game)}`);
+      renderGames(filteredGames); // render games initially
 
-        el.addEventListener('mouseenter', gameMouseEnter);
-        el.addEventListener('mousemove', gameMouseMove);
-        el.addEventListener('mouseleave', gameMouseLeave);
-      });
+      // Add event listener to search input
+      const searchInput = document.getElementById('searchInput');
+      searchInput.addEventListener('input', filterGames);
     })
     .catch(e => {
       new PolarisError('Failed to load games');
     });
 };
 
+function filterGames() {
+  const searchInput = document.getElementById('searchInput');
+  const searchTerm = searchInput.value.toLowerCase();
+
+  filteredGames = games.filter(game => game.name.toLowerCase().includes(searchTerm));
+
+  renderGames(filteredGames); // render filtered games
+}
+
+function renderGames(gamesToRender) {
+  const gamesContainer = document.querySelector('.games');
+  gamesContainer.innerHTML = ''; // clear previous games
+
+  gamesToRender.forEach(game => {
+    const el = document.createElement('div');
+    el.classList = 'game';
+    el.innerHTML = `<img src="${game.image}"><h3>${game.name}</h3>`;
+    gamesContainer.appendChild(el);
+
+    el.addEventListener('click', () => location.href = `/play?id=${games.indexOf(game)}`);
+
+    el.addEventListener('mouseenter', gameMouseEnter);
+    el.addEventListener('mousemove', gameMouseMove);
+    el.addEventListener('mouseleave', gameMouseLeave);
+  });
+}
+
 function gameMouseEnter(event) {
   setTransition(event);
 }
@@ -66,4 +92,4 @@ function setTransition(event) {
   }, tiltEffectSettings.speed);
 }
 
-export default { load };
+export default { load };

static/assets/misc/nav.html

@@ -1,7 +1,7 @@
 <div class="navbar">
     <a class="title" href="/">
         <img src="/assets/img/logo.png" />
-        <span>Polaris<span>   By Skool + Ember Network</span></span>
+        <span>Polaris<span>By Skool</span></span>
     </a>
 
     <div class="end">
@@ -28,11 +28,11 @@
     <h1>Settings</h1>
 
     <h3>Panic Key</h3>
-    <input type="text" name="Panic Key" id="panic_key" value="No Key Selected" readonly />
+    <input class="settings-input" type="text" name="Panic Key" id="panic_key" value="No Key Selected" readonly />
     <button class="settings-button" id="reset_panic">Reset</button>
     <br>
     <h3>Panic URL</h3>
-    <input type="url" id="panic_url" placeholder="eg: https://google.com" />
+    <input class="settings-input" type="url" id="panic_url" placeholder="eg: https://google.com" />
     <br>
     <h3>Theme</h3>
     <div id="themes">
@@ -53,8 +53,8 @@
         <option value="classroom">Google Classroom</option>
     </select>
     <div class="hidden" id="custom_cloak">
-        <input type="text" placeholder="Title" id="title" />
-        <input type="text" placeholder="eg: google.com" id="domain" />
+        <input class="settings-input" type="text" placeholder="Title" id="title" />
+        <input class="settings-input" type="text" placeholder="eg: google.com" id="domain" />
     </div>
 
     <h3>Select a proxy</h3>

static/index.html

@@ -14,14 +14,14 @@
 <body>
     <div class="center-content">
         <div class="mainpageimage">
-          <a href="/play?id=0">
-          <div class="featuredcontainer">
-          <div class="featuredtopbar">
-          <b><p style="margin:0; padding-bottom:1vh;">Featured</p></b>
-          </div>
-          <img class="featuredimg" src="https://images.crazygames.com/games/10-minutes-till-dawn/cover-1652811077990.png?auto=format%2Ccompress&q=45&cs=strip&ch=DPR&w=1200&h=630&fit=crop"/>
-          </div>
-          </a>
+            <div class="featuredcontainer">
+                <div class="featuredtopbar">
+                    <b>
+                        <p>Featured</p>
+                    </b>
+                </div>
+                <a href="/play?id=0"><img class="featuredimg" src="https://via.placeholder.com/400x225" /></a>
+            </div>
         </div>
 
         <div class="mainpage-text">
@@ -34,4 +34,4 @@
     <script src="/assets/js/main.js" type="module"></script>
 </body>
 
-</html>
+</html>