feat: emote wall

6 files changed, 72 insertions, 12 deletions

diff --git a/public/emotes/index.php b/public/emotes/index.php
index 9501f04..af14120 100644
--- a/public/emotes/index.php
+++ b/public/emotes/index.php
@@ -181,7 +181,8 @@ if (CLIENT_REQUIRES_JSON) {
                                 }
                                 echo '</div>';
                             } else {
-                                echo "Emotes - Page $page/$total_pages";
+                                echo "<div class='grow'>Emotes - Page $page/$total_pages</div>";
+                                html_emotelist_mode();
                             }
                             ?>
                         </div>
diff --git a/public/emotesets.php b/public/emotesets.php
index d393779..635f4c4 100644
--- a/public/emotesets.php
+++ b/public/emotesets.php
@@ -134,8 +134,15 @@ if (CLIENT_REQUIRES_JSON) {
             <section class="content row">
                 <section class="content">
                     <section class="box">
-                        <div class="box navtab">
-                            <?php echo $title ?>
+                        <div class="box navtab row">
+                            <div class="grow">
+                                <?php echo $title ?>
+                            </div>
+                            <?php
+                            if (!empty($emote_set)) {
+                                html_emotelist_mode();
+                            }
+                            ?>
                         </div>
                         <div class="box content small-gap items">
                             <?php
diff --git a/public/static/img/icons/table.png b/public/static/img/icons/table.png
new file mode 100644
index 0000000..abcd936
--- /dev/null
+++ b/public/static/img/icons/table.png
diff --git a/public/static/style.css b/public/static/style.css
index 5127d9c..9aa1ca9 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -388,11 +388,16 @@ button.big,
     font-size: 10px;
 }
 
-.box.emote img {
+.box.emote:has(.emote-desc) img {
     max-width: 64px;
     max-height: 64px;
 }
 
+.box.emote:has(.emote-desc.none) img {
+    max-width: 96px;
+    max-height: 96px;
+}
+
 a.box {
     text-decoration: none;
     color: black;
@@ -563,6 +568,10 @@ a.box:hover {
     display: flex;
 }
 
+.none {
+    display: none;
+}
+
 .w-full {
     width: 100%;
 }
diff --git a/public/users.php b/public/users.php
index 3f27745..6a6273e 100644
--- a/public/users.php
+++ b/public/users.php
@@ -410,8 +410,11 @@ if ($is_json) {
                 <section class="content" style="display: inline-block;">
                     <!-- Current emoteset -->
                     <section class="box grow user-tab" id="user-emotes">
-                        <div class="box navtab">
-                            <?php echo !empty($active_emote_set) ? $active_emote_set->name : "Emotes" ?>
+                        <div class="box navtab row">
+                            <div class="grow">
+                                <?php echo !empty($active_emote_set) ? $active_emote_set->name : "Emotes" ?>
+                            </div>
+                            <?php html_emotelist_mode() ?>
                         </div>
                         <div class="box content items flex">
                             <?php if (!empty($active_emote_set)) {
@@ -549,9 +552,11 @@ if ($is_json) {
 
                         <!-- Uploaded emotes -->
                         <section class="box grow user-tab" id="user-uploadedemotes">
-                            <div class="box navtab">
-                                Uploaded emotes
-                                <?php echo $user_preferences["private_profile"] ? " <img src='/static/img/icons/eye.png' alt='(Private)' title='You are the only one who sees this' />" : "" ?>
+                            <div class="box navtab row">
+                                <div class="grow">
+                                    Uploaded emotes
+                                    <?php echo $user_preferences["private_profile"] ? " <img src='/static/img/icons/eye.png' alt='(Private)' title='You are the only one who sees this' />" : "" ?>
+                                </div>
                             </div>
                             <div class="box content items">
                                 <?php html_display_emotes($uploaded_emotes); ?>
diff --git a/src/emote.php b/src/emote.php
index fcc33ad..ce39c09 100644
--- a/src/emote.php
+++ b/src/emote.php
@@ -247,8 +247,10 @@ function html_featured_emote(PDO &$db)
     }
 }
 
-function html_display_emotes(array $emotes)
+function html_display_emotes(array $emotes, int $scale = 3)
 {
+    $emote_wall = intval($_COOKIE["emotelist_wall"] ?? "0") == 1;
+
     foreach ($emotes as $e) {
         echo "<a class='box emote column justify-center items-center' href='/emotes?id={$e->id}'>";
 
@@ -258,11 +260,16 @@ function html_display_emotes(array $emotes)
 
         // icon
         echo '<div class="flex justify-center items-center grow emote-icon">';
-        echo "<img src='/static/userdata/emotes/{$e->id}/2x.webp' alt='{$e->code}' />";
+        $scale = $emote_wall ? "3" : ((string) $scale);
+        echo "<img src='/static/userdata/emotes/{$e->id}/{$scale}x.webp' alt='{$e->code}' />";
         echo '</div>';
 
         // info
-        echo '<div class="flex column justify-bottom items-center emote-desc">';
+        echo '<div class="flex column justify-bottom items-center emote-desc';
+        if ($emote_wall) {
+            echo ' none';
+        }
+        echo '">';
 
         echo "<h1 title='{$e->code}'>{$e->code}</h1>";
         if ($e->get_uploaded_by()) {
@@ -291,4 +298,35 @@ function html_display_emoteset(array $emotesets)
         echo '</div></a>';
 
     }
+}
+
+function html_emotelist_mode()
+{
+    echo '' ?>
+    <div class="row small-gap" id="control-emotelist" style="display: none;">
+        <a href="#" onclick="set_emotelist_mode('wall')">
+            <img src="/static/img/icons/emotes/emote.png" alt="Emote Wall" title="Emote Wall">
+        </a>
+        <a href="#" onclick="set_emotelist_mode('table')">
+            <img src="/static/img/icons/table.png" alt="Emote Descriptions" title="Emote Descriptions">
+        </a>
+    </div>
+    <script>
+        document.getElementById("control-emotelist").style.display = "flex";
+
+        function set_emotelist_mode(mode) {
+            const elements = document.querySelectorAll(".emote .emote-desc");
+
+            for (const element of elements) {
+                if (mode == "wall") {
+                    element.classList.add("none");
+                    document.cookie = "emotelist_wall = 1; expires=Tue, 19 Jan 2038 00:00:00 UTC; path=/";
+                } else {
+                    element.classList.remove("none");
+                    document.cookie = "emotelist_wall = 0; expires=Tue, 19 Jan 2038 00:00:00 UTC; path=/";
+                }
+            }
+        }
+    </script>
+    <?php ;
 }
\ No newline at end of file