Adding some small features

.env.example

@@ -34,8 +34,8 @@ WEBSERVER_PORT=
 # The hostname/port where the webserver is accessible (Default: localhost:8080)
 HOST=
 
-# Whether or not the host is using HTTPS (Default: true)
-HTTPS=
+# Whether or not the host is using HTTPS (Default: true) KAYLA PLS SET THIS TO FALSE AS DEFAULT
+HTTPS=false
 
 # Webserver Rate Limits
 

.gitignore

@@ -8,6 +8,7 @@
 .*
 
 !.env.example
+|.env
 !.gitignore
 !.vscode
 !.github

README.md

@@ -33,7 +33,7 @@ Note that the intent of these instructions is NOT to teach you how to run your o
     2. Run `npm run maintain -- importmaps` to read the dump and fetch map data from the osu! API (this will take a few hours)
 9. Start the processes
     - **Recommended:** Install [PM2](https://pm2.io/) with `npm i -g pm2` and then run `pm2 start` to start both the webserver and updater in the background
-    - If you choose to forgo PM2, you can start each process using `npm start webserver` or `npm start updater`
+    - If you choose to forgo PM2, you can start each process using `npm run webserver` or `npm run updater`
 
 **If you need user authentication working:**
 

apps/web/public/generic/css/theme.css

@@ -542,6 +542,12 @@ img {
     padding: 0px 8px;
 }
 
+.btn.little {
+    height: 20px;
+    font-size: 12px;
+    padding: 0px 4px;
+}
+
 .btn.small .icon {
     --size: 16px;
 }

apps/web/public/generic/js/base.js

@@ -305,6 +305,34 @@ const initCustomTooltips = () => {
         },
         { capture: true, passive: true }
     );
+
+    // More conditions to hide tooltip when it behaves annoyingly
+    // by maridat47
+    window.addEventListener('click', e => {
+        const target = e.target.closest('[data-tooltip]');
+        if (target && target !== currentTarget) {
+            tooltip.classList.remove('visible');
+
+            // 3. CLEAN UP POPOVER
+            // Wait for CSS transition (opacity) to finish before removing from DOM
+            setTimeout(() => {
+                if (!tooltip.classList.contains('visible')) {
+                    tooltip.hidePopover();
+                }
+            }, 200);
+
+            currentTarget = null;
+        }
+    });
+
+    window.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape' && tooltip.classList.contains('visible')) {
+                tooltip.classList.remove('visible');
+                tooltip.hidePopover();
+                currentTarget = null;
+            }
+        }
+    );
 };
 
 // Handle image load states

apps/web/views/layout.ejs

@@ -223,12 +223,10 @@
                         <a href="/privacy">Privacy Policy</a>
                         <br />
                         Running commit
-                        <a
-                            href="https://github.com/kaysting/osucomplete/commit/<%= locals?.git?.hash %>"
+                        <a href="https://github.com/kaysting/osucomplete/commit/<%= locals?.git?.hash %>"
                             target="_blank"
                             rel="noopener noreferrer">
-                            <%= locals?.git?.hash %>
-                        </a>
+                            <%= locals?.git?.hash %></a>
                         deployed <%= dayjs(locals?.git?.date).utc().format('YYYY-MM-DD HH:mm:ss [UTC]') %>
                     </p>
                 </footer>

apps/web/views/partials/beatmap/card.ejs

@@ -20,11 +20,20 @@
                 loading="lazy" />
             <div class="coverDimming p-absolute w-full h-full"></div>
             <div class="text p-relative">
-                <div
-                    class="title overflow-hidden text-ellipsis nowrap"
-                    title="<%= beatmap.beatmapset.title %>"
-                    data-tooltip-overflow="true">
-                    <%= beatmap.beatmapset.title %>
+                <div class="flex textRow align-center">
+                    <div
+                        class="title overflow-hidden text-ellipsis nowrap flex-grow"
+                        title="<%= beatmap.beatmapset.title %>"
+                        data-tooltip-overflow="true">
+                        <%= beatmap.beatmapset.title %>
+                    </div>
+                    <div
+                        class="btn text little nowrap"
+                        target="_blank"
+                        title="Copy beatmap id: <%= beatmap.id %>"
+                        onclick="copyText(<%= beatmap.id %>)">
+                        <div class="icon">content_copy</div>
+                    </div>
                 </div>
                 <div
                     class="artist overflow-hidden text-ellipsis nowrap"
@@ -42,6 +51,12 @@
                         title="<%= utils.getPlaytimeTooltip(beatmap.duration_secs) %>">
                         <span class="cxp"><%= beatmap.xp %> cxp</span>
                     </span>
+                    <span>•</span>
+                    <span
+                        class="stats overflow-hidden text-ellipsis nowrap flex-no-shrink"
+                        title="<%= utils.capitalize(beatmap.status) %> at <%= utils.formatDate(beatmap.beatmapset.time_ranked, true, true) %>">
+                        <span class="date-ranked"><%= utils.formatDate(beatmap.beatmapset.time_ranked) %></span>
+                    </span>
                 </div>
             </div>
             <div class="flex gap-4 align-center">

apps/web/views/partials/profile/basicStats.ejs

@@ -9,7 +9,11 @@
     </div>
     <div class="stat big flex col">
         <div class="key">completion xp</div>
-        <div class="value"><%= n(stats.xp) %></div>
+        <div
+            class="value"
+            title="Completion XP (cxp) is the length of all completed maps (nomod) divided by 10">
+            <%= n(stats.xp) %>
+        </div>
     </div>
     <div class="stat big flex col">
         <div class="key">% completed</div>

apps/web/views/partials/profile/cardRecentPasses.ejs

@@ -31,8 +31,10 @@
             safelyRunOnLoad(loadMonthlyGraph);
         </script>
     </div>
-    <div>
-        <h2 class="header">recent passes (<%= n(recentPasses.length) %> in the past 24 hours)</h2>
+    <% const recentXp = recentPasses.reduce((sum, pass) => sum + pass.beatmap.xp, 0)
+    const recentLength = recentPasses.reduce((sum, pass) => sum + pass.beatmap.duration_secs, 0) %>
+    <div class="flex gap-16 justify-left flex-wrap">
+        <h2 class="header" title="Total time: <%= recentLength %> seconds\n(<%= utils.secsToDuration(recentLength) %>)">recent 24 hours (<%= n(recentPasses.length) %> passes for <%= n(recentXp) %> cxp)</h2>
     </div>
     <div class="beatmapNarrowContainer flex col gap-2">
         <% if (recentPasses.length === 0) { %>

ecosystem.config.js

@@ -3,15 +3,15 @@ module.exports = {
     apps: [
         {
             name: 'oc-web',
-            script: 'npm',
+            script: './apps/web/index.js',
             args: 'run webserver',
             cwd: './',
             watch: [...globalWatch, 'apps/web/index.js', 'apps/web/routes'],
             max_memory_restart: '1G'
         },
         {
             name: 'oc-updater',
-            script: 'npm',
+            script: './apps/updater/index.js',
             args: 'run updater',
             cwd: './',
             watch: [...globalWatch, 'apps/updater']

lib/utils.js

@@ -383,6 +383,18 @@ const utils = {
         });
     },
 
+    formatDate: (secs, withTime = false, withUtc = false) => {
+        const rawDate = new Date(secs).toISOString().split('T');
+        const date = rawDate[0];
+        const time = rawDate[1].split('.')[0];
+        return date + (withTime ? ', ' + time : '') + (withUtc ? ' UTC' : '');
+    },
+
+    capitalize: (text) => {
+        if (!text) return text;
+        return text[0].toUpperCase() + text.slice(1);
+    },
+
     sanitizeFtsQuery: input => {
         // Thanks Gemini
         if (!input || !input.trim()) return null;