Merge pull request #10 from radek2s/mobile_view

Mobile view

Author: radek2s

karcioszki-ui/src/app/layout/game/game.component.html

@@ -5,7 +5,7 @@
         </button>
         <span id="room">Pokój numer: {{gameSession.id}}</span>
     </div>
-    <div class="flex-container">
+    <div id="card-package" class="flex-container">
         <span>Zestaw kart: {{gameSession.gameCardPackage.packageName}}</span>
     </div>
 </mat-toolbar>

karcioszki-ui/src/app/layout/game/game.component.scss

@@ -114,6 +114,36 @@ $active: rgb(59, 138, 59);
 
 }
 
+// tablet resolution //
+@media screen and (max-width: 768px) {
+  #card-package {
+    display: none;
+  }
+  #cards {
+    padding: 0 15px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    button {
+      font-size: 0.8rem;
+      margin: 5%;
+      width: 100%;
+      padding: 2px;
+    }
+  }
+}
+
+// phone resolution //
+@media screen and (max-width: 425px) {
+  #cards {
+    padding: 0;
+    button {
+      font-size: 0.6rem;
+      margin: 2%;
+      flex-basis: auto;
+    }
+  }
+}
 
 .fill-remaining-space {
     flex: 1 1 auto;

karcioszki-ui/src/app/services/WebSocketAPI.ts

@@ -3,7 +3,9 @@ import * as SockJS from 'sockjs-client';
 
 export class WebSocket {
 
-    private WS_END_POINT: String = 'http://localhost:8080/karcioszki-ws';
+    private development: boolean = true;
+    private WS_END_POINT_PRODUCTION: String = window.location.href;
+    private WS_END_POINT_DEVELOPMNET: String = 'http://localhost:8080/karcioszki-ws';
     private component: any;
     private destinationTopic: string;
     private stompClient: any;    
@@ -32,7 +34,13 @@ export class WebSocket {
     }
 
     private _connect(): void {
-        let ws = new SockJS(this.WS_END_POINT);
+        let ws;
+        if(this.development) {
+            ws = new SockJS(this.WS_END_POINT_DEVELOPMNET);
+        } else {
+            let address = this.WS_END_POINT_PRODUCTION.split("/")
+            ws = new SockJS(`${address[0]}//${address[2]}/karcioszki-ws`);
+        }
         this.stompClient = Stomp.over(ws);
         const _this = this;
         _this.stompClient.connect({}, function(frame) {

src/main/resources/application.properties

@@ -1,4 +1,9 @@
 spring.jpa.hibernate.ddl-auto=update
+#Development
+server.address=localhost
+#Production
+#server.address=0.0.0.0
+server.port=8080
 
 ### MySQL Database configuration:
 #spring.datasource.url=jdbc:mysql://localhost:3306/tajniacy_dev?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC