Merge pull request #18 from jae1911/jae-feat-sessions-view

feat: session list page

Author: ProbablePrime

helpers/preprocessing.js

@@ -31,6 +31,28 @@ function preProcessSession(json) {
     return json;
 }
 
+/**
+ * Preprocesses the session list and returns an array of the top X sessions to display on the webpage.
+ * 
+ * @param {SessionsList} json object of the full session API endpoint
+ * @param {SessionCount} int number of sessions to return for the page
+ * @returns The transformed sessions object for viewing.
+ */
+function preProcessSessionList(json, count){
+    const sessions = json
+        .sort((a, b) => b.totalJoinedUsers - a.totalJoinedUsers)
+        .slice(0, count);
+
+    json.sessions = sessions.map((session) => {
+        // We convert the name here since the JSON format for
+        // this is different from the other responses
+        session.name = preProcessName(session.name);
+        return preProcessSession(session);
+    });
+
+    return json;
+}
+
 /**
  * Preprocesses the world information return from SkyFrost to a format suitable for viewing.
  * 
@@ -57,9 +79,11 @@ function preProcessWorld(json) {
  */
 export function preProcess(json, type) {
 
-    // ensure page title
-    json.title = DOMPurify.sanitize(json.name);
-    json.name = preProcessName(json.name);
+    if (type != "sessionList"){
+        // ensure page title
+        json.title = DOMPurify.sanitize(json.name);
+        json.name = preProcessName(json.name);
+    }
 
     switch (type) {
         case "session":
@@ -68,7 +92,10 @@ export function preProcess(json, type) {
         case "world":
         json = preProcessWorld(json);
         break;
+        case "sessionList":
+        json = preProcessSessionList(json, 15);
+        break;
     }
 
     return json;
-}
+}

public/stylesheets/style.css

@@ -55,4 +55,28 @@
 .btn:hover {
   background: #3f6a47;
   text-decoration: none;
-}
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 10px;
+}
+
+.grid-item {
+  border: 1px solid rgba(0, 0, 0, 0.8);
+  padding: 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.grid-item p {
+  margin: 5px 0;
+  font-size: 16px;
+  white-space: normal;
+  word-break: break-word;
+  text-align: center;
+}

routes/index.js

@@ -15,6 +15,9 @@ router.get('/', function(req, res, next) {
 router.get('/session/:sessionId', (req,res, next) => handle("session", req, res, next));
 router.get('/session/:sessionId/json', (req,res, next) => handleJson("session", req, res, next));
 
+router.get('/sessions', (req, res, next) => handle("sessionList", req, res, next));
+router.get('/sessions/json', (req, res, next) => handleJson("sessionList", req, res, next));
+
 // Register world/ and record/
 for (const word of ["world", "record"]) {
   router.get(`/${word}/:ownerId/:recordId`, (req,res, next) => handle("world", req, res, next));
@@ -36,6 +39,9 @@ function getUrl(type, req) {
       return `${baseUrl}/users/${req.params.ownerId}/records/${req.params.recordId}/`;
     case "session":
       return `${baseUrl}/sessions/` + req.params.sessionId;
+    case "sessionList":
+      return `${baseUrl}/sessions`
+      break;
     default:
       throw new Error(`Unknown url type: ${type}`);
   }
@@ -80,6 +86,10 @@ async function handle(type, req, res, next) {
     return next(createError(400, "go.resonite.com only works for Session and world link."));
   }
 
+  if (type === "sessionList"){
+    json.title = getOpenGraphTitle(type);
+  }
+
   json = preProcess(json, type);
   json.urlPath = req.getUrl();
 
@@ -117,7 +127,7 @@ async function handleJson(type, req, res, next) {
     author_name: title,
     author_url: req.getUrl().replace("/json",""),
     provider_name: "Resonite",
-    provider_url: "https://resonite.com"
+    provider_url: "https://resonite.com",
   });
 }
 
@@ -134,6 +144,9 @@ function getOpenGraphTitle(type) {
       return `${app} Session`;
     case "world":
       return `${app} World`;
+    case "sessionList":
+      return `${app} Sessions list`;
+      break;
     default:
       return `${app} World`;
   }

views/index.pug

@@ -4,6 +4,10 @@ block content
     h1 go.resonite.com
     p go.resonite.com is used to link to worlds and sessions from the web. It's home page doesn't have any functionality at the moment.
 
-    p Would you like to 
-        a(href="https://resonite.com") Go to our Main Website?
+    p Would you like to
+    ul
+        li
+            a(href="/sessions") See the current active public sessions
+        li
+            a(href="https://resonite.com") Go to our Main Website?
 

views/sessionList.pug

@@ -0,0 +1,18 @@
+extends layout
+
+block head
+  meta(property="og:title" content=title)
+  meta(property="og:type" content="resonite.sessionList")
+  meta(property="og:description" content="Active sessions on Resonite")
+  link(type="application/json+oembed" href=`${urlPath}json`)
+
+block content
+  h1 Active Sessions
+
+  div(class="grid")
+    each session in sessions
+      div(class="grid-item")
+        p !{session.name}
+        p= `Users: ${session.joinedUsers}/${session.maxUsers}`
+        p= `Host: ${session.hostUsername}`
+        a(href=`/session/${session.sessionId}`) See details