diff --git a/client/css/game.css b/client/css/game.css index 6d4b2c3..39010cf 100644 --- a/client/css/game.css +++ b/client/css/game.css @@ -1,3 +1,41 @@ +#menu { + position: absolute; + top: 50%; + left: 50%; + translate: -50% -50%; +} +#menu h1 { + text-align: center; + font-size: 50px; + margin: 10px; + color: rgb(97, 47, 0); +} +#menu .box { + background: rgb(180, 124, 52); + box-shadow: 0 0 70px rgba(0, 0, 0, 0.7); + padding: 10px 25px; + border-radius: 8px; + display: box; +} +#menu .box input { + display: block; + margin: 15px; + padding: 10px 0px; + font-size: 22px; + width: 250px !important; + margin-left: auto; + margin-right: auto; +} +#menu .box button { + display: block; + margin: 15px; + padding: 10px 20px; + font-size: 22px; + width: 250px; + margin-left: auto; + margin-right: auto; +} + #pieces-area { width: 100%; height: 100%; @@ -66,4 +104,22 @@ } #game #playfield .row:nth-child(odd) .tile:nth-child(odd) { background: black; +} + +@keyframes invalid-move-animation { + 0% { + transform: translateX(0); + } + 25% { + transform: translateX(5px); + } + 50% { + transform: translateX(-5px); + } + 75% { + transform: translateX(5px); + } + 100% { + transform: translateX(0); + } }/*# sourceMappingURL=game.css.map */ \ No newline at end of file diff --git a/client/css/game.css.map b/client/css/game.css.map index ecff297..8f4d60e 100644 --- a/client/css/game.css.map +++ b/client/css/game.css.map @@ -1 +1 @@ -{"version":3,"sources":["game.scss","game.css"],"names":[],"mappings":"AAAA;EAGI,WAAA;EACA,YAAA;EACA,kBAAA;ACDJ;ADGI;EACI,WAAA;EACA,kBAAA;EACA,eAAA;EACA,2BAAA;EACA,qBAAA;EACA,4BAAA;EACA,yBAAA;EACA,8BAAA;EACA,kEAAA;EACA,UAAA;EACA,kBAAA;EAEA,eAAA;ACFR;ADGQ;EACI,qCAAA;EACA,0CAAA;ACDZ;ADIY;EACI,4DAAA;ACFhB;ADIY;EACI,4DAAA;ACFhB;ADOY;EACI,4DAAA;ACLhB;ADOY;EACI,4DAAA;ACLhB;;ADWI;EACI,6BAAA;EACA,aAAA;EACA,wCAAA;EACA,YAAA;EACA,kBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,kBAAA;ACRR;ADSQ;EACI,qBAAA;ACPZ;ADQY;EACI,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;ACNhB;ADQgB;EACI,iBAAA;EACA,qDAAA;ACNpB;ADUgB;EACI,iBAAA;EACA,qDAAA;ACRpB;ADUgB;EACI,iBAAA;ACRpB","file":"game.css"} \ No newline at end of file +{"version":3,"sources":["game.scss","game.css"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,oBAAA;ACCJ;ADAI;EACI,kBAAA;EACA,eAAA;EACA,YAAA;EACA,qBAAA;ACER;ADAI;EACI,6BAAA;EACA,uCAAA;EACA,kBAAA;EACA,kBAAA;EACA,YAAA;ACER;ADDQ;EACI,cAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,uBAAA;EACA,iBAAA;EACA,kBAAA;ACGZ;ADDQ;EACI,cAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;ACGZ;;ADGA;EAGI,WAAA;EACA,YAAA;EACA,kBAAA;ACFJ;ADII;EACI,WAAA;EACA,kBAAA;EACA,eAAA;EACA,2BAAA;EACA,qBAAA;EACA,4BAAA;EACA,yBAAA;EACA,8BAAA;EACA,kEAAA;EACA,UAAA;EACA,kBAAA;EAEA,eAAA;ACHR;ADIQ;EACI,qCAAA;EACA,0CAAA;ACFZ;ADKY;EACI,4DAAA;ACHhB;ADKY;EACI,4DAAA;ACHhB;ADQY;EACI,4DAAA;ACNhB;ADQY;EACI,4DAAA;ACNhB;;ADaI;EACI,6BAAA;EACA,aAAA;EACA,wCAAA;EACA,YAAA;EACA,kBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,kBAAA;ACVR;ADWQ;EACI,qBAAA;ACTZ;ADUY;EACI,kBAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;ACRhB;ADUgB;EACI,iBAAA;EACA,qDAAA;ACRpB;ADYgB;EACI,iBAAA;EACA,qDAAA;ACVpB;ADYgB;EACI,iBAAA;ACVpB;;ADmBA;EACI;IAAK,wBAAA;ECfP;EDgBE;IAAM,0BAAA;ECbR;EDcE;IAAM,2BAAA;ECXR;EDYE;IAAM,0BAAA;ECTR;EDUE;IAAO,wBAAA;ECPT;AACF","file":"game.css"} \ No newline at end of file diff --git a/client/css/game.scss b/client/css/game.scss index 9c86065..6087ecf 100644 --- a/client/css/game.scss +++ b/client/css/game.scss @@ -1,3 +1,42 @@ +#menu{ + position: absolute; + top: 50%; + left: 50%; + translate: -50% -50%; + h1{ + text-align: center; + font-size: 50px; + margin: 10px; + color: rgb(97, 47, 0); + } + .box{ + background: rgb(180, 124, 52); + box-shadow: 0 0 70px rgba(0,0,0,0.7); + padding: 10px 25px; + border-radius: 8px; + display: box; + input{ + display:block; + margin: 15px; + padding: 10px 0px; + font-size: 22px; + width: 250px !important; + margin-left: auto; + margin-right: auto; + } + button{ + display:block; + margin: 15px; + padding: 10px 20px; + font-size: 22px; + width: 250px; + margin-left: auto; + margin-right: auto; + } + + } +} + #pieces-area{ diff --git a/client/css/main.css b/client/css/main.css index c2ded7a..2723bd0 100644 --- a/client/css/main.css +++ b/client/css/main.css @@ -1,8 +1,54 @@ +@font-face { + font-family: pacifico; + src: url("./../resources/fonts/Pacifico-Regular.ttf"); +} +@font-face { + font-family: PoetsenOne; + src: url("./../resources/fonts/PoetsenOne-Regular.ttf"); +} body { + font-family: PoetsenOne; background-color: rgb(223, 201, 172); margin: 0; padding: 0; } +body h1 { + font-family: Pacifico; +} +body input { + font-family: PoetsenOne; + cursor: pointer; + padding: 5px 20px; + font-size: 18px; + border-radius: 5px; + text-align: center; + width: -moz-fit-content; + width: fit-content; + box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.5) inset; + background: rgba(255, 255, 255, 0.3); + border: none; +} +body input:focus { + background: rgba(255, 255, 255, 0.5); + outline: none; +} +body button { + font-family: PoetsenOne; + cursor: pointer; + padding: 5px 20px; + font-size: 18px; + border: none; + border-radius: 5px; + background: linear-gradient(45deg, rgb(204, 150, 34), rgb(236, 199, 119)); + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); + transition: 0.2s; +} +body button:hover { + box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.4); +} +body button:active { + scale: 0.9; +} body #game { position: absolute; top: 50%; diff --git a/client/css/main.css.map b/client/css/main.css.map index 816487a..e80b9ed 100644 --- a/client/css/main.css.map +++ b/client/css/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"AAAA;EACI,oCAAA;EACA,SAAA;EACA,UAAA;ACCJ;ADAI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,oBAAA;ACER","file":"main.css"} \ No newline at end of file +{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"AAAA;EACI,qBAAA;EACA,qDAAA;ACCJ;ADCA;EACI,uBAAA;EACA,uDAAA;ACCJ;ADEA;EACI,uBAAA;EACA,oCAAA;EACA,SAAA;EACA,UAAA;ACAJ;ADCI;EACI,qBAAA;ACCR;ADCI;EACI,uBAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,kBAAA;EACA,kBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,iDAAA;EACA,oCAAA;EACA,YAAA;ACCR;ADAQ;EACI,oCAAA;EACA,aAAA;ACEZ;ADCI;EACI,uBAAA;EACA,eAAA;EACA,iBAAA;EACA,eAAA;EACA,YAAA;EACA,kBAAA;EACA,yEAAA;EACA,2CAAA;EACA,gBAAA;ACCR;ADAQ;EACI,4CAAA;ACEZ;ADAQ;EACI,UAAA;ACEZ;ADCI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,oBAAA;ACCR","file":"main.css"} \ No newline at end of file diff --git a/client/css/main.scss b/client/css/main.scss index 2ffec6f..90685a6 100644 --- a/client/css/main.scss +++ b/client/css/main.scss @@ -1,7 +1,53 @@ +@font-face { + font-family: pacifico; + src: url('./../resources/fonts/Pacifico-Regular.ttf'); +} +@font-face { + font-family: PoetsenOne; + src: url('./../resources/fonts/PoetsenOne-Regular.ttf'); +} + body{ + font-family: PoetsenOne; background-color: rgb(223, 201, 172); margin: 0; padding: 0; + h1{ + font-family: Pacifico; + } + input{ + font-family: PoetsenOne; + cursor: pointer; + padding: 5px 20px; + font-size: 18px; + border-radius: 5px; + text-align: center; + width: fit-content; + box-shadow: 3px 5px 10px rgba(0,0,0,0.5) inset; + background: rgba(255, 255, 255, 0.3); + border: none; + &:focus{ + background: rgba(255, 255, 255, 0.5); + outline: none; + } + } + button{ + font-family: PoetsenOne; + cursor: pointer; + padding: 5px 20px; + font-size: 18px; + border: none; + border-radius: 5px; + background: linear-gradient(45deg,rgb(204, 150, 34), rgb(236, 199, 119)); + box-shadow: 3px 3px 10px rgba(0,0,0,0.4); + transition: 0.2s; + &:hover{ + box-shadow: 5px 10px 10px rgba(0,0,0,0.4); + } + &:active{ + scale: 0.9; + } + } #game{ position: absolute; top: 50%; diff --git a/client/game.html b/client/game.html new file mode 100644 index 0000000..964f1b2 --- /dev/null +++ b/client/game.html @@ -0,0 +1,31 @@ + + +
+ + +