From 4e0cbdfbb3464872bd7665b07ff4b8cdba522946 Mon Sep 17 00:00:00 2001
From: BlipRanger <1860540+BlipRanger@users.noreply.github.com>
Date: Wed, 5 Jul 2023 01:08:09 -0400
Subject: [PATCH] Add the ability to avoid spoilers

---
 public/index.html            | 15 ++++++++++++++
 public/script.js             |  2 ++
 public/scripts/power-user.js | 39 ++++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+)

diff --git a/public/index.html b/public/index.html
index 9c2a469ee..c396ccaa7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2343,6 +2343,9 @@
                             <label for="import_card_tags"><input id="import_card_tags" type="checkbox" />
                                 <span data-i18n="Import Card Tags">Import Card Tags</span>
                             </label>
+                            <label for="spoiler_free_mode"><input id="spoiler_free_mode" type="checkbox" />
+                                <span data-i18n="Spoiler Free Mode">Spolier Free Mode</span>
+                            </label>
 
                             <div class="inline-drawer wide100p flexFlowColumn">
                                 <div class="inline-drawer-toggle inline-drawer-header">
@@ -2626,6 +2629,18 @@
                             </div>
                         </div>
                         <textarea id="firstmessage_textarea" placeholder="This will be the first message from the character that starts every chat." class="marginBot5" name="first_mes" placeholder=""></textarea>
+                        <div id="spoiler_free_desc">
+                            <div id="creators_notes_div" class="marginBot5 title_restorable">
+                                <span data-i18n="Creator's Notes">Creator's Notes</span>
+                            <div id="spoiler_free_desc_button" class="menu_button fa-solid fa-eye"
+                                title="Show / Hide Description and First Message"></div>
+                                </a>
+                            </div>
+                            <hr>
+                        
+                            <div id="creator_notes_spoiler" placeholder="Creator's Notes" class="marginBot5" name="creator_notes_spoiler"></div>
+                            <!-- A button to show / hide description_div and description_textarea and first_message_div and firstmessage_textarea-->
+                        </div>
 
                         <!-- these divs are invisible and used for server communication purposes -->
                         <div id="hidden-divs">
diff --git a/public/script.js b/public/script.js
index ff21505ee..71b8933cf 100644
--- a/public/script.js
+++ b/public/script.js
@@ -5188,6 +5188,7 @@ export function select_selected_character(chid) {
     $("#description_textarea").val(characters[chid].description);
     $("#character_world").val(characters[chid].data?.extensions?.world || '');
     $("#creator_notes_textarea").val(characters[chid].data?.creator_notes || characters[chid].creatorcomment);
+    $("#creator_notes_spoiler").text(characters[chid].data?.creator_notes || characters[chid].creatorcomment);
     $("#character_version_textarea").val(characters[chid].data?.character_version || '');
     $("#system_prompt_textarea").val(characters[chid].data?.system_prompt || '');
     $("#post_history_instructions_textarea").val(characters[chid].data?.post_history_instructions || '');
@@ -5256,6 +5257,7 @@ function select_rm_create() {
     $("#description_textarea").val(create_save.description);
     $('#character_world').val(create_save.world);
     $("#creator_notes_textarea").val(create_save.creator_notes);
+    $("#creator_notes_spoiler").text(create_save.creator_notes);
     $("#post_history_instructions_textarea").val(create_save.post_history_instructions);
     $("#system_prompt_textarea").val(create_save.system_prompt);
     $("#tags_textarea").val(create_save.tags);
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index c1a548a22..c6dbe6c59 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -316,6 +316,32 @@ function switchWaifuMode() {
     scrollChatToBottom();
 }
 
+function switchSpoilerMode() {
+    if (power_user.spoiler_free_mode) {
+        $("#description_div").hide();
+        $("#description_textarea").hide();
+        $("#firstmessage_textarea").hide();
+        $("#first_message_div").hide();
+        $("#spoiler_free_desc").show();
+    }
+    else {
+        $("#description_div").show();
+        $("#description_textarea").show();
+        $("#firstmessage_textarea").show();
+        $("#first_message_div").show();
+        $("#spoiler_free_desc").hide();
+    }
+}
+
+function peekSpoilerMode(){
+    $("#description_div").toggle();
+    $("#description_textarea").toggle();
+    $("#firstmessage_textarea").toggle();
+    $("#first_message_div").toggle();
+
+}
+
+
 function switchMovingUI() {
     const movingUI = localStorage.getItem(storage_keys.movingUI);
     power_user.movingUI = movingUI === null ? false : movingUI == "true";
@@ -632,6 +658,7 @@ function loadPowerUserSettings(settings, data) {
     $(`#pygmalion_formatting option[value=${power_user.pygmalion_formatting}]`).attr("selected", true);
     $(`#send_on_enter option[value=${power_user.send_on_enter}]`).attr("selected", true);
     $("#import_card_tags").prop("checked", power_user.import_card_tags);
+    $("#spoiler_free_mode").prop("checked", power_user.spoiler_free_mode);
     $("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
     $("#pin-examples-checkbox").prop("checked", power_user.pin_examples);
     $("#disable-description-formatting-checkbox").prop("checked", power_user.disable_description_formatting);
@@ -705,6 +732,7 @@ function loadPowerUserSettings(settings, data) {
     loadInstructMode();
     loadMaxContextUnlocked();
     switchWaifuMode();
+    switchSpoilerMode();
     loadMovingUIState();
 
     //console.log(power_user)
@@ -1786,6 +1814,17 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $('#spoiler_free_mode').on('input', function () {
+        power_user.spoiler_free_mode = !!$(this).prop('checked');
+        switchSpoilerMode();
+        saveSettingsDebounced();
+    });
+
+    $('#spoiler_free_desc_button').on('click', function () {
+        peekSpoilerMode();
+        $(this).toggleClass('fa-eye fa-eye-slash');
+    });
+    
     $(window).on('focus', function () {
         browser_has_focus = true;
     });