From 95c959a1d0cd5ce8d5746ee13e37c04cc9557c70 Mon Sep 17 00:00:00 2001
From: Tom Tibs <ttibble90@gmail.com>
Date: Sun, 7 Jul 2019 23:14:02 -0500
Subject: [PATCH] added countdown and finishline, still need to add variety in
 X movement, intro and finish screen

---
 .idea/vcs.xml       |   6 ++
 .idea/workspace.xml | 109 +++++++++++++------------------
 background.js       |  69 ++++++++++++++++----
 game.js             | 152 +++++++++++++++++++++++++++++---------------
 4 files changed, 207 insertions(+), 129 deletions(-)
 create mode 100644 .idea/vcs.xml

diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index e13f83c..01167b1 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,26 +2,9 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="">
-      <change afterPath="$PROJECT_DIR$/.idea/HorseRaceGame.iml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/misc.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/modules.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/background.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/game.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/main.css" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/final/CrotchRocket_93_raw.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/final/DEMON_HORZE_666.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/gimp_file/BlackJack_10.xcf" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/gimp_file/CrotchRocket_93_raw.xcf" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/gimp_file/DEMON_HORZE_666.xcf" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/gimp_file/stonewall_000_raw.xcf" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/uncropped/BlackJack_10.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/uncropped/CrotchRocket_93_raw.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/uncropped/DEMON_HORZE_666.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/horse_images/uncropped/stonewall_000_raw.jpg" afterDir="false" />
+      <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" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -53,11 +36,11 @@
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="game.js" pinned="false" current-in-tab="false">
+      <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="-1218">
-              <caret line="36" column="70" selection-start-line="36" selection-start-column="70" selection-end-line="36" selection-end-column="70" />
+            <state relative-caret-position="350">
+              <caret line="117" column="46" selection-start-line="117" selection-start-column="46" selection-end-line="117" selection-end-column="46" />
             </state>
           </provider>
         </entry>
@@ -72,7 +55,7 @@
           <provider selected="true" editor-type-id="images" />
         </entry>
       </file>
-      <file leaf-file-name="stonewall_000.png" pinned="false" current-in-tab="true">
+      <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>
@@ -85,8 +68,8 @@
       <file leaf-file-name="background.js" 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="333">
-              <caret line="70" column="19" selection-start-line="70" selection-start-column="19" selection-end-line="70" selection-end-column="19" />
+            <state relative-caret-position="364">
+              <caret line="26" column="31" selection-start-line="26" selection-start-column="31" selection-end-line="26" selection-end-column="31" />
             </state>
           </provider>
         </entry>
@@ -104,7 +87,16 @@
     <findStrings>
       <find>scree</find>
       <find>console.log</find>
+      <find>gameloo</find>
+      <find>drawcoun</find>
+      <find>screensizead</find>
+      <find>drawrace</find>
+      <find>remainingdistance</find>
+      <find>dra</find>
     </findStrings>
+    <replaceStrings>
+      <replace>cyclesRemaining</replace>
+    </replaceStrings>
   </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -130,7 +122,6 @@
     <packageJsonPaths />
   </component>
   <component name="ProjectFrameBounds" extendedState="6">
-    <option name="x" value="-1366" />
     <option name="y" value="-771" />
     <option name="width" value="1366" />
     <option name="height" value="771" />
@@ -153,19 +144,6 @@
               <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>
@@ -214,24 +192,25 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1562211281380</updated>
-      <workItem from="1562211282530" duration="17564000" />
+      <workItem from="1562211282530" duration="29769000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="17564000" />
+    <option name="totallyTimeSpent" value="29769000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="-771" width="1366" height="771" 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" show_stripe_button="false" />
       <window_info anchor="bottom" id="Event Log" side_tool="true" />
       <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 active="true" anchor="bottom" id="Terminal" visible="true" weight="0.32882884" />
+      <window_info anchor="bottom" id="Terminal" visible="true" weight="0.32882884" />
       <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" />
@@ -255,13 +234,6 @@
     </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">
@@ -269,20 +241,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/background.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="333">
-          <caret line="70" column="19" selection-start-line="70" selection-start-column="19" selection-end-line="70" selection-end-column="19" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/game.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-1218">
-          <caret line="36" column="70" selection-start-line="36" selection-start-column="70" selection-end-line="36" selection-end-column="70" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png">
       <provider selected="true" editor-type-id="images" />
     </entry>
@@ -295,5 +253,26 @@
     <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="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$/background.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="364">
+          <caret line="26" column="31" selection-start-line="26" selection-start-column="31" selection-end-line="26" selection-end-column="31" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/game.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="350">
+          <caret line="117" column="46" selection-start-line="117" selection-start-column="46" selection-end-line="117" selection-end-column="46" />
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>
\ No newline at end of file
diff --git a/background.js b/background.js
index ab88f05..a3feb02 100644
--- a/background.js
+++ b/background.js
@@ -1,9 +1,11 @@
 
 const fencePostGap = 200;
 let fenceOffset = fencePostGap;
+let finishLinePosition = -1000;
+const finishLineSpeed = 7;
+let finishLineDrawn = false;
 
-
-function drawRaceBackground(ctx, width, height, horseSize){
+function drawRaceBackground(ctx, width, height, horseSize, cyclesRemaining, isMoving){
 
     // Create gradient
     const grd = ctx.createRadialGradient( width /2, height/2, 0.000, width/2, height/2, width/2);
@@ -16,20 +18,34 @@ function drawRaceBackground(ctx, width, height, horseSize){
     ctx.fillStyle = grd;
     ctx.fillRect(0, 0, width, height);
 
-
+    // Draw Track
     ctx.fillStyle = '#CD853F';
     ctx.fillRect(0, height - (2 * horseSize) , width, height);
+
+    // Draw Distance left, or draw finishline
+    if (isMoving) {
+        if (cyclesRemaining > 0) {
+            drawRemainingDistance(ctx, width, horseSize, cyclesRemaining);
+        }
+        else {
+            if (!finishLineDrawn) {
+                finishLineDrawn = true;
+                finishLinePosition = width;
+            }
+            drawFinishLine(ctx, horseSize, height);
+            finishLinePosition -= finishLineSpeed;
+        }
+    }
+
+    // Draw grass
     ctx.fillStyle = '#32CD32';
     ctx.fillRect(0, height - (2.4 * horseSize) , width, horseSize/2);
 
-    const fenceline = ( height - (2 * horseSize));
-
-    drawGuides(ctx, width, height, horseSize, fenceline);
-    drawFence(ctx, width, fenceline, horseSize );
-
+    drawGuides(ctx, width, height, horseSize);
+    drawFence(ctx, width, ( height - (2 * horseSize)) , horseSize, isMoving);
 }
 
-function drawGuides(ctx, width, height, horseSize, fenceline){
+function drawGuides(ctx, width, height, horseSize){
 
     ctx.fillStyle = "#000000";
     ctx.beginPath();
@@ -49,7 +65,7 @@ function drawGuides(ctx, width, height, horseSize, fenceline){
 
 }
 
-function drawFence(ctx, width, fenceline, horseSize) {
+function drawFence(ctx, width, fenceline, horseSize, isMoving) {
 
     ctx.fillStyle = '#322e1b';
 
@@ -68,6 +84,35 @@ function drawFence(ctx, width, fenceline, horseSize) {
     ctx.lineTo(width, postTop);
     ctx.stroke();
 
-    fenceOffset -=5;
+    if(isMoving){
+        fenceOffset -=5;
+    }
     if (fenceOffset < 0) { fenceOffset = fencePostGap};
-}
\ No newline at end of file
+}
+
+
+function drawRemainingDistance(ctx, width, horseSize, cyclesRemaining){
+    const remainingString = (cyclesRemaining /10).toFixed(1) + " Yards Remaining";
+    ctx.fillStyle = "#000000";
+    ctx.font = "30px Arial";
+    ctx.fillText(remainingString, (width / 2) - 150, (horseSize / 2));
+}
+
+function drawCountdown(ctx, width, height, horseSize, seconds){
+
+    console.log("draw countdown");
+    drawRaceBackground(ctx,width,height,horseSize, 0, false);
+
+    ctx.fillStyle = "#000000";
+    ctx.font = "120px Arial";
+
+    ctx.fillText(seconds, (width / 2) - 50, (horseSize ));
+
+}
+
+function drawFinishLine(ctx, horseSize, height){
+
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fillRect(finishLinePosition, height - (2 * horseSize) , 8 , height);
+
+}
diff --git a/game.js b/game.js
index 1642fe7..11e5fda 100644
--- a/game.js
+++ b/game.js
@@ -2,16 +2,9 @@
  * Created by tomdt on 6/23/2017.
  */
 
+let cyclesRemaining = 1000;
 
 
-
-const spriteWidth = 20;
-const spriteHeight = 20;
-
-const yMoveLimit = 400;
-
-let framecount = 0;
-
 const horse_image_array = [
     "./resources/horse_images/final/stonewall_000.png",
     "./resources/horse_images/final/DEMON_HORZE_666.png",
@@ -34,8 +27,11 @@ let horseWidth = WIDTH / 8;
 let horseHeight = WIDTH / 8;
 
 // state tracking
-const gameState = "running";  // this should probably be an enum later
+let gameState = "preRace";  // this should probably be an enum later
 const horses = [];
+const finalPlaces = [];
+let finishLineScan = 0;
+
 
 
 //Start game loop
@@ -45,16 +41,32 @@ window.onload = ( ) => {
 
     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
     setInterval(gameLoop, 20); //  a touch <60 FPS
 
 };
 
 function gameLoop(){
-    screenSizeAdjust();
 
-    //
+
+
     switch(gameState){
+        case "preRace":
+            if (horses.length === 4){
+                gameState = 'countdownStart';
+                console.log ("Horses loaded, transitioning to countdown");
+            }
+            break;
+        case "countdownStart":
+                startCountdown(5,BG_CTX);
+            break;
         case "running":
+            screenReset();
+            runRace(CTX,BG_CTX);
+            break;
+        case "finishing":
+            screenReset();
             runRace(CTX,BG_CTX);
             break;
         default:
@@ -63,39 +75,77 @@ function gameLoop(){
 }
 
 function runRace(ctx,bg_ctx){
-    framecount ++;
+
+    cyclesRemaining --;
 
     //handle race background
-    drawRaceBackground(bg_ctx, WIDTH, HEIGHT, horseHeight);
+    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 horse_1_sway = Math.sin(framecount) * 10;
-    const horse_1_X_sway = Math.cos(framecount/3) * 10;
+    const horse_1_sway = Math.sin(cyclesRemaining) * 10;
+    const horse_1_X_sway = Math.cos(cyclesRemaining/3) * 10;
 
     const lane_2_height = HEIGHT - (horseHeight * 1.75);
-    const horse_2_sway = Math.cos(framecount) * 10;
-    const horse_2_X_sway = Math.sin(framecount/3) * 10;
+    const horse_2_sway = Math.cos(cyclesRemaining) * 10;
+    const horse_2_X_sway = Math.sin(cyclesRemaining/3) * 10;
 
     const lane_3_height = HEIGHT - (horseHeight * 2.25);
-    const horse_3_sway = Math.sin(framecount/2) * 10;
-    const horse_3_X_sway = Math.cos(framecount/4) * 10;
+    const horse_3_sway = Math.sin(cyclesRemaining/2) * 10;
+    const horse_3_X_sway = Math.cos(cyclesRemaining/4) * 10;
 
     const lane_4_height = HEIGHT - (horseHeight * 2.75);
-    const horse_4_sway = Math.cos(framecount/2) * 10;
-    const horse_4_X_sway = Math.sin(framecount/4) * 10;
+    const horse_4_sway = Math.cos(cyclesRemaining/2) * 10;
+    const horse_4_X_sway = Math.sin(cyclesRemaining/4) * 10;
 
-    if (horses.length > 3){
-     //   console.log("Horse 0 at x: "+ x + "  y: "+ y);
-        ctx.drawImage(horses[3].image, horse_4_X_sway , (lane_4_height + horse_4_sway) , horseWidth, horseHeight);
-        ctx.drawImage(horses[2].image, horse_3_X_sway , (lane_3_height + horse_3_sway) , horseWidth, horseHeight);
-        ctx.drawImage(horses[1].image, horse_2_X_sway , (lane_2_height + horse_2_sway) , horseWidth, horseHeight);
-        ctx.drawImage(horses[0].image, horse_1_X_sway , (lane_1_height + horse_1_sway) , horseWidth, horseHeight);
+
+    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;
+
+
+    // 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'){
+            console.log("checking for winners now");
+            finishLineScan = WIDTH - horseWidth;
+            gameState = "finishing";
+        }
+
+        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){
+              if (!foundHorseIndex || horses[foundHorseIndex].x < horses[i].x) {
+                  foundHorseIndex = i;
+              }
+            }
+        }
+        if(foundHorseIndex != null){
+            finalPlaces.push(horses[foundHorseIndex]);
+            horses[foundHorseIndex].place = 1;
+            console.log("Horse Finished - " + foundHorseIndex);
+        }
+       // horses.splice(foundHorseIndex);
+        if (finalPlaces.length === 4){
+            gameState = "finished";
+        }
+        finishLineScan -= finishLineSpeed;
     }
 }
 
@@ -107,38 +157,36 @@ function initHorses() {
         horse_image.src = horse_image_array[i]; // todo - change to grab random horse
         horse_image.onload = function() {
             const horse = {
-                image: horse_image
+                image: horse_image,
+                x:0,
+                y:0,
+                place: null
                 // todo - other horse things.
-            }
+            };
             horses.push(horse);
-            console.log("horseImagePushed");
-            console.log(horses[0]);
         }
     }
 
 }
 
-
-function screenSizeAdjust(){
-    HEIGHT = GAME_CANVAS.height = BG_CANVAS.height = window.innerHeight;
-    WIDTH = GAME_CANVAS.width = BG_CANVAS.width = window.innerWidth;
-
-    horseWidth = horseHeight = WIDTH / 8;
+function screenReset(){
+        HEIGHT = GAME_CANVAS.height = BG_CANVAS.height = window.innerHeight;
+        WIDTH = GAME_CANVAS.width = BG_CANVAS.width = window.innerWidth;
+        horseWidth = horseHeight = WIDTH / 8;
 }
 
 
-
-function drawPlayer(ctx){
-    let xStart = xPosition;
-    let yStart = yPosition + spriteHeight;
-    ctx.fillStyle = "red";
-    ctx.beginPath();
-    ctx.moveTo(xStart,yStart); // bottom left corner
-    ctx.lineTo(xStart + (spriteWidth/2), yPosition);
-    ctx.lineTo(xStart + spriteWidth, yStart);
-    ctx.lineTo(xStart +(spriteWidth/2), yPosition +(spriteHeight/2));
-    ctx.lineTo(xStart,yStart);
-    ctx.fill();
-
-}
-
+function startCountdown(seconds, bg_ctx){
+    if (gameState === "countdownStart" ) {
+        gameState = "countdownRunning";
+    }
+    console.log ("Coundown: " + seconds);
+    if (seconds > 0) {
+        screenReset();
+        drawCountdown(bg_ctx, WIDTH, HEIGHT, horseHeight, seconds);
+        setTimeout (()=>{startCountdown( seconds - 1, bg_ctx)}, 1000);
+    }
+    else {
+        gameState = "running";
+    }
+}
\ No newline at end of file