Added play and scoring

hmphus · Jul 9, 2021 · a5cfd4b · a5cfd4b
1 parent 19ccb2f
commit a5cfd4b
Show file tree

Hide file tree

Showing 4 changed files with 254 additions and 43 deletions.
diff --git a/Resources/sg/ak_spades_hud.html b/Resources/sg/ak_spades_hud.html
@@ -48,7 +48,22 @@
 </div>
 </div>
 </div>
-<div class="panel" data-id="score"></div>
+<div class="panel" data-id="score">
+<div class="section" data-team="1">
+<div class="players"><span></span></div>
+<div class="score">
+<div><span>Points</span><span data-id="points"></span></div>
+<div><span>Bags</span><span data-id="bags"></span></div>
+</div>
+</div>
+<div class="section" data-team="2">
+<div class="players"><span></span></div>
+<div class="score">
+<div><span>Points</span><span data-id="points"></span></div>
+<div><span>Bags</span><span data-id="bags"></span></div>
+</div>
+</div>
+</div>
 <div class="panel" data-id="messages"><div class="messages"></div></div>
 <div class="panel" data-id="tricks">
 <div class="players">
@@ -65,9 +80,9 @@
 <div class="table" data-player="1">
 <div class="title">My Hand</div>
 <div class="cardset" data-id="hand" data-deck="std"></div>
-<div class="message"></div>
+<div class="message"><span></span></div>
 <div class="player"></div>
-<div class="turn" data-visible="1"></div>
+<div class="turn"></div>
 <div class="cardset" data-id="played1" data-deck="std"></div>
 <div class="stats">
 <div><span>Bid:</span><span data-id="bid">--</span></div>

diff --git a/Resources/sg/hud.js b/Resources/sg/hud.js
@@ -35,11 +35,7 @@ class Channel {
     if (xmlAnswer.getElementsByTagName('parsererror')[0] != undefined) {
       console.log(`${self.name} had an error during parsing: ${text}`);
     }
-    for (let listener of There.data.listeners) {
-      if (listener.onData != undefined) {
-        listener.onData(self.name, self.data);
-      }
-    }
+    self.notify();
   }
 
   parse(xml) {
@@ -64,6 +60,15 @@ class Channel {
     }
     return data;
   }
+
+  notify() {
+    let self = this;
+    for (let listener of There.data.listeners) {
+      if (listener.onData != undefined) {
+        listener.onData(self.name, self.data);
+      }
+    }
+  }
 }
 
 class Background {
@@ -88,6 +93,32 @@ class Background {
   }
 }
 
+class EllipsisText {
+  constructor(selector) {
+    let self = this;
+    self.element = $(selector);
+    self.text = null;
+  }
+
+  get value() {
+    let self = this;
+    return self.text ?? '';
+  }
+
+  set value(text) {
+    let self = this;
+    if (self.text == text) {
+      return;
+    }
+    self.text = text;
+    $(self.element).text(text);
+    while(text.length > 0 && $(self.element).height() > $(self.element).parent().height()) {
+      text = text.substr(0, text.length - 1).trimEnd();
+      $(self.element).text(`${text}...`);
+    }
+  }
+}
+
 class Messages {
   constructor() {
     let self = this;
@@ -98,7 +129,7 @@ class Messages {
     self.timestamp = null;
     self.fastTimeout = 2000;
     self.slowTimeout = 5000;
-    self.messageElement = $('.message');
+    self.message = new EllipsisText('.message span');
     self.messagesElement = $('.messages');
     There.data.listeners.push(self);
   }
@@ -136,7 +167,7 @@ class Messages {
         return;
       }
       self.lastId = message.id;
-      $(self.messageElement).text(message.text);
+      self.message.value = message.text;
       self.updateHistory(`** ${message.text}`);
       self.timestamp = Date.now();
       self.timer = setTimeout(function() {

diff --git a/Resources/sg/hud_spades.css b/Resources/sg/hud_spades.css
@@ -57,6 +57,61 @@
   justify-content:space-around;
 }
 
+.left .panel[data-id="score"] .section {
+  position:absolute;
+  top:5px;
+  width:96px;
+  height:50px;
+  border:1px solid #000;
+  font-size:0px;
+}
+
+.left .panel[data-id="score"] .section[data-team="1"] {
+  left:5px;
+}
+
+.left .panel[data-id="score"] .section[data-team="2"] {
+  right:5px;
+  background-color:rgba(0, 0, 0, 0.15);
+}
+
+.left .panel[data-id="score"] .section .players {
+  position:absolute;
+  top:0px;
+  width:100%;
+  height:24px;
+  line-height:12px;
+  font-size:11px;
+  text-align:center;
+  color:#fff;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.left .panel[data-id="score"] .section .score {
+  position:absolute;
+  bottom:0px;
+  width:100%;
+  height:24px;
+  line-height:12px;
+  font-size:11px;
+  text-align:center;
+  color:#fff;
+  display:flex;
+  flex-direction:row;
+  justify-content:space-around;
+}
+
+.left .panel[data-id="score"] .section .score div {
+  display:inline-block;
+  width:50%;
+}
+
+.left .panel[data-id="score"] .section .score div span {
+  display:block;
+}
+
 .left .panel[data-id="tricks"] .players .player {
   display:inline-block;
   width:47px;
@@ -144,7 +199,7 @@
 
 .middle .table[data-player="1"] .title {
   position:absolute;
-  left:17px;
+  left:7px;
   top:5px;
   width:250px;
   height:14px;
@@ -157,7 +212,7 @@
 
 .middle .table[data-player="1"] .cardset[data-id^="hand"] {
   position:absolute;
-  left:22px;
+  left:7px;
   top:20px;
   width:260px;
   height:37px;
@@ -166,18 +221,17 @@
 
 .middle .table[data-player="1"] .message {
   position:absolute;
-  left:21px;
-  top:64px;
+  left:11px;
+  bottom:6px;
   width:250px;
-  height:14px;
-  line-height:14px;
+  height:27px;
+  line-height:12px;
   font-size:11px;
   font-weight:bold;
   color:#fff;
-  text-align:center;
-  white-space:nowrap;
-  text-overflow:ellipsis;
-  overflow:hidden;
+  display:flex;
+  align-items:flex-end;
+  justify-content:space-evenly;
 }
 
 .middle .table:not([data-player="1"]) {
@@ -235,7 +289,7 @@
   right:4px;
   bottom:6px;
   width:60px;
-  line-height:11px;
+  line-height:12px;
   font-size:11px;
   color:#fff;
 }