Minor Cricket Field

Author: ronakkothari123

css/dashboard.css

@@ -7,6 +7,7 @@
     --light-red:#F5B7B1;
     --light-green:#A3E4D7;
     --dark-green:#1ABC9C;
+    --green-saturated:#48C9B0;
     --dark-red:#E74C3C;
     --light-gray:#D5DBDB;
     --dark-gray:#95A5A6;
@@ -343,6 +344,32 @@ body{
     filter:invert(1);
 }
 
+#league-row{
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    justify-content:center;
+}
+
+#league-row > div{
+    margin:0 1vw;
+}
+
+#comments{
+    height:40vmin;
+    overflow-y:scroll;
+    padding-right:1vw;
+}
+
+#comments::-webkit-scrollbar-track {
+    background: var(--light-gray);
+}
+
+#comments::-webkit-scrollbar-thumb {
+    background: var(--light-green); 
+    border-radius:0.375vmax;
+}
+
 .comment{
     width:35vmin;
     display:flex;
@@ -352,7 +379,7 @@ body{
     padding:1vw 2vmin;
     border-radius:2vmin;
     background:var(--light-gray);
-    margin-bottom:2vmin;
+    margin:2vmin 0;
 }
 
 .wicket{
@@ -403,4 +430,51 @@ body{
 .comment > div > p{
     margin:0;
     font-size:1.5vmin;
+}
+
+#cricket-field{
+    width:40vmin;
+    height:40vmin;
+    border-radius:21vmin;
+    border:1vmin solid var(--light-gray);
+    box-shadow:0 0 3vmin 0 var(--dark-gray);
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items:center;
+    position:relative;
+    overflow:hidden;
+}
+
+#cricket-field::before{
+    content:'';
+    position:absolute;
+    width:45vmin;
+    height:45vmin;
+    top:-2.5vmin;
+    left:-2.5vmin;
+    background-image:url('../images/patterns/darkpattern.png');
+    background-repeat:repeat;
+    background-size:30px 30px;
+    image-rendering: pixelated;
+    transform:rotate(0deg);
+}
+
+#cricket-inner-green{
+    width:15vmin;
+    height:20vmin;
+    background:rgba(255,255,255,0.25);
+    border:0.75vmin solid var(--light-gray);
+    border-radius:8.25vmin;
+    position:relative;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    justify-content:center;
+}
+
+#cricket-pitch{
+    background:#F5B041;
+    width:3vmin;
+    height:8vmin;
 }

dashboard/index.html

@@ -60,30 +60,14 @@ <h1>T20 World Cup Draft on October 25th, 2021 7:00 A.M.</h1>
         <div id="results">
             <div class="leagues-result result-item">
                 <div id="league-row">
-                    <div id="cricket-pitch"></div>
-                    <div id="comments">
-                        <div class="comment sixer">
-                            <h1>6</h1>
-                            <div>
-                                <h2>Rohit Sharma Hits a 6</h2>
-                                <p>Rohit Sharma hits a Six to bring total to 145</p>
-                            </div>
-                        </div>
-                        <div class="comment">
-                            <h1>4</h1>
-                            <div>
-                                <h2>Rohit Sharma Hits a 4</h2>
-                                <p>Rohit Sharma hits a Four to bring total to 149</p>
-                            </div>
-                        </div>
-                        <div class="comment wicket">
-                            <h1>W</h1>
-                            <div>
-                                <h2>Rohit Sharma c Glenn Maxwell</h2>
-                                <p>Rohit Sharma is out for 149.</p>
-                            </div>
+                    <div id="cricket-field">
+                        <div id="cricket-inner-green">
+                            <div class="cricket-circle"></div>
+                            <div id="cricket-pitch"></div>
+                            <div class="cricket-circle"></div>
                         </div>
                     </div>
+                    <div id="comments"></div>
                 </div>
                 <div id="scorecard"></div>
             </div>

images/logos/fc.png

@@ -21,10 +21,41 @@ function randomProfile(){
     }
     profilePicture.style.background = colors[Math.trunc(Math.random() * colors.length)]
 
-    bannerImage.src = "../images/people/person" + (Math.trunc(Math.random() * 8) + 1) + ".png"
+    bannerImage.src = "../images/people/person" + (Math.trunc(Math.random() * 11) + 1) + ".png"
     console.log(bannerImage.src)
 }
 
+function createComment(score, header, subheader){
+    let newDiv = document.createElement('div');
+
+    if(score == 'w'){
+        newDiv.classList.add('wicket');
+        score = score.toUpperCase();
+    } else if(score == 6){
+        newDiv.classList.add('sixer');
+    }
+
+    newDiv.classList.add('comment');
+
+    let newHeader = document.createElement('h1');
+    newHeader.appendChild(document.createTextNode(score));
+    let childDiv = document.createElement('div');
+
+    let subHeader = document.createElement('h2');
+    let para = document.createElement('p');
+
+    subHeader.appendChild(document.createTextNode(header));
+    para.appendChild(document.createTextNode(subheader));
+
+    childDiv.appendChild(subHeader);
+    childDiv.appendChild(para);
+
+    newDiv.appendChild(newHeader);
+    newDiv.appendChild(childDiv);
+
+    document.getElementById('comments').appendChild(newDiv);
+}
+
 function toggleModal(){
     modalActive = !modalActive;
     if(modalActive){
@@ -130,4 +161,8 @@ function addNews(){
     createNewsStory(4, "https://wallpapercave.com/wp/wp3156823.jpg", 'ipl', 'Chennai Wins IPL', 'IPL CSK x KKR', 9999, 9999);
 }
 
-initialize()
+initialize()
+createComment('1', 'Virat Kohli Get 1 Run', 'Virat Kohli Shuffles things Along')
+createComment(6, 'Rohit Sharma Hits a 6', 'Rohit Sharma Hits a Six with a total of 23')
+createComment(4, 'Rohit Sharma Hits a 4', 'Rohit sharma hits another boundary with a total of 27')
+createComment('w', 'R. Sharma c G. Maxwell', 'Rohit Sharma is out without contributing to his team')