feat: Added community pages list, prettier server-loading-issues hand…

…ling (#33)
screepers · Aug 29, 2024 · a69b636 · a69b636
1 parent 3c52668
commit a69b636
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 39 deletions.
diff --git a/public/style.css b/public/style.css
@@ -102,6 +102,28 @@ main {
     flex-grow: 1;
 }
 
+.community-card {
+    height: 320px;
+    right: 0;
+    bottom: 0;
+    position: fixed;
+}
+
+.comm-container {
+    overflow: hidden;
+    overflow-y: scroll;
+}
+
+.comm-page {
+    display: block;
+    align-items: center;
+    margin: 10px;
+}
+
+.comm-page-buttom {
+    width: 100%;
+}
+
 .status-circle {
     cursor: pointer;
     width: 10px;
@@ -111,3 +133,4 @@ main {
     display: inline-block;
     box-sizing: border-box;
 }
+
diff --git a/src/clientApp.ts b/src/clientApp.ts
@@ -1,31 +1,32 @@
 #!/usr/bin/env node
+import views from '@ladjs/koa-views';
+import { ArgumentParser } from 'argparse';
+import chalk from 'chalk';
+import { createReadStream, existsSync, promises as fs } from 'fs';
 import httpProxy from 'http-proxy';
 import { createProxyMiddleware } from 'http-proxy-middleware';
-import Koa from 'koa';
-import koaConditionalGet from 'koa-conditional-get';
-import views from '@ladjs/koa-views';
 import jsBeautify from 'js-beautify';
 import JSZip from 'jszip';
-import chalk from 'chalk';
+import Koa from 'koa';
+import koaConditionalGet from 'koa-conditional-get';
 import path from 'path';
-import { ArgumentParser } from 'argparse';
-import { createReadStream, existsSync, promises as fs } from 'fs';
-import { fileURLToPath, URL } from 'url';
 import { Transform } from 'stream';
+import { URL, fileURLToPath } from 'url';
+import { clientAuth } from './inject/clientAuth';
+import { customMenuLinks } from './inject/customMenuLinks';
+import { roomDecorations } from './inject/roomDecorations';
 import { Client, Route } from './utils/client';
+import { handleProxyError, handleServerError, logError } from './utils/errors';
 import { getScreepsPath } from './utils/gamePath';
 import {
-    isOfficialLikeVersion,
-    trimLocalSubdomain,
+    extractBackend,
     generateScriptTag,
+    getCommunityPages,
     getServerListConfig,
-    extractBackend,
+    isOfficialLikeVersion,
     mimeTypes,
+    trimLocalSubdomain,
 } from './utils/utils';
-import { logError, handleProxyError, handleServerError } from './utils/errors';
-import { clientAuth } from './inject/clientAuth';
-import { roomDecorations } from './inject/roomDecorations';
-import { customMenuLinks } from './inject/customMenuLinks';
 
 // Get the app directory and version
 const __filename = fileURLToPath(import.meta.url);
@@ -157,11 +158,9 @@ koa.use(async (ctx, next) => {
 // Render the index.ejs file and pass the serverList variable
 koa.use(async (context, next) => {
     if (['/', 'index.html'].includes(context.path)) {
-        const serverList = await getServerListConfig(__dirname, hostAddress, port, argv.server_list);
-        if (serverList.length) {
-            await context.render(indexFile, { serverList });
-            return;
-        }
+        const communityPages = getCommunityPages();
+        let serverList = await getServerListConfig(__dirname, hostAddress, port, argv.server_list);
+        await context.render(indexFile, { serverList, communityPages });
     }
 
     return next();

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -1,8 +1,8 @@
-import path from 'path';
-import fetch from 'node-fetch';
 import { existsSync, promises as fs } from 'fs';
+import fetch from 'node-fetch';
+import path from 'path';
 import { URL } from 'url';
-import { type Client, Route } from './client';
+import { Route, type Client } from './client';
 import { Server } from './types';
 
 export const mimeTypes = {
@@ -108,3 +108,17 @@ export async function getServerListConfig(dirname: string, host: string, port: n
 
     return serverList;
 }
+
+export function getCommunityPages(): { title: string; url: string }[] {
+    return [
+        { title: 'Screeps Wiki', url: 'https://wiki.screepspl.us/index.php/Screeps_Wiki' },
+        { title: 'Community Grafana', url: 'https://pandascreeps.com/' },
+        { title: 'MarvinMTB vlog', url: 'https://www.youtube.com/playlist?list=PLGlzrjCmziEj7hQZSwcmkXkMXgkQXUQ6C' },
+        {
+            title: 'Attaner vlog',
+            url: 'https://www.youtube.com/watch?v=N7KMOG8C5vA&list=PLw9di5JwI6p-HUP0yPUxciaEjrsFb2kR2',
+        },
+        { title: 'Muons blog', url: 'https://bencbartlett.com/blog/tag/screeps/' },
+        { title: 'Harabis blog', url: 'https://sy-harabi.github.io/' },
+    ];
+}
diff --git a/views/index.ejs b/views/index.ejs
@@ -1,4 +1,5 @@
 <html>
+
 <head>
     <title>Screepers Steamless Client</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -7,31 +8,59 @@
     <link rel="icon" href="/public/favicon.png" />
     <link rel="stylesheet" href="/public/style.css" />
 </head>
+
 <body>
     <main>
         <div class="card">
             <% // The serverList is passed in from the clientApp %>
-            <% serverList.forEach(section => { %>
-                <div class="card-section" data-section="<%= section.name %>">
-                    <% if (section.name.toLowerCase() === 'official') { %>
-                        <div class="screeps-logo">
-                            <img src="<%= section.logo %>" alt="Screeps Logo" />
-                        </div>
-                    <% } else { %>
-                        <h2><%= section.name %></h2>
+                <% if(serverList.length===0){ %>
+                <h1> Could not load Server List</h1>
+                <% } %>
+                <% serverList.forEach(section=> { %>
+                    <div class="card-section" data-section="<%= section.name %>">
+                        <% if (section.name.toLowerCase()==='official' ) { %>
+                            <div class="screeps-logo">
+                                <img src="<%= section.logo %>" alt="Screeps Logo" />
+                            </div>
+                        <% } else { %>
+                        <h2>
+                            <%= section.name %>
+                        </h2>
+                        <% } %>
+                        <% section.servers.forEach(server=> { %>
+                            <div class="server">
+                                <a href="<%= server.url %>">
+                                    <button>
+                                        <%= server.name %>
+                                    </button>
+                                </a>
+                                <span class="status-circle" data-api="<%= server.api %>"></span>
+                            </div>
+                        <% }) %>
+                    </div>
+                <% }) %>
+        </div>
+        <div class="card community-card">
+            <% if(communityPages.length===0){ %>
+                <h1> Could not load Community Content</h1>
+                <% } else{ %>
+                    <h2>Community Content</h2>
                     <% } %>
-                    <% section.servers.forEach(server => { %>
-                        <div class="server">
-                            <a href="<%= server.url %>">
-                                <button><%= server.name %></button>
-                            </a>
-                            <span class="status-circle" data-api="<%= server.api %>"></span>
+                        <div class="comm-container">
+                            <% communityPages.forEach(page=> { %>
+                                <div class="comm-page">
+                                    <a href="<%= page.url %>" target="_blank" rel="noopener noreferrer">
+                                        <button class="comm-page-buttom">
+                                            <%= page.title %>
+                                        </button>
+                                    </a>
+                                </div>
+                                <% }) %>
+
                         </div>
-                    <% }) %>
-                </div>
-            <% }) %>
         </div>
     </main>
     <script src="/dist/serverStatus.js"></script>
 </body>
+
 </html>