visuals

5 files changed, 225 insertions, 0 deletions

diff --git a/sass/board.scss b/sass/board.scss
new file mode 100755
index 0000000..a34a4fa
--- /dev/null
+++ b/sass/board.scss
@@ -0,0 +1,34 @@
+@import "variables";
+
+#board {
+    background-image: $board_image;
+    background-size: 100%;
+    opacity:0.9;
+
+    margin: 0 auto;
+    padding: $board-border;
+
+    height: $board-size;
+    aspect-ratio: 1;
+}
+
+@media screen and (max-width: $screen-transition-width) {
+    #board {
+        height: $board-size-mob;
+        padding: $board-border-mob;
+    }
+}
+
+table {
+    height: 100%;
+    width: 100%;
+}
+
+table, tr, td {
+    border: 1px solid black;
+    padding: 0;
+    margin: 0;
+    border-collapse: collapse;
+}
+
+
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;
+    }
+}
diff --git a/sass/index.scss b/sass/index.scss
new file mode 100755
index 0000000..fdf4f97
--- /dev/null
+++ b/sass/index.scss
@@ -0,0 +1,14 @@
+@import "board";
+@import "stones";
+@import "head";
+
+body {
+    background-image: $background-image;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    background-position: center top;
+    background-attachment: fixed;
+    background-color: $background-color;
+    margin: 0;
+}
+
diff --git a/sass/stones.scss b/sass/stones.scss
new file mode 100755
index 0000000..65ad970
--- /dev/null
+++ b/sass/stones.scss
@@ -0,0 +1,10 @@
+@import "variables";
+
+.stone {
+    position: absolute;
+    display: block;
+}
+
+.stone img {
+    width:100%;
+}
diff --git a/sass/variables.scss b/sass/variables.scss
new file mode 100755
index 0000000..2e70aeb
--- /dev/null
+++ b/sass/variables.scss
@@ -0,0 +1,38 @@
+// screen //
+$screen-transition-width: 600px;
+
+$head_top_vw: 20vw;
+$head_top_vh: 20vh;
+
+
+// board //
+$board-size: 60vh;
+$board-border: 5vh;
+
+$board-size-mob: 80vw;
+$board-border-mob: 5vw;
+
+
+// colors //
+$background-color: #efd;
+$foreground-color: #000;
+
+
+// images //
+$background-image: url("assets/dismal.jpg");
+$board-image: url("assets/board.jpg");
+
+
+// head //
+$head-margin-top-mob: 20vw;
+
+$head_height: 14vh;
+$label_height: 4vh;
+$label_width: 16vh;
+
+$head_height_mob: 30vw;
+$label_height_mob: 6vw;
+$label_width_mob: 26vw;
+
+$label-margin: 0.6;
+$label-margin-mob: 0.3;