Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

283 version 0016 updates (#317) #318

Merged
merged 1 commit into from
Jul 30, 2024
Merged

283 version 0016 updates (#317) #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions views/assets/css/bots.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
139 changes: 35 additions & 104 deletions views/assets/js/bots.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import Globals from './globals.mjs'
const mAvailableMimeTypes = [],
mAvailableUploaderTypes = ['library', 'personal-avatar', 'personal-biographer', 'resume',],
botBar = document.getElementById('bot-bar'),
mDefaultReliveMemoryButtonText = 'next',
mDefaultTeam = 'memoir',
mGlobals = new Globals(),
mLibraries = ['entry', 'experience', 'file', 'story'], // ['chat', 'conversation']
Expand Down Expand Up @@ -397,7 +398,6 @@ async function mMemoryShadow(event){
throw new Error(`Unimplemented shadow type: ${ type }`)
}
/* close popup */
// @stub - minimize to header instead?
const popupClose = document.getElementById(`popup-close_${ itemId }`)
if(popupClose)
popupClose.click()
Expand Down Expand Up @@ -526,6 +526,7 @@ function mCreateCollectionPopup(collectionItem) {
/* create popup close button */
const popupClose = document.createElement('button')
popupClose.classList.add('fa-solid', 'fa-close', 'popup-close', 'collection-popup-close')
popupClose.dataset.isClose = 'true'
popupClose.id = `popup-close_${ id }`
popupClose.setAttribute('aria-label', 'Close')
popupClose.addEventListener('click', mTogglePopup)
Expand Down Expand Up @@ -628,108 +629,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')
Expand Down Expand Up @@ -1121,31 +1049,34 @@ async function mReliveMemory(event){
event.preventDefault()
event.stopPropagation()
const { id, inputContent, } = this.dataset
const previousInstance = document.getElementById(`relive-memory-input-container_${id}`)
if(previousInstance)
previousInstance.remove()
const popupClose = document.getElementById(`popup-close_${ id }`)
if(popupClose)
popupClose.click()
const { command, parameters, messages, success, } = await mReliveMemoryRequest(id, inputContent)
if(success){
addMessages(messages)
// @todo - create this function in member, as it will display it in chat and pipe it back here as below
const input = document.createElement('div')
// id alone is not unique!; input.id = `input_${ id }`
input.name = `input_${ id }`
input.classList.add('memory-input-container')
input.id = `relive-memory-input-container_${ id }`
input.name = `input_${ id }`
const inputContent = document.createElement('textarea')
inputContent.classList.add('memory-input')
inputContent.name = `memory-input_${ id }`
const inputSubmit = document.createElement('button')
inputSubmit.classList.add('memory-input-button')
inputSubmit.dataset.id = id
inputSubmit.textContent = mDefaultReliveMemoryButtonText
input.appendChild(inputContent)
input.appendChild(inputSubmit)
inputContent.addEventListener('input', event=>{
const { value, } = event.target
inputSubmit.dataset.inputContent = value
inputSubmit.textContent = value.length > 2
? 'update'
: 'next'
: mDefaultReliveMemoryButtonText
})
inputSubmit.addEventListener('click', mReliveMemory, { once: true })
addInput(input)
Expand Down Expand Up @@ -1606,8 +1537,8 @@ function mTogglePopup(event){
if(!popup)
throw new Error(`Popup not found: ${ popupId }`)
const { active, } = popup.dataset
if(active==='true'){ /* close */
console.log('mTogglePopup::closing:', popupId, popup.dataset, active)
const isClose = event.target?.dataset?.isClose
if(active=='true' || isClose){ /* close */
popup.dataset.active = 'false'
hide(popup)
} else { /* open */
Expand Down