1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>The Room Adventure: Additional Features</title> 7 8 <link href="/index.css" rel="stylesheet" type="text/css"/> 9 <link href="/roomadventure/rooms.css" rel="stylesheet" type="text/css"/> 10 <link rel="shortcut icon" href="http://stephenjwolf.com/coding/favicon.ico" type="image/x-icon"/> 11 </head> 12 <body> 13 <div id="body"><!-- Required div for navigation bar --> 14 <div class="imgfloater max150px"><img src="/images/SergeiStudious.png"></div> 15 <h1>The Room Adventure: Additional Features</h1> 16 17 <h2>Updating Color Schemes Dynamically</h2> 18 <h4>Difficulty: ★☆☆☆☆</h4> 19 <h4><em>Requirement: HTML upgrade</em></h4> 20 21 <div class="flex-container"> 22 <div> 23 24 <!--Explanation--> 25 <p>We have a user interface with a certain color scheme. Well, what if we adjusted the colors as the player plays 26 the game? We could pick colors from each room image we're using and incorporate it into the UI. If a player 27 earns points, we could show a certain color, or a different color if they lose points, and so on.</p> 28 <p>The problem we face is how complex we want to make the colorization. How many elements will we update? How many 29 colors will be used for each update?</p> 30 31 <h2>What we need to do</h2> 32 <ul> 33 <li>Build a function that handles the color changes.</li> 34 <li>Use a default color when no color is given.</li> 35 <li>Add color properties to rooms where we want them.</li> 36 <li>Add a call to the color function when the player moves into a room.</li> 37 <li>Optionally add color updates for other actions, like earning or losing points.</li> 38 </ul> 39 </div> 40 <div class="imgwrapper"> 41 <br> 42 <!--Screenshot--> 43 <img src="/roomadventure/screenimages/colorchange02.png"> 44 </div> 45 </div> 46 47 <h2>Step 1: Set boundaries</h2> 48 <p>This could get really out of hand, depending on how detailed we want to be. Think about all the different sections 49 we have on our screen. It may not look like there's a lot, but there is. Here's a list. (Don't freak out.)</p> 50 51 <div class="flex-container"> 52 <div><h3>HTML Tags</h3> 53 <ul> 54 <li>body (the webpage itself)</li> 55 <li>table (the structure holding our game)</li> 56 <li>td (table cell)</li> 57 <li>h1 (main heading)</li> 58 <li>h3 (smaller heading)</li> 59 <li>button (and these have separate formats)</li> 60 <li>img (room image)</li> 61 <li>a (hyperlink anchor in the caption)</li> 62 </ul> 63 </div> 64 65 66 <div><h3>Style Classes</h3> 67 <ul> 68 <li>.text (for most of the cells with text in them)</li> 69 <li>.item (for the "take an item" button)</li> 70 <li>.inventory (for the inventory buttons)</li> 71 <li>.even (for the even numbered navigation and passcode buttons)</li> 72 <li>.odd (for the odd numbered navigation and passcode buttons)</li> 73 <li>.hide (for the backspace and clear buttons)</li> 74 <li>.show (for the backspace and clear buttons)</li> 75 </ul> 76 </div> 77 78 <div><h3>Element Ids</h3> 79 <ul> 80 <li>#interface (surrounds the whole game)</li> 81 <li>#gameTitle (the game's title)</li> 82 <li>#info (the game information box)</li> 83 <li>#description (for room descriptions)</li> 84 <li>#broken (for showing the broken things and other info)</li> 85 <li>#found (showing found items and other info)</li> 86 <li>#score (where we show the player's point total)</li> 87 <li>#navigation (where we show the navigation, passcode, start, and replay (etc.) buttons)</li> 88 <li>#imagewrapper (which helps control the room image display)</li> 89 <li>#caption (to show the image's caption info, if you're using it)</li> 90 <li>#inventory (to format the inventory box itself, not the buttons)</li> 91 <li>And individual buttons: #start, #replay, #leave, #exit, #passcode, #backspace, #clear, #playerName, 92 #hintButton 93 </li> 94 </ul> 95 </div> 96 </div> 97 98 <div class="imgfloater"><img src="/images/LeenaConfused.png"></div> 99 <p>See? It's a lot! And those are just the ones we have from the features in the book and from what's on the website 100 at the time I'm creating this particular page! Who knows what else has been added since?</p> 101 102 <p>If we really wanted to control for all of these things, we sure could. But it would take a lot of setup to do.</p> 103 104 <p>Instead, we're going to only change <em>two things</em> in this feature here, because we're narrowing things down. 105 We are going to change the <strong>border color of the interface</strong> and the <strong>text color of the game 106 title</strong>. If you want to do more, you certainly can!</p> 107 108 <h2>Step 2: Creating our updateColors function</h2> 109 <p>Because we're keeping things simple here, this function won't be too crazy. But I like to make sure our code won't 110 run into any unexpected errors, so I want to check for and control for certain things.</p> 111 <p>To use this function, we'll need to pass in the color we want to use. We'll use it for both the title's text color 112 and the border of the interface. If no color is sent in, then we want to use a default color.</p> 113 <p>Let's check out the function and I'll explain the rest of it after.</p> 114 115 <div class="code"> 116 <ul> 117 <li><span class="keyword">function</span> <span class="function">updateColors</span>(color)</li> 118 <li>{ 119 <ul> 120 <li><span class="comment">//if no color is sent in (undefined) then use a default</span></li> 121 <li>color = color || <span class="string">"orange"</span>;</li> 122 <li> </li> 123 <li><span class="keyword">var</span> <span class="object">gameInterface</span> = <span 124 class="object">document</span>.<span class="function">getElementById</span>(<span class="string">"interface"</span>); 125 </li> 126 <li><span class="keyword">var</span> <span class="object">gameTitle</span> = <span 127 class="object">document</span>.<span class="function">getElementById</span>(<span class="string">"gameTitle"</span>); 128 </li> 129 <li> </li> 130 <li><span class="keyword">if</span> (gameInterface)</li> 131 <li>{ 132 <ul> 133 <li><span class="object">gameInterface</span>.<span class="property">style</span>.<span class="property">borderColor</span> 134 = color; 135 </li> 136 </ul> 137 </li> 138 <li>}</li> 139 <li> </li> 140 <li><span class="keyword">if</span> (gameTitle)</li> 141 <li>{ 142 <ul> 143 <li><span class="object">gameTitle</span>.<span class="property">style</span>.<span 144 class="property">color</span> = color; 145 </li> 146 </ul> 147 </li> 148 <li>}</li> 149 </ul> 150 </li> 151 <li>}</li> 152 </ul> 153 </div> 154 155 <h3>Code breakdown</h3> 156 <p>Let's talk a little about this code, or you can <a href="#skip">jump down to the next step</a>.</p> 157 158 <h4>Setting the default value</h4> 159 <p>Right at the top, there's something that may look really weird. It's a JavaScript shortcut.</p> 160 161 <div class="code"> 162 <ul> 163 <li>color = color || <span class="string">"orange"</span>;</li> 164 </ul> 165 </div> 166 167 <p>On the right of the <code>=</code> sign is where the magic happens. When we call this function, we are supposed to 168 send in a color for the parameter. We're going to add these to our rooms in a little bit.</p> 169 <p>Remember your logical operators? The OR operator <code>||</code> evaluates one expression at a time from left to 170 right until it hits something that is <span class="keyword">true</span>. As soon as it hits something <span 171 class="keyword">true</span>, it stops checking.</p> 172 173 <p>Remember when you're testing if something is <span class="keyword">true</span>? Any string that has a value is 174 considered to be <span class="keyword">true</span>. So if we did pass in a color, then this line says to just use 175 that <code>color</code> parameter.</p> 176 177 <p>However, if we <em>don't</em> send in a color, then the <code>color</code> parameter would be <span 178 class="keyword">undefined</span>. In that case, the <code>color</code> part of the OR condition is <span 179 class="keyword">false</span> so the computer moves to the right and sends back our default color, which for me is 180 <span class="string">"orange"</span>. Whew.</p> 181 <p>I said this was a shortcut. What's it a shortcut for? Well, you could replace that line with this instead.</p> 182 183 <div class="code"> 184 <ul> 185 <li><span class="keyword">if</span> (!color)</li> 186 <li>{ 187 <ul> 188 <li>color = <span class="string">"orange"</span>;</li> 189 </ul> 190 </li> 191 </ul> 192 </div> 193 <p>Is that more readable to you? You can use that version instead if you like.</p> 194 195 <h4>Picking and checking the elements we're changing</h4> 196 <p>The <span class="object">document</span> lines should look familiar from when we set up the big <span 197 class="object">display</span> object. That's how we use each element's <code>id</code> to find it and use it.</p> 198 199 <p>Then I'm being overcautious. I'm checking to make sure that both of those elements exist before trying to change 200 their styles. Why? Just in case we change something in the UI at some point. We don't want our game crashing here. 201 Or we could leave those checks out, let the game crash, and then backtrack to troubleshoot <em>why</em> it's 202 crashing. Sometimes that's a good option too.</p> 203 204 <h4>Setting the new styles</h4> 205 <p>When we use JavaScript to change CSS styles, we have to make sure we are using the <span 206 class="property">style</span> property of the element we're changing.</p> 207 208 <p>But on top of that, we have to select the individual style property we want to update too. We chain the properties 209 together to do this.</p> 210 211 <p>But there's a major difference in some CSS property names versus JavaScript names. Did you notice? In CSS, we use 212 attributes like <code>background-color</code>, <code>border-radius</code>, and <code>font-size</code>.</p> 213 214 <p>But these won't work in JavaScript because of the hyphen (minus sign). They don't follow the <a 215 href="/javascripttutorial/punctuation.html">naming and punctuation</a> rules of JavaScript. So any name that has 216 those hyphens in it has to be converted to camelCase. Therefore, <code>background-color</code> in CSS would become 217 <code>backgroundColor</code> when used in JavaScript code. We could use <code>borderRadius</code>, 218 <code>fontSize</code>, and so on.</p> 219 220 <p>We're only changing the <code>borderColor</code> of our interface and the font <code>color</code> of the title. We 221 could certainly do a lot more, but let's just get our feet wet here.</p> 222 223 <h2 id="skip">Step 3: Updating moveToRoom</h2> 224 <p>We have our function. Now we have to call it. You remember that process, right?</p> 225 <p>At the top of our <span class="function">moveToRoom</span> function, we have a number of function calls. Depending 226 on what features you've added, that may be all that's in there. Go to the end of that section, right after we 227 display the score and the inventory. That's where we're going to call the new function.</p> 228 229 <div class="imgfloater"><img src="/roomadventure/screenimages/colorchange03.png"></div> 230 <div class="code"> 231 <ul> 232 <li><span class="object">display</span>.<span class="function">score</span>();</li> 233 <li><span class="function">showInventory</span>();</li> 234 <li><strong><span class="function">updateColors</span>(<span class="object">player</span>.<span class="object">currentRoom</span>.<span 235 class="property">color</span>);</strong></li> 236 </ul> 237 </div> 238 239 <p>Why are we putting it at the end? Some of our interface elements, like the buttons and so on, are created 240 dynamically. If we later added new styling for the inventory buttons, let's say, then we wouldn't see those changes 241 if we tried to change the colors before the buttons are created. This helps to make sure everything is on the screen 242 before we try to modify any of it.</p> 243 244 <h2>Step 4: Updating other functions</h2> 245 <p>While you're in the mindset of updating functions, why not take a run through your code an add other colors 246 elsewhere? If you don't want to do that now, you can do it at any time. In that case, <a href="#skip2">jump to the 247 next step</a> and start adding color properties to your rooms.</p> 248 <p>The way we wrote our function, we don't need anything special to change a color. We can just call the function and 249 send in the name of the color we want to use, or even a hex value for a color.</p> 250 251 <p>I want the border and title to turn <code>red</code> whenever the player loses points. So anywhere I have 252 <code><span class="object">player</span>.<span class="property">score</span> -=</code> I know I'm about to take 253 points away, no matter what's after the <code>-=</code>. Instead of combing through all the lines of code, I used 254 the <em>find</em> feature that's pretty standard on all computers. Press <kbd><kbd class="key">Ctrl</kbd>+<kbd 255 class="key">F</kbd></kbd> and that usually gives you a dialogue box on your screen somewhere that will let you 256 search. I actually only searched for <code>-=</code> in this case. But because I broke my JavaScript into several 257 files, I had to search them all to make sure I didn't miss anything.</p> 258 259 <p>Right after any line of code where a player lost points, I called our new function and sent in the color <span 260 class="string">"red"</span>.</p> 261 262 <h4>For example</h4> 263 <p>In my <span class="function">fixBrokenThing</span> function, if the player uses the wrong item in a room, they lose 264 15 points. So, I want to change the color there.</p> 265 266 <div class="code"> 267 <ul> 268 <li><span class="object">player</span>.<span class="property">score</span> -= 15;</li> 269 <li><strong><span class="function">updateColors</span>(<span class="string">"red"</span>);</strong></li> 270 </ul> 271 </div> 272 273 <p>I also made used the red color if the player is tired and can't fix something, or if the player tries to fix 274 something in a room that doesn't have anything broken in it. Also, if they get the passcode wrong, that's 275 red-border-worthy too. I opted not to use the red border if the player buys a hint, because they're doing that by 276 choice.</p> 277 278 <p>Then I used <code>darkgreen</code> to update the screen when the player earned points or won the game. For this I 279 did a search for <code>score +=</code>, with the word <em>score</em> because we have a lot of text strings that use 280 <code>+=</code>. It was as simple as adding <code><span class="function">updateColors</span>(<span class="string">"darkgreen"</span>);</code>. 281 </p> 282 283 <p>Just so you know, if you want to use a very specific shade of a color, you certainly can. You can pass in a hex 284 code as your color. I use one for a darker shade of <code>slateblue</code> and its code is <code>#2f2475</code>. 285 Just send it in like anything else: <code><span class="function">updateColors</span>(<span 286 class="string">"#2f2475"</span>);</code> but make sure you include the number sign (hashtag <code>#</code>) in 287 front.</p> 288 289 290 <h2 id="skip2">Step 5: Adding a color property to your rooms</h2> 291 <p>Time for the very last step. Let's give our rooms a <span class="property">color</span> property.</p> 292 293 <p>This part's super easy, right? You know what to do? You already know the name of the property that's being called, 294 right? And how to add it to a room? Cool, go for it!</p> 295 296 <p>And if you'd like a refresher... Go into your <span class="function">getRooms</span> function. Scroll down to your 297 first room (or whatever room you want to give a color to). For simplicity, insert a line after the <span 298 class="property">name</span> line and put the new property there. If you have an image for your room, then I'd 299 suggest using a main color from that room to add a nice accent to the UI to tie it all in together, but of course, 300 do as you like!</p> 301 302 <h4>Example</h4> 303 <div class="code"> 304 <ul> 305 <li><span class="keyword">var</span> <span class="object">livingRoom</span> =</li> 306 <li>{ 307 <ul> 308 <li><span class="property">name</span>: <span class="string">"living room"</span>, 309 <li><strong><span class="property">color</span>: <span class="string">"lightgoldenrodyellow"</span>,</strong> 310 </li> 311 <li><span class="comment">//all the rest of the properties continue below...</span></li> 312 </ul> 313 </li> 314 </ul> 315 </div> 316 317 <p>Don't forget to play the game and see how your colors are working out. Maybe you want to add more <code>px</code> 318 to the <code>#interface</code> border so you see the color more. Or maybe you want to change the background color 319 instead. You can figure out how to do that, right? It goes back to the <span class="function">updateColors</span> 320 function and using the <span class="property">style</span> property.</p> 321 322 323 <h2>Have a colorful day!</h2> 324 <h2>—Dr. Wolf</h2> 325 326 <div id="prevnext"></div> 327 <!-- required section for navigation sidebar --> 328 </div> 329 <script src="/navigator.js"></script> 330 <script>begin("roomadventure");</script> 331 <!-- end of required section for navigation sidebar --> 332 </body> 333 </html> 334