feat: show number of users and add warning if 2 or less

index.html

@@ -72,6 +72,14 @@
       <tr>
         <td><label for="candidates">Candidates:</label></td>
         <td><textarea v-model="config.candidates" id="candidates" rows="8"></textarea></td>
+        <td>
+          <span v-if="candidates.length <= 2" title="not enough candidates">
+            <i icon="triangle-alert"></i> <i icon="users-round"></i> {{candidates.length}}
+          </span>
+          <span v-else>
+            <i icon="users-round"></i> {{candidates.length}}
+          </span>
+        </td>
       </tr>
       <tr>
         <td></td>
@@ -82,16 +90,19 @@
         </td>
       </tr>
     </table>
-    <h2>Output Table</h2>
+    <template v-if="table.length">
-    <table class="output">
+      <h2>Output Table</h2>
-      <colgroup>
+      <table class="output">
-        <col style="width: 25%">
+        <colgroup>
-        <col>
+          <col style="width: 25%">
-      </colgroup>
+          <col>
-      <tr v-for="row in table">
+        </colgroup>
-        <td v-for="item in row">{{item}}</td>
+        <tr v-for="row in table">
-      </tr>
+          <td v-for="item in row">{{item}}</td>
-    </table>
+        </tr>
+      </table>
+    </template>
+    <h2 v-else>Add more vegetables !</h2>
     <br />
     <small class="footer">
       <i icon="at-sign"></i>&nbsp;<a href="https://github.com/klemek" target="_blank">klemek</a>

main.js

@@ -194,7 +194,7 @@ const app = createApp({
       this.table.splice(0, this.table.length);
       const duration = parseInt(this.config.duration, 10);
       const prng = utils.splitmix32(this.config.seed);
-      if (this.candidates.length < 2) {
+      if (this.candidates.length <= 2) {
         return;
       }
       const indexScores = Object.fromEntries(