|
addhtmlpasscodebackspace.html
|
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>Allow Player to Delete a Digit or Clear the Guess</h2>
18 <h4>Difficulty: ★☆☆☆☆</h4>
19 <h4>Requirement: Passcode Ending</h4>
20
21 <div class="flex-container">
22 <div>
23 <p>Sometimes when you punch in a passcode, you might make a mistake and hit something by accident. Let's give the
24 player a helping hand and let them clear a digit or reset their guess completely. And we'll be nice and not give
25 them a penalty for this.</p>
26
27 <h2>What we need to do</h2>
28 <ul>
29 <li>Add a button to clear the currently-entered digits.</li>
30 <li>Add a button to clear the last entered digit.</li>
31 <li>Add helper functions to make both situations work.</li>
32 </ul>
33 </div>
34 <div class="imgwrapper">
35 <br>
36 <img src="/roomadventure/screenimages/passcodedeletebackspace.png"></div>
37 </div>
38
39 <h2>Step 1: Add "Clear" and "Backspace" buttons</h2>
40 <p>Go into your <span class="function">enterPasscode</span> function. Find the section where the Try Passcode button
41 is created. We're going to add these buttons right above that.</p>
42
43
44 <div class="code">
45 <ul>
46 <li>buttons += <span class="string">"<br><button <span class="property">id</span>=<span
47 class="string">'clear'</span> <span class="property">class</span>=<span class="string">'hide'</span> <span
48 class="property">onclick</span>='<span class="function">editPasscode</span>(<span class="keyword">this</span>.<span
49 class="property">id</span>)'> &times; </button>"</span>;
50 </li>
51 <li>buttons += <span class="string">"<button <span class="property">id</span>=<span
52 class="string">'backspace'</span> <span class="property">class</span>=<span class="string">'hide'</span> <span
53 class="property">onclick</span>='<span class="function">editPasscode</span>(<span class="keyword">this</span>.<span
54 class="property">id</span>)'> &larr; </button>"</span>;
55 </li>
56 </ul>
57 </div>
58
59 <p>I'm using <code>&times;</code> (<code>×</code>) for clear and <code>&larr;</code>
60 (<code>←</code>) for backspace. If you'd rather use the words, go right ahead.</p>
61
62 <h2>Step 2: Show the buttons when needed</h2>
63 <p>In the <span class="function">addToPasscode</span> function, we need to display the backspace and clear buttons. We
64 don’t need to check anything here because adding a value automatically means there is at least one number we could
65 clear. I hope it’s ok that I’m cramming each of these into one line of code.</p>
66
67 <div class="code">
68 <ul>
69 <li><span class="object">document</span>.<span class="function">getElementById</span>(<span class="string">"backspace"</span>).<span
70 class="function">setAttribute</span>(<span class="string">"class"</span>, <span class="string">"show"</span>);
71 </li>
72 <li><span class="object">document</span>.<span class="function">getElementById</span>(<span
73 class="string">"clear"</span>).<span
74 class="function">setAttribute</span>(<span class="string">"class"</span>, <span class="string">"show"</span>);
75 </li>
76 </ul>
77 </div>
78
79 <p>You may remember that we use <code><span class="object">document</span>.<span
80 class="function">getElementById</span>()</code> to gain access to an element on the HTML page. In this case, we
81 use it to find each button we created.</p>
82
83 <p>When we made the buttons in the last step, we included the <code>class</code> with the button
84 <code>class='hide'</code>. Here, we are using the <span class="function">setAttribute</span> method to change the
85 class from <code>hide</code> to <code>show</code>.</p>
86
87 <p>We do this for both of the buttons so they appear when there is at least one digit punched in for the passcode. If
88 no digits are punched in yet, there's no reason to have a backspace or clear key, so that's why we start with them
89 hidden.</p>
90
91
92 <h2>Step 3: Create the <span class="function">editPasscode</span> function</h2>
93
94 <p>We need a function that will handle the backspace and clear buttons. When we call the function, we send in
95 <code><span class="keyword">this</span>.<span class="property">id</span></code> as an argument. That will tell our
96 function which button was pressed because it sends the button's <span class="property">id</span>, which is either
97 <span class="string">"clear"</span> or <span class="string">"backspace"</span>.</p>
98
99 <p>If the player clears all the digits from the passcode they're entering, then we don't need these buttons, so we can
100 hide them again.</p>
101
102 <p>For this we do need to check the length of the <code><span class="object">player</span>.<span class="property">guessPasscode</span></code>
103 string and we have to do so after the number is cleared.</p>
104
105 <p>That's a fair bit of detail, but here we go.</p>
106
107 <div class="code">
108 <ul>
109 <li><span class="keyword">function</span> <span class="function">editPasscode</span>(id)</li>
110 <li>{
111 <ul>
112 <li><span class="keyword">if</span> (id === <span class="string">"clear"</span>)</li>
113 <li>{
114 <ul>
115 <li><span class="object">player</span>.<span class="property">guessPasscode</span> = <span
116 class="string">""</span>;
117 </li>
118 </ul>
119 </li>
120 <li>}</li>
121 <li><span class="keyword">else if</span> (id === <span class="string">"backspace"</span>)</li>
122 <li>{
123 <ul>
124
125 <li><span class="object">player</span>.<span class="property">guessPasscode</span> = <span class="object">player</span>.<span
126 class="property">guessPasscode</span>.<span class="function">substring</span>(0, <span class="object">player</span>.<span
127 class="property">guessPasscode</span>.<span class="property">length</span> - 1);
128 </li>
129 </ul>
130 </li>
131 <li>}</li>
132 <li> </li>
133 <li><span class="object">display</span>.<span class="function">broken</span>(<span class="string">"<b>Passcode:</b>
134 "</span> + <span class="object">player</span>.<span class="property">guessPasscode</span>);
135 </li>
136 <li> </li>
137 <li><span class="keyword">if</span> (<span class="object">player</span>.<span
138 class="property">guessPasscode</span>.<span class="property">length</span> === 0)
139 </li>
140 <li>{
141 <ul>
142 <li><span class="object">document</span>.<span class="function">getElementById</span>(<span
143 class="string">"backspace"</span>).<span class="function">setAttribute</span>(<span class="string">"class"</span>,
144 <span class="string">"hide"</span>);
145 </li>
146 <li><span class="object">document</span>.<span class="function">getElementById</span>(<span
147 class="string">"clear"</span>).<span class="function">setAttribute</span>(<span
148 class="string">"class"</span>, <span class="string">"hide"</span>);
149 </li>
150 </ul>
151 </li>
152 <li>}</li>
153 </ul>
154 </li>
155 <li>}</li>
156 </ul>
157 </div>
158
159
160 <h2>Step 4: Add the 'hide' and 'show' styles</h2>
161
162 <p>In order for the buttons to appear and disappear, we need to give some style to the <code>hide</code> and <code>show</code>
163 classes we're using. Right now, having them doesn't do anything.</p>
164
165 <p>Switch over to your CSS file with all the other styles for the game. Create these new style rules. As with adding
166 functions, don't put them inside any other attribute's open and close braces.</p>
167
168 <p>You only need the <code>show</code> and <code>hide</code> styles, but I added some for the appearance of the
169 buttons too. I made them the same, but you could make separate listings for each if you want them too look
170 different.</p>
171
172 <div class="code">
173 <ul>
174 <li>.<span class="object">hide</span> {
175 <ul>
176 <li><span class="property">visibility</span>: hidden;</li>
177 </ul>
178 </li>
179 <li>}</li>
180 <li> </li>
181 <li>.<span class="object">show</span> {
182 <ul>
183 <li><span class="property">visibility</span>: visible;</li>
184 </ul>
185 </li>
186 <li>}</li>
187 <li> </li>
188 <li>#<span class="function">navigation</span> #<span class="function">backspace</span>, #<span class="function">navigation</span>
189 #<span class="function">clear</span> {
190 <ul>
191 <li><span class="property">color</span>: cornsilk;</li>
192 <li><span class="property">background-color</span>: darkred;</li>
193 <li><span class="property">width</span>: 65px;</li>
194 <li><span class="property">height</span>: 65px;</li>
195 <li><span class="property">padding</span>: 5px;</li>
196 <li><span class="property">border-radius</span>: 5px;</li>
197 <li><span class="property">font-size</span>: 1.5em;</li>
198 </ul>
199 </li>
200 <li>}</li>
201 </ul>
202 </div>
203
204 <p>Remember, to be able to select the <code>#<span class="function">backspace</span></code> element, we have to first get inside
205 the <code>#<span class="function">navigation</span></code> box. That's why we use <code>#<span class="function">navigation</span>
206 #<span class="function">backspace</span></code> and <code>#<span class="function">navigation</span> #<span
207 class="function">clear</span></code> to style those buttons.</p>
208
209 <p>And that's it. You now have clear and backspace buttons.</p>
210
211
212 <h2>Happy Coding!</h2>
213 <h2>—Dr. Wolf</h2>
214
215 <div id="prevnext"></div>
216 <!-- required section for navigation sidebar -->
217 </div>
218 <script src="/navigator.js"></script>
219 <script>begin("roomadventure");</script>
220 <!-- end of required section for navigation sidebar -->
221 </body>
222 </html>
223