diff --git a/views/assets/css/bots.css b/views/assets/css/bots.css index 34e7d66..99e9236 100644 --- 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 index a9713d5..3f5780d 100644 --- 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')