20240729 @Mookse

- Remove or placeholder explantion #289 - Remove actor, narrator, point of view or make them placeholders #297 - Create text about what's going to happen for the "relive memory" button #299
MyLife-Services · Jul 29, 2024 · 38eb90f · 38eb90f
1 parent 44398cf
commit 38eb90f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 101 deletions.
diff --git a/views/assets/css/bots.css b/views/assets/css/bots.css
@@ -563,14 +563,26 @@ input:checked + .publicity-slider:before {
     padding: 0.5rem;
     transition: opacity 0.5s ease; /* Smooth transition for opacity */
 }
-.share-memory-container { /* panel for how others `experience` memory story */
+.relive-memory-button.button {
+    display: flex;
+    margin: 0.2rem 0;
+    padding: 0 0.2rem;
+    max-width: 80%;
+    min-width: 60%;
+}
+.relive-memory-container { /* panel for how others `experience` memory story */
+    align-items: center;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    margin: 0;
-    padding: 0;
+    margin: 0.2rem;
+    padding: 0.2rem;
+}
+.relive-memory-explanation {
+    display: flex;
+    padding: 0.2rem;
 }
-.share-memory-select { /* container for share memory selection packet */
+.relive-memory-select { /* container for share memory selection packet */
     display: flex;
     flex-direction: row;
     justify-content: space-between;

diff --git a/views/assets/js/bots.mjs b/views/assets/js/bots.mjs
@@ -628,108 +628,35 @@ function mCreateCollectionPopup(collectionItem) {
             improveMemory.classList.add(`collection-popup-${ type }`)
             improveMemory.id = `popup-${ type }_${ id }`
             improveMemory.name = 'improve-memory-container'
-            /* shadows, share-memory panel */
+            /* shadows, relive-memory panel */
             const improveMemoryLane = document.createElement('div')
             improveMemoryLane.classList.add('improve-memory-lane')
             /* story shadows */
             if(mShadows?.length)
                 improveMemoryLane.appendChild(mCreateMemoryShadows(id))
-            /* share memory panel */
-            const shareMemory = document.createElement('div')
-            shareMemory.classList.add('share-memory-container')
-            shareMemory.id = `share-memory_${ id }`
-            shareMemory.name = 'share-memory-container'
-            const shareMemoryActorSelect = document.createElement('div')
-            shareMemoryActorSelect.classList.add('share-memory-select')
-            shareMemoryActorSelect.title = `Select the actor or narrator for the story. Who should tell your story? Or who will play "you"?`
-            /* actor */
-            const actorList = ['Biographer', 'My Avatar', 'Member avatar', 'Q', 'MyLife Professional Actor', 'Custom']
-            const actor = document.createElement('select')
-            actor.classList.add('share-memory-actor-select')
-            actor.dataset.id = id
-            actor.dataset.type = `actor`
-            actor.id = `share-memory-actor-select_${ id }`
-            actor.name = 'share-memory-actor-select'
-            /* actor/narrator label; **note**: for instance if member has tuned a specific bot of theirs to have an outgoing voice they like */
-            const actorLabel = document.createElement('label')
-            actorLabel.classList.add('share-memory-actor-select-label')
-            actorLabel.htmlFor = actor.id
-            actorLabel.id = `share-memory-actor-select-label_${ id }`
-            actorLabel.textContent = 'Actor/Narrator:'
-            shareMemoryActorSelect.appendChild(actorLabel)
-            const actorOption = document.createElement('option')
-            actorOption.disabled = true
-            actorOption.selected = true
-            actorOption.value = ''
-            actorOption.textContent = 'Select narrator...'
-            actor.appendChild(actorOption)
-            actorList.forEach(option=>{
-                const actorOption = document.createElement('option')
-                actorOption.selected = false
-                actorOption.textContent = option
-                actorOption.value = option
-                actor.appendChild(actorOption)
-            })
-            actor.addEventListener('change', mStory)
-            shareMemoryActorSelect.appendChild(actor)
-            shareMemory.appendChild(shareMemoryActorSelect)
-            /* pov */
-            const shareMemoryPovSelect = document.createElement('div')
-            shareMemoryPovSelect.classList.add('share-memory-select')
-            shareMemoryPovSelect.title = `This refers to the position of the "listener" in the story. Who is the listener? Are they referred to as the protagonist? Antagonist? A particular person or character in your story?`
-            const povList = ['Me', 'Protagonist', 'Antagonist', 'Character',]
-            const pov = document.createElement('select')
-            pov.classList.add('share-memory-pov-select')
-            pov.dataset.id = id
-            pov.dataset.type = `pov`
-            pov.id = `share-memory-pov-select_${ id }`
-            pov.name = 'share-memory-pov-select'
-            /* pov label */
-            const povLabel = document.createElement('label')
-            povLabel.classList.add('share-memory-pov-select-label')
-            povLabel.htmlFor = pov.id
-            povLabel.id = `share-memory-pov-select-label_${ id }`
-            povLabel.textContent = 'Point of View:'
-            shareMemoryPovSelect.appendChild(povLabel)
-            const povOption = document.createElement('option')
-            povOption.disabled = true
-            povOption.selected = true
-            povOption.value = ''
-            povOption.textContent = 'Select listener vantage...'
-            pov.appendChild(povOption)
-            povList.forEach(option=>{
-                const povOption = document.createElement('option')
-                povOption.value = option
-                povOption.textContent = option
-                pov.appendChild(povOption)
-            })
-            pov.addEventListener('change', mStory)
-            shareMemoryPovSelect.appendChild(pov)
-            shareMemory.appendChild(shareMemoryPovSelect)
-            /* narrative context */
-            const narrativeContext = document.createElement('textarea')
-            narrativeContext.classList.add('share-memory-context')
-            narrativeContext.dataset.id = id
-            narrativeContext.dataset.previousValue = ''
-            narrativeContext.dataset.type = `narrative`
-            narrativeContext.id = `share-memory-context_${ id }`
-            narrativeContext.name = 'share-memory-context'
-            narrativeContext.placeholder = 'How should the story be told? Should it be scary? humorous? choose your own adventure?'
-            narrativeContext.title = `How should the story be told? Should it be scary? humorous? Will it be a choose your own adventure that deviates from the reality of your memory?`
-            narrativeContext.value = narrativeContext.dataset.previousValue
-            narrativeContext.addEventListener('blur', mStoryContext)
-            shareMemory.appendChild(narrativeContext)
-            /* play memory */
-            const memoryPlay = document.createElement('button')
-            memoryPlay.classList.add('relive-memory')
-            memoryPlay.dataset.id = id
-            memoryPlay.id = `relive-memory_${ id }`
-            memoryPlay.name = 'relive-memory'
-            memoryPlay.textContent = 'Relive Memory'
-            memoryPlay.addEventListener('click', mReliveMemory, { once: true })
-            shareMemory.appendChild(memoryPlay)
-            improveMemoryLane.appendChild(shareMemory)
-            // play memory
+            /* relive memory panel */
+            const reliveMemory = document.createElement('div')
+            reliveMemory.classList.add('relive-memory-container')
+            reliveMemory.id = `relive-memory_${ id }`
+            reliveMemory.name = 'relive-memory-container'
+            /* relive memory explanation */
+            const reliveExplanation = document.createElement('div')
+            reliveExplanation.classList.add('relive-memory-explanation')
+            reliveExplanation.id = `relive-memory-explanation_${ id }`
+            reliveExplanation.name = 'relive-memory-explanation'
+            reliveExplanation.textContent = 'Relive a memory by clicking the button below. This will bring up the memory in chat, where you can add to it, or simply enjoy reliving it!'
+            /* relive memory button */
+            const reliveButton = document.createElement('button')
+            reliveButton.classList.add('relive-memory-button', 'button')
+            reliveButton.dataset.id = id /* required for triggering PATCH */
+            reliveButton.id = `relive-memory-button_${ id }`
+            reliveButton.name = 'relive-memory-button'
+            reliveButton.textContent = 'Relive Memory'
+            reliveButton.addEventListener('click', mReliveMemory, { once: true })
+            /* append elements */
+            reliveMemory.appendChild(reliveExplanation)
+            reliveMemory.appendChild(reliveButton)
+            improveMemoryLane.appendChild(reliveMemory)
             /* memory media-carousel */
             const memoryCarousel = document.createElement('div')
             memoryCarousel.classList.add('memory-carousel')