removed unused html element ids

psnider · Mar 31, 2022 · 6833a63 · 6833a63
1 parent d90c90a
commit 6833a63
Show file tree

Hide file tree

Showing 18 changed files with 31 additions and 29 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -207,7 +207,7 @@ Its HTML consists of an Aurelia-specific _require_ element, which loads the CSS
   ```html
 <template>
     <require from="./InProcessIndicator.css"></require>
-    <div id="request-in-progress" class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
 </template>
   ```
   Each Aurelia component must have a JavaScript class with the name of the class.  

diff --git a/dist/app.6b185cf835dc2d2ee69d.bundle.js b/dist/app.6b185cf835dc2d2ee69d.bundle.js
diff --git a/dist/app.8290711458d178b14ff3.bundle.js b/dist/app.8290711458d178b14ff3.bundle.js
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html style="height:100%;width:100%;"><head><meta charset="utf-8"><title>License Plate Game</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href="/"><link rel="icon" href="favicon.ico"><script defer="defer" src="/runtime~app.450b9e5fc6deafa566fa.bundle.js"></script><script defer="defer" src="/vendors-7e9c6a9f.1adc9f385b3ac86c2788.bundle.js"></script><script defer="defer" src="/vendors-319a6989.a80424c5fae4edbd79e3.bundle.js"></script><script defer="defer" src="/vendors-4e64aa37.9e9c6bc89f49649635e3.bundle.js"></script><script defer="defer" src="/vendors-3ce50090.b281a0f6725a5f032f6a.bundle.js"></script><script defer="defer" src="/vendors-fcadf5bb.99541182c2a6c79ed0a2.bundle.js"></script><script defer="defer" src="/vendors-cdd60c62.abf102d6ed9d6bb32f06.bundle.js"></script><script defer="defer" src="/app.6b185cf835dc2d2ee69d.bundle.js"></script></head><body aurelia-app="main"></body></html>
+<!doctype html><html style="height:100%;width:100%;"><head><meta charset="utf-8"><title>License Plate Game</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href="/"><link rel="icon" href="favicon.ico"><script defer="defer" src="/runtime~app.450b9e5fc6deafa566fa.bundle.js"></script><script defer="defer" src="/vendors-7e9c6a9f.1adc9f385b3ac86c2788.bundle.js"></script><script defer="defer" src="/vendors-319a6989.a80424c5fae4edbd79e3.bundle.js"></script><script defer="defer" src="/vendors-4e64aa37.9e9c6bc89f49649635e3.bundle.js"></script><script defer="defer" src="/vendors-3ce50090.b281a0f6725a5f032f6a.bundle.js"></script><script defer="defer" src="/vendors-fcadf5bb.99541182c2a6c79ed0a2.bundle.js"></script><script defer="defer" src="/vendors-cdd60c62.abf102d6ed9d6bb32f06.bundle.js"></script><script defer="defer" src="/app.8290711458d178b14ff3.bundle.js"></script></head><body aurelia-app="main"></body></html>
diff --git a/src/AboutPanel.html b/src/AboutPanel.html
@@ -1,5 +1,5 @@
 <template>
-    <div id="about-panel" >
+    <div >
         <div if.bind="about_panel_is_open">
             <h3>This game is an experiment...</h3>
             <ul>

diff --git a/src/AnswersPanel.html b/src/AnswersPanel.html
@@ -4,11 +4,11 @@
 
     <div class="answers-panel">
         <div if.bind="puzzle_answers.length > 0" >
-            <div id="div-ans-hdr" style="height:10%;">
+            <div style="height:10%;">
                 <div class="text-over-license-plate" >${answers_counts_text}</div>
                 <div class="text-over-license-plate" >...for a total score of ${total_answers_score} points.</div>    
             </div>
-            <div id="div-ans-tbl" style="height:440px;">
+            <div style="height:440px;">
                 <answers-table puzzle_answers.bind="puzzle_answers" ></answers-table>    
             </div>
         </div>

diff --git a/src/AnswersTable.html b/src/AnswersTable.html
@@ -4,8 +4,8 @@
     <require from="./AnswerRow"></require>
 
     <answers-title-row ></answers-title-row>
-    <div id="gap-after-answer-title-row" style="height:5px;" ></div>
-    <div id="table-data-rows" style="height:350px;" class="scroll-vertically" >
+    <div style="height:5px;" ></div>
+    <div ref="data_rows_element" style="height:350px;" class="scroll-vertically" >
         <div repeat.for="puzzle_answer of puzzle_answers">
             <answer-row puzzle_answer.bind="puzzle_answer" ></answer-row>
         </div>    

diff --git a/src/AnswersTable.ts b/src/AnswersTable.ts
@@ -4,11 +4,13 @@ import type { PuzzleAnswer } from "./lib"
 
 export class AnswersTable {
     @bindable @observable puzzle_answers: PuzzleAnswer[]
+    data_rows_element: HTMLDivElement
     table_data_rows_height: number
 
 
+    // The Aurelia life-cycle method called as soon as this component is attached to the DOM. 
     attached() {
-        this.table_data_rows_height = document.getElementById("table-data-rows").offsetHeight
+        this.table_data_rows_height = this.data_rows_element.offsetHeight
     }
 
 }

diff --git a/src/AnswersTitleRow.html b/src/AnswersTitleRow.html
@@ -2,7 +2,7 @@
     <require from="./AnswerRow.css"></require>
     <require from="./AnswersTitleRow.css"></require>
 
-    <div id="attempts-title-row" class='answer-row-grid'>
+    <div class='answer-row-grid'>
         <div class='answer-title-element'>
             #
         </div>

diff --git a/src/Banner.html b/src/Banner.html
@@ -11,7 +11,7 @@
             <div class="banner-header" title="built with Aurelia!">Make a Word from a License Plate <img src="../static/aurelia-logo.svg" width="25" height="25" /><img src="../static/Typescript_logo_2020.svg" width="25" height="25" /></div>
             <system-messages-signboard ></system-messages-signboard>
         </div>
-        <div id="unused-column" ></div>
+        <div ></div>
     </header>
 </template>
 
diff --git a/src/CurrentGameControls.html b/src/CurrentGameControls.html
@@ -3,20 +3,20 @@
     <require from="./InProcessIndicator"></require>
 
     <div>
-        <div id="game-controls" class="current-game-controls" >
+        <div class="current-game-controls" >
             <div class="current-game-controls-time">
-                <span>Time Elapsed: </span><span id="time-elapsed">${hours_minutes_seconds}</span>
+                <span>Time Elapsed: </span><span >${hours_minutes_seconds}</span>
             </div>
 
             <div if.bind="request_in_progress_count === 0" >
                 <div class="current-game-controls-buttons" if.bind="!answers_panel_is_open" >
-                    <button type="button" id="check-word-button" title="or ENTER" class="current-game-controls-button" click.delegate="userRequestedCheckAnswer()" >Score Word</button>
-                    <button type="button" id="get-hint-button" class="current-game-controls-button" click.delegate="userRequestedHint()" >Get a Hint</button>
-                    <button type="button" id="reset-text-button" title="reset text, also by ESC key" class="current-game-controls-button reset-icon-color" click.delegate="resetText()" >🔄</button>
-                    <button type="button" id="show-answers-button" class="current-game-controls-button" click.delegate="showAnswersPanel()" >Show Scores...</button>
+                    <button type="button" title="or ENTER" class="current-game-controls-button" click.delegate="userRequestedCheckAnswer()" >Score Word</button>
+                    <button type="button" class="current-game-controls-button" click.delegate="userRequestedHint()" >Get a Hint</button>
+                    <button type="button" title="reset text, also by ESC key" class="current-game-controls-button reset-icon-color" click.delegate="resetText()" >🔄</button>
+                    <button type="button" class="current-game-controls-button" click.delegate="showAnswersPanel()" >Show Scores...</button>
                 </div>
                 <div class="current-game-controls-buttons" if.bind="answers_panel_is_open" >
-                    <button type="button" id="show-answers-button" class="current-game-controls-button" click.delegate="hideAnswersPanel()" >Back to word entry...</button>
+                    <button type="button" class="current-game-controls-button" click.delegate="hideAnswersPanel()" >Back to word entry...</button>
                 </div>
 
             </div>

diff --git a/src/FeedbackPanel.html b/src/FeedbackPanel.html
@@ -5,7 +5,7 @@
 
     <div >
         <div if.bind="feedback_panel_is_open" >
-            <div id="feedback-panel" class="feedback-panel">
+            <div class="feedback-panel">
                 <div class="feedback-header" >Please provide your suggestions,<br>or describe any problems you found...</div>
                 <div class="toggle-radio rating-button-spacing" data-style="rounded">
                     <input type="radio" id="good-rating" name="rating" value="good" checked.bind="rating" />
@@ -15,7 +15,7 @@
                 </div>
                 <div>
                     <!-- TODO: add pattern back in: <textarea pattern="\w*" -->
-                    <textarea id="feedback-text" class="feedback-text" title="Please provide your suggestions, or describe any problems you found." value.bind="comments" rows="3" ></textarea>
+                    <textarea class="feedback-text" title="Please provide your suggestions, or describe any problems you found." value.bind="comments" rows="3" ></textarea>
                 </div>
                 <div>
                     <button class="feedback-button" type="button" click.delegate="sendFeedback()" >Send Feedback</button>

diff --git a/src/FramedLicensePlate.html b/src/FramedLicensePlate.html
@@ -11,10 +11,10 @@
             <top-of-license-plate-frame current_game.bind="current_game" ></top-of-license-plate-frame>
         </div>
         <div class="license-plate-frame-interior">
-            <div id="license-plate-text-entry" if.bind="!answers_panel_is_open" class="license-plate-flex-container">
+            <div if.bind="!answers_panel_is_open" class="license-plate-flex-container">
                 <license-plate-answer-editor-free-entry settings.bind="settings" current_game.bind="current_game"  hint.bind="hint" ></license-plate-answer-editor-free-entry>
             </div>
-            <div id="answers-panel" if.bind="answers_panel_is_open" class="answers-container" >
+            <div if.bind="answers_panel_is_open" class="answers-container" >
                 <answers-panel puzzle_answers.bind="puzzle_answers"></answers-panel>
             </div>
         </div>

diff --git a/src/InProcessIndicator.html b/src/InProcessIndicator.html
@@ -2,5 +2,5 @@
     <require from="./InProcessIndicator.css"></require>
 
     <!-- This HTML is from https://loading.io -->
-    <div id="request-in-progress" class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
 </template>
diff --git a/src/LicensePlateAnswerEditorFreeEntry.html b/src/LicensePlateAnswerEditorFreeEntry.html
@@ -6,7 +6,7 @@
     <div>
         <div class="license-plate-top" ></div>
         <div class="license-plate-text">
-            <input id="puzzle-input" ref="puzzle_input_element" autocomplete="off" class="license-plate-char input-no-border  ${show_input_error ? 'input-invalid' : ''}" disabled.bind="!current_game" style.bind="computed_style" maxLength.bind="max_length" value.bind="answer_text" input.delegate="onAnyInput($event)" keydown.delegate="onkeydown($event)" change.delegate="onChange()" 
+            <input ref="puzzle_input_element" autocomplete="off" class="license-plate-char input-no-border  ${show_input_error ? 'input-invalid' : ''}" disabled.bind="!current_game" style.bind="computed_style" maxLength.bind="max_length" value.bind="answer_text" input.delegate="onAnyInput($event)" keydown.delegate="onkeydown($event)" change.delegate="onChange()" 
             dragstart.delegate="onDragStart($event)" drop.delegate="onDrop($event)" ></input>
         </div>
         <div class="license-plate-bottom flexbox-centering" >

diff --git a/src/PuzzleSummary.html b/src/PuzzleSummary.html
@@ -1,9 +1,9 @@
 <template>
     <require from="./PuzzleSummary.css"></require>
-    <div id="puzzle-description" >
+    <div >
         <div if.bind="current_game" >
             <span class="puzzle-description">Puzzle: </span>
-            <span id="mini-license-plate-text" class="mini-license-plate">${current_game.license_plate_text}</span>
+            <span class="mini-license-plate">${current_game.license_plate_text}</span>
             <span class="puzzle-description">has ${current_game.solutions_count} answers</span>    
         </div>
     </div>

diff --git a/src/StartNewGameControls.html b/src/StartNewGameControls.html
@@ -4,7 +4,7 @@
 
     <div>
         <div if.bind="step === 'not active'" >
-            <button type="button" id="start-new-game-panel-button" class="start-new-game-control" click.delegate="advanceStep('choose type')" >Start New Game</button>
+            <button type="button" class="start-new-game-control" click.delegate="advanceStep('choose type')" >Start New Game</button>
         </div>
         <div if.bind="step === 'choose type'" >
             <div >
@@ -15,7 +15,7 @@
         <div if.bind="step === 'get user selection'" >
             <label for="user-selected-puzzle" class="start-new-game-control">Selected by you:</label>
             <input type="text" id="user-selected-puzzle" ref="user_puzzle_input_element" class="start-new-game-control user-specified-text-input" size="" maxLength="3" value.bind="user_selected_puzzle_text" input.delegate="onAnyInput($event)"  />
-            <button type="button" id="start-new-game-user-puzzle-button" class="start-new-game-control start-user-specified-game-button" disabled.bind="user_selected_puzzle_text.length != 3" click.delegate="advanceStep('start user selected game')"  >Use ${user_selected_puzzle_text} as Puzzle</button>
+            <button type="button" class="start-new-game-control start-user-specified-game-button" disabled.bind="user_selected_puzzle_text.length != 3" click.delegate="advanceStep('start user selected game')"  >Use ${user_selected_puzzle_text} as Puzzle</button>
         </div>
         <div if.bind="step === 'awaiting response'"  >
             <in-process-indicator></in-process-indicator>

diff --git a/src/TopOfLicensePlateFrame.html b/src/TopOfLicensePlateFrame.html
@@ -4,7 +4,7 @@
     <require from="./StartNewGameControls"></require>
 
     <div class="top-of-license-frame">
-        <div id="puzzle-description" class="top-of-license-frame-child" >
+        <div class="top-of-license-frame-child" >
             <puzzle-summary current_game.bind="current_game" ></puzzle-summary>
         </div>
         <div class="top-of-license-frame-child" ></div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html style="height:100%;width:100%;"><head><meta charset="utf-8"><title>License Plate Game</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href="/"><link rel="icon" href="favicon.ico"><script defer="defer" src="/runtime~app.450b9e5fc6deafa566fa.bundle.js"></script><script defer="defer" src="/vendors-7e9c6a9f.1adc9f385b3ac86c2788.bundle.js"></script><script defer="defer" src="/vendors-319a6989.a80424c5fae4edbd79e3.bundle.js"></script><script defer="defer" src="/vendors-4e64aa37.9e9c6bc89f49649635e3.bundle.js"></script><script defer="defer" src="/vendors-3ce50090.b281a0f6725a5f032f6a.bundle.js"></script><script defer="defer" src="/vendors-fcadf5bb.99541182c2a6c79ed0a2.bundle.js"></script><script defer="defer" src="/vendors-cdd60c62.abf102d6ed9d6bb32f06.bundle.js"></script><script defer="defer" src="/app.6b185cf835dc2d2ee69d.bundle.js"></script></head><body aurelia-app="main"></body></html>
		<!doctype html><html style="height:100%;width:100%;"><head><meta charset="utf-8"><title>License Plate Game</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href="/"><link rel="icon" href="favicon.ico"><script defer="defer" src="/runtime~app.450b9e5fc6deafa566fa.bundle.js"></script><script defer="defer" src="/vendors-7e9c6a9f.1adc9f385b3ac86c2788.bundle.js"></script><script defer="defer" src="/vendors-319a6989.a80424c5fae4edbd79e3.bundle.js"></script><script defer="defer" src="/vendors-4e64aa37.9e9c6bc89f49649635e3.bundle.js"></script><script defer="defer" src="/vendors-3ce50090.b281a0f6725a5f032f6a.bundle.js"></script><script defer="defer" src="/vendors-fcadf5bb.99541182c2a6c79ed0a2.bundle.js"></script><script defer="defer" src="/vendors-cdd60c62.abf102d6ed9d6bb32f06.bundle.js"></script><script defer="defer" src="/app.8290711458d178b14ff3.bundle.js"></script></head><body aurelia-app="main"></body></html>