Updated 13 files and added 2 files (automated)

1 files changed, 102 insertions, 1 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");