32:T92d,md`### Thoughts for 3/8/21: After meeting with Professor Cayley for Office Hours, I have some more thought on ways to update my code for my piece. Even before figuring that out, though, the story is the first thing I want to deal with. Here are my thoughts/ideas for my characters: 1. The main character/the person the reader is 'controlling': I can't decide whether I should write about this character in the second-person common for typical text adventures. Doing it this way helps the reader/user feel more involved in the story itself, but it also loses specificity this way. At the moment I am leaning towards having a named character with specific pronouns and a non-generic character design, but I'd love to hear others' thoughts on this idea. 2. Secondary characters. I think there should be at least three, perhaps including the protagonist's pet, but not all of these characters appear with each choice chosen by the viewer. This allows the protagonist people to riff off of, which can make interesting character choices. Here's a weird technical question/idea that I can't find the answer to - is it possible to make the drop-down menu of choices overlap an image in a specific place? Because if so, one thing I would really love to do is have characters' talk balloons be interactive - as in, there is an image of characters with an extant talk balloon, and in the talk balloon is a drop-down menu with various dialogue options. Once one is selected, the talk balloon fills in with that dialogue choice. If it is at all possible to do this it would be my preference. 3. Environments. I would like the protagonist to have the choice of going to different environments, which would trigger both different background drawings and different storylines. 4. Resolution. I want this to feel like a realized short comic, about a page or so of material once the choices are completed. This requires me to create several potential "endings" in the different combinations of choices. 5. Color. I would like the users to be able to customize the color of some things, like characters' hair, etc. Maybe one area is wintery and a character must have a coat, but if they aren't, a different interaction occurs. I wonder if it is possible to simply change or recolor a certain element of an image without replacing the entire image.`33:T831,css = html` `34:T60a,interactiveStory = ({ spread0: { panel0: { top_left: "You're in bed...", bottom_right: "Do you want to get up?", image: await FileAttachment("image0.jpg").url(), choices: [ { nextSpread: "spread0", nextPanel: "panel1_0", label: "Get out of bed." }, { nextSpread: "spread0", nextPanel: "panel1_1", label: "Stay in bed." } ] }, panel1_0: { top_left: " You did it. Amazing executive function!!!", bottom_right: "", image: await FileAttachment("image1@2.jpg").url(), choices: [ { nextSpread: "spread0", nextPanel: ["spread0", "panel1.0"], label: "Get out of bed. You did it. Amazing executive function!!!" }, { nextSpread: "spread0", nextPanel: ["spread0", "panel1.1"], label: "Stay in bed. You feel like a decomposing baked potato. " } ] }, panel1_1: { top_left: "You feel like a decomposing baked potato.", bottom_right: "", image: await FileAttachment("image2@2.jpg").url(), choices: [ { nextSpread: "spread0", nextPanel: ["spread0", "panel1.0"], label: "Get out of bed. You did it. Amazing executive function!!!" }, { nextSpread: "spread0", nextPanel: ["spread0", "panel1.1"], label: "Stay in bed. You feel like a decomposing baked potato. " } ] } } })35:T50b,story = [ { scene: 0, img: await FileAttachment("image1@1.jpg").url(), description: "You're in bed. Do you want to get up?", choices: [ { id: 1, label: "Get out of bed. You did it. Amazing executive function!!!", gotoScene: 1 }, { id: 2, label: "Stay in bed. You feel like a decomposing baked potato. ", gotoScene: 2 } ] }, { scene: 1, img: await FileAttachment("image2@1.jpg").url(), choices: [ { id: 3, label: "face dragon", description: "you've faced the dragon - you win! -- let's start again!", gotoScene: 0 }, { id: 4, label: "run away", description: "you're scared - you lose -- let's start over! ", gotoScene: 0 } ] }, { scene: 2, img: await FileAttachment("image3@2.jpg").url(), choices: [ { id: 5, label: "Go out in the hallway.", description: "you've faced the goblin -- you win! let's start over", gotoScene: 0 }, { id: 6, label: "Fuck it. Get back in bed.", description: "you try to run away but the goblin eats you. Let's start over", gotoScene: 0 } ] } ]36:[{"id":"9c4060e4d461ffdc9977a29945d8fbc8d0b7d680b6b4c335181b1b843d51d38c37bf2ba91e90a0de973f5ad9015bb4ac1e3e057a6afb0a1541ac9368352f3f45","href":"https://static.observableusercontent.com/files/9c4060e4d461ffdc9977a29945d8fbc8d0b7d680b6b4c335181b1b843d51d38c37bf2ba91e90a0de973f5ad9015bb4ac1e3e057a6afb0a1541ac9368352f3f45","name":"image2@2.jpg","type":"image/jpeg","lastModified":1616367899877.32,"size":452566},{"id":"7e05b8402ebc0930df4e0fbe11a12afde78a87ea23acd6974b1ec87677af1819e0cd9418ab9ef2b45630e894d545e360647d5dae1722d5b9687c8c75f1590342","href":"https://static.observableusercontent.com/files/7e05b8402ebc0930df4e0fbe11a12afde78a87ea23acd6974b1ec87677af1819e0cd9418ab9ef2b45630e894d545e360647d5dae1722d5b9687c8c75f1590342","name":"image1@2.jpg","type":"image/jpeg","lastModified":1616367899877.32,"size":457496},{"id":"389e53b9c132d01b31406bb9e92943516b1509a0d04449f2ef9fb64f52fee98231af64ac138db399d8fb988395578369c47b24d603261843e1fb19cd7bd53f02","href":"https://static.observableusercontent.com/files/389e53b9c132d01b31406bb9e92943516b1509a0d04449f2ef9fb64f52fee98231af64ac138db399d8fb988395578369c47b24d603261843e1fb19cd7bd53f02","name":"image1 smaller.jpg","type":"image/jpeg","lastModified":1615767508830.765,"size":442959},{"id":"389e53b9c132d01b31406bb9e92943516b1509a0d04449f2ef9fb64f52fee98231af64ac138db399d8fb988395578369c47b24d603261843e1fb19cd7bd53f02","href":"https://static.observableusercontent.com/files/389e53b9c132d01b31406bb9e92943516b1509a0d04449f2ef9fb64f52fee98231af64ac138db399d8fb988395578369c47b24d603261843e1fb19cd7bd53f02","name":"image0.jpg","type":"image/jpeg","lastModified":1616367899877.32,"size":442959}] 30:{"title":"An Interactive Adventure Comic","cells":[{"id":0,"value":"md`# An Interactive Adventure Comic\nEmma T Capps \n(note: my middle name is]\njust one letter long, so I don't add a period after it)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### Project Description:\nThis comic is created by you, the reader. Your choices decide the appearance and story of the comic, and each choice is dependent on your own prior choices. However, you are not directly creating the artwork - your choices are. Remember, once you make one choice, you can't take it back - the story must go on, after all! Once you have made a certain number of choices, the comic has finished, a silent collaboration between me and you.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`### The Concept/\"What's At Stake\":\nThe aim of this project is to further the boundaries of creating online comics/interactie literature, which is something I have been experimenting with in varied forms since 2011. I have made standard online comics with no interactivity ranging to completely interactive text adventure games, but this project would be somewhere in between: enabling the user to create their own work of graphic fiction, while still being constrained to the choices and images I provide them with. This will be an experiment for me, too, in embracing the online nature of many comics careers these days (and what made my own career and got me published), instead of railing against it. After all, it's not like the Internet is going anywhere.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`### Extra Thoughts:\nI have already started to brainstorm potential storylines and narratives for this, but what I'd really like to learn, first and foremost, is how to get my drop-down menus working. How do I make the appearance of an image/text - and subsequent drop-down menus - contigent on what the user chooses in said menu? I tried to look at Megan's draft of her text adventure to see the code she used for her drop-down menus, but it looks like she deleted it or wrote over it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`## *hi Emma !*\nI just copied the following to cells from the appropriate parts of https://codemyui.com/css-mobile-friendly-comic-book-layout/. I didn’t really change *anything*: just copied into the Observable cells in an appropriate way using \\`html\\`.\n\nThe results are kind of amazing, huh? Sending these suggestions to you now and will go on to figure out how to get your images plus interactivity into this: totally possible.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"topright = (pagepulse, rs`(Suddenly... | Later that month...)`).innerText","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`The cell above assigns the \\`innerText\\` of a 2-second pulsing gobbet of \\`rs\\` (\\`import\\`ed below) to the variable name \\`topright\\` and this is, then, referenced in the html for the cell below. This is just one simple way to show how the html could be made dynamic.
\n Here’s another:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof bottomleft = Select([\n \"...something amazing happened\",\n \"...I decided to go outside!\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"p1image = `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"imagediv = `

${p1image}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"page = html`

${topright}

\n ${imagediv}\n

${bottomleft}

${viewof selector}

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"page.querySelector('article')","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"viewof selector = Select([\"...\"].concat(currentSelectionArray[1]), {\n label: currentSelectionArray[0]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"currentSelectionArray = [\n \"Please choose: \",\n [\"New panel 1, choice 0\", \"new panel 1, choice 1\", \"New panel 1, choice 2\"]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"pagepulse = pulse(2000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"import { rs, pulse } from \"@dla/imports\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"import { Select } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"html`

Try resizing...

...it's responsive

What should I do?

THE END

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}