From a7683b519e05d62b0bd5a67494d72b8448ac7f1d Mon Sep 17 00:00:00 2001
From: Tom Tibble <thomasdtibble@lewisu.edu>
Date: Sat, 4 Apr 2020 16:58:20 -0500
Subject: [PATCH] refactored, reorganized, and state change to loop back to
 beginning after race.

---
 .idea/workspace.xml      | 352 +++++++++++++++++----------------------
 audio.js                 |   2 +-
 background.js            |  40 +++--
 foreground_drawing.js    |  38 +++++
 game.js                  | 157 ++++++++---------
 index.html               |  34 ++--
 resources/horse_array.js |  19 +++
 7 files changed, 324 insertions(+), 318 deletions(-)
 create mode 100644 foreground_drawing.js
 create mode 100644 resources/horse_array.js

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index cb6e330..31a3513 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,82 +2,108 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="">
+      <change afterPath="$PROJECT_DIR$/foreground_drawing.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/audio.js" beforeDir="false" afterPath="$PROJECT_DIR$/audio.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/background.js" beforeDir="false" afterPath="$PROJECT_DIR$/background.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/game.js" beforeDir="false" afterPath="$PROJECT_DIR$/game.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
     <ignored path="$PROJECT_DIR$/tmp/" />
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
-    <option name="TRACKING_ENABLED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="FUSProjectUsageTrigger">
+    <session id="-728345993">
+      <usages-collector id="statistics.lifecycle.project">
+        <counts>
+          <entry key="project.closed" value="1" />
+          <entry key="project.open.time.2" value="1" />
+          <entry key="project.open.time.7" value="1" />
+          <entry key="project.opened" value="2" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.extensions.edit">
+        <counts>
+          <entry key="html" value="27" />
+          <entry key="js" value="1243" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.types.edit">
+        <counts>
+          <entry key="HTML" value="27" />
+          <entry key="JavaScript" value="1243" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.extensions.open">
+        <counts>
+          <entry key="js" value="3" />
+        </counts>
+      </usages-collector>
+      <usages-collector id="statistics.file.types.open">
+        <counts>
+          <entry key="JavaScript" value="3" />
+        </counts>
+      </usages-collector>
+    </session>
+  </component>
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="225">
-      <file leaf-file-name="index.html" pinned="false" current-in-tab="false">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="210">
-              <caret line="15" column="40" selection-start-line="15" selection-start-column="40" selection-end-line="15" selection-end-column="40" />
+            <state relative-caret-position="374">
+              <caret line="22" column="7" lean-forward="true" selection-start-line="22" selection-start-column="7" selection-end-line="22" selection-end-column="7" />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="audio.js" pinned="false" current-in-tab="false">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/audio.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="2464">
-              <caret line="176" column="11" selection-start-line="176" selection-start-column="11" selection-end-line="176" selection-end-column="11" />
+            <state relative-caret-position="680">
+              <caret line="40" column="7" lean-forward="true" selection-start-line="40" selection-start-column="7" selection-end-line="40" selection-end-column="7" />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="game.js" pinned="false" current-in-tab="true">
+      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/game.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="14">
-              <caret line="33" column="30" selection-start-line="33" selection-start-column="30" selection-end-line="33" selection-end-column="30" />
+            <state relative-caret-position="209">
+              <caret line="190" column="54" selection-start-line="190" selection-start-column="44" selection-end-line="190" selection-end-column="54" />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="a_horse.png" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/resources/horse_images/final/a_horse.png">
-          <provider selected="true" editor-type-id="images" />
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/resources/horse_array.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="306">
+              <caret line="18" column="2" lean-forward="true" selection-start-line="18" selection-start-column="2" selection-end-line="18" selection-end-column="2" />
+            </state>
+          </provider>
         </entry>
       </file>
-      <file leaf-file-name="horse_san_69.png" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/resources/horse_images/final/horse_san_69.png">
-          <provider selected="true" editor-type-id="images" />
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/foreground_drawing.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state>
+              <caret column="35" lean-forward="true" selection-start-column="35" selection-end-column="35" />
+            </state>
+          </provider>
         </entry>
       </file>
-      <file leaf-file-name="CrotchRocket_93_raw.png" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/resources/horse_images/final/CrotchRocket_93_raw.png">
-          <provider selected="true" editor-type-id="images" />
-        </entry>
-      </file>
-      <file leaf-file-name="DEMON_HORZE_666.png" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/resources/horse_images/final/DEMON_HORZE_666.png">
-          <provider selected="true" editor-type-id="images" />
-        </entry>
-      </file>
-      <file leaf-file-name="stonewall_000.png" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png">
-          <provider selected="true" editor-type-id="images" />
-        </entry>
-      </file>
-      <file leaf-file-name="BlackJack_10.png" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png">
-          <provider selected="true" editor-type-id="images" />
-        </entry>
-      </file>
-      <file leaf-file-name="background.js" pinned="false" current-in-tab="false">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/background.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="2702">
-              <caret line="193" column="82" selection-start-line="193" selection-start-column="82" selection-end-line="193" selection-end-column="82" />
+            <state relative-caret-position="187">
+              <caret line="11" column="28" selection-start-line="11" selection-start-column="28" selection-end-line="11" selection-end-column="28" />
             </state>
           </provider>
         </entry>
@@ -93,23 +119,6 @@
   </component>
   <component name="FindInProjectRecents">
     <findStrings>
-      <find>shadow</find>
-      <find>swaypatter</find>
-      <find>math.</find>
-      <find>random</find>
-      <find>var</find>
-      <find>play</find>
-      <find>startcountdown</find>
-      <find>changeposition</find>
-      <find>runrace</find>
-      <find>countdown</find>
-      <find>horse_image_ar</find>
-      <find>drawracebackground</find>
-      <find>inithorses</find>
-      <find>horse_Array</find>
-      <find>line</find>
-      <find>finished</find>
-      <find>drawcountdown</find>
       <find>coun</find>
       <find>horseheigh</find>
       <find>ctx.</find>
@@ -123,6 +132,23 @@
       <find>draw</find>
       <find>draw horses</find>
       <find>final results</find>
+      <find>start</find>
+      <find>star</find>
+      <find>drawrace</find>
+      <find>drawracebac</find>
+      <find>runra</find>
+      <find>seconds</find>
+      <find>drawstar</find>
+      <find>BG_CTXdraw</find>
+      <find>drawStar</find>
+      <find>drawSta</find>
+      <find>SECONDS</find>
+      <find>drawracebackg</find>
+      <find>cyclesremainign</find>
+      <find>handler</find>
+      <find>inithorses</find>
+      <find>restarting</find>
+      <find>coundown</find>
     </findStrings>
     <replaceStrings>
       <replace>cyclesRemaining</replace>
@@ -137,9 +163,13 @@
       <list>
         <option value="$PROJECT_DIR$/resources/background.js" />
         <option value="$PROJECT_DIR$/main.css" />
+        <option value="$PROJECT_DIR$/resources/forground_drawing.js" />
+        <option value="$PROJECT_DIR$/forground_drawing.js" />
+        <option value="$PROJECT_DIR$/foreground_drawing.js" />
         <option value="$PROJECT_DIR$/audio.js" />
-        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/background.js" />
+        <option value="$PROJECT_DIR$/resources/horse_array.js" />
+        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/game.js" />
       </list>
     </option>
@@ -150,14 +180,10 @@
     <detection-done>true</detection-done>
     <sorting>DEFINITION_ORDER</sorting>
   </component>
-  <component name="NodePackageJsonFileManager">
-    <packageJsonPaths />
-  </component>
-  <component name="ProjectFrameBounds" extendedState="6">
-    <option name="x" value="-1" />
-    <option name="y" value="-17" />
-    <option name="width" value="1368" />
-    <option name="height" value="786" />
+  <component name="ProjectFrameBounds">
+    <option name="x" value="39" />
+    <option name="width" value="1701" />
+    <option name="height" value="1054" />
   </component>
   <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
   <component name="ProjectView">
@@ -169,27 +195,14 @@
         <subPane>
           <expand>
             <path>
-              <item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
-              <item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
+              <item name="CrivitzDerby" type="b2602c69:ProjectViewProjectNode" />
+              <item name="CrivitzDerby" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
-              <item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
-              <item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
+              <item name="CrivitzDerby" type="b2602c69:ProjectViewProjectNode" />
+              <item name="CrivitzDerby" type="462c0819:PsiDirectoryNode" />
               <item name="resources" type="462c0819:PsiDirectoryNode" />
             </path>
-            <path>
-              <item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
-              <item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
-              <item name="resources" type="462c0819:PsiDirectoryNode" />
-              <item name="horse_images" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
-              <item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
-              <item name="resources" type="462c0819:PsiDirectoryNode" />
-              <item name="horse_images" type="462c0819:PsiDirectoryNode" />
-              <item name="final" type="462c0819:PsiDirectoryNode" />
-            </path>
           </expand>
           <select />
         </subPane>
@@ -205,6 +218,7 @@
   </component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\tomdt\Dev\CrivitzDerby" />
       <recent name="$PROJECT_DIR$" />
     </key>
   </component>
@@ -221,7 +235,9 @@
     </option>
   </component>
   <component name="RunManager">
-    <configuration name="index.html" type="JavascriptDebugType" factoryName="JavaScript Debug" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/HorseRaceGame/index.html" />
+    <configuration name="index.html" type="JavascriptDebugType" factoryName="JavaScript Debug" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/HorseRaceGame/index.html">
+      <method v="2" />
+    </configuration>
     <recent_temporary>
       <list>
         <item itemvalue="JavaScript Debug.index.html" />
@@ -241,32 +257,34 @@
       <workItem from="1562211282530" duration="37792000" />
       <workItem from="1563080090211" duration="25669000" />
       <workItem from="1569291993530" duration="184000" />
+      <workItem from="1585964564085" duration="8983000" />
+      <workItem from="1586030603124" duration="6776000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="63645000" />
+    <option name="totallyTimeSpent" value="79404000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="-1" y="-17" width="1368" height="786" extended-state="6" />
+    <frame x="39" y="0" width="1701" height="1054" extended-state="0" />
     <layout>
-      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.2108389" />
+      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.16837041" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info id="Favorites" order="2" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Find" order="1" weight="0.32934782" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
       <window_info anchor="bottom" id="TODO" order="6" />
       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Event Log" order="7" side_tool="true" />
-      <window_info anchor="bottom" id="Version Control" order="7" />
-      <window_info anchor="bottom" id="Run" order="2" />
-      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
-      <window_info active="true" anchor="bottom" id="Terminal" order="7" visible="true" weight="0.32882884" />
-      <window_info id="Favorites" order="2" side_tool="true" />
-      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
-      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
-      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info active="true" anchor="bottom" id="Terminal" order="8" visible="true" weight="0.23260869" />
+      <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
+      <window_info anchor="bottom" id="Version Control" order="10" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
-      <window_info anchor="bottom" id="Message" order="0" />
-      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
-      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
     </layout>
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -277,21 +295,26 @@
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>
-      <option name="time" value="1" />
+      <breakpoints>
+        <line-breakpoint enabled="true" type="javascript">
+          <url>file://$PROJECT_DIR$/game.js</url>
+          <line>94</line>
+          <option name="timeStamp" value="1" />
+        </line-breakpoint>
+        <line-breakpoint enabled="true" type="javascript">
+          <url>file://$PROJECT_DIR$/game.js</url>
+          <line>38</line>
+          <properties lambdaOrdinal="-1" />
+          <option name="timeStamp" value="2" />
+        </line-breakpoint>
+      </breakpoints>
     </breakpoint-manager>
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/index.html">
+    <entry file="file://$PROJECT_DIR$/main.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="210">
-          <caret line="15" column="40" selection-start-line="15" selection-start-column="40" selection-end-line="15" selection-end-column="40" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/audio.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="2464">
-          <caret line="176" column="11" selection-start-line="176" selection-start-column="11" selection-end-line="176" selection-end-column="11" />
+        <state relative-caret-position="280">
+          <caret line="20" column="15" selection-start-line="20" selection-start-column="15" selection-end-line="20" selection-end-column="15" />
         </state>
       </provider>
     </entry>
@@ -313,110 +336,45 @@
     <entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png">
       <provider selected="true" editor-type-id="images" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/background.js">
+    <entry file="file://$PROJECT_DIR$/foreground_drawing.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="2702">
-          <caret line="193" column="82" selection-start-line="193" selection-start-column="82" selection-end-line="193" selection-end-column="82" />
+        <state>
+          <caret column="35" lean-forward="true" selection-start-column="35" selection-end-column="35" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/game.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="462">
-          <caret line="33" column="30" selection-start-line="33" selection-start-column="30" selection-end-line="33" selection-end-column="30" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/index.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="196">
-          <caret line="14" column="23" lean-forward="true" selection-start-line="14" selection-start-column="23" selection-end-line="14" selection-end-column="23" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/main.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="280">
-          <caret line="20" column="15" selection-start-line="20" selection-start-column="15" selection-end-line="20" selection-end-column="15" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/resources/horse_images/final/CrotchRocket_93_raw.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/resources/horse_images/final/DEMON_HORZE_666.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/background.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="868">
-          <caret line="62" column="48" selection-start-line="62" selection-start-column="21" selection-end-line="62" selection-end-column="48" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/game.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1764">
-          <caret line="126" column="29" lean-forward="true" selection-start-line="126" selection-start-column="29" selection-end-line="126" selection-end-column="29" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/main.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="280">
-          <caret line="20" column="15" selection-start-line="20" selection-start-column="15" selection-end-line="20" selection-end-column="15" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/resources/horse_images/final/DEMON_HORZE_666.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/resources/horse_images/final/CrotchRocket_93_raw.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
     <entry file="file://$PROJECT_DIR$/audio.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="2464">
-          <caret line="176" column="11" selection-start-line="176" selection-start-column="11" selection-end-line="176" selection-end-column="11" />
+        <state relative-caret-position="680">
+          <caret line="40" column="7" lean-forward="true" selection-start-line="40" selection-start-column="7" selection-end-line="40" selection-end-column="7" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/index.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="210">
-          <caret line="15" column="40" selection-start-line="15" selection-start-column="40" selection-end-line="15" selection-end-column="40" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/resources/horse_images/final/horse_san_69.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/resources/horse_images/final/a_horse.png">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
     <entry file="file://$PROJECT_DIR$/background.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="2702">
-          <caret line="193" column="82" selection-start-line="193" selection-start-column="82" selection-end-line="193" selection-end-column="82" />
+        <state relative-caret-position="187">
+          <caret line="11" column="28" selection-start-line="11" selection-start-column="28" selection-end-line="11" selection-end-column="28" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/resources/horse_array.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="306">
+          <caret line="18" column="2" lean-forward="true" selection-start-line="18" selection-start-column="2" selection-end-line="18" selection-end-column="2" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="374">
+          <caret line="22" column="7" lean-forward="true" selection-start-line="22" selection-start-column="7" selection-end-line="22" selection-end-column="7" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/game.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="14">
-          <caret line="33" column="30" selection-start-line="33" selection-start-column="30" selection-end-line="33" selection-end-column="30" />
+        <state relative-caret-position="209">
+          <caret line="190" column="54" selection-start-line="190" selection-start-column="44" selection-end-line="190" selection-end-column="54" />
         </state>
       </provider>
     </entry>
diff --git a/audio.js b/audio.js
index 5f0e8eb..9a68717 100644
--- a/audio.js
+++ b/audio.js
@@ -43,7 +43,7 @@ const gunshots = [
         src:['resources/audio/starter_guns/347591__nicjonesaudio__assault-rifle-1.wav']
     }),
     new Howl({
-        src:['/home/tibz/Dev/HorseRaceGame/resources/audio/starter_guns/362652__trngle__cat-meow(1).wav']
+        src:['resources/audio/starter_guns/362652__trngle__cat-meow(1).wav']
     }),
     new Howl({
         src:['resources/audio/starter_guns/382735__schots__gun-shot.aiff']
diff --git a/background.js b/background.js
index ddb03d5..7ed2c9c 100644
--- a/background.js
+++ b/background.js
@@ -1,13 +1,21 @@
 
 const fencePostGap = 200;
-let fenceOffset = fencePostGap;
-let finishLinePosition = -1000;
 const finishLineSpeed = 7;
+let fenceOffset = fencePostGap;
+
+let finishLinePosition = -1000;
 let finishLineDrawn = false;
 
 let showWinnerText = true;
 let winnerTextCounter = 0;
 
+function initBackground () {
+    finishLinePosition = -1000;
+    finishLineDrawn = false;
+    showWinnerText = true;
+    winnerTextCounter = 0;
+}
+
 function drawRaceBackground(ctx, width, height, horseSize, cyclesRemaining, isMoving){
 
     // Create gradient
@@ -26,7 +34,7 @@ function drawRaceBackground(ctx, width, height, horseSize, cyclesRemaining, isMo
     ctx.fillRect(0, height - (2 * horseSize) , width, height);
 
     // Draw Distance left, or draw finishline
-    if (isMoving) {
+    if (isMoving && gameState !== "preRace") {
         if (cyclesRemaining > 0) {
             drawRemainingDistance(ctx, width, horseSize, cyclesRemaining);
         }
@@ -39,6 +47,9 @@ function drawRaceBackground(ctx, width, height, horseSize, cyclesRemaining, isMo
             finishLinePosition -= finishLineSpeed;
         }
     }
+    else {
+
+    }
 
     // Draw grass
     ctx.fillStyle = '#32CD32';
@@ -170,34 +181,37 @@ function drawWinnerCloseUp(ctx, width, height, horseSize, finalPlaces){
 
     ctx.drawImage(finalPlaces[0].image, horseSize * 2.5  , height - (.5 * horseSize) -5 , (horseSize *3) + 10 , - (horseSize * 3) + 10 );
 
+    ctx.font = "40px Arial";
+    ctx.fillStyle = '#ffffff';
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth =1;
     //should hopefully flicker every 60 "frames"
     if (showWinnerText){
-        ctx.font = "40px Arial";
-        ctx.strokeStyle = '#000000';
-        ctx.lineWidth = 3;
+
         ctx.strokeText("Winner!!!", horseSize* 3, height - (horseSize * 3));
-        ctx.fillStyle = '#ffffff';
         ctx.fillText("Winner!!!", horseSize* 3, height - (horseSize * 3));
 
-        ctx.lineWidth =1;
         winnerTextCounter ++;
         if (winnerTextCounter > 50){
             showWinnerText = false;
         }
     }
     else {
-        ctx.font = "40px Arial";
-        ctx.strokeStyle = '#000000';
-        ctx.lineWidth = 3;
         ctx.strokeText(finalPlaces[0].name, horseSize* 3, height - (horseSize * 3)+60);
-        ctx.fillStyle = '#ffffff';
         ctx.fillText(finalPlaces[0].name, horseSize* 3, height - (horseSize * 3) + 60);
 
-        ctx.lineWidth =1;
+
         winnerTextCounter --;
         if (winnerTextCounter < 1){
             showWinnerText = true;
         }
     }
+    // click to continue should always be present
+    ctx.strokeText("Click to start a new game!", horseSize* 3, height - horseSize );
+    ctx.fillText("Click to start a new game!", horseSize* 3, height - horseSize );
+
+}
+function drawStartScreen (ctx, bgctx, width, height, horseSize){
+ drawRaceBackground(ctx, width, height, horseSize, 999999, true);
 
 }
\ No newline at end of file
diff --git a/foreground_drawing.js b/foreground_drawing.js
new file mode 100644
index 0000000..8f3537c
--- /dev/null
+++ b/foreground_drawing.js
@@ -0,0 +1,38 @@
+function fg_drawShadows(ctx, horses,horseHeight, horseWidth) {
+    ctx.fillStyle = "rgba(0,0,0,0.25)";
+    ctx.beginPath();
+    ctx.ellipse(
+        horses[3].x + (horseWidth /2) , // center of horses position
+        HEIGHT - (horseHeight * 1.75),// center of lane
+        (horseWidth * .75) / 2,
+        (horseHeight * .25) / 2,
+        0, 0, Math.PI *2);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.ellipse(
+        horses[2].x + (horseWidth /2) , // center of horses position
+        HEIGHT - (horseHeight * 1.25),// center of lane
+        (horseWidth * .75) / 2,
+        (horseHeight * .25) / 2,
+        0, 0, Math.PI *2);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.ellipse(
+        horses[1].x + (horseWidth /2) , // center of horses position
+        HEIGHT - (horseHeight * .75),// center of lane
+        (horseWidth * .75) / 2,
+        (horseHeight * .25) / 2,
+        0, 0, Math.PI *2);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.ellipse(
+        horses[0].x + (horseWidth /2) , // center of horses position
+        HEIGHT - (horseHeight * .25),// center of lane
+        (horseWidth * .75) / 2,
+        (horseHeight * .25) / 2,
+        0, 0, Math.PI *2);
+    ctx.fill();
+}
\ No newline at end of file
diff --git a/game.js b/game.js
index 7fbe5b4..bd28584 100644
--- a/game.js
+++ b/game.js
@@ -2,27 +2,9 @@
  * Created by tomdt on 6/23/2017.
  */
 
-let cyclesRemaining = 1000;
 
 
-const horse_array = [
-    {img: "./resources/horse_images/final/a_horse.png", name: "A Horse" , owner: "Ola"},
-    {img: "./resources/horse_images/final/BlackJack_10.png", name: "BlackJack", owner: "Jenn"},
-    {img: "resources/horse_images/final/char_azNEIGHHble.png", name: "Char AzNIEGHHble" , owner: "Riley"},
-    {img: "./resources/horse_images/final/CrotchRocket_93_raw.png", name: "CROTCH ROCKET", owner: "Ben"},
-    {img: "./resources/horse_images/final/DEMON_HORZE_666.png", name: "DEMON HORZE" , owner: "Ski"},
-    {img: "./resources/horse_images/final/dickzilla.png", name: "DickZilla" , owner: "Alex"},
-    {img: "./resources/horse_images/final/f-TheHaters.png", name: "Fuck the Haters" , owner: "Carlos"},
-    {img: "./resources/horse_images/final/GH.png", name: "GH" , owner: "Skoo"},
-    {img: "./resources/horse_images/final/Horse_cock.png", name: "Horse Cock" , owner: "Ben"},
-    {img: "./resources/horse_images/final/horse_san_69.png", name: "Horse-San" , owner: "Riley"},
-    {img: "./resources/horse_images/final/killme112.png", name: "Kill Me" , owner: "Quinn"},
-    {img: "./resources/horse_images/final/lil_sebastian.png", name: "Lil' Sebastian" , owner: "Horsey Heaven"},
-    {img: "./resources/horse_images/final/stonewall_000.png", name: "Stonewall", owner: "Davie"},
-    {img: "./resources/horse_images/final/nobody_cares.png", name: "Nobody Cares", owner: "Brendan"},
-    {img: "./resources/horse_images/final/Raibow_sparkle.png", name: "Rainbow Sparkle", owner: "Cyndi"},
 
-];
 
 
 const GAME_CANVAS = document.getElementById("gamecanvas");
@@ -31,7 +13,7 @@ const BG_CANVAS = document.getElementById("bgcanvas");
 const BG_CTX = BG_CANVAS.getContext("2d");
 const CTX = GAME_CANVAS.getContext("2d");
 
-const COUNTDOWN_START_SECS = 30;
+const COUNTDOWN_START_SECS = 25;
 
 // Size parameters, they will be adjusted to fit the size of the screen
 let WIDTH = GAME_CANVAS.width;
@@ -41,41 +23,63 @@ let horseWidth = WIDTH / 8;
 let horseHeight = WIDTH / 8;
 
 // state tracking
+let cyclesRemaining = 1000;
 let gameState = "preRace";  // this should probably be an enum later
-const horses = [];
-const finalPlaces = [];
+let horses = [];
+let finalPlaces = [];
 let finishLineScan = 0;
-
 let fanfarePlayedFlag = false;
+let placeCount = 1;
+
+//UI event handlers
+let clickHandlerLoaded = false;
 
 // sound effect triggers
-
 const soundEffectTriggers = [Math.floor(Math.random() * (100)) + 700, // should be between 700 and 800
-Math.floor(Math.random() * (100)) + 300, // shuld be between 300 and 400
+Math.floor(Math.random() * (100)) + 300, // should be between 300 and 400
 //  Math.floor(Math.random() * (100)) + 200, //between 200 - 300
 ];
 
 
 //Start game loop
 window.onload = ( ) => {
-     //  initBackground();
-
-
-    initHorses();
-
-    // The game loop should be a setInterval that way the screen size can be adjusted.
-    // I think its a bit easier to keep track of the state from one loop  vs function callbacks
+    initGame();
+    // The game loop should be a setInterval that way the screen size can be adjusted
     setInterval(gameLoop, 20); //  a touch <60 FPS
 
 };
 
+function initGame(){
+     cyclesRemaining = 1000;
+     gameState = "preRace";  // this should probably be an enum later
+     horses = [];
+     finalPlaces = [];
+     finishLineScan = 0;
+
+     fanfarePlayedFlag = false;
+     clickHandlerLoaded = false;
+
+     initBackground();
+     initHorses();
+}
+
 function gameLoop(){
 
     switch(gameState){
         case "preRace":
+            screenReset();
+            drawStartScreen(CTX ,BG_CTX, WIDTH, HEIGHT, horseHeight);
             if (horses.length === 4){
-                gameState = 'countdownStart';
-                console.log ("Horses loaded, transitioning to countdown");
+                if (!clickHandlerLoaded){
+                let handler = function (event) {
+                        gameState = 'countdownStart';
+                        console.log ("Horses loaded, transitioning to countdown");
+                        removeEventListener('click', handler, false);
+                        clickHandlerLoaded = false;
+                    } ;
+                        window.addEventListener("click",handler,false);
+                    clickHandlerLoaded = true;
+                }
             }
             break;
         case "countdownStart":
@@ -104,6 +108,17 @@ function gameLoop(){
             break;
         case "WinnerCloseUp":
             drawWinnerCloseUp(BG_CTX, WIDTH, HEIGHT, horseHeight, finalPlaces);
+            if (!clickHandlerLoaded){
+                let handler = function () {
+                    console.log("Restarting game....")
+                    initGame();
+                    gameState = "preRace"
+                    removeEventListener('click', handler, false);
+                    clickHandlerLoaded = false;
+                };
+                clickHandlerLoaded = true;
+                addEventListener('click', handler, false);
+            }
             break;
 
         default:
@@ -114,18 +129,12 @@ function gameLoop(){
 function runRace(ctx,bg_ctx){
 
     cyclesRemaining --;
-
     //handle race background
     drawRaceBackground(bg_ctx, WIDTH, HEIGHT, horseHeight, cyclesRemaining, true);
 
-
-    //Figure out horse postitions
-    const x = WIDTH / 2;
-    const y = HEIGHT / 2;
-
-    const lane_1_height = HEIGHT - (horseHeight * 1.25);
     //todo- change these sway varibles to be "trot" objects, or something, at put it in a horse object, so we can reuse these better
     // horse 1 & 2 are hilarious, horse 3&4 are more normal paced
+    const lane_1_height = HEIGHT - (horseHeight * 1.25);
     const horse_1_sway = Math.sin(cyclesRemaining) * 10;
 
 
@@ -140,6 +149,10 @@ function runRace(ctx,bg_ctx){
     const lane_4_height = HEIGHT - (horseHeight * 2.75);
     const horse_4_sway = Math.cos(cyclesRemaining/2) * 10;
 
+    horses[0].y = (lane_1_height + horse_1_sway);
+    horses[1].y = (lane_2_height + horse_2_sway);
+    horses[2].y = (lane_3_height + horse_3_sway);
+    horses[3].y = (lane_4_height + horse_4_sway);
 
 
     updateHorsePositions();
@@ -148,51 +161,13 @@ function runRace(ctx,bg_ctx){
 
 
     //draw shadows under horses
+    fg_drawShadows(ctx, horses, horseHeight, horseWidth);
 
-    // ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
-    ctx.fillStyle = "rgba(0,0,0,0.25)";
-    ctx.beginPath();
-    ctx.ellipse(
-        horses[3].x + (horseWidth /2) , // center of horses position
-        HEIGHT - (horseHeight * 1.75),// center of lane
-        (horseWidth * .75) / 2,
-        (horseHeight * .25) / 2,
-        0, 0, Math.PI *2);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.ellipse(
-        horses[2].x + (horseWidth /2) , // center of horses position
-        HEIGHT - (horseHeight * 1.25),// center of lane
-        (horseWidth * .75) / 2,
-        (horseHeight * .25) / 2,
-        0, 0, Math.PI *2);
-    ctx.fill();
-    ctx.beginPath();
-    ctx.ellipse(
-        horses[1].x + (horseWidth /2) , // center of horses position
-        HEIGHT - (horseHeight * .75),// center of lane
-        (horseWidth * .75) / 2,
-        (horseHeight * .25) / 2,
-        0, 0, Math.PI *2);
-    ctx.fill();
-    ctx.beginPath();
-    ctx.ellipse(
-        horses[0].x + (horseWidth /2) , // center of horses position
-        HEIGHT - (horseHeight * .25),// center of lane
-        (horseWidth * .75) / 2,
-        (horseHeight * .25) / 2,
-        0, 0, Math.PI *2);
-    ctx.fill();
-
-
-
-
-    // draw horses
-    ctx.drawImage(horses[3].image, horses[3].x , (lane_4_height + horse_4_sway) , horseWidth, horseHeight);
-    ctx.drawImage(horses[2].image, horses[2].x , (lane_3_height + horse_3_sway) , horseWidth, horseHeight);
-    ctx.drawImage(horses[1].image, horses[1].x , (lane_2_height + horse_2_sway) , horseWidth, horseHeight);
-    ctx.drawImage(horses[0].image, horses[0].x , (lane_1_height + horse_1_sway) , horseWidth, horseHeight);
+    // draw horses  - order is important!!!
+    ctx.drawImage(horses[3].image, horses[3].x ,  horses[3].y , horseWidth, horseHeight);
+    ctx.drawImage(horses[2].image, horses[2].x ,  horses[2].y , horseWidth, horseHeight);
+    ctx.drawImage(horses[1].image, horses[1].x ,  horses[1].y  , horseWidth, horseHeight);
+    ctx.drawImage(horses[0].image, horses[0].x , horses[0].y , horseWidth, horseHeight);
 
     if (cyclesRemaining <= 0 ){
         if (gameState === 'running'){
@@ -203,8 +178,6 @@ function runRace(ctx,bg_ctx){
 
         let foundHorseIndex = null;
 
-        console.log(finishLineScan);
-
         for (let i = 0; i < horses.length; i++) {
             //horse has finished
             if (horses[i].x >= finishLineScan && horses[i].place === null){
@@ -215,15 +188,13 @@ function runRace(ctx,bg_ctx){
         }
         if(foundHorseIndex != null){
             finalPlaces.push(horses[foundHorseIndex]);
-            horses[foundHorseIndex].place = 1;
+            horses[foundHorseIndex].place = placeCount ++;
             console.log("Horse Finished - " + foundHorseIndex);
         }
        // horses.splice(foundHorseIndex);
         if (finalPlaces.length === 4){
-           // gameState = "finished";
             stopGallop();
-
-            // this will actually set the gamestate to finished for every frame, but it shouldnt matter since the gamestate never goes anywhere after finsihed
+            // give it a bit of time before setting gameState to finished
            setTimeout(() => {
                gameState = "finished";
            }, 2000)
@@ -233,9 +204,13 @@ function runRace(ctx,bg_ctx){
 }
 
 
-function initHorses() {
+function initHorses(prevWinner) {
     console.log("initHorses");
 
+    if (prevWinner){
+
+    }
+
     const temp_horse_array = [];
 
     //grab random horses
diff --git a/index.html b/index.html
index 5b577ac..0a65c01 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>
-        Crivitz Derby
-    </title>
-    <link rel="stylesheet" href="main.css">
-</head>
-<body>
+    <head>
+        <meta charset="UTF-8">
+        <title>
+            Crivitz Derby
+        </title>
+        <link rel="stylesheet" href="main.css">
+    </head>
+    <body>
 
-<canvas id="fgcanvas"></canvas>
-<canvas id="gamecanvas"></canvas>
-<canvas id="bgcanvas"></canvas>
+        <canvas id="fgcanvas"></canvas>
+        <canvas id="gamecanvas"></canvas>
+        <canvas id="bgcanvas"></canvas>
 
-<script src="resources/libs/howler.js"> </script>
-<script src="audio.js"></script>
-<script src="background.js" ></script>
-<script src="game.js" ></script>
-</body>
+        <script src="resources/libs/howler.js"> </script>
+        <script src="resources/horse_array.js"></script>
+        <script src="audio.js"></script>
+        <script src="background.js" ></script>
+        <script src="foreground_drawing.js" ></script>
+        <script src="game.js" ></script>
+    </body>
 </html>
\ No newline at end of file
diff --git a/resources/horse_array.js b/resources/horse_array.js
new file mode 100644
index 0000000..d95252a
--- /dev/null
+++ b/resources/horse_array.js
@@ -0,0 +1,19 @@
+
+const horse_array = [
+    {img: "./resources/horse_images/final/a_horse.png", name: "A Horse" , owner: "Ola"},
+    {img: "./resources/horse_images/final/BlackJack_10.png", name: "BlackJack", owner: "Jenn"},
+    {img: "resources/horse_images/final/char_azNEIGHHble.png", name: "Char AzNIEGHHble" , owner: "Riley"},
+    {img: "./resources/horse_images/final/CrotchRocket_93_raw.png", name: "CROTCH ROCKET", owner: "Ben"},
+    {img: "./resources/horse_images/final/DEMON_HORZE_666.png", name: "DEMON HORZE" , owner: "Ski"},
+    {img: "./resources/horse_images/final/dickzilla.png", name: "DickZilla" , owner: "Alex"},
+    {img: "./resources/horse_images/final/f-TheHaters.png", name: "Fuck the Haters" , owner: "Carlos"},
+    {img: "./resources/horse_images/final/GH.png", name: "GH" , owner: "Skoo"},
+    {img: "./resources/horse_images/final/Horse_cock.png", name: "Horse Cock" , owner: "Ben"},
+    {img: "./resources/horse_images/final/horse_san_69.png", name: "Horse-San" , owner: "Riley"},
+    {img: "./resources/horse_images/final/killme112.png", name: "Kill Me" , owner: "Quinn"},
+    {img: "./resources/horse_images/final/lil_sebastian.png", name: "Lil' Sebastian" , owner: "Horsey Heaven"},
+    {img: "./resources/horse_images/final/stonewall_000.png", name: "Stonewall", owner: "Davie"},
+    {img: "./resources/horse_images/final/nobody_cares.png", name: "Nobody Cares", owner: "Brendan"},
+    {img: "./resources/horse_images/final/Raibow_sparkle.png", name: "Rainbow Sparkle", owner: "Cyndi"},
+
+];
\ No newline at end of file