update features and limits

webgpu · Aug 30, 2023 · 8f71622 · 8f71622
1 parent db3c4fc
commit 8f71622
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 12 deletions.
diff --git a/webgpu/lessons/resources/elem.js b/webgpu/lessons/resources/elem.js
@@ -29,8 +29,28 @@ const c = (tag, children = [], textContent = '') => {
   return createElem(tag, {textContent}, children);
 };
 
+/**
+ * ```
+ * const addRow = makeTable(parent, ['name', 'location']);
+ * addRow(['Gregg', 'SF']);
+ * addRow(['Tami', 'Glendora']);
+ * addRow(['Mom', 'Temecula']);
+ * addRow([['red', 'apple'], ['yellow', 'banana']]);
+ *   // makes
+ *   // <tr>
+ *   //   <td><span class="red">apple</span></td>
+ *   //   <td><span class="green">banana</span></td>
+ *   // </tr>
+ * addRow([createElem('div')])
+ * ```
+*/
 export function makeTable(parent, columnNames) {
-  const makeRow = (arr, tag = 'td') => c('tr', arr.map(v => c(tag, [], v)));
+  const makeRow = (arr, tag = 'td') => c('tr', arr.map(
+    v => v instanceof HTMLElement
+      ? createElem(tag, {}, [v])
+      : Array.isArray(v)
+        ? createElem(tag, {className: v[0], textContent: v[1]})
+        : c(tag, [], v)));
 
   const tbody = c('tbody');
   parent.appendChild(c('table', [
@@ -42,13 +62,6 @@ export function makeTable(parent, columnNames) {
   };
 }
 
-/*
-const addRow = makeTable(parent, ['name', 'location']);
-addRow(['Gregg', 'SF']);
-addRow(['Tami', 'Glendora']);
-addRow(['Mom', 'Temecula']);
-*/
-
 export function radio(label, options, value, callback) {
   const name = crypto.randomUUID();
   const parent = el('div', {className: 'radio center', textContent: `${label}:`}, options.map(option => {

diff --git a/webgpu/lessons/resources/lesson.css b/webgpu/lessons/resources/lesson.css
@@ -23,6 +23,7 @@
   --diagram-bg-color: #DDD;
   --column-rule-color: #888;
   --line-through-color: rgba(0, 0, 0, 0.3);
+  --good-fg-color: green;
 }
 
 .x-axis, .x-axis * { color: red !important; }
@@ -50,6 +51,7 @@
     --selected-fg-color: orange;
     --diagram-bg-color: #222;
     --line-through-color: rgba(255, 255, 255, 0.4);
+    --good-fg-color: hsl(120, 100%, 40%);
   }
   .x-axis, .x-axis * { color: red !important;  }
   .y-axis, .y-axis * { color: hsl(120, 100%, 40%) !important; }

diff --git a/webgpu/lessons/webgpu-limits-and-features.css b/webgpu/lessons/webgpu-limits-and-features.css
@@ -1,7 +1,20 @@
-.limits table,
+.limits td,
+.features td {
+  padding: 0.25em;
+}
+.limits table {
+  text-align: right;
+}
+.limits td:nth-child(2),
+.limits td:nth-child(3) {
+  text-align: right;
+}
 .features table {
   text-align: left;
 }
 .features td:nth-child(2) {
   text-align: center;
+}
+.exceeds-limit {
+  color: var(--good-fg-color);
 }
diff --git a/webgpu/lessons/webgpu-limits-and-features.js b/webgpu/lessons/webgpu-limits-and-features.js
@@ -78,14 +78,14 @@ window.k = kFeatures;
 const adapter = await navigator.gpu?.requestAdapter();
 
 function withShortSize(v) {
-  return `${v} (${shortSize(v)})`;
+  return v >= 1024 ? `${v} (${shortSize(v)})` : `${v}`;
 }
 
 renderDiagrams({
   limits(elem) {
-    const addRow = makeTable(elem, ['limit', 'your device', 'min']);
+    const addRow = makeTable(elem, ['limit name', 'your device', 'min']);
     for (const key in adapter.limits) {
-      addRow([key, withShortSize(adapter.limits[key]), withShortSize(kLimitInfo[key].default)]);
+      addRow([key, [adapter.limits[key] > kLimitInfo[key].default ? 'exceeds-limit' : '', withShortSize(adapter.limits[key])], withShortSize(kLimitInfo[key].default)]);
     }
   },