From 7458cbd0cbc1d1ca9fb72f784e027c346032d79c Mon Sep 17 00:00:00 2001
From: Tom Tibs <ttibble90@gmail.com>
Date: Tue, 23 Jul 2019 23:04:54 -0500
Subject: [PATCH] added sound effects and some other stuff kind of at random,
 then pushed directly to master like a dummy

---
 .idea/workspace.xml | 153 +++++++++++++++++++++++++++++++++-----------
 background.js       |  14 +++-
 game.js             |  87 ++++++++++++++++++++-----
 index.html          |   4 ++
 4 files changed, 203 insertions(+), 55 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 27b921d..9e0a4ba 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -3,7 +3,9 @@
   <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/" />
@@ -16,12 +18,21 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="FileEditorManager">
-    <leaf>
+    <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="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 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>
+      </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="1414">
+              <caret line="101" column="52" selection-start-line="101" selection-start-column="52" selection-end-line="101" selection-end-column="52" />
             </state>
           </provider>
         </entry>
@@ -29,17 +40,17 @@
       <file leaf-file-name="main.css" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/main.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="277">
+            <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>
       </file>
-      <file leaf-file-name="game.js" pinned="false" current-in-tab="true">
+      <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="336">
-              <caret line="231" column="42" selection-start-line="231" selection-start-column="42" selection-end-line="231" selection-end-column="42" />
+            <state relative-caret-position="182">
+              <caret line="164" column="2" lean-forward="true" selection-start-line="164" selection-start-column="2" selection-end-line="164" selection-end-column="107" />
             </state>
           </provider>
         </entry>
@@ -64,11 +75,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="154">
-              <caret line="26" column="31" selection-start-line="26" selection-start-column="31" selection-end-line="26" selection-end-column="31" />
+            <state relative-caret-position="252">
+              <caret line="126" column="28" lean-forward="true" selection-start-line="126" selection-start-column="28" selection-end-line="126" selection-end-column="28" />
             </state>
           </provider>
         </entry>
@@ -93,9 +104,28 @@
       <find>remainingdistance</find>
       <find>dra</find>
       <find>horses</find>
+      <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>ctx.</find>
+      <find>drawcountdown</find>
+      <find>inithorses</find>
+      <find>horse_Array</find>
+      <find>line</find>
+      <find>draw horses</find>
     </findStrings>
     <replaceStrings>
       <replace>cyclesRemaining</replace>
+      <replace>const</replace>
     </replaceStrings>
   </component>
   <component name="Git.Settings">
@@ -105,10 +135,11 @@
     <option name="CHANGED_PATHS">
       <list>
         <option value="$PROJECT_DIR$/resources/background.js" />
-        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/main.css" />
-        <option value="$PROJECT_DIR$/background.js" />
+        <option value="$PROJECT_DIR$/index.html" />
+        <option value="$PROJECT_DIR$/audio.js" />
         <option value="$PROJECT_DIR$/game.js" />
+        <option value="$PROJECT_DIR$/background.js" />
       </list>
     </option>
   </component>
@@ -122,9 +153,10 @@
     <packageJsonPaths />
   </component>
   <component name="ProjectFrameBounds" extendedState="6">
-    <option name="y" value="-771" />
-    <option name="width" value="1366" />
-    <option name="height" value="771" />
+    <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">
@@ -139,11 +171,6 @@
               <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>
           </expand>
           <select />
         </subPane>
@@ -192,34 +219,35 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1562211281380</updated>
-      <workItem from="1562211282530" duration="33713000" />
+      <workItem from="1562211282530" duration="37792000" />
+      <workItem from="1563080090211" duration="12879000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="33713000" />
+    <option name="totallyTimeSpent" value="50671000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="0" y="-771" width="1366" height="771" extended-state="6" />
+    <frame x="-1367" y="-17" width="1368" height="786" extended-state="6" />
     <editor active="true" />
     <layout>
       <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" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <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 anchor="bottom" id="Version Control" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
-      <window_info anchor="bottom" id="Terminal" 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 id="Favorites" side_tool="true" />
-      <window_info anchor="bottom" id="Find" order="1" />
+      <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="Inspection" order="5" weight="0.4" />
-      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" 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">
@@ -234,9 +262,49 @@
     </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="277">
+        <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>
@@ -255,22 +323,29 @@
     </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 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$/background.js">
+    <entry file="file://$PROJECT_DIR$/audio.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="154">
-          <caret line="26" column="31" selection-start-line="26" selection-start-column="31" selection-end-line="26" selection-end-column="31" />
+        <state relative-caret-position="1414">
+          <caret line="101" column="52" selection-start-line="101" selection-start-column="52" selection-end-line="101" selection-end-column="52" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/game.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="336">
-          <caret line="231" column="42" selection-start-line="231" selection-start-column="42" selection-end-line="231" selection-end-column="42" />
+        <state relative-caret-position="182">
+          <caret line="164" column="2" lean-forward="true" selection-start-line="164" selection-start-column="2" selection-end-line="164" selection-end-column="107" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/background.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="252">
+          <caret line="126" column="28" lean-forward="true" selection-start-line="126" selection-start-column="28" selection-end-line="126" selection-end-column="28" />
         </state>
       </provider>
     </entry>
diff --git a/background.js b/background.js
index a3feb02..2e7d2fd 100644
--- a/background.js
+++ b/background.js
@@ -98,9 +98,10 @@ function drawRemainingDistance(ctx, width, horseSize, cyclesRemaining){
     ctx.fillText(remainingString, (width / 2) - 150, (horseSize / 2));
 }
 
-function drawCountdown(ctx, width, height, horseSize, seconds){
+function drawCountdown(ctx, width, height, horseSize, seconds, horses){
 
     console.log("draw countdown");
+    console.log(horses);
     drawRaceBackground(ctx,width,height,horseSize, 0, false);
 
     ctx.fillStyle = "#000000";
@@ -108,6 +109,10 @@ function drawCountdown(ctx, width, height, horseSize, seconds){
 
     ctx.fillText(seconds, (width / 2) - 50, (horseSize ));
 
+    for (let i = 0; i < horses.length; i++) {
+        drawHorseNamesinLane(ctx, horses[i], i, horseSize, height);
+    }
+
 }
 
 function drawFinishLine(ctx, horseSize, height){
@@ -116,3 +121,10 @@ function drawFinishLine(ctx, horseSize, height){
     ctx.fillRect(finishLinePosition, height - (2 * horseSize) , 8 , height);
 
 }
+
+function drawHorseNamesinLane(ctx,horse, lane, horseSize, height) {
+    ctx.fillStyle = "#000000";
+    ctx.font = "40px Arial";
+
+    ctx.fillText(horse.name, horseSize, height - (lane * (horseSize / 2 )) -20);
+}
\ No newline at end of file
diff --git a/game.js b/game.js
index 152ec91..ca0c9ce 100644
--- a/game.js
+++ b/game.js
@@ -5,11 +5,11 @@
 let cyclesRemaining = 1000;
 
 
-const horse_image_array = [
-    "./resources/horse_images/final/stonewall_000.png",
-    "./resources/horse_images/final/DEMON_HORZE_666.png",
-    "./resources/horse_images/final/CrotchRocket_93_raw.png",
-    "./resources/horse_images/final/BlackJack_10.png"
+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"}
 ];
 
 
@@ -19,6 +19,8 @@ const BG_CANVAS = document.getElementById("bgcanvas");
 const BG_CTX = BG_CANVAS.getContext("2d");
 const CTX = GAME_CANVAS.getContext("2d");
 
+const COUNTDOWN_START_SECS = 10;
+
 // Size parameters, they will be adjusted to fit the size of the screen
 let WIDTH = GAME_CANVAS.width;
 let HEIGHT = GAME_CANVAS.height;
@@ -33,6 +35,13 @@ const finalPlaces = [];
 let finishLineScan = 0;
 
 
+// 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)) + 200, //between 200 - 300
+];
+
 
 //Start game loop
 window.onload = ( ) => {
@@ -49,8 +58,6 @@ window.onload = ( ) => {
 
 function gameLoop(){
 
-
-
     switch(gameState){
         case "preRace":
             if (horses.length === 4){
@@ -59,7 +66,7 @@ function gameLoop(){
             }
             break;
         case "countdownStart":
-                startCountdown(5,BG_CTX);
+                startCountdown(COUNTDOWN_START_SECS,BG_CTX);
             break;
         case "running":
             screenReset();
@@ -107,11 +114,49 @@ function runRace(ctx,bg_ctx){
 
     updateHorsePositions();
 
-    // horses[3].x = horse_4_X_sway;
-    // horses[2].x = horse_3_X_sway;
-    // horses[1].x = horse_2_X_sway;
-    // horses[0].x = horse_1_X_sway;
-    //
+    checkForSoundEffects(cyclesRemaining);
+
+
+    //draw shadows under horses
+
+    // 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);
@@ -146,6 +191,7 @@ function runRace(ctx,bg_ctx){
        // horses.splice(foundHorseIndex);
         if (finalPlaces.length === 4){
             gameState = "finished";
+            stopGallop();
         }
         finishLineScan -= finishLineSpeed;
     }
@@ -156,10 +202,12 @@ function initHorses() {
     console.log("initHorses");
     for (let i =0; i < 4; i ++ ){
         const horse_image = new Image();
-        horse_image.src = horse_image_array[i]; // todo - change to grab random horse
+        horse_image.src = horse_array[i].img; // todo - change to grab random horse
+        const tempName = horse_array[i].name; //
         horse_image.onload = function() {
             const horse = {
                 image: horse_image,
+                name: tempName,
                 x:0,
                 y:0,
                 currentSpeed: null,
@@ -186,13 +234,15 @@ function screenReset(){
 
 
 function startCountdown(seconds, bg_ctx){
+    playCountdownAudio(seconds);
     if (gameState === "countdownStart" ) {
         gameState = "countdownRunning";
     }
     console.log ("Coundown: " + seconds);
+
     if (seconds > 0) {
         screenReset();
-        drawCountdown(bg_ctx, WIDTH, HEIGHT, horseHeight, seconds);
+        drawCountdown(bg_ctx, WIDTH, HEIGHT, horseHeight, seconds, horses);
         setTimeout (()=>{startCountdown( seconds - 1, bg_ctx)}, 1000);
     }
     else {
@@ -242,6 +292,13 @@ function updateHorsePositions(){
 
 }
 
+function checkForSoundEffects(cycle){
+    for (let i = 0; i < soundEffectTriggers.length; i++) {
+            if (cycle === soundEffectTriggers[i]){
+                playRandomNeigh();
+            }
+    }
+}
 
 swayPatternFunctions = [
     {x:(cycle)=>{ return Math.cos(cycle/3) * 10;}, y:(cycle)=>{return Math.sin(cycle) * 10} },
diff --git a/index.html b/index.html
index 12f8e06..16e7e8e 100644
--- a/index.html
+++ b/index.html
@@ -8,9 +8,13 @@
     <link rel="stylesheet" href="main.css">
 </head>
 <body>
+
+<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>