Added a bunch of unprofessional stuff, created a new github account so its not linked to me professionally, pushed directly to master. NBD.

.idea/workspace.xml

@@ -2,7 +2,10 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/" />
@@ -20,7 +23,7 @@
         <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="210">
-              <caret line="15" column="39" selection-start-line="15" selection-start-column="39" selection-end-line="15" selection-end-column="39" />
+              <caret line="15" column="40" selection-start-line="15" selection-start-column="40" selection-end-line="15" selection-end-column="40" />
             </state>
           </provider>
         </entry>
@@ -34,22 +37,23 @@
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="main.css" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/main.css">
+      <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="280">
-              <caret line="20" column="15" selection-start-line="20" selection-start-column="15" selection-end-line="20" selection-end-column="15" />
+            <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="game.js" 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="-742">
-              <caret line="30" column="3" lean-forward="true" selection-start-line="30" selection-start-column="3" selection-end-line="30" selection-end-column="3" />
-            </state>
-          </provider>
+      <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">
@@ -72,11 +76,11 @@
           <provider selected="true" editor-type-id="images" />
         </entry>
       </file>
-      <file leaf-file-name="background.js" pinned="false" current-in-tab="false">
+      <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="126">
-              <caret line="12" column="17" lean-forward="true" selection-start-line="12" selection-start-column="17" selection-end-line="12" selection-end-column="17" />
+            <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>
@@ -92,12 +96,6 @@
   </component>
   <component name="FindInProjectRecents">
     <findStrings>
-      <find>drawcoun</find>
-      <find>screensizead</find>
-      <find>drawrace</find>
-      <find>remainingdistance</find>
-      <find>dra</find>
-      <find>horses</find>
       <find>shadow</find>
       <find>swaypatter</find>
       <find>math.</find>
@@ -112,7 +110,6 @@
       <find>drawracebackground</find>
       <find>inithorses</find>
       <find>horse_Array</find>
-      <find>draw horses</find>
       <find>line</find>
       <find>finished</find>
       <find>drawcountdown</find>
@@ -122,6 +119,13 @@
       <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>
@@ -136,10 +140,10 @@
       <list>
         <option value="$PROJECT_DIR$/resources/background.js" />
         <option value="$PROJECT_DIR$/main.css" />
-        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/audio.js" />
-        <option value="$PROJECT_DIR$/background.js" />
         <option value="$PROJECT_DIR$/game.js" />
+        <option value="$PROJECT_DIR$/index.html" />
+        <option value="$PROJECT_DIR$/background.js" />
       </list>
     </option>
   </component>
@@ -180,14 +184,14 @@
               <item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
               <item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
               <item name="resources" type="462c0819:PsiDirectoryNode" />
-              <item name="audio" 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="audio" type="462c0819:PsiDirectoryNode" />
-              <item name="fanfare" type="462c0819:PsiDirectoryNode" />
+              <item name="horse_images" type="462c0819:PsiDirectoryNode" />
+              <item name="final" type="462c0819:PsiDirectoryNode" />
             </path>
           </expand>
           <select />
@@ -238,25 +242,25 @@
       <option name="presentableId" value="Default" />
       <updated>1562211281380</updated>
       <workItem from="1562211282530" duration="37792000" />
-      <workItem from="1563080090211" duration="16881000" />
+      <workItem from="1563080090211" duration="22400000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="54673000" />
+    <option name="totallyTimeSpent" value="60192000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="-1367" y="-17" width="1368" height="786" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.2108389" />
+      <window_info active="true" 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 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" />
@@ -327,9 +331,6 @@
         </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$/resources/horse_images/final/DEMON_HORZE_666.png">
       <provider selected="true" editor-type-id="images" />
     </entry>
@@ -339,13 +340,6 @@
     <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$/index.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="210">
-          <caret line="15" column="39" selection-start-line="15" selection-start-column="39" selection-end-line="15" selection-end-column="39" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/audio.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="319">
@@ -353,17 +347,33 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/background.js">
+    <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="126">
-          <caret line="12" column="17" lean-forward="true" selection-start-line="12" selection-start-column="17" selection-end-line="12" selection-end-column="17" />
+        <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="-742">
-          <caret line="30" column="3" lean-forward="true" selection-start-line="30" selection-start-column="3" selection-end-line="30" selection-end-column="3" />
+        <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>

background.js

@@ -5,6 +5,9 @@ let finishLinePosition = -1000;
 const finishLineSpeed = 7;
 let finishLineDrawn = false;
 
+let showWinnerText = true;
+let winnerTextCounter = 0;
+
 function drawRaceBackground(ctx, width, height, horseSize, cyclesRemaining, isMoving){
 
     // Create gradient
@@ -127,6 +130,8 @@ function drawHorseNamesinLane(ctx,horse, lane, horseSize, height) {
     ctx.font = "40px Arial";
 
     ctx.fillText(horse.name, horseSize, height - (lane * (horseSize / 2 )) -20);
+    ctx.fillText( "Created by: " + horse.owner, horseSize * 5, height - (lane * (horseSize / 2 )) -20);
+
 }
 
 function drawResults(ctx, width, height, horseSize, finalPlaces){
@@ -153,4 +158,46 @@ function drawResults(ctx, width, height, horseSize, finalPlaces){
     ctx.fillText(third, horseSize* 2.5, height -(horseSize * 1.5));
     ctx.fillText(fourth,horseSize* 2.5, height - (horseSize));
 
+}
+function drawWinnerCloseUp(ctx, width, height, horseSize, finalPlaces){
+    drawRaceBackground(ctx,width,height,horseSize, 0, false);
+    // draw rectangle
+    ctx.fillStyle = '#dddddd';
+    ctx.fillRect(horseSize*2, height - (.5 * horseSize) , (horseSize *4), - (horseSize * 3));
+
+    ctx.fillStyle = '#9999FF';
+    ctx.fillRect(horseSize*2 + 3, height - (.5 * horseSize) -3  , (horseSize *4) -6, - (horseSize * 3) + 6 );
+
+    ctx.drawImage(finalPlaces[0].image, horseSize * 2.5  , height - (.5 * horseSize) -5 , (horseSize *3) + 10 , - (horseSize * 3) + 10 );
+
+    //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;
+        }
+    }
+
 }

game.js

@@ -6,10 +6,20 @@ let cyclesRemaining = 1000;
 
 
 const horse_array = [
-    {img: "./resources/horse_images/final/stonewall_000.png", name: "Stonewall"},
-    {img: "./resources/horse_images/final/DEMON_HORZE_666.png", name: "DEMON HORZE"},
-    {img: "./resources/horse_images/final/CrotchRocket_93_raw.png", name: "CROTCH ROCKET"},
-    {img: "./resources/horse_images/final/BlackJack_10.png", name: "BlackJack"}
+    {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"},
+
 ];
 
 
@@ -83,9 +93,17 @@ function gameLoop(){
             if (!fanfarePlayedFlag){
                 playFanfare();
                 fanfarePlayedFlag = true;
+                setTimeout(()=>{
+                    gameState = "WinnerCloseUp";
+                }, 7 * 1000);
             }
             CTX.clearRect(0, 0, WIDTH, HEIGHT);
             drawResults(BG_CTX, WIDTH, HEIGHT, horseHeight, finalPlaces);
+            break;
+        case "WinnerCloseUp":
+            drawWinnerCloseUp(BG_CTX, WIDTH, HEIGHT, horseHeight, finalPlaces);
+            break;
+
         default:
             break;
     }
@@ -215,14 +233,38 @@ function runRace(ctx,bg_ctx){
 
 function initHorses() {
     console.log("initHorses");
+
+    const temp_horse_array = [];
+
+    //grab random horses
+    while (temp_horse_array.length < 4) {
+        let validPick = true;
+        // pick an index
+        let pick =  Math.floor(Math.random() * horse_array.length);
+        // check if its taken
+        for (let i =0; i < temp_horse_array.length; i ++){
+            if (temp_horse_array[i].name === horse_array[pick].name){ validPick = false;}
+        }
+        //push to temp array
+        if (validPick){
+            temp_horse_array.push(horse_array[pick]);
+        }
+        console.log(temp_horse_array);
+    }
+
+
+    // build horse game play objects
     for (let i =0; i < 4; i ++ ){
+        console.log(i);
         const horse_image = new Image();
-        horse_image.src = horse_array[i].img; // todo - change to grab random horse
-        const tempName = horse_array[i].name; //
+        horse_image.src = temp_horse_array[i].img;
+        const temphorse = temp_horse_array[i];
+
         horse_image.onload = function() {
             const horse = {
                 image: horse_image,
-                name: tempName,
+                name: temphorse.name,
+                owner: temphorse.owner,
                 x:0,
                 y:0,
                 currentSpeed: null,

index.html

@@ -13,7 +13,7 @@
 <canvas id="gamecanvas"></canvas>
 <canvas id="bgcanvas"></canvas>
 
-<script src="resources/libs/howler.js"></script>
+<script src="resources/libs/howler.js"> </script>
 <script src="audio.js"></script>
 <script src="background.js" ></script>
 <script src="game.js" ></script>