Updated 13 files and added 2 files (automated)

2 files changed, 113 insertions, 15 deletions

diff --git a/includes/fragments/member.inc b/includes/fragments/member.inc
index f1169c8..6fbf3ad 100644
--- a/includes/fragments/member.inc
+++ b/includes/fragments/member.inc
@@ -2,6 +2,8 @@
 
 require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/session.inc";
 
+if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/designs")) mkdir($_SERVER['DOCUMENT_ROOT'] . "/includes/data/designs");
+
 if ($memberData["name"] === "fusion") {
     $title = ($memberCommonName === "fusion" ? $lang["member"]["merge"] : $memberCommonName);
 } else {
@@ -48,12 +50,34 @@ if ($memberData["name"] === "fusion") {
     }
 }
 
+if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/designs/" . $memberID . ".json")) file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/designs/" . $memberID . ".json", json_encode([
+    "_main" => [
+        "name" => "Main",
+        "note" => "Everyday appearance",
+        "image" => null
+    ]
+]));
+
+if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/assets/ponies/" . $memberID . ".png")) {
+    $designs = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/designs/" . $memberID . ".json"), true);
+    $designs["_main"]["image"] = base64_encode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/assets/ponies/" . $memberData["id"] . ".png"));
+}
+
 ?>
 
 <div id="member-banner-container" style="width: calc(100% - 300px);height: <?= !isset($memberData["banner"]) ? "33vh" : "65vh" ?>;position: fixed;background-image: url('<?= getAsset($systemID, $memberID, !isset($memberData["banner"]) ? "avatars" : "banners") ?>');background-size: cover;background-position: center; top: 0;">
     <div id="member-banner-inner" style="height: 100%;width: 100%;background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,1) 100%);<?= !isset($memberData["banner"]) ? "backdrop-filter:blur(100px);" : "" ?>"></div>
 </div>
 
+<style>
+    .input-inherit {
+        all: inherit;
+        width: 200px;
+        height: max-content;
+        margin: 0;
+    }
+</style>
+
 <script>
     window.onscroll = () => {
         document.getElementById("member-banner-container").style.height = (<?= !isset($memberData["banner"]) ? "33" : "65" ?> - ((window.scrollY / window.screen.availHeight) * 100)) + "vh";
@@ -63,12 +87,90 @@ if ($memberData["name"] === "fusion") {
         document.getElementById("private-page-link").style.display = "none";
         document.getElementById("private-page-hidden").style.display = "block";
     }
+
+    function updateDesignName(id) {
+        if (id === "_main" && document.getElementById("design-" + id + "-name").value.trim() === "") {
+            document.getElementById("design-" + id + "-name").value = "Main";
+        } else {
+            fetch("/api/design/?member=<?= $memberID ?>&type=name&id=" + id + "&value=" + encodeURIComponent(btoa(document.getElementById("design-" + id + "-name").value))).then((a) => {
+                a.text().then((b) => {
+                    if (b.trim() === "&") {
+                        location.reload();
+                    }
+                })
+            })
+        }
+    }
+
+    function updateDesignNote(id) {
+        fetch("/api/design/?member=<?= $memberID ?>&type=note&id=" + id + "&value=" + encodeURIComponent(btoa(document.getElementById("design-" + id + "-note").value)));
+    }
+
+    function _arrayBufferToBase64( buffer ) {
+        var binary = '';
+        var bytes = new Uint8Array( buffer );
+        var len = bytes.byteLength;
+        for (var i = 0; i < len; i++) {
+            binary += String.fromCharCode( bytes[ i ] );
+        }
+        return window.btoa( binary );
+    }
+
+    async function uploadNewDesign() {
+        let handles = await window.showOpenFilePicker({
+            multiple: false
+        });
+
+        if (handles.length >= 1) {
+            let file = await handles[0].getFile();
+
+            if (file.size > 2*1024**2) {} else {
+                let reader = new FileReader();
+                reader.readAsArrayBuffer(file);
+
+                reader.onload = () => {
+                    let content = _arrayBufferToBase64(reader.result);
+
+                    fetch("/api/design/?member=<?= $memberID ?>&type=upload", {
+                        method: "post",
+                        body: JSON.stringify({
+                            file: content
+                        })
+                    }).then(() => {
+                        location.reload();
+                    });
+                }
+
+                reader.onerror = () => {}
+            }
+        }
+    }
 </script>
 
 <br>
 <div class="container">
     <div id="member-page" style="background-color: rgba(26,26,26,0.8);border-radius: 10px;padding:20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);margin-top:<?= !isset($memberData["banner"]) ? "15vh" : "30vh" ?>;<?php if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/content/$memberID.html") && !($isLoggedIn && file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/content/$memberID-private.html"))): ?> padding-bottom: 0 !important;<?php endif; ?>">
         <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/components/fullbanner.inc"; ?>
+        <?php $member = $memberData; if (($isLoggedIn || $isLowerLoggedIn) && file_exists($_SERVER['DOCUMENT_ROOT'] . "/assets/ponies/" . $member["id"] . ".png")): ?>
+        <div style="padding-top: 20px; padding-bottom: 20px;">
+            <div style="background-color: rgba(200, 200, 200, .05); border-radius: 10px; padding: 10px 20px; overflow-x: scroll; display: flex; grid-gap: 20px;">
+                <?php foreach ($designs as $id => $design): if (isset($design)): ?>
+                <div style="display: grid; grid-template-rows: 208px 48px; width: max-content;">
+                    <div style="display: flex; align-items: center; justify-content: center;">
+                        <img src="data:image/png;base64,<?= $design["image"] ?>" style="height: 208px;">
+                    </div>
+                    <div style="text-align: center; margin-top: 5px; height: 48px; width: max-content;">
+                        <b><input onkeyup="updateDesignName('<?= $id ?>');" maxlength="100" class="input-inherit" value="<?= $design["name"] ?>" id="design-<?= $id ?>-name"></b><br><input onkeyup="updateDesignNote('<?= $id ?>');" maxlength="100" class="input-inherit" value="<?= $design["note"] ?>" id="design-<?= $id ?>-note">
+                    </div>
+                </div>
+                <?php endif; endforeach; ?>
+
+                <div onclick="uploadNewDesign();" style="cursor: pointer; display: flex; height: 256px; align-items: center; justify-content: center; width: 64px;">
+                    <img src="/assets/icons/add.svg" style="filter: invert(1); opacity: .5; width: 64px;">
+                </div>
+            </div>
+        </div>
+        <?php endif; ?>
 
         <div id="page-content">
             <?php if ($memberData["name"] === "unknown"): ?>
@@ -98,7 +200,6 @@ if ($memberData["name"] === "fusion") {
                 <br>
             <?php else: ?>
                 <?php if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/content/$memberID-private.html") && $isLoggedIn): ?>
-                    <br>
                     <?php
 
                     $text = file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/content/$memberID-private.html");
diff --git a/includes/fragments/metadata.inc b/includes/fragments/metadata.inc
index 7a3779a..0d2187c 100644
--- a/includes/fragments/metadata.inc
+++ b/includes/fragments/metadata.inc
@@ -49,6 +49,7 @@ if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/metadata/" . $member
                     <option <?= $metadata["species"][0] === "batpony" ? "selected" : "" ?> value="batpony">Bat pony</option>
                     <option <?= $metadata["species"][0] === "crystal" ? "selected" : "" ?> value="crystal">Crystal pony</option>
                     <option <?= $metadata["species"][0] === "changeling" ? "selected" : "" ?> value="changeling">Changeling</option>
+                    <option <?= $metadata["species"][0] === "merpony" ? "selected" : "" ?> value="merpony">Merpony</option>
                 </select>
                 <select class="tooltip-nohelp form-select" style='display:inline-block;filter:invert(1) hue-rotate(180deg);background-image:url("data:image/svg+xml,%3csvg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 16 16&apos;%3e%3cpath fill=&apos;none&apos; stroke=&apos;%23000000&apos; stroke-linecap=&apos;round&apos; stroke-linejoin=&apos;round&apos; stroke-width=&apos;2&apos; d=&apos;M2 5l6 6 6-6&apos;/%3e%3c/svg%3e");' name="species[1]">
                     <option <?= !isset($metadata["species"][1]) || $metadata["species"][1] === "" ? "selected" : "" ?> value="">None</option>
@@ -59,6 +60,7 @@ if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/metadata/" . $member
                     <option <?= $metadata["species"][1] === "batpony" ? "selected" : "" ?> value="batpony">Bat pony</option>
                     <option <?= $metadata["species"][1] === "crystal" ? "selected" : "" ?> value="crystal">Crystal pony</option>
                     <option <?= $metadata["species"][1] === "changeling" ? "selected" : "" ?> value="changeling">Changeling</option>
+                    <option <?= $metadata["species"][1] === "merpony" ? "selected" : "" ?> value="merpony">Merpony</option>
                 </select>
             </div>
         </div>
@@ -110,25 +112,14 @@ if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/metadata/" . $member
             <b>Caretakers (full IDs, comma-separated)</b><br>
             <input name="caretakers" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" value="<?= implode(", ", $metadata["caretakers"]) ?>">
         </p>
-
-        <?php if ($systemID !== $app["other"]["id"]): ?>
-        <hr>
-
-        <h3>Technical details</h3>
-
         <p>
-            <b>Primary interest (keep it short)</b><br>
-            <input name="interest" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" value="<?= $metadata["interest"] ?? "" ?>">
+            <b>Friends (full IDs, comma-separated)</b><br>
+            <input name="friends" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" value="<?= implode(", ", $metadata["friends"] ?? []) ?>">
         </p>
-        <p>
-            <b>Member code</b><br>
-            <input name="membc" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" value="<?= $metadata["code"] ?? "" ?>">
-        </p>
-        <?php endif; ?>
 
         <hr>
 
-        <h3>Age information</h3>
+        <h3>Age and interests</h3>
 
         <p>
             <b>Birth date (use January 1<sup>st</sup> for none, fixed age takes priority over birth year if applicable)</b><br>
@@ -138,6 +129,12 @@ if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/metadata/" . $member
             <b>Age (for ponies with fixed age, takes priority over birth year)</b><br>
             <input name="age" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" pattern="^(-\d{1,2}|\d{1,2}(-\d{1,2}|))$" value="<?= $metadata["birth"]["age"] ?? "" ?>">
         </p>
+        <?php if ($systemID !== $app["other"]["id"]): ?>
+            <p>
+                <b>Primary interest (keep it short)</b><br>
+                <input name="interest" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" value="<?= $metadata["interest"] ?? "" ?>">
+            </p>
+        <?php endif; ?>
 
         <hr>