Initialize Client repo with predone work

4 files changed, 368 insertions, 0 deletions

diff --git a/styles/client/base.css b/styles/client/base.css
new file mode 100644
index 0000000..cae61f6
--- /dev/null
+++ b/styles/client/base.css
@@ -0,0 +1,112 @@
+* {
+    font-family: 'Montserrat', sans-serif;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+
+    min-width: 100vw;
+    min-height: 100vh;
+
+    display: block;
+
+}
+
+.topbar {
+    position: fixed;
+
+    background-color: white;
+
+    top: 0;
+    left: 0;
+
+    display: flex;
+
+    flex-direction: column;
+
+    width: 100vw;
+    z-index: 1;
+}
+
+.top-buttons {
+    display: flex;
+}
+
+button, input[type="button"] {
+    display: inline-block;
+    border: none;
+    background-color: dodgerblue;
+    padding: 10px;
+    font-size: medium;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+button.top-button {
+    border-radius: 0;
+    background-color: white;
+    flex: 1;
+
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+}
+
+.top-buttons > button:first-child {
+    border-left: none;
+}
+
+.top-buttons > button:last-child {
+    border-right: none;
+}
+
+div.new-game {
+    flex: 1;
+    flex-grow: 1;
+    border-top: 2px solid black;
+}
+
+div.mobile-settings {
+    flex: 1;
+    flex-grow: 1;
+    border-top: 2px solid black;
+}
+
+div.topbar > div.status {
+    height: 5px;
+    flex-basis: auto;
+}
+
+div.stats {
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+}
+
+div.stats > div {
+    flex: 1;
+    display: flex;
+}
+
+div.stats > div > span {
+    flex-basis: content;
+    display: inline-block;
+}
+
+div.stats > div > span:last-child {
+    text-align: right;
+    flex: 1;
+    display: inline-block;
+}
+
+div.game {
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: lightgray 3px 3px 2px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+}
+
+div.game:last-child {
+    margin-bottom: none;
+}
\ No newline at end of file
diff --git a/styles/client/desktop.css b/styles/client/desktop.css
new file mode 100644
index 0000000..46dc83d
--- /dev/null
+++ b/styles/client/desktop.css
@@ -0,0 +1,134 @@
+@media (min-width: 600px) and (min-height: 501px) {
+    body {
+        display: flex;
+    
+        align-items: center;
+        justify-content: center;
+    }
+
+    /*
+        TopBar rules
+    */
+
+    button.top-button {
+        transition-duration: 0.2s;
+    }
+
+    button.top-button:hover {
+        background-color: #ddd;
+    }
+
+    button#newgame:before{
+        content: "Create Game";
+    }
+
+    button#settings {
+        display: none;
+    }
+
+    button#reset:before{
+        content: "Reset Connection";
+    }
+
+    /*
+        Lobby rules
+    */
+    div.lobby {
+        min-width: 70vw;
+        min-height: 70vh;
+    
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+    
+        align-items: center;
+    }
+
+    div.server {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    span.status {
+        box-sizing: border-box;
+        font-size: larger;
+
+        margin-right: 10px;
+        padding: 10px;
+        border-radius: 10px;
+        flex-basis: content;
+    }
+
+    span.addr {
+        font-size: larger;
+        padding: 10px;
+        border-radius: 10px;
+
+        background-color: #ddd;
+
+        flex: 1;
+    }
+
+    div.content {
+        min-width: 70vw;
+        min-height: 70vh;
+    
+        display: flex;
+        flex-direction: row;
+
+        box-sizing: border-box;
+    }
+
+    div.info {
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+
+        flex: 1;
+
+        margin-left: 10px;
+
+        box-sizing: border-box;
+    }
+
+    div.games {
+        box-sizing: border-box;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 10px;
+        border-radius: 10px;
+        background-color: #ddd;
+        flex: 4;
+
+        border: 5px solid #ddd;
+    }
+
+    div.stats, div.settings {
+        border-radius: 10px;
+        background-color: #ddd;
+
+        box-sizing: border-box;
+
+        flex: 1;
+
+        height: auto;
+        width: 100%;
+
+        text-align: left;
+    }
+
+    div.settings {
+        margin-top: 10px;
+    }
+
+    div.game {
+        height: 20%;
+    }
+
+    /*
+        Table rules
+    */
+}
diff --git a/styles/client/mobile.css b/styles/client/mobile.css
new file mode 100644
index 0000000..cea233d
--- /dev/null
+++ b/styles/client/mobile.css
@@ -0,0 +1,81 @@
+@media (max-width: 599px), (max-height: 500px) {
+    /*
+        Hide stuff
+    */
+    div.server {
+        display: none;
+    }
+
+    div.info {
+        display: none;
+    }
+
+    /*
+        TopBar for mobile
+    */
+
+    div.topbar > div.status {
+        height: 10px;
+    }
+
+    div.top-buttons {
+        height: 50px;
+    }
+
+    button.top-button {
+        padding: 5px;
+    }
+
+    button#reset:before, button#newgame:before, button#settings:before {
+        font-family: "IcoFont";
+        font-size: xx-large;
+    }
+    
+    button#newgame:before{
+        content: "\efc2";
+    }
+
+    button#settings {
+        display: inline-block;
+    }
+
+    button#settings:before {
+        content: "\ef3a";
+    }
+
+    button#reset:before{
+        content: "\efd1";
+    }
+
+    /*
+        Mobile lobby
+    */
+
+    div.lobby {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+
+    div.content {
+        margin-top: 60px;
+        box-sizing: border-box;
+        flex: 1;
+    }
+
+    div.games {
+        height: 100%;
+        width: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        background-color: #ddd;
+        padding: 5px;
+        box-sizing: border-box;
+
+    }
+
+    div.game {
+        height: 12.5%;
+    }
+}
diff --git a/styles/client/tablet.css b/styles/client/tablet.css
new file mode 100644
index 0000000..37750f8
--- /dev/null
+++ b/styles/client/tablet.css
@@ -0,0 +1,41 @@
+@media (min-width: 600px) and (orientation: portrait) {
+    body {
+        display: flex;
+    
+        align-items: center;
+        justify-content: center;
+    }
+
+    div.lobby {
+        max-width: 500px;
+    
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+    
+        align-items: center;
+    }
+
+    div.content {
+        min-width: 70vw;
+        min-height: 70vh;
+    
+        display: flex;
+        flex-direction: column;
+    }
+
+    div.info {
+        flex-direction: row;
+        margin-left: 0px;
+        margin-top: 10px;
+    }
+
+    div.settings, div.stats {
+        width: auto;
+    }
+
+    div.settings {
+        margin-top: 0px;
+        margin-left: 10px;
+    }
+}