fix merge conflicts

README.md

@@ -1,37 +1,4 @@
-## Welcome to GitHub Pages
+## Welcome to development of the fish race
 
-You can use the [editor on GitHub](https://github.com/Juicedd/fish-race/edit/develop/README.md) to maintain and preview the content for your website in Markdown files.
+This is the development repo for the fish race (itisafishrace.xyz)
 
-Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files.
-
-### Markdown
-
-Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
-
-```markdown
-Syntax highlighted code block
-
-# Header 1
-## Header 2
-### Header 3
-
-- Bulleted
-- List
-
-1. Numbered
-2. List
-
-**Bold** and _Italic_ and `Code` text
-
-[Link](url) and ![Image](src)
-```
-
-For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/).
-
-### Jekyll Themes
-
-Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/Juicedd/fish-race/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file.
-
-### Support or Contact
-
-Having trouble with Pages? Check out our [documentation](https://docs.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out.

core.css

@@ -1,109 +1,123 @@
 #header {
-    margin-top: 30px;
-    margin-bottom: 50px;
-  } 
+  margin-top: 30px;
+  margin-bottom: 50px;
+} 
 
-  #water {
-    position: relative;
-    background-image: url('./assets/water/frame_1.png'); 
-
-    clip-path: inset( -100vw -100vw -100vw 0 );
-
-    width: 886px;
-    height: 500px;
-  }
-
-  .image {
-    background-repeat: no-repeat, repeat;
-  }
-
-  #content-container {
-    position: relative;
-    display: flex; 
-    flex-direction: column; 
-    align-items: center;
-  }
+#water {
+  position: relative;
+  background-image: url('./assets/water/frame_1.png'); 
 
-  #race-container {
-    position: relative;
-    display: flex;
-  }
-
-  #count-container {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 2;
-    width:100%;
-    height: 100%;
-  }
-
-  .fish {
-    display: inline-block;
-
-    position: absolute;
-    transition: all 0.6s, left .05s;
-    left: 0;
-    width: 200px;
-    height: 100px;
-
-  }
-
-  #fish1 {
-    top: 3%; 
-  }
+  clip-path: inset( -100vw -100vw -100vw 0 );
 
-  #fish2 {
-    top: 28%; 
-  }
-
-  #fish3 {
-    top: 53%; 
-  }
-
-  #fish4 {
-    top: 78%; 
-  }
-
-  #finish {
-    width: 25px; 
-  }
-
-  .crown {
-    position: absolute; 
-    display: none; 
-  }
-
-  #crown-fish1 {
-    left: 160px; 
-    top: -10px;
-  }
+  width: 886px;
+  height: 500px;
+}
+
+.image {
+  background-repeat: no-repeat, repeat;
+}
+
+#content-container {
+  position: relative;
+  display: flex; 
+  flex-direction: column; 
+  align-items: center;
+}
+
+#who-win-container {
+  position: absolute;
+  display: none;
 
-  #crown-fish2 {
-    left: 115px; 
-    top: -10px;
-  }
-
-  #crown-fish3 {
-    left: 147px; 
-    top: 3px
-  }
-
-  #crown-fish4 {
-    left: 170px;
-  }
+  width: 100%;
+  height: 100%;
+
+  align-items: center;
+  justify-content: center;
+
+  z-index: 2;
+}
+
+#race-container {
+  position: relative;
+  display: flex;
+}
+
+#count-container {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  width:100%;
+  height: 100%;
+}
+
+.fish {
+  display: inline-block;
 
-  #start-button {
-    position: absolute;
-    display: none;
-    top: 45.6%;
-  }
-
-  #fiver {
-    width: 150px;
-  }
-
-  #counter {
-    width: 250px;
-  }
+  position: absolute;
+  transition: all .6s, left .05s;
+  left: 0;
+  width: 200px;
+  height: 100px;
+}
+
+#fish1 {
+  top: 3%; 
+}
+
+#fish2 {
+  top: 28%; 
+}
+
+#fish3 {
+  top: 53%; 
+}
+
+#fish4 {
+  top: 78%; 
+}
+
+#finish {
+  width: 25px; 
+}
+
+.crown {
+  position: absolute; 
+  display: none;
+  width: 15%;
+}
+
+#crown-fish1 {
+  left: 158px; 
+  top: 3px;
+  transform: rotate(10deg);
+}
+
+#crown-fish2 {
+  left: 115px; 
+  top: 6px;
+  transform: rotate(20deg);
+}
+
+#crown-fish3 {
+  left: 148px; 
+  top: 14px;
+  transform: rotate(5deg);
+}
+
+#crown-fish4 {
+  left: 175px;
+  top: 9px;
+  transform: rotate(30deg);
+}
+
+#start-button {
+  position: absolute;
+  display: none;
+  top: 45.6%;
+}
+
+#fiver {
+  width: 150px;
+}

core.js

@@ -2,15 +2,17 @@
 
 const finishLineWidth = 25;
 
-var contentContainer = document.getElementById("content-container");
+const contentContainer = document.getElementById("content-container");
 
-var fish1 = document.getElementById("fish1");
-var fish2 = document.getElementById("fish2");
-var fish3 = document.getElementById("fish3");
-var fish4 = document.getElementById("fish4");
+const whoWinContainer = document.getElementById("who-win-container");
 
-var water = document.getElementById("water");
-var finish = document.getElementById("finish");
+const fish1 = document.getElementById("fish1");
+const fish2 = document.getElementById("fish2");
+const fish3 = document.getElementById("fish3");
+const fish4 = document.getElementById("fish4");
+
+const water = document.getElementById("water");
+const finish = document.getElementById("finish");
 
 const widthContentContainer = 825;
 const heightContentContainer = 645;
@@ -95,6 +97,8 @@ const createFishMovement = (fishElement) => {
                 winnerElement.style.display = 'inline-block';
             }
             fishElement.style.left = position.toString() + 'px';
+
+            //Rotate fish
             if (animate >= animateThreshold) {
                 currentRotation *= -1;
                 fishElement.style.transform = 'rotate(' + currentRotation + 'deg)';
@@ -131,22 +135,30 @@ const clickStart = () => {
 startElement.addEventListener("click", clickStart, false)
 
 // Countdown at visit of the webpage
-var count = 8;
+var count = 11;
 const counterElement = document.getElementById('counter')
 
-// choosemsg
-const msgElement = document.getElementById('choosemsg')
+const hideWhoWin = () => {
+    whoWinContainer.style.display = 'none';
+};
+
+const showWhoWin = () => {
+    whoWinContainer.style.display = 'flex';
+};
 
 setInterval(() => {
-    if ( count == 9 ) {
-
+    if (count === 10) {
+        showWhoWin();
+    } else if ( count == 9 ) {
+        hideWhoWin();
     } else if ( count == 8 ) {
-        msgElement.style.display="block"
+        showWhoWin();
     } else if ( count == 7 ) {
-        msgElement.style.display="none"
+        hideWhoWin();
     } else if ( count == 6 ) {
-        msgElement.style.display="block"
+        showWhoWin();
     } else if ( count == 5 ) {
+        hideWhoWin();
         counterElement.src="./assets/countfish/fish3.png"
     } else if ( count == 4 ) {
         counterElement.src="./assets/countfish/fish2.png"

debug.log

@@ -1,2 +1,3 @@
 [1019/202821.464:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
 [1026/215212.634:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
+[1104/194843.475:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

index.html

@@ -23,6 +23,9 @@
     <div id="content-container">
         <img id="header" class="image" src="./assets/header/frame_1.png">
         <div id="race-container">
+            <div id="who-win-container">
+              <img src="./assets/choose_who_win.png">
+            </div>
             <div id="count-container">
                 <img id="counter">
             </div>