Bug fix. Tested

Author: ColdForeign

.gitignore

@@ -1,2 +1,3 @@
 yarn.lock
-node_modules/
+node_modules/
+.vscode

package.json

@@ -4,6 +4,7 @@
     "sass": "^1.34.1"
   },
   "scripts": {
-    "node-sass": "sass src/SASS:src/stylesheets"
+    "node-sass": "sass src/SASS:src/stylesheets",
+    "sass": "sass --watch src/SASS:src/stylesheets"
   }
 }

src/SASS/colors.scss

@@ -23,3 +23,7 @@ $red-text: $red-background;
 $blue-background: #3498DB;
 $blue-border: #21618C;
 $blue-text: $blue-background;
+
+$success-primary: #94D34A;
+$success-secondary: #6F9E37;
+$success-transparent: #0014B022;

src/SASS/forms.scss

@@ -32,6 +32,9 @@ $main-shadow: 0 6px 6px 1px $shadow-color;
 }
 
 .line {
+	display: flex;
+	align-self: center;
+	width: 10%;
 	background: linear-gradient(-90deg, #00000000, #000000de, #00000000);
     height: 3px;
     border: 0;
@@ -125,6 +128,15 @@ input:focus {
 	}  
 }
 
+@keyframes add-width { 
+	from { 
+		width: 10%
+	} 
+	to { 
+		width: 100%
+	}  
+}
+
 .container>*:nth-child(even):not(.line) {
 	animation: .7s ease-in-out move-right;
 }
@@ -133,10 +145,20 @@ input:focus {
 	animation: .7s ease-in-out move-left;
 }
 
-.container>*:first-child, .line{
+.container>*:first-child{
 	animation: .7s ease move-down;
 }
 
+.container>.line{
+	animation: .7s ease move-down, .7s ease-in-out add-width .7s;
+	animation-fill-mode: both;
+}
+
+.line{
+	animation: .7s ease-in-out add-width .7s;
+	animation-fill-mode: both;
+}
+
 .container>*:last-child{
 	animation: .7s ease move-up;
 }

src/SASS/game.scss

@@ -79,6 +79,7 @@ $main-shadow: 0 6px 6px 1px $shadow-color;
 
         .after-visibility {
             --after-visibility: visible;
+            --animation-duration: 1.5s;
             --number: 2;
             --color: black;
         }
@@ -88,7 +89,8 @@ $main-shadow: 0 6px 6px 1px $shadow-color;
             margin-left: 0.5em;
             content: '+' counter(number);
             position: absolute;
-            animation: 1.5s ease-in-out counterMove;
+            animation: ease-in-out counterMove;
+            animation-duration: var(--animation-duration);
             visibility: var(--after-visibility);
             color: var(--color);
             font-weight: bold;
@@ -181,6 +183,102 @@ $main-shadow: 0 6px 6px 1px $shadow-color;
     }
 }
 
+.winner-container {
+    position: absolute;
+    display: grid;
+    justify-self: center;
+    align-content: center;
+    justify-items: center;
+    align-self: center;
+    grid-template-rows: 0.1fr 0.2fr 0.2fr 0.2fr 0.1fr;
+    grid-template-columns: 0.5fr 0.5fr;
+    width: 60%;
+    height: 50%;
+    top: 25%;
+    left: 20%;
+    .upline {
+        grid-row: 1;
+        grid-column-start: 1;
+        grid-column-end: 3;
+    }
+
+    .downline {
+        grid-row: 5;
+        grid-column-start: 1;
+        grid-column-end: 3;
+    }
+
+    .upline, .downline {
+        height: 6px;
+        background: linear-gradient(-90deg, #00ff4000, $success-primary, #00ff4000);
+    }
+
+    @keyframes width-left-anim { 
+        from { 
+            width: 10%;
+            left: 45%;
+        } 
+        to { 
+            width: 100%;
+            left: 0%;
+        }  
+    }
+ 
+    .line::before {
+        position: absolute;
+        left: 45%;
+        content: "";
+        display: flex;
+	    align-self: center;
+        justify-self: center;
+	    width: 10%;
+	    background: linear-gradient(-90deg, #00000000, #000000de, #00000000);
+        height: 6px;
+        margin-bottom: -12px;
+        opacity: 50%;
+        animation: .7s ease-in-out width-left-anim .7s;
+	    animation-fill-mode: both;
+    }
+
+    .button-play {
+        grid-row: 4;
+        grid-column: 1;
+    }
+
+    .button-menu {
+        grid-row: 4;
+        grid-column: 2;
+    }
+
+    .button-menu, .button-play {
+        width: 80%;
+    }
+
+    h1 {
+        display: block;
+  	  	text-align: center;
+		text-shadow: 0 0.1rem 0.4rem $shadow-color, 0 0.4rem 0.8rem black, 
+			0 0 0.8rem $shadow-color;
+    }
+
+    #player-box {
+		color: $success-primary;
+        grid-row: 2;
+        grid-column-start: 1;
+        grid-column-end: 3;
+    }
+
+    #wintext-box {
+		color: $success-primary;
+        grid-row: 3;
+        grid-column-start: 1;
+        grid-column-end: 3;
+    }
+}
+
+
+
+
 @media screen and (max-width: 1100px) {
     .game-container {
         grid-template-columns: 25% 50% 25%;

src/index.html

@@ -9,6 +9,7 @@
 	<link rel="stylesheet" href="stylesheets/gamedice.css" />
 	<link rel="stylesheet" href="stylesheets/forms.css" />
 	<link rel="stylesheet" href="stylesheets/game.css" />
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>	
 <body>
     <form id="start-box" class="container">
@@ -31,7 +32,6 @@ <h1>Now rolls the dice</h1>
 			<svg version="1.1" xmlns="//www.w3.org/2000/svg" width="100%" >
 				<text id="turn-text" class="stroke-text"  dominant-baseline="middle"  x="50%" y="50%" >Player1</text>
 			</svg>
-			
 		</div>
 		<div id="first-player" class="control player red" player="1">
 			<h3>Player1</h3>
@@ -115,6 +115,16 @@ <h4>0</h4>
 		</div>
 		<button type="button" class="control button" id="roll-button">Roll Dice</button>
 	</div>
+
+	<div id="winner-box" class="hidden">
+		<hr class="line upline"></hr>
+		<h1 id="wintext-box">WIN</h1>
+		<h1 id="player-box"></h1>
+		<button class="control button button-play" type="button" id="playagain-button">Play again</button>
+		<button class="control button button-menu" type="button" id="tomenu-button">To menu</button>
+		<hr class="line downline"></hr>
+		<!-- winner-container  -->
+	</div>
     <script src="scripts/gamescript.js"></script>
     <script src="scripts/loginscript.js"></script>
     <script src="scripts/classes.js"></script>