Type editor and schema viewer. Poppables and help icon

project-warstone/src/components/SchemaBuilder/schema-viewer.tsx

@@ -0,0 +1,53 @@
+import { FC, useCallback } from 'react'
+import { FieldType, FieldTypes, Schema, TypeType, fieldTypesWithValues } from '../../types/schema'
+
+interface IProps {
+  schema: Schema;
+  onTypeClick?: (arg: string, arg1: TypeType) => void;
+}
+
+export const SchemaViewer: FC<IProps> = ({ schema, onTypeClick }) => {
+
+  const createValueLable = useCallback((field: FieldType) => {
+    if (field.isConstant) {
+      if (field.type === FieldTypes.dice) return 'Auto-rolled'
+      return 'Constant value:'
+    }
+    switch (field.type) {
+      case FieldTypes.type: return 'Type'
+      case FieldTypes.dice: return 'Dice'
+      default: return '';
+    }
+  }, [])
+
+  return (
+    <>
+      {/* <div className="whitespace-pre-wrap">{JSON.stringify(schema, null, 2)}</div> */}
+      <div>
+        <p className="font-bold text-lg">{schema.name}</p>
+        <ul className="rounded-lg overflow-hidden">
+          {Object.entries(schema.types).map(([typeKey, type]) => (
+            <li
+              key={'type viewer' + typeKey}
+              onClick={() => onTypeClick && onTypeClick(typeKey, type)}
+              data-clickable={!!onTypeClick}
+              className="odd:bg-black/50 p-2 data-[clickable=true]:cursor-pointer"
+            >
+              <p className="mb-2 font-bold">{typeKey}</p>
+              <div className="grid grid-cols-3 gap-2">
+                {Object.entries(type).map(([fieldKey, field]) => (
+                  <div key={'field viewer' + fieldKey} className="rounded-lg border border-olive-drab p-2">
+                    <p className="font-bold">{fieldKey}</p>
+                    <p className="font-thin capitalize text-xs">{field.type}</p>
+                    <p className="font-thin capitalize text-xs">Maximum entries: {field.limit === 0 ? 'unlimited ' : field.limit}</p>
+                    {(field.isConstant || fieldTypesWithValues.includes(field.type)) && <p className="font-thin capitalize text-xs">{createValueLable(field)} {field.value}</p>}
+                  </div>
+                ))}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  )
+}