Add merge fix

__test__/jasmine/SpecRunner.html

@@ -7,6 +7,8 @@
   <link rel="shortcut icon" type="image/png" href="lib/jasmine-3.3.0/jasmine_favicon.png">
   <link rel="stylesheet" href="lib/jasmine-3.3.0/jasmine.css">
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
+
   <script src="lib/jasmine-3.3.0/jasmine.js"></script>
   <script src="lib/jasmine-3.3.0/jasmine-html.js"></script>
   <script src="lib/jasmine-3.3.0/boot.js"></script>
@@ -18,6 +20,7 @@
   <!-- include spec files here... -->
   <script src="spec/SpecHelper.js"></script>
   <script src="spec/PlayerSpec.js"></script>
+  <script src="spec/helpers/app.js"></script>
 
 </head>
 

css/style.scss

@@ -0,0 +1,174 @@
+$dark-border-color: #014615;
+$border-color: #067326;
+$background-color: rgba(20, 160, 46, 0.5);
+
+body {
+    background-color: $background-color;
+
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.container {
+    position: relative;
+
+    width: 80%;
+
+    // left: 50%;
+    // transform: translateX(-50%);
+
+    background-color: white;
+
+    // temporary
+    @extend %test-border;
+}
+
+.container__game {
+    position: relative;
+    display: inline-block;
+
+    width: 35vw;
+    height: 35vw;
+
+    margin-left: 4px;
+    margin-bottom: 4px;
+
+    padding: 0px;
+    // @extend %test-border;
+}
+
+.container__game__info {
+    position: relative;
+    display: inline-block;
+    width: 37%;
+    height: auto;
+    vertical-align: top;
+    margin-left: 1%;
+    margin-right: 0%;
+    padding-bottom: 2%;
+}
+
+.game__info__player {
+    position: relative;
+    display: inline-flex;
+
+    width: 100%;
+
+    // @extend %test-border;
+}
+
+.game__info__player__name {
+    width: 50%;
+}
+
+.game__info__player__score {
+    width: 50%;
+}
+
+.game__info__playersturn {
+    text-align: center;
+}
+
+.game__info__button__holder {
+    text-align: right;
+    width: 100%;
+}
+
+.game__table {
+    width: 100%;
+    height: 100%;
+
+    margin: 2px;
+
+    background-color: $background-color;
+    border: .5vw solid $border-color;
+}
+
+tr {
+    height: 10%;
+}
+
+td {
+    border: 2px solid $dark-border-color;
+    text-align: center;
+    width: 10%;
+}
+
+.fiche {
+    display: block;
+
+    width: 90%;
+    height: 90%;
+
+    margin: 5%;
+
+    border-radius: 100%;
+}
+
+.fiche__white {
+    background-color: white;
+
+    &-hover {
+        background-color: white;
+        opacity: .6;
+    }
+}
+
+.fiche__black {
+    background-color: black;
+
+    &-hover {
+        background-color: black;
+        opacity: .6;
+    }
+}
+
+#game_table_body tr td div{
+    pointer-events: none;
+}
+
+%test-border {
+    border: 2px solid lightgrey;
+    border-radius: 8px;
+}
+
+@keyframes rollWhite {
+    0% { transform: rotateX(0);}
+    25% { transform: rotateX(100deg); background-color: black;}
+    50% { transform: rotate(0); background-color: white;}
+    75% { transform: rotateX(100deg); background-color: black;}
+    100% { transform: rotateX(0); background-color: white;}
+}
+
+@-webkit-keyframes rollWhite {
+    0% { transform: rotateX(0);}
+    25% { transform: rotateX(100deg); background-color: black;}
+    50% { transform: rotate(0); background-color: white;}
+    75% { transform: rotateX(100deg); background-color: black;}
+    100% { transform: rotateX(0); background-color: white;}
+}
+
+@keyframes rollBlack {
+    0% { transform: rotateX(0);}
+    25% { transform: rotateX(100deg); background-color: white;}
+    50% { transform: rotate(0); background-color: black;}
+    75% { transform: rotateX(100deg); background-color: white;}
+    100% { transform: rotateX(0); background-color: black;}
+}
+
+@-webkit-keyframes rollBlack {
+    0% { transform: rotateX(0);}
+    25% { transform: rotateX(100deg); background-color: white;}
+    50% { transform: rotate(0); background-color: black;}
+    75% { transform: rotateX(100deg); background-color: white;}
+    100% { transform: rotateX(0); background-color: black;}
+}
+
+.fiche__animation-white {
+    -webkit-animation: rollWhite 1.5s, fadInAnimation 1.5s;
+    animation: rollWhite 1.5s, fadInAnimation 1.5s;
+}
+
+.fiche__animation-black {
+    -webkit-animation: rollBlack 2s, fadInAnimation 1.5s;
+    animation: rollBlack 2s, fadInAnimation 1.5s;
+}