visuals

1 files changed, 129 insertions, 0 deletions

diff --git a/sass/head.scss b/sass/head.scss
new file mode 100644
index 0000000..88b0d3b
--- /dev/null
+++ b/sass/head.scss
@@ -0,0 +1,129 @@
+@import "variables";
+#head {
+    display: block;
+    height: $head_height;
+    margin: 0;
+    padding: 0;
+    overflow:scroll;
+}
+
+@media screen and (max-width: $screen-transition-width) {
+    #head {
+        height: $head_height_mob;
+        margin-top: calc(#{$head_top_vh} - #{$head_top_vw});
+    }
+}
+
+@mixin player-image {
+    position: absolute;
+    display: inline-block;
+    z-index: 1;
+
+    height: $head_height * 0.6;
+    margin: $head_height * 0.2;
+    
+    top: 0;
+}
+
+img.player-image-left {
+    left: calc(50% - #{$board_size / 2 + $board_border});
+    @include player-image;
+}
+
+img.player-image-right {
+    left: calc(50% + #{$board_size / 2 + $board_border - $head_height});
+    @include player-image;
+}
+
+@media screen and (max-width: $screen-transition-width) {
+    @mixin player-image-mob {
+        height: $head_height_mob * 0.4;
+        margin: $head_height_mob * 0.3;
+        top: calc(#{$head_top_vh} - #{$head_top_vw});
+    }
+
+    img.player-image-left {
+        left: calc(50% - #{$board_size_mob / 2 + $board_border_mob + $label_width_mob * 0.3});
+        @include player-image-mob;
+    }
+    
+    img.player-image-right {
+        left: calc(50% + #{$board_size_mob / 2 + $board_border_mob - $head_height_mob + $label_width_mob * 0.3});
+        @include player-image-mob;
+    }
+}
+
+.turn {
+    width: 20vh;
+    height: $label_height;
+
+    margin: 0 auto;
+    margin-top: calc(#{$head_height / 2} - #{$label_height});
+    background-color: black;
+    clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
+}
+
+.turn h2 {
+    font-size: $label_height - 1;
+}
+
+.turn .border {
+    height: $label_height;
+
+    margin: 0 auto;
+    margin-top: 4vh;
+    background-color: black;
+    clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
+}
+
+.turn .inner {
+    height:100%;
+    width: 100%;
+    text-align: center;
+    background-color: $background-color;
+    clip-path: polygon(7% 10%, 93% 10%, 97% 50%, 93% 90%, 7% 90%, 3% 50%);
+}
+
+@mixin player-label {
+    width: $label_width;
+    height: $label_height;
+
+    font-size: 3vh;
+    text-align: center;
+
+    background-color: #000b;
+    color: white;
+    position: absolute;
+    top: calc(#{$head_height / 2 - $label_height / 2});
+}
+
+div.player-label-left {
+    clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 0%);
+    left: calc(50% - #{$board_size / 2 + $board_border - $label_width * $label_margin});
+    @include player-label;
+}
+
+div.player-label-right {
+    clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0% 0%);
+    left: calc(50% + #{$board_size / 2 + $board_border - $label_width * ($label_margin + 1)});
+    @include player-label;
+}
+
+@media screen and (max-width: $screen-transition-width) {
+    @mixin player-label-mob {
+        width: $label_width_mob;
+        height: $label_height_mob;
+        font-size: $label_height_mob - 1;
+
+        top: #{calc(#{$head_top_vh} - #{$head_top_vw} + #{$head_height_mob / 2} - #{$label_height_mob / 2})};
+    }
+    div.player-label-left {
+        left: calc(50% - #{$board_size_mob / 2 + $board_border_mob - $label_width_mob * $label_margin_mob});
+        @include player-label-mob;
+    }
+    
+    div.player-label-right {
+        left: calc(50% + #{$board_size_mob / 2 + $board_border_mob} - #{$label_width_mob * ($label_margin_mob + 1)});
+        @include player-label-mob;
+    }
+}