New option for caption

public/index.html

@@ -101,6 +101,18 @@
                         </label>
                     </p>
                 </div>
+                    <p id="cell-captions-p">
+                        <label>
+                            <span data-l10n="text-content">Cell captions</span>
+                            <select id="cell-captions">
+                                <option value="clip">Clip when overflows</option>
+                                <option value="dots">Dots when overflows</option>
+                                <option value="none">No caption</option>
+                                <option value="short">Short caption</option>
+                            </select>
+                        </label>
+                    </p>
+                <div>
             </div>
         </section>
 

public/trivabble.css

@@ -122,10 +122,25 @@ html, #board, [draggable], .tile {
     display:inline-block;
     white-space:pre-wrap;
     font-size:7px;
-    text-overflow:ellipsis;
     overflow:hidden;
 }
 
+.special-cell-label-clip {
+    text-overflow:clip;
+}
+
+.special-cell-label-dots {
+    text-overflow:ellipsis;
+}
+
+.special-cell-label-none {
+    visibility:hidden;
+}
+
+.special-cell-label-short {
+    display:inline;
+}
+
 #center-cell .special-cell-label {
     font-weight:bold;
     color:black;

public/trivabble.js

@@ -63,6 +63,7 @@
     setConf("PREMIUM_SEVEN_TILES",   50);
     setConf("SCORE_LAST_PLAYER",     true);
     setConf("ENABLE_TIMER",          false);
+    setConf("CELL_CAPTIONS",         "dots"); // "clip", "dots", "none", "short"
 
     function isSetting(key) {
         return Object.prototype.hasOwnProperty.call(Conf, key) ||
@@ -155,7 +156,8 @@
         Timer: "number",
         TimerEnable: "boolean",
         TimerGameDate: "number",
-        TimerTurnDate: "number"
+        TimerTurnDate: "number",
+        CellCaptions: "string"
     };
 
     const _ = (window.libD && libD.l10n) ? libD.l10n() : function (s) {
@@ -1542,17 +1544,25 @@
     }
 
     const specialTypesText = {
-        doubleLetter: _("Double\nLetter"),
-        doubleWord:   _("Double\nWord"),
-        tripleLetter: _("Triple\nLetter"),
-        tripleWord:   _("Triple\nWord")
+        doubleLetter: "Double\nLetter",
+        doubleWord:   "Double\nWord",
+        tripleLetter: "Triple\nLetter",
+        tripleWord:   "Triple\nWord"
+    };
+
+    const specialTypesShortText = {
+        doubleLetter: "DL",
+        doubleWord:   "DW",
+        tripleLetter: "TL",
+        tripleWord:   "TW"
     };
 
     function specialCell(type, cell) {
         cell.firstChild.appendChild(document.createElement("span"));
         cell.classList.add("special-cell");
         cell.classList.add("special-cell-" + type);
-        cell.lastChild.lastChild.textContent = cell.title =  _(specialTypesText[type]);
+        cell.lastChild.lastChild.longText = cell.title = _(specialTypesText[type]);
+        cell.lastChild.lastChild.shortText = _(specialTypesShortText[type]);
         cell.lastChild.lastChild.className = "special-cell-label";
     }
 
@@ -2295,6 +2305,30 @@
         }
     }
 
+    function initCellCaptions() {
+        document.getElementById("cell-captions").onclick = function () {
+            setCellCaptions(document.getElementById("cell-captions").value);
+        };
+
+        setCellCaptions(getSetting("CellCaptions", getSetting("CELL_CAPTIONS")));
+    }
+
+    function setCellCaptions(mode) {
+        setSetting("CellCaptions", mode);
+        document.getElementById("cell-captions").value = mode;
+
+        for (const cells of [].slice.call(document.getElementsByClassName("special-cell-label"))) {
+            cells.classList.remove("special-cell-label-clip");
+            cells.classList.remove("special-cell-label-dots");
+            cells.classList.remove("special-cell-label-none");
+            cells.classList.remove("special-cell-label-short");
+
+            cells.classList.add("special-cell-label-" + mode);
+
+            cells.innerHTML = (mode === "short") ? cells.shortText : cells.longText;
+        }
+    }
+
     function repromptName(f) {
         if (getSetting("PlayerName") && getSetting("PlayerName").trim()) {
             f();
@@ -2528,6 +2562,7 @@
         initFlashLight();
         nextHelpMessage();
         initTimer();
+        initCellCaptions();
     };
 
     trivabble.l10nError = trivabble.run;