AI and personalities

components/response.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+function getStatusText(status) {
+    if (status === 'info')
+        return '情 報';
+
+    if (status === 'yes')
+        return '合 意';
+
+    if (status === 'no')
+        return '拒 絶';
+
+    if (status === 'conditional')
+        return '状 態';
+
+    throw new Error('Invalid status: ' + status);
+}
+
+function getStatusColor(status) {
+    if (status === 'info')
+        return '#3caee0';
+
+    if (status === 'yes')
+        return '#52e691';
+
+    if (status === 'no')
+        return '#a41413';
+
+    if (status === 'conditional')
+        return '#ff8d00';
+
+    throw new Error('Invalid status: ' + status);
+}
+
+export default function Response(props) {
+    const { status } = props;
+
+    const text = getStatusText(status);
+    const color = getStatusColor(status);
+
+    return React.createElement('div', { className: 'response', style: { color: color, borderColor: color } },
+        [
+            React.createElement('div', { className: 'inner' }, [text])
+        ]);
+}

components/wise_man.js

@@ -1,10 +1,7 @@
 import React from 'react';
 
 
-function useColor(status, processing) {
-    if (processing)
-        return '#f1f1f1';
-
+function useColor(status) {
     if (status === 'yes')
         return '#52e691';
 
@@ -14,16 +11,22 @@ function useColor(status, processing) {
     if (status === 'info')
         return '#3caee0';
 
+    if (status == 'conditional')
+        return 'repeating-linear-gradient(56deg, rgb(82, 230, 145) 0px, rgb(82, 230, 145) 30px, #82cd68 30px, #82cd68 60px)';
+
     throw new Error(`Invalid status: ${status}`);
 }
 
 export default function WiseMan(props) {
     const { setProps, name, order_number, question_id, answer } = props;
     const fullName = `${name.toUpperCase()} • ${order_number}`;
-    const color = useColor(answer['status'], question_id !== answer['id']);
+    const color = useColor(answer['status']);
+    const processing = question_id !== answer['id'];
 
-    return React.createElement('div', { className: `wise-man ${name}`, style: { background: color } }, 
-    [
-        fullName
-    ])
+    return React.createElement('div', { className: `wise-man ${name}` },
+        [
+            React.createElement('div', { className: `inner ${processing ? 'flicker' : ''}`, style: { background: color } }, [
+                fullName
+            ])
+        ])
 }