Added thingas

.gitignore

@@ -0,0 +1 @@
+.idea/*

.idea/workspace.xml

@@ -1,375 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ChangeListManager">
-    <list default="true" id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="" />
-    <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="FileEditorManager">
-    <leaf SIDE_TABS_SIZE_LIMIT_KEY="225">
-      <file leaf-file-name="index.html" 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>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="audio.js" 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="319">
-              <caret line="176" column="11" selection-start-line="176" selection-start-column="11" selection-end-line="176" selection-end-column="11" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="game.js" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/game.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-4603">
-              <caret line="15" column="44" selection-start-line="15" selection-start-column="42" selection-end-line="15" selection-end-column="44" />
-            </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" />
-        </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" />
-        </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="true">
-        <entry file="file://$PROJECT_DIR$/background.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="2674">
-              <caret line="191" column="84" selection-start-line="191" selection-start-column="84" selection-end-line="191" selection-end-column="84" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-    </leaf>
-  </component>
-  <component name="FileTemplateManagerImpl">
-    <option name="RECENT_TEMPLATES">
-      <list>
-        <option value="JavaScript File" />
-      </list>
-    </option>
-  </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>
-      <find>finalplaces</find>
-      <find>canvas</find>
-      <find>rect</find>
-      <find>prerace</find>
-      <find>horses</find>
-      <find>owner</find>
-      <find>inithorse</find>
-      <find>draw</find>
-      <find>final results</find>
-      <find>draw horses</find>
-    </findStrings>
-    <replaceStrings>
-      <replace>cyclesRemaining</replace>
-      <replace>const</replace>
-    </replaceStrings>
-  </component>
-  <component name="Git.Settings">
-    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-  </component>
-  <component name="IdeDocumentHistory">
-    <option name="CHANGED_PATHS">
-      <list>
-        <option value="$PROJECT_DIR$/resources/background.js" />
-        <option value="$PROJECT_DIR$/main.css" />
-        <option value="$PROJECT_DIR$/audio.js" />
-        <option value="$PROJECT_DIR$/game.js" />
-        <option value="$PROJECT_DIR$/index.html" />
-        <option value="$PROJECT_DIR$/background.js" />
-      </list>
-    </option>
-  </component>
-  <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
-  <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
-  <component name="JsGulpfileManager">
-    <detection-done>true</detection-done>
-    <sorting>DEFINITION_ORDER</sorting>
-  </component>
-  <component name="NodePackageJsonFileManager">
-    <packageJsonPaths />
-  </component>
-  <component name="ProjectFrameBounds" extendedState="6">
-    <option name="x" value="-1367" />
-    <option name="y" value="-17" />
-    <option name="width" value="1368" />
-    <option name="height" value="786" />
-  </component>
-  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
-  <component name="ProjectView">
-    <navigator proportions="" version="1">
-      <foldersAlwaysOnTop value="true" />
-    </navigator>
-    <panes>
-      <pane id="ProjectPane">
-        <subPane>
-          <expand>
-            <path>
-              <item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
-              <item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
-              <item name="HorseRaceGame" 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>
-      </pane>
-      <pane id="Scope" />
-    </panes>
-  </component>
-  <component name="PropertiesComponent">
-    <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
-    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
-    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
-  </component>
-  <component name="RecentsManager">
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="$PROJECT_DIR$" />
-    </key>
-  </component>
-  <component name="RunDashboard">
-    <option name="ruleStates">
-      <list>
-        <RuleState>
-          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
-        </RuleState>
-        <RuleState>
-          <option name="name" value="StatusDashboardGroupingRule" />
-        </RuleState>
-      </list>
-    </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" />
-    <recent_temporary>
-      <list>
-        <item itemvalue="JavaScript Debug.index.html" />
-      </list>
-    </recent_temporary>
-  </component>
-  <component name="SvnConfiguration">
-    <configuration />
-  </component>
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="" />
-      <created>1562211281380</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1562211281380</updated>
-      <workItem from="1562211282530" duration="37792000" />
-      <workItem from="1563080090211" duration="22896000" />
-    </task>
-    <servers />
-  </component>
-  <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="60688000" />
-  </component>
-  <component name="ToolWindowManager">
-    <frame x="-1" y="-17" width="1368" height="786" extended-state="6" />
-    <layout>
-      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.2108389" />
-      <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 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" />
-    </layout>
-  </component>
-  <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="1" />
-  </component>
-  <component name="VcsContentAnnotationSettings">
-    <option name="myLimit" value="2678400000" />
-  </component>
-  <component name="XDebuggerManager">
-    <breakpoint-manager>
-      <option name="time" value="1" />
-    </breakpoint-manager>
-  </component>
-  <component name="editorHistoryManager">
-    <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="319">
-          <caret line="176" column="11" selection-start-line="176" selection-start-column="11" selection-end-line="176" selection-end-column="11" />
-        </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$/game.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-4603">
-          <caret line="15" column="44" selection-start-line="15" selection-start-column="42" selection-end-line="15" selection-end-column="44" />
-        </state>
-      </provider>
-    </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="2674">
-          <caret line="191" column="84" selection-start-line="191" selection-start-column="84" selection-end-line="191" selection-end-column="84" />
-        </state>
-      </provider>
-    </entry>
-  </component>
-</project>

README.md

@@ -0,0 +1,5 @@
+# CrivitzDerby
+
+A crappy game.
+
+https://kindacrappygames.github.io/CrivitzDerby/

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']

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);
 
 }

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();
+}

game.js

@@ -2,25 +2,6 @@
  * 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"},
-
-];
 
 
 const GAME_CANVAS = document.getElementById("gamecanvas");
@@ -29,7 +10,7 @@ const BG_CANVAS = document.getElementById("bgcanvas");
 const BG_CTX = BG_CANVAS.getContext("2d");
 const CTX = GAME_CANVAS.getContext("2d");
 
-const COUNTDOWN_START_SECS = 10;
+const COUNTDOWN_START_SECS = 35;
 
 // Size parameters, they will be adjusted to fit the size of the screen
 let WIDTH = GAME_CANVAS.width;
@@ -39,41 +20,69 @@ 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 = [];
+let horses = [];
-const finalPlaces = [];
+let finalPlaces = [];
 let finishLineScan = 0;
-
 let fanfarePlayedFlag = false;
+let placeCount = 1;
+let roundScored = false;
+
+let scoreboard = JSON.parse(window.localStorage.getItem("cd_scoreboard")) || {};
+
+//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();
+    console.log("-- Scoreboard Check --");
-
+    console.log(scoreboard);
-
+    initGame();
-    initHorses();
+    // The game loop should be a setInterval that way the screen size can be adjusted
-
-    // 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
     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;
+     roundScored = false;
+
+     initBackground();
+     initHorses();
+}
+
 function gameLoop(){
 
     switch(gameState){
         case "preRace":
+            screenReset();
+            drawStartScreen(CTX ,BG_CTX, WIDTH, HEIGHT, horseHeight);
             if (horses.length === 4){
+                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":
@@ -102,6 +111,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:
@@ -112,18 +132,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;
 
 
@@ -138,6 +152,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();
@@ -146,51 +164,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]);
+    // draw horses  - order is important!!!
-    ctx.fillStyle = "rgba(0,0,0,0.25)";
+    ctx.drawImage(horses[3].image, horses[3].x ,  horses[3].y , horseWidth, horseHeight);
-    ctx.beginPath();
+    ctx.drawImage(horses[2].image, horses[2].x ,  horses[2].y , horseWidth, horseHeight);
-    ctx.ellipse(
+    ctx.drawImage(horses[1].image, horses[1].x ,  horses[1].y  , horseWidth, horseHeight);
-        horses[3].x + (horseWidth /2) , // center of horses position
+    ctx.drawImage(horses[0].image, horses[0].x , horses[0].y , horseWidth, horseHeight);
-        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);
 
     if (cyclesRemaining <= 0 ){
         if (gameState === 'running'){
@@ -201,8 +181,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){
@@ -213,15 +191,18 @@ 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";
+            if (!roundScored){
+                addWinnerToScoreboard(finalPlaces);
+                getAlltimeWinnerFromScoreboard();
+                roundScored = true;
+            }
             stopGallop();
-
+            // give it a bit of time before setting gameState to finished
-            // this will actually set the gamestate to finished for every frame, but it shouldnt matter since the gamestate never goes anywhere after finsihed
            setTimeout(() => {
                gameState = "finished";
            }, 2000)
@@ -231,9 +212,13 @@ function runRace(ctx,bg_ctx){
 }
 
 
-function initHorses() {
+function initHorses(prevWinner) {
     console.log("initHorses");
 
+    if (prevWinner){
+
+    }
+
     const temp_horse_array = [];
 
     //grab random horses
@@ -363,3 +348,95 @@ swayPatternFunctions = [
     {x:(cycle)=>{ return Math.cos(cycle/4) * 10;}, y:(cycle)=>{ return Math.sin(cycle/2) * 10}},
     {x:(cycle)=>{ return Math.sin(cycle/4) * 10;}, y:(cycle)=>{ return Math.cos(cycle/2) * 10}}
     ];
+
+
+function addWinnerToScoreboard(finalPlaceArray){
+
+        let makeFirst = true;
+        let makeSecond = true;
+        let makeThird = true;
+        let makeFourth = true;
+
+        // check for existing horses in scoreboard
+        for( const horseScoreListing in scoreboard){
+            if (horseScoreListing === finalPlaceArray[0].name){
+                makeFirst = false;
+                scoreboard[horseScoreListing].totalRaces ++;
+                scoreboard[horseScoreListing].firstPlaces ++;
+            } else  if (horseScoreListing === finalPlaceArray[1].name){
+                makeSecond = false;
+                scoreboard[horseScoreListing].totalRaces ++;
+                scoreboard[horseScoreListing].secondPlaces ++;
+
+            } else if (horseScoreListing === finalPlaceArray[2].name){
+                makeThird = false;
+                scoreboard[horseScoreListing].totalRaces ++;
+                scoreboard[horseScoreListing].thirdPlaces ++;
+
+            } else if (horseScoreListing === finalPlaceArray[3].name){
+                makeFourth = false;
+                scoreboard[horseScoreListing].totalRaces ++;
+                scoreboard[horseScoreListing].forthPlaces ++;
+            }
+        }
+        //
+        if (makeFirst){
+            scoreboard[finalPlaceArray[0].name] = {totalRaces: 1, firstPlaces: 1, secondPlaces: 0, thirdPlaces: 0, forthPlaces:0}
+        }
+        if (makeSecond){
+            scoreboard[finalPlaceArray[1].name] = {totalRaces: 1, firstPlaces: 0, secondPlaces: 1, thirdPlaces: 0, forthPlaces:0}
+        }
+        if (makeThird){
+            scoreboard[finalPlaceArray[2].name] = {totalRaces: 1, firstPlaces: 0, secondPlaces: 0, thirdPlaces: 1, forthPlaces:0}
+        }
+        if (makeFourth){
+            scoreboard[finalPlaceArray[3].name] = {totalRaces: 1, firstPlaces: 0, secondPlaces: 0, thirdPlaces: 0, forthPlaces:1}
+        }
+
+        // Save Scoreboard to local variable again.
+    window.localStorage.setItem("cd_scoreboard", JSON.stringify(scoreboard));
+}
+
+function getAlltimeWinnerFromScoreboard(){
+    console.log(scoreboard);
+    let mostwins = 0;
+    let winningHorse = "";
+    for( const horseScoreListing in scoreboard){
+        if (scoreboard[horseScoreListing].firstPlaces > mostwins) {
+            mostwins = scoreboard[horseScoreListing].firstPlaces;
+            winningHorse = horseScoreListing;
+        }
+    }
+    if (mostwins > 0 ){
+        console.log("The winningest horse of all time is " +winningHorse+ " with a total of " +mostwins+ " wins");
+    }
+}
+
+function deleteScoreboard() {
+    scoreboard = {};
+    window.localStorage.setItem("cd_scoreboard", JSON.stringify(scoreboard));
+}
+
+let deletecheck = false;
+window.addEventListener("keypress", (e)=>{
+    if (e.key === 'd'){
+        if (deletecheck === false){
+            deletecheck = true;
+            console.log("Press again to delete scoreboard, press any other key to cancel");
+        }
+        else {
+            console.log("deleting scoreboard");
+            deleteScoreboard()
+        }
+
+    }else {
+        deletecheck = false
+    }
+    if (e.key === "s"){
+        console.log(scoreboard);
+    }
+    if(e.key ===" "){
+        document.body.click();
+    }
+
+},false);

index.html

@@ -14,8 +14,10 @@
         <canvas id="bgcanvas"></canvas>
 
         <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>

resources/horse_array.js

@@ -0,0 +1,28 @@
+
+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"},
+    {img: "./resources/horse_images/final/arthur_horsegan.png", name: "Arthur Horsegan", owner: "Zucchini"},
+    {img: "./resources/horse_images/final/arthur_morgan.png", name: "Arthur Morgan", owner: "Carlos"},
+    {img: "./resources/horse_images/final/bob.png", name: "Bob", owner: "Ski"},
+    {img: "./resources/horse_images/final/elmers.png", name: "Elmers", owner: "Quinn"},
+    {img: "./resources/horse_images/final/hugsy.png", name: "Hugsy", owner: "Jenn"},
+    {img: "./resources/horse_images/final/ikea.png", name: "Ikea", owner: "Quinn"},
+    {img: "./resources/horse_images/final/platty.png", name: "Platty", owner: "Ski"},
+    {img: "./resources/horse_images/final/saweetie.png", name: "Saweetie", owner: "Ola"},
+    {img: "./resources/horse_images/final/Shitty_ponyta.png", name: "Shitty Ponyta", owner: "Zucchini"},
+    {img: "./resources/horse_images/final/Hand_Banana.png", name: "Hand Banana", owner: "Carl"},
+];