Create top-level categories (prod, games), stubs for productivity too…

…l list and game list, reenable Kanban, move some JS files to subdirectories
ssbc · Jul 31, 2024 · ffcea1b · ffcea1b
1 parent f84d025
commit ffcea1b
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 40 deletions.
diff --git a/.../tinySSB/app/src/main/assets/web/board.js → ...B/app/src/main/assets/web/kanban/board.js b/.../tinySSB/app/src/main/assets/web/board.js → ...B/app/src/main/assets/web/kanban/board.js
@@ -293,7 +293,7 @@ function kanban_new_event(e) {
     if (op == Operation.LEAVE && e.header.fid == myId) {
         delete board.pendingInvitations[myId]
         board.subscribed = false
-        load_board_list()
+        load_kanban_list()
     }
 
     if (board.subscribed) {
@@ -318,7 +318,7 @@ function kanban_new_event(e) {
         if (curr_scenario != 'board' || curr_board != bid)
             board.unreadEvents++
 
-        load_board_list()
+        load_kanban_list()
 
         // invite selected users (during Kanban board creation)
         if (op == Operation.BOARD_CREATE && e.header.fid == myId) {
@@ -366,7 +366,7 @@ function kanban_new_event(e) {
             board.lastUpdate = Date.now()
             board.unreadEvents++
             board.curr_prev = board.sortedOperations.get_tips()
-            load_board_list()
+            load_kanban_list()
             return
         }
 

diff --git a/...nySSB/app/src/main/assets/web/board_ui.js → ...pp/src/main/assets/web/kanban/board_ui.js b/...nySSB/app/src/main/assets/web/board_ui.js → ...pp/src/main/assets/web/kanban/board_ui.js
@@ -69,7 +69,7 @@ function dragDrop(ev) {
     }
 }
 
-function load_board_list() {
+function load_kanban_list() {
     document.getElementById('lst:kanban').innerHTML = '';
     if (Object.keys(tremola.board).length === 0)
         return
@@ -428,7 +428,7 @@ function menu_rename_board() {
 function ui_update_board_title(bid) {
     var board = tremola.board[bid]
     // update board list
-    load_board_list()
+    load_kanban_list()
     // update title name
     if (curr_board == bid) {
         var title = document.getElementById("conversationTitle"), bg, box;
@@ -445,7 +445,7 @@ function board_toggle_forget() {
     board.forgotten = !board.forgotten
     persist()
     closeOverlay()
-    load_board_list()
+    load_kanban_list()
     setScenario('kanban')
 }
 

diff --git a/android/tinySSB/app/src/main/assets/web/tremola.css b/android/tinySSB/app/src/main/assets/web/tremola.css
@@ -219,6 +219,29 @@ textarea {
   display: inline-block;
 }
 
+.app_icon {
+  height: 3em;
+  width: 3em;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  font-size: medium;
+  box-shadow: 0 0 5px rgba(0,0,0,0.7);
+}
+
+.prod_item_button {
+  border: none;
+  text-align: left;
+  vertical-align: top;
+  width: calc(100%-10em);
+  font-size: medium;
+  border-radius: 4pt;
+  box-shadow: 0 0 5px rgba(0,0,0,0.7);
+  display: inline-block;
+  padding-top: 5px;
+  padding-bottom: 8px;
+}
+
 .menu_item_button {
   border: none;
   text-align: left;

diff --git a/android/tinySSB/app/src/main/assets/web/tremola.html b/android/tinySSB/app/src/main/assets/web/tremola.html
@@ -3,16 +3,16 @@
 <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" type="text/css" href="tremola.css" media="screen" />
-  <script type="text/javascript" charset="UTF-8" src="bipf.js"></script>
-  <script type="text/javascript" charset="UTF-8" src="scuttlesort.js"></script>
+  <script type="text/javascript" charset="UTF-8" src="util/bipf.js"></script>
+  <script type="text/javascript" charset="UTF-8" src="util/scuttlesort.js"></script>
   <script type="text/javascript" charset="UTF-8" src="tremola.js"></script>
   <script type="text/javascript" charset="UTF-8" src="tremola_settings.js"></script>
   <script type="text/javascript" charset="UTF-8" src="tremola_ui.js"></script>
-  <script type="text/javascript" charset="UTF-8" src="qrcode.min.js"></script>
-  <script type="text/javascript" charset="UTF-8" src="pinch-zoom.min.js"></script>
-  <script type="text/javascript" charset="UTF-8" src="board.js"></script>
-  <script type="text/javascript" charset="UTF-8" src="board_ui.js"></script>
-  <script type="text/javascript" charset="UTF-8" src="pako.min.js"></script>
+  <script type="text/javascript" charset="UTF-8" src="util/qrcode.min.js"></script>
+  <script type="text/javascript" charset="UTF-8" src="util/pinch-zoom.min.js"></script>
+  <script type="text/javascript" charset="UTF-8" src="kanban/board.js"></script>
+  <script type="text/javascript" charset="UTF-8" src="kanban/board_ui.js"></script>
+  <script type="text/javascript" charset="UTF-8" src="util/pako.min.js"></script>
   <script type="text/javascript" charset="UTF-8" src="sketch.js"></script>
 </head>
 <body style="background-image: url('img/splash-as-background.jpg'); background-size: cover; background-color: white; overflow: hidden" onload="backend('ready');">
@@ -48,7 +48,10 @@
 
 <div id='core' style="height: calc(100% - 118px); width: 100%;">
 
-  <div id='lst:chats' class=w100 style='overflow: hidden'></div>
+  <div id='lst:chats'    class=w100 style='overflow: scroll;height: 100%;'></div>
+  <div id='lst:prod'     class=w100 style='display: none; overflow: scroll;height: 100%;'></div>
+  <div id='lst:games'    class=w100 style='display: none; overflow: scroll;height: 100%;'></div>
+  <div id='lst:contacts' class=w100 style="display: none; overflow: scroll;height: 100%;"></div>
 
   <div id='div:posts' style="height: 100%; overflow-x: auto; display: none;">
     <table id='lst:posts' style="width: 100%; table-layout: auto;">
@@ -64,7 +67,6 @@
     </table>
   </div>
 
-  <div id='lst:contacts' class=w100 style="display: none;margin-top: 6px;"></div>
 
   <div id='the:connex' style="display: none; margin: 5pt;"></div>
 
@@ -341,10 +343,10 @@
     <div style="text-align: center;">
       <font size=+1><em>About</em></font><br><img src="img/map-1862.jpg" style="height: 8em;">
       <font size=-2>
-        <p>tinySSB, August 2023
+        <p>tinySSB, August 2024
 
         <hr>
-        <p>Software (c) 2021-2023:<br>
+        <p>Software (c) 2021-2024:<br>
           Jannick Heisch<br>
           Etienne Mettaz<br>
           Cedrik Schimschar<br>
@@ -355,6 +357,7 @@
           https://www.flaticon.com/authors/kiranshastry<br>
           https://icon-icons.com/icon/kanban-board/120442<br>
           https://icon-icons.com/icon/paper-clip/102692<br>
+          http://www.onlinewebfonts.com/icon<br>
 
         <hr>
 
@@ -535,9 +538,10 @@
 <div id='div:footer' class=neutral style="height: 56px; align-content: center; border: 3px inset #ebf4fa /*var(--light)*/; border-radius: 2px; margin: 3px; width: calc(100% - 12px);">
 
   <table width=100% cellpadding="2pt"><tr>
-    <td width=33%><button id='btn:chats'    class="w100 flat active buttontext" onclick="btnBridge(this);" style="background-image: url('img/chat.svg');">&nbsp;<!-- font size=+3>&#x1F4E8;</font><br><font size=small>Chats</font --></button>
-    <td width=33%><button id='btn:kanban'   class="w100 flat passive buttontext" onclick="btnBridge(this);" style="background-image: url('img/kanban.svg');">&nbsp;<!-- font size=+3>&#x1F5E3;</font><br><font size=small>Board</font --></button>
-    <td width=33%><button id='btn:contacts' class="w100 flat passive buttontext" onclick="btnBridge(this);" style="background-image: url('img/contacts.svg');">&nbsp;<!-- font size=+3>&#x1F465;</font><br><font size=small>Contacts</font --></button>
+    <td width=25%><button id='btn:chats'        class="w100 flat active buttontext"  onclick="btnBridge(this);" style="background-image: url('img/chat.svg');">&nbsp;</button>
+    <td width=25%><button id='btn:productivity' class="w100 flat passive buttontext" onclick="btnBridge(this);" style="background-image: url('img/productivity.svg');"> </button>
+    <td width=25%><button id='btn:games'        class="w100 flat passive buttontext" onclick="btnBridge(this);" style="background-image: url('img/game-controller.svg');">&nbsp;</button>
+    <td width=25%><button id='btn:contacts'     class="w100 flat passive buttontext" onclick="btnBridge(this);" style="background-image: url('img/contacts.svg');"> </button>
   </table>
 
 </div>

diff --git a/android/tinySSB/app/src/main/assets/web/tremola.js b/android/tinySSB/app/src/main/assets/web/tremola.js
@@ -674,6 +674,64 @@ function save_content_alias() {
     closeOverlay();
 }
 
+// --- productivity
+
+function load_prod_list() {
+    document.getElementById("lst:prod").innerHTML = '';
+    load_prod_item('Kanban', 'img/kanban.svg', 'setScenario("kanban")',
+                   'text text text h aghjwd gldfhjs hlgsf hgljksf hgls fdhglf sdhgl hfgskj hls dfhgjl shgjkls hgl sfdhgjk sdfjklg hljs hfgl dfjlsfs');
+    load_prod_item('Scheduler', 'img/schedule.svg', 'xyz',
+                   'text text text h aghjwd gldfhjs hlgsf hgljksf hgls fdhglf sdhgl hfgskj hls dfhgjl shgjkls hgl sfdhgjk sdfjklg hljs hfgl dfjlsfs');
+    load_prod_item('Kahoot Quiz', 'img/quiz.svg', 'xyz',
+                   'text text text h aghjwd gldfhjs hlgsf hgljksf hgls fdhglf sdhgl hfgskj hls dfhgjl shgjkls hgl sfdhgjk sdfjklg hljs hfgl dfjlsfs');
+    load_prod_item('Lokens (coming soon)', 'img/hand_and_coins.svg', 'xyz',
+                   'crypto tokens based on CRDTs, no mining needed. Ideal for fidelity cards, bartering, recognition tokens in open SW communities, and more.');
+    load_prod_item('(dummy entry)', 'img/contacts.svg', 'xyz',
+                   'dah dah dah');
+}
+
+function load_prod_item(title, imageName, cb, descr) {
+    var row, item = document.createElement('div'), bg;
+    item.setAttribute('style', 'padding: 0px 5px 10px 5px;'); // old JS (SDK 23)
+    bg = ' light'; // c[1].forgotten ? ' gray' : ' light';
+    row = `<button class="app_icon" style="margin-right: 0.75em; background-color: white;"><img width=35 height=35 src="${imageName}"/>`;
+    row += `<button class='prod_item_button light' style='overflow: hidden; width: calc(100% - 4em);' onclick='${cb};'>`;
+    row += "<div style='white-space: wrap;'><div style='text-overflow: ellipsis; overflow: hidden;'>" + escapeHTML(title) + "</div>";
+    row += "<font size=-2>" + escapeHTML(descr) + "</font></div></button>";
+    item.innerHTML = row;
+    document.getElementById('lst:prod').appendChild(item);
+}
+
+// --- games
+
+function load_game_list() {
+    document.getElementById("lst:games").innerHTML = '';
+    load_game_item('Kanban', 'img/kanban.svg',
+                   'text text text h aghjwd gldfhjs hlgsf hgljksf hgls fdhglf sdhgl hfgskj hls dfhgjl shgjkls hgl sfdhgjk sdfjklg hljs hfgl dfjlsfs');
+    load_game_item('Scheduler', 'img/schedule.svg',
+                   'text text text h aghjwd gldfhjs hlgsf hgljksf hgls fdhglf sdhgl hfgskj hls dfhgjl shgjkls hgl sfdhgjk sdfjklg hljs hfgl dfjlsfs');
+    load_game_item('Kahoot Quiz', 'img/quiz.svg',
+                   'text text text h aghjwd gldfhjs hlgsf hgljksf hgls fdhglf sdhgl hfgskj hls dfhgjl shgjkls hgl sfdhgjk sdfjklg hljs hfgl dfjlsfs');
+    load_game_item('Lokens (coming soon)', 'img/hand_and_coins.svg',
+                   'crypto tokens based on CRDTs, no mining needed. Ideal for fidelity cards, bartering, recognition tokens in open SW communities, and more.');
+    load_game_item('(dummy entry)', 'img/contacts.svg',
+                   'dah dah dah');
+}
+
+function load_game_item(title, imageName, descr) {
+    var row, item = document.createElement('div'), bg;
+    item.setAttribute('style', 'padding: 0px 5px 10px 5px;'); // old JS (SDK 23)
+    bg = ' light'; // c[1].forgotten ? ' gray' : ' light';
+    row = `<button class="app_icon" style="margin-right: 0.75em; background-color: white;"><img width=35 height=35 src="${imageName}"/>`;
+    row += "<button class='prod_item_button light' style='overflow: hidden; width: calc(100% - 4em);' onclick='show_contact_details();'>";
+    row += "<div style='white-space: wrap;'><div style='text-overflow: ellipsis; overflow: hidden;'>" + escapeHTML(title) + "</div>";
+    row += "<font size=-2>" + escapeHTML(descr) + "</font></div></button>";
+    item.innerHTML = row;
+    document.getElementById('lst:games').appendChild(item);
+}
+
+// --- chats
+
 function new_conversation() {
     // { "alias":"local notes (for my eyes only)", "posts":{}, "members":[myId], "touched": millis }
     var recps = []
@@ -1188,7 +1246,7 @@ function b2f_new_event(e) { // incoming SSB log event: we get map with three ent
                 contact.alias = e.public[1] == "" ? id2b32(e.header.fid) : e.public[1]
                 contact.initial = contact.alias.substring(0, 1).toUpperCase()
                 load_contact_list()
-                load_board_list()
+                load_kanban_list()
 
                 // update names in connected devices menu
                 for (var l in localPeers) {
@@ -1271,8 +1329,11 @@ function b2f_initialize(id, settings) {
     for (nm in tremola.settings)
         setSetting(nm, tremola.settings[nm])
     load_chat_list()
+    load_prod_list()
+    load_game_list()
     load_contact_list()
-    load_board_list()
+
+    load_kanban_list()
 
     closeOverlay();
     setScenario('chats');

diff --git a/android/tinySSB/app/src/main/assets/web/tremola_ui.js b/android/tinySSB/app/src/main/assets/web/tremola_ui.js
@@ -5,10 +5,11 @@
 var overlayIsActive = false;
 
 var display_or_not = [
-    'div:qr', 'div:back',
-    'core', 'lst:chats', 'div:posts', 'lst:contacts', 'lst:members', 'the:connex',
-    'lst:kanban', 'div:footer', 'div:textarea', 'div:confirm-members', 'plus',
-    'div:settings', 'div:board'
+    'div:qr', 'div:back', 'core',
+    'lst:chats', 'lst:prod', 'lst:games', 'lst:contacts',
+    'lst:members', 'the:connex',
+    'div:posts', 'lst:kanban', 'div:board',
+    'div:footer', 'div:textarea', 'div:confirm-members', 'plus', 'div:settings'
 ];
 
 var prev_scenario = 'chats';
@@ -19,7 +20,9 @@ var scenarioDisplay = {
     'contacts': ['div:qr', 'core', 'lst:contacts', 'div:footer', 'plus'],
     'posts': ['div:back', 'core', 'div:posts', 'div:textarea'],
     'connex': ['div:qr', 'core', 'the:connex', 'div:footer', 'plus'],
+    'games': ['div:qr', 'core', 'lst:games', 'div:footer'],
     'members': ['div:back', 'core', 'lst:members', 'div:confirm-members'],
+    'productivity': ['div:qr', 'core', 'lst:prod', 'div:footer'],
     'settings': ['div:back', 'div:settings', 'core'],
     'kanban': ['div:qr', 'core', 'lst:kanban', 'div:footer', 'plus'],
     'board': ['div:back', 'core', 'div:board']
@@ -29,6 +32,12 @@ var scenarioMenu = {
     'chats': [['Connected Devices', 'menu_connection'], // '['New conversation', 'menu_new_conversation'],' TODO reactivate when encrypted chats are implemented
         ['Settings', 'menu_settings'],
         ['About', 'menu_about']],
+    'productivity': [['Connected Devices', 'menu_connection'],
+        ['Settings', 'menu_settings'],
+        ['About', 'menu_about']],
+    'games': [['Connected Devices', 'menu_connection'],
+        ['Settings', 'menu_settings'],
+        ['About', 'menu_about']],
     'contacts': [['New contact', 'menu_new_contact'],
         ['Connected Devices', 'menu_connection'],
         ['Settings', 'menu_settings'],
@@ -39,17 +48,6 @@ var scenarioMenu = {
         // ['<del>Force sync</del>', 'menu_sync'],
         ['Settings', 'menu_settings'],
         ['About', 'menu_about']],
-    /*
-      ['Redraw', 'menu_redraw'],
-      ['Sync', 'menu_sync'],
-      ['Redraw', 'menu_redraw'],
-      ['Restream', 'menu_stream_all_posts'],
-      ['Import ID', 'menu_import_id'],
-      ['Process msgs', 'menu_process_msgs'],
-      ['Add pub', 'menu_add_pub'],
-      ['Dump', 'menu_dump'],
-      ['Reset', 'menu_reset']]
-    */
     'posts': [/* ['Take picture', 'menu_take_picture'],
                 ['Pick image', 'menu_pick_image'], */
         ['Rename this chat', 'menu_edit_convname'],
@@ -112,7 +110,7 @@ function setScenario(s) {
     var lst = scenarioDisplay[s];
     if (lst) {
         // if (s != 'posts' && curr_scenario != "members" && curr_scenario != 'posts') {
-        if (['chats', 'contacts', 'connex', 'kanban'].indexOf(curr_scenario) >= 0) {
+        if (['chats', 'productivity', 'games', 'contacts', 'connex', ].indexOf(curr_scenario) >= 0) {
             var cl = document.getElementById('btn:' + curr_scenario).classList;
             cl.toggle('active', false);
             cl.toggle('passive', true);
@@ -146,7 +144,7 @@ function setScenario(s) {
             prev_scenario = s;
         }
         curr_scenario = s;
-        if (['chats', 'contacts', 'connex', 'kanban'].indexOf(curr_scenario) >= 0) {
+        if (['chats', 'productivity', 'games', 'contacts', 'connex'].indexOf(curr_scenario) >= 0) {
             var cl = document.getElementById('btn:' + curr_scenario).classList;
             cl.toggle('active', true);
             cl.toggle('passive', false);
@@ -157,6 +155,11 @@ function setScenario(s) {
             document.getElementById('core').style.height = 'calc(100% - 118px)';
 
         if (s == 'kanban') {
+            document.getElementById("tremolaTitle").style.display = 'none';
+            var c = document.getElementById("conversationTitle");
+            c.style.display = null;
+            c.innerHTML = "<font size=+1><strong>List of Kanban Boards</strong></font><br>Pick or create a board";
+
             var personalBoardAlreadyExists = false
             for (var b in tremola.board) {
                 var board = tremola.board[b]
@@ -175,7 +178,9 @@ function setScenario(s) {
 
 function btnBridge(e) {
     var e = e.id, m = '';
-    if (['btn:chats', 'btn:posts', 'btn:contacts', 'btn:connex', 'btn:kanban'].indexOf(e) >= 0) {
+    if (['btn:chats', 'btn:connex', 'btn:contacts', 'btn:games',
+         'btn:posts', 'btn:productivity'].indexOf(e) >= 0) {
+         console.log('btn', e)
         setScenario(e.substring(4));
     }
     if (e == 'btn:menu') {

diff --git a/...d/tinySSB/app/src/main/assets/web/bipf.js → ...ySSB/app/src/main/assets/web/util/bipf.js b/...d/tinySSB/app/src/main/assets/web/bipf.js → ...ySSB/app/src/main/assets/web/util/bipf.js
diff --git a/...nySSB/app/src/main/assets/web/pako.min.js → .../app/src/main/assets/web/util/pako.min.js b/...nySSB/app/src/main/assets/web/pako.min.js → .../app/src/main/assets/web/util/pako.min.js
diff --git a/...app/src/main/assets/web/pinch-zoom.min.js → ...rc/main/assets/web/util/pinch-zoom.min.js b/...app/src/main/assets/web/pinch-zoom.min.js → ...rc/main/assets/web/util/pinch-zoom.min.js
diff --git a/...SSB/app/src/main/assets/web/qrcode.min.js → ...pp/src/main/assets/web/util/qrcode.min.js b/...SSB/app/src/main/assets/web/qrcode.min.js → ...pp/src/main/assets/web/util/qrcode.min.js
diff --git a/...SB/app/src/main/assets/web/scuttlesort.js → ...p/src/main/assets/web/util/scuttlesort.js b/...SB/app/src/main/assets/web/scuttlesort.js → ...p/src/main/assets/web/util/scuttlesort.js