Merge branch 'develop'

Author: devgianlu

WebContent/cardcast/index.html

@@ -74,7 +74,7 @@ <h3 class="mdc-list-group__subheader">Order by</h3>
 
     <main class="mdc-layout-grid mdc-toolbar-fixed-adjust" id="cardcast-container">
         <div class="mdc-layout-grid__inner list"></div>
-        <h1 class="mdc-typography--display1 message md-dark">No decks found.</h1>
+        <h1 class="mdc-typography--display1 message">No decks found.</h1>
         <div class="pagination">
             <div class="pagination__inner"></div>
         </div>

WebContent/cardcast/index.js

@@ -390,7 +390,7 @@ function addDeckToGame(code) {
         Notifier.error("Failed contacting the server.", data, false, true);
     }).done(function (data) {
         if (data.gid === -1) {
-            Notifier.timeout(Notifier.WARN, "In order to add the deck you have to be the host of the game.");
+            Notifier.timeout(Notifier.WARN, "You have to be in a game.");
         } else {
             $.post("/AjaxServlet", "o=cac&gid=" + data.gid + "&cci=" + code).fail(function (data) {
                 if ("responseJSON" in data) {

WebContent/css/game.css

@@ -1,3 +1,11 @@
+#gameLayout {
+    width: 100%;
+}
+
+#gameLayout > .message {
+    margin-top: 48px;
+}
+
 #drawer > .mdc-drawer__drawer {
     padding: 16px;
     display: flex;
@@ -30,4 +38,34 @@
 #chat > .mdc-text-field {
     width: 100%;
     flex-shrink: 0;
+}
+
+.error::before {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px; /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+
+    content: 'error';
+    vertical-align: middle;
+    padding-right: 8px;
+    color: #D32F2F; /* Red 700 */
 }

WebContent/css/pyx-reloaded.css

@@ -1,6 +1,6 @@
 .message {
     text-align: center;
-    color: var(--mdc-theme-text-secondary-on-light, rgba(0, 0, 0, .54))
+    color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, .54))
 }
 
 .mdc-switch-label {
@@ -19,11 +19,6 @@
     max-height: 60vh;
 }
 
-.mdc-toolbar .mdc-text-field {
-    margin-top: 0 !important;
-    margin-bottom: 16px !important;
-}
-
 /* Hide stuff in toolbar on mobile */
 .mdc-toolbar ._refresh, .mdc-toolbar ._themingDialog {
     display: none;
@@ -53,11 +48,29 @@
     color: var(--mdc-theme-text-primary-on-primary);
 }
 
+.mdc-toolbar .mdc-text-field {
+    margin-top: 0 !important;
+    margin-bottom: 16px !important;
+}
+
 /* Chip in toolbar */
 .mdc-toolbar .mdc-chip-set > .mdc-chip > .mdc-chip__text {
     color: var(--mdc-theme-text-secondary-on-primary);
 }
 
+/* Tabs in toolbar */
+.mdc-toolbar .mdc-tab {
+    color: var(--mdc-theme-text-secondary-on-primary);
+}
+
+.mdc-toolbar .mdc-tab.mdc-tab--active {
+    color: var(--mdc-theme-text-primary-on-primary);
+}
+
+.mdc-toolbar .mdc-tab-bar .mdc-tab-bar__indicator {
+    background-color: var(--mdc-theme-text-primary-on-primary);
+}
+
 main {
     overflow-y: auto;
 }

WebContent/game.html

@@ -7,6 +7,9 @@
     <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css"/>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css"/>
+    <link rel="stylesheet"
+          href="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.min.css"/>
     <link rel="stylesheet" href="/css/pyx-reloaded.css">
     <link rel="stylesheet" href="/css/cards.css">
     <link rel="stylesheet" href="/css/game.css">
@@ -54,6 +57,14 @@ <h3 class="mdc-typography mdc-typography--title">Chat</h3>
                 </div>
             </section>
 
+            <section class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit">
+                <nav id="tabs" class="mdc-tab-bar">
+                    <a class="mdc-tab mdc-tab--active">Game</a>
+                    <a class="mdc-tab">Other stuff</a>
+                    <span class="mdc-tab-bar__indicator"></span>
+                </nav>
+            </section>
+
             <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
                 <button class="material-icons align-icons mdc-toolbar__icon" style="display: none;" id="startGame">
                     done
@@ -65,9 +76,34 @@ <h3 class="mdc-typography mdc-typography--title">Chat</h3>
     </header>
 
     <main class="mdc-toolbar-fixed-adjust" style="display: flex; flex-flow: row">
-        <div id="blackCard"></div>
-        <div id="whiteCards">
-            <div class="list"></div>
+        <div id="gameLayout" style="display: none">
+            <h1 class="message mdc-typography--display1">Game hasn't started yet.</h1>
+            <div id="blackCard"></div>
+            <div id="whiteCards">
+                <div class="list"></div>
+            </div>
+        </div>
+        <div id="otherStuffLayout" class="mdc-layout-grid" style="display: none">
+            <div class="mdc-layout-grid__inner">
+                <div id="spectatorsList" class="mdc-card mdc-layout-grid__cell">
+                    <div class="mdc-card__primary">
+                        <h1 class="mdc-card__title mdc-typography--title">Spectators</h1>
+                    </div>
+                    <section class="mdc-card__supporting-text">
+                        <ul class="mdc-list list mdc-list--non-interactive"></ul>
+                        <h1 class="message mdc-typography--headline">No spectators.</h1>
+                    </section>
+                </div>
+                <div id="suggestedGameOptions" class="mdc-card mdc-layout-grid__cell">
+                    <div class="mdc-card__primary">
+                        <h1 class="mdc-card__title mdc-typography--title">Suggested game options modifications</h1>
+                    </div>
+                    <section class="mdc-card__supporting-text">
+                        <ul class="mdc-list list mdc-list--non-interactive"></ul>
+                        <h1 class="message mdc-typography--headline">No suggested game options.</h1>
+                    </section>
+                </div>
+            </div>
         </div>
     </main>
 </div>
@@ -117,27 +153,54 @@ <h4 class="mdc-typography--subheading1">Draw <span class="_draw"></span></h4>
             </h4>
         </section>
     </div>
+
+    <li id="spectatorTemplate" class="mdc-list-item">
+        <span class="_name"></span>
+    </li>
+
+    <li id="suggestedGameOptionsTemplate" class="mdc-list-item">
+        <span class="material-icons _info" style="margin-right: 8px">info</span>
+        <span class="_suggester" style="flex-grow: 1">{{Suggester}}</span>
+        <button class="mdc-button _accept">Accept</button>
+        <button class="mdc-button _decline">Decline</button>
+    </li>
+
+    <div id="gameOptionsDiffTooltipTemplate">
+        <h1 class="_goal mdc-typography--body1"></h1>
+        <h1 class="_playersLimit mdc-typography--body1"></h1>
+        <h1 class="_spectatorsLimit mdc-typography--body1"></h1>
+        <h1 class="_blanksLimit mdc-typography--body1"></h1>
+        <h1 class="_timeMultiplier mdc-typography--body1"></h1>
+        <h1 class="_winBy mdc-typography--body1"></h1>
+        <h1 class="_password mdc-typography--body1"></h1>
+        <h1 class="_decks mdc-typography--body1"></h1>
+    </div>
 </div>
 
 <script src="//code.jquery.com/jquery-latest.min.js"></script>
 <script src="//unpkg.com/material-components-web@0.30.0/dist/material-components-web.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
 <script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
 <script src="/js/utils.js"></script>
 <script src="/js/bottom_sheet.js"></script>
+<script src="/js/tabs.helper.js"></script>
 <script src="/js/cardcast.helper.js"></script>
 <script src="/js/notifs.helper.js"></script>
 <script src="/js/events.helper.js"></script>
 <script src="/game_options/dialog.js"></script>
 <script src="/js/game.js"></script>
+<script src="/js/game.other_stuff.js"></script>
 <script>
     window.mdc.autoInit();
+    TabsManager.init("tabs", ["gameLayout", "otherStuffLayout"]);
+
     const gameManager = new GameManager(getLastPathSegment());
     if (gameManager.id === null) {
         window.location = "/games/";
     } else {
-        setupGameOptionsDialog($('#gameOptions'), "Game options", false, "Apply", (go) => {
+        setupGameOptionsDialog($('#gameOptions'), "Game options", false, "??", (go) => {
             gameManager.changeGameOptions(go);
         }, (gameOptionsDialog) => {
             loadUI(gameManager, gameOptionsDialog);

WebContent/game_options/dialog.js

@@ -83,15 +83,15 @@ class MDCMultiSelect extends mdc.select.MDCSelect {
 }
 
 class GameOptionsDialog {
-    constructor(id, title, acceptText, accept) {
+    constructor(id, title, acceptText, acceptListener) {
         this._dialog = $('#' + id);
         this.dialog = new mdc.dialog.MDCDialog(this._dialog[0]);
         this.dialog.listen('MDCDialog:accept', () => this._acceptDialog());
 
         this._dialog.find('.mdc-dialog__header__title').text(title);
 
         this._accept = this._dialog.find('.mdc-dialog__footer__button--accept');
-        this._accept.text(acceptText);
+        this.acceptText = acceptText;
 
         this.scoreLimit = new mdc.select.MDCSelect(this._dialog.find('#scoreLimit')[0]);
         this.playersLimit = new mdc.select.MDCSelect(this._dialog.find('#playersLimit')[0]);
@@ -133,7 +133,7 @@ class GameOptionsDialog {
         this._password = this._dialog.find('#gamePassword');
         mdc.textField.MDCTextField.attachTo(this._password.parent()[0]);
 
-        this.acceptListener = accept;
+        this.acceptListener = acceptListener;
 
         /**
          * @param {int} dgo.vL - Spectators limit
@@ -160,11 +160,6 @@ class GameOptionsDialog {
         this.reset();
     }
 
-    set acceptVisible(set) {
-        if (set) this._accept.show();
-        else this._accept.hide();
-    }
-
     /**
      *
      * @param dropdown
@@ -263,6 +258,10 @@ class GameOptionsDialog {
         this.acceptListener(go);
     }
 
+    set acceptText(text) {
+        this._accept.text(text);
+    }
+
     show(reset = false) {
         if (reset) this.reset();
         this.dialog.show();
@@ -494,11 +493,11 @@ class GameOptionsDialog {
     }
 }
 
-function setupGameOptionsDialog(trigger, title, resetBeforeShow = false, acceptText, accept, done = undefined) {
+function setupGameOptionsDialog(trigger, title, resetBeforeShow = false, acceptText, acceptListener, done = undefined) {
     $.get("/game_options/dialog.html").done(function (data) {
         $('body').append($(data));
 
-        const gameOptionsDialog = new GameOptionsDialog('gameOptionsDialog', title, acceptText, accept);
+        const gameOptionsDialog = new GameOptionsDialog('gameOptionsDialog', title, acceptText, acceptListener);
         if (done !== undefined) done(gameOptionsDialog);
         trigger.on('click', () => gameOptionsDialog.show(resetBeforeShow))
     }).fail(function (data) {