diff --git a/index.html b/index.html index 0e86fbe..1e3386e 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ + + +
+
+
+
+
+
+
+
+
+
diff --git a/styles/game.scss b/styles/game.scss new file mode 100644 index 0000000..bfc11e4 --- /dev/null +++ b/styles/game.scss @@ -0,0 +1,88 @@ +.game { + + display: grid; + + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + + .box { + + width: 10vw; + height: 10vw; + + border: 2px #fff solid; + + box-sizing: border-box; + + cursor: pointer; + } +} + +.game { + + .box { + + &#box-1 { + + border-top: 0px; + border-left: 0px; + } + + &#box-2{ + + border-top: 0px; + } + + &#box-3 { + + border-top: 0px; + border-right: 0px; + } + + &#box-4 { + + border-left: 0px; + } + + &#box-5 { + + } + + &#box-6 { + + border-right: 0px; + } + + &#box-7 { + + border-bottom: 0px; + border-left: 0px; + } + + &#box-8 { + + border-bottom: 0px; + } + + &#box-9 { + + border-bottom: 0px; + border-right: 0px; + } + } +} + +@media (max-width: 900px) { + + .game { + + width: 80vw; + height: 80vw; + + .box { + + width: 100%; + height: 100%; + } + } +} \ No newline at end of file diff --git a/styles/playerSelection.scss b/styles/playerSelection.scss new file mode 100644 index 0000000..0255e03 --- /dev/null +++ b/styles/playerSelection.scss @@ -0,0 +1,162 @@ +.player-selection { + + background-color: #fff; + + height: 33vh; + width: 50vw; + + border-radius: 6px; + + display: flex; + flex-direction: column; + align-items: center; + + box-shadow: 0px 3px 10px #000; + + h1 { + + user-select: none; + } + + form { + + display: flex; + // justify-content: space-around; + width: 100%; + + .player { + + // display: flex; + // flex-direction: column; + + width: 40%; + + input { + + height: 5vh; + box-sizing: content-box; + outline: none; + + font-size: 14pt; + } + + .name-input { + + width: 100%; + } + + .symbol-input{ + + margin-top: 1vh; + width: 5vw; + } + + .symbol-container { + + width: 100%; + + display: flex; + align-items: center; + justify-content: flex-start; + + margin-top: 1vh; + } + + button { + + box-sizing: content-box; + height: 5vh; + } + } + + .player.player-1 { + + padding-left: 10%; + padding-right: 2.5%; + + .symbol-container { + + width: 103%; + + display: flex; + align-items: center; + justify-content: flex-end; + + margin-top: 1vh; + + .symbol-input { + + margin-top: 0px; + margin-left: 1vw; + } + } + } + + .player.player-2 { + + padding-right: 10%; + padding-left: 2.5%; + + .symbol-container { + + .symbol-input { + + margin-top: 0px; + margin-right: 1vw; + } + } + } + } + + button#start { + + width: 50%; + height: 6vh; + + margin-top: 1vh; + + background-color: rgb(166, 255, 106); + color: rgba(0, 0, 0, 0.72); + font-size: 14pt; + + border: none; + + box-shadow: 0px 3px rgb(85, 85, 85); + + transition: 0.3s ease-in-out; + } + + button#start.pressed { + + transition: 0.3s ease-in-out; + + box-shadow: none; + } +} + +.emoji-picker-container { + + background-color: rgba(0, 0, 0, 0.404); + + transition: 0.4s ease-in-out; + opacity: 100%; + + height: 100%; + width: 100%; + + position: absolute; + + display: flex; + justify-content: center; + align-items: center; +} + +.emoji-picker-container.hidden { + + opacity: 0%; + transform: translateY(100vh); + + background-color: rgb(221, 121, 121); + + transition: 0.4s ease-in-out; +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 683f234..bb59f68 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,22 +1,3 @@ -html, body { - height: 100%; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - overflow-y: hidden; -} - -body { - margin: 0; - padding: 0; - background-color: #dd7979; - display: flex; - justify-content: center; - align-items: center; -} - -button { - cursor: pointer; -} - .player-selection { background-color: #fff; height: 33vh; @@ -119,4 +100,75 @@ button { transition: 0.4s ease-in-out; } +.game { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; +} +.game .box { + width: 10vw; + height: 10vw; + border: 2px #fff solid; + box-sizing: border-box; + cursor: pointer; +} + +.game .box#box-1 { + border-top: 0px; + border-left: 0px; +} +.game .box#box-2 { + border-top: 0px; +} +.game .box#box-3 { + border-top: 0px; + border-right: 0px; +} +.game .box#box-4 { + border-left: 0px; +} +.game .box#box-6 { + border-right: 0px; +} +.game .box#box-7 { + border-bottom: 0px; + border-left: 0px; +} +.game .box#box-8 { + border-bottom: 0px; +} +.game .box#box-9 { + border-bottom: 0px; + border-right: 0px; +} + +@media (max-width: 900px) { + .game { + width: 80vw; + height: 80vw; + } + .game .box { + width: 100%; + height: 100%; + } +} +html, body { + height: 100%; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + overflow-y: hidden; +} + +body { + margin: 0; + padding: 0; + background-color: #dd7979; + display: flex; + justify-content: center; + align-items: center; +} + +button { + cursor: pointer; +} + /*# sourceMappingURL=styles.css.map */ diff --git a/styles/styles.css.map b/styles/styles.css.map index 997c042..a85fe51 100644 --- a/styles/styles.css.map +++ b/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EAEG;;AAGH;EAEI;EAEA;;AAEA;EAKI;;AAEA;EAEI;EACA;EACA;EAEA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI;EACA;;AAIR;EAEI;EACA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;;AAKZ;EAEI;EACA;;AAII;EAEI;EACA;;AAMhB;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;;AAIR;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;EACA;EAEA;EAEA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["playerSelection.scss","game.scss","styles.scss"],"names":[],"mappings":"AAAA;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EAEG;;AAGH;EAEI;EAEA;;AAEA;EAKI;;AAEA;EAEI;EACA;EACA;EAEA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI;EACA;;AAIR;EAEI;EACA;;AAEA;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;;AAKZ;EAEI;EACA;;AAII;EAEI;EACA;;AAMhB;EAEI;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;;AAGJ;EAEI;EAEA;;;AAIR;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI;EACA;EAEA;EAEA;;;AChKJ;EAEI;EAEA;EACA;;AAEA;EAEI;EACA;EAEA;EAEA;EAEA;;;AAQA;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAOJ;EAEI;;AAGJ;EAEI;EACA;;AAGJ;EAEI;;AAGJ;EAEI;EACA;;;AAKZ;EAEI;IAEI;IACA;;EAEA;IAEI;IACA;;;ACjFZ;EAEI;EAEA;EAEA;;;AAGJ;EAEI;EACA;EAEA;EAEA;EACA;EACA;;;AAGJ;EAEI","file":"styles.css"} \ No newline at end of file diff --git a/styles/styles.scss b/styles/styles.scss index 3660828..99fce47 100644 --- a/styles/styles.scss +++ b/styles/styles.scss @@ -1,3 +1,6 @@ +@import './playerSelection.scss'; +@import './game.scss'; + html, body { height: 100%; @@ -22,167 +25,4 @@ body { button { cursor: pointer; -} - -.player-selection { - - background-color: #fff; - - height: 33vh; - width: 50vw; - - border-radius: 6px; - - display: flex; - flex-direction: column; - align-items: center; - - box-shadow: 0px 3px 10px #000; - - h1 { - - user-select: none; - } - - form { - - display: flex; - // justify-content: space-around; - width: 100%; - - .player { - - // display: flex; - // flex-direction: column; - - width: 40%; - - input { - - height: 5vh; - box-sizing: content-box; - outline: none; - - font-size: 14pt; - } - - .name-input { - - width: 100%; - } - - .symbol-input{ - - margin-top: 1vh; - width: 5vw; - } - - .symbol-container { - - width: 100%; - - display: flex; - align-items: center; - justify-content: flex-start; - - margin-top: 1vh; - } - - button { - - box-sizing: content-box; - height: 5vh; - } - } - - .player.player-1 { - - padding-left: 10%; - padding-right: 2.5%; - - .symbol-container { - - width: 103%; - - display: flex; - align-items: center; - justify-content: flex-end; - - margin-top: 1vh; - - .symbol-input { - - margin-top: 0px; - margin-left: 1vw; - } - } - } - - .player.player-2 { - - padding-right: 10%; - padding-left: 2.5%; - - .symbol-container { - - .symbol-input { - - margin-top: 0px; - margin-right: 1vw; - } - } - } - } - - button#start { - - width: 50%; - height: 6vh; - - margin-top: 1vh; - - background-color: rgb(166, 255, 106); - color: rgba(0, 0, 0, 0.72); - font-size: 14pt; - - border: none; - - box-shadow: 0px 3px rgb(85, 85, 85); - - transition: 0.3s ease-in-out; - } - - button#start.pressed { - - transition: 0.3s ease-in-out; - - box-shadow: none; - } -} - -.emoji-picker-container { - - background-color: rgba(0, 0, 0, 0.404); - - transition: 0.4s ease-in-out; - opacity: 100%; - - height: 100%; - width: 100%; - - position: absolute; - - display: flex; - justify-content: center; - align-items: center; -} - -.emoji-picker-container.hidden { - - opacity: 0%; - transform: translateY(100vh); - - background-color: rgb(221, 121, 121); - - transition: 0.4s ease-in-out; } \ No newline at end of file