Mobile UI fixes.

.gitignore

@@ -7,3 +7,4 @@
 /node_modules
 /public/assets
 /public/index.html
+/public/mami.webmanifest

build.js

@@ -31,6 +31,9 @@ const buildTasks = {
     html: [
         { source: 'mami.html', target: '/', name: 'index.html', },
     ],
+    webmanifest: [
+        { source: 'mami.webmanifest', target: '/', name: 'mami.webmanifest', icons: '/icons' }
+    ],
 };
 
 
@@ -188,6 +191,79 @@ const htmlMinifyOptions = {
     }
 
 
+    console.log();
+    console.log('Webmanifest assets...');
+    for(const info of buildTasks.webmanifest) {
+        console.log(`=> Building ${info.source}...`);
+
+        try {
+            const body = JSON.parse(fs.readFileSync(path.join(srcDir, info.source)));
+
+            body.name = config.title;
+            body.short_name = config.title;
+
+            if(typeof info.icons === 'string') {
+                const iconsDir = path.join(pubDir, info.icons);
+
+                if(fs.existsSync(iconsDir)) {
+                    const files = (await fs.promises.readdir(iconsDir)).sort((a, b) => a.localeCompare(b, undefined, {
+                        numeric: true,
+                        sensitivity: 'base',
+                    }));
+                    body.icons = [];
+
+                    for(const file of files) {
+                        if(!file.endsWith('.png'))
+                            continue;
+
+                        const icon = {
+                            src: path.join(info.icons, file),
+                            type: 'image/png',
+                        };
+
+                        if(file[0] !== 'c') {
+                            if(file[0] === 'm')
+                                icon.purpose = 'maskable';
+                            else if(file[0] === 'w')
+                                icon.purpose = 'monochrome';
+                            else continue;
+                        }
+
+                        let res = '';
+                        for(let i = 1; i < file.length; ++i) {
+                            if(file[i] === 'x')
+                                break;
+                            res += file[i];
+                        }
+
+                        if(res.length > 0)
+                            icon.sizes = `${res}x${res}`;
+
+                        body.icons.push(icon);
+                    }
+                }
+            }
+
+            const data = JSON.stringify(body);
+
+            const name = utils.strtr(info.name, { hash: utils.shortHash(data) });
+            const pubName = path.join(info.target || '', name);
+
+            console.log(` Saving to ${pubName}...`);
+
+            const fullPath = path.join(pubDir, pubName);
+            const dirPath = path.dirname(fullPath);
+            if(!fs.existsSync(dirPath))
+                fs.mkdirSync(dirPath, { recursive: true });
+
+            fs.writeFileSync(fullPath, data);
+            htmlVars[info.source] = pubName;
+        } catch(err) {
+            console.error(err);
+        }
+    }
+
+
     console.log();
     console.log('HTML assets');
     for(const info of buildTasks.html) {
@@ -219,6 +295,7 @@ const htmlMinifyOptions = {
         }
     }
 
+
     console.log();
     console.log('Cleaning up old builds...');
     assproc.housekeep(pubAssetsDir);

public/manifest.json

@@ -1,45 +0,0 @@
-{
-    "name": "Flashii Chat",
-    "short_name": "Flashii Chat",
-    "description": "Talk about trash and trash accessories.",
-    "start_url": "/",
-    "display": "standalone",
-    "theme_color": "#8559a5",
-    "background_color": "#222",
-    "scope": "/",
-    "offline_enabled": true,
-    "icons": [
-        {
-            "src": "/icons/512x.png",
-            "sizes": "512x512"
-        },
-        {
-            "src": "/icons/256x.png",
-            "sizes": "256x256"
-        },
-        {
-            "src": "/icons/128x.png",
-            "sizes": "128x128"
-        },
-        {
-            "src": "/icons/90x.png",
-            "sizes": "90x90"
-        },
-        {
-            "src": "/icons/64x.png",
-            "sizes": "64x64"
-        },
-        {
-            "src": "/icons/48x.png",
-            "sizes": "48x48"
-        },
-        {
-            "src": "/icons/32x.png",
-            "sizes": "32x32"
-        },
-        {
-            "src": "/icons/16x.png",
-            "sizes": "16x16"
-        }
-    ]
-}

src/mami.css/_main.css

@@ -7,12 +7,21 @@
     text-size-adjust: none;
 }
 
-html,
+html {
+    /* what the fuck even is CSS anymore at this point */
+    width: 100%;
+    width: 100vw;
+    width: 100dvw;
+    height: 100%;
+    height: 100vh;
+    height: 100dvh;
+}
+
 body {
     width: 100%;
     height: 100%;
-    background: #000;
-    color: #fff;
+    background: var(--theme-colour-main-background, #000);
+    color: var(--theme-colour-main-colour, #fff);
 }
 
 a {

src/mami.css/chat.css

@@ -1,6 +1,5 @@
 .chat {
     flex: 1 1 auto;
-    margin-bottom: 5px;
     overflow: auto;
     font-size: 12px;
     box-shadow: var(--theme-size-chat-box-shadow-x, 0) var(--theme-size-chat-box-shadow-y, 0) var(--theme-size-chat-box-shadow-blur, 0) var(--theme-size-chat-box-shadow-spread, 0) var(--theme-colour-chat-box-shadow, #000);

src/mami.css/domaintrans.css

@@ -8,6 +8,7 @@
 
     text-shadow: 0 0 5px #000;
     box-shadow: inset 0 0 1em #000;
+    margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
 
 .domaintrans-body {

src/mami.css/main_cont.css

@@ -1,13 +1,13 @@
 .main {
     flex-grow: 2;
     flex-shrink: 1;
-    margin: 5px;
     display: flex;
-    flex-direction: column
+    gap: 4px;
+    flex-direction: column;
 }
 
 @media (max-width:768px) {
     .main {
-        margin-right: 50px
+        margin-right: 44px;
     }
 }

src/mami.css/sidebar.css

@@ -1,5 +1,4 @@
 .sidebar {
-    margin: 5px 5px 5px 0;
     flex-shrink: 1;
     flex-grow: 0;
     font-family: Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
@@ -10,9 +9,9 @@
 @media (max-width:768px) {
     .sidebar {
         position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0
+        top: max(4px, env(safe-area-inset-top));
+        right: max(4px, env(safe-area-inset-right));
+        bottom: max(4px, env(safe-area-inset-bottom));
     }
 }
 

src/mami.css/umi.css

@@ -2,18 +2,14 @@
     font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 20px;
-    height: 100%;
-    width: 100%;
     display: flex;
+    gap: 4px;
     background-color: var(--theme-colour-main-background, #fff);
     color: var(--theme-colour-main-colour, #000);
     scrollbar-color: var(--theme-colour-scrollbar-foreground, #000) var(--theme-colour-scrollbar-background, #fff);
-    padding-top: env(safe-area-inset-top);
-    padding-bottom: env(safe-area-inset-bottom);
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
     accent-color: var(--theme-colour-main-accent, auto);
     color-scheme: var(--theme-scheme, normal);
+    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
 }
 
 .umi__main {

src/mami.css/youare.css

@@ -19,6 +19,7 @@
     width: 100%;
     height: 100%;
     border: 1vh solid;
+    border-radius: env(safe-area-inset-top); /* this works well enough on my iphone, fuck it lol */
     display: flex;
     flex-direction: column;
     justify-content: center;

src/mami.html

@@ -3,9 +3,16 @@
     <head>
         <meta charset="utf-8">
         <title>{title}</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
         <meta name="format-detection" content="telephone=no">
-        <link rel="manifest" href="/manifest.json">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+        <meta name="theme-color" content="#000000">
+        <link rel="manifest" href="{mami.webmanifest}">
+        <link rel="apple-touch-icon" sizes="120x120" href="/icons/m120x.png">
+        <link rel="apple-touch-icon" sizes="152x152" href="/icons/m152x.png">
+        <link rel="apple-touch-icon" sizes="167x167" href="/icons/m167x.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="/icons/m180x.png">
         <link href="/vendor/fontawesome/css/all.min.css" rel="stylesheet" type="text/css">
         <link href="{mami.css}" rel="stylesheet" type="text/css">
     </head>

src/mami.js/main.js

@@ -47,7 +47,6 @@ window.Umi = { UI: {}, Protocol: { SockChat: { Protocol: {} } } };
         return;
     }
 
-
     loadingOverlay.setMessage('Fetching credentials...');
     try {
         const auth = await MamiMisuzuAuth.update();

src/mami.js/themes.js

@@ -1,3 +1,5 @@
+#include colour.js
+
 // try to reduce these and create variations
 const UmiThemes = [
     {
@@ -316,13 +318,16 @@ const UmiThemeApply = function(theme) {
         document.body.style.setProperty(varPfx + 'scheme', theme.scheme);
 
     if(theme.colours) {
+        if(typeof theme.colours['main-background'] === 'number') {
+            const themeColour = $q('meta[name="theme-color"]');
+            if(themeColour instanceof Element)
+                themeColour.content = MamiColour.hex(theme.colours['main-background']);
+        }
+
         const coloursPfx = varPfx + 'colour-';
 
         for(const propName in theme.colours) {
-            document.body.style.setProperty(
-                coloursPfx + propName,
-                '#' + (theme.colours[propName].toString(16).padStart(6, '0'))
-            );
+            document.body.style.setProperty(coloursPfx + propName, MamiColour.hex(theme.colours[propName]));
         }
     }
 

src/mami.js/youare.jsx

@@ -1,5 +1,4 @@
 #include animate.js
-#include rng.js
 
 const MamiYouAreAnIdiot = function() {
     const html = <div class="youare">
@@ -16,7 +15,6 @@ const MamiYouAreAnIdiot = function() {
         </div>
     </div>;
 
-    const rng = new MamiRNG;
     let soundSrc;
 
     const pub = {
@@ -46,7 +44,7 @@ const MamiYouAreAnIdiot = function() {
         },
         pushOn: async views => views.push(pub, ctx => MamiAnimate({
             async: true,
-            duration: rng.next(1500, 15001),
+            duration: 1500,
             easing: 'outBounce',
             start: () => ctx.toElem.style.top = '-100%',
             update: t => ctx.toElem.style.top = `${-100 + (t * 100)}%`,

src/mami.webmanifest

@@ -0,0 +1,10 @@
+{
+    "name": "config:title",
+    "short_name": "config:title",
+    "scope": "/",
+    "start_url": "/",
+    "display": "fullscreen",
+    "background_color": "#000000",
+    "categories": ["social"],
+    "icons": ["autofill"]
+}