feat(knuth-morris-pratt): implement info

vivaxy · vivaxy · commit f62a76a697b2 · 2024-02-16T17:23:22.000+08:00
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -4,4 +4,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   root: true,
+  rules: {
+    '@typescript-eslint/no-unused-vars': 0,
+  },
 };
diff --git a/algorithms/string/knuth-morris-pratt/animation/enums/events.js b/algorithms/string/knuth-morris-pratt/animation/enums/events.js
@@ -2,6 +2,7 @@
  * @since 2024-02-04
  * @author vivaxy
  */
+export const INIT_INFO = 'INIT_INFO';
 export const STAGE = 'STAGE';
 export const SET_VALUE = 'SET_VALUE';
 export const COMPARE = 'COMPARE';
diff --git a/algorithms/string/knuth-morris-pratt/animation/index.css b/algorithms/string/knuth-morris-pratt/animation/index.css
@@ -2,3 +2,57 @@
  * @since 2024-02-04
  * @author vivaxy
  */
+.char {
+  font-family: monospace;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  padding: 2px;
+  margin: 2px;
+}
+
+.char.hidden {
+  opacity: 0;
+}
+
+label {
+  display: inline-block;
+  width: 90px;
+}
+
+#info {
+  .text,
+  .target {
+    margin: 30px 4px 0 4px;
+  }
+
+  .text-index,
+  .target-index {
+    margin: 0 4px;
+  }
+
+  .text-index,
+  .target-index {
+    .char {
+      border-color: transparent;
+    }
+  }
+
+  .target.highlight .char {
+    background: #ff9292;
+  }
+}
+
+#pattern-table {
+  .pattern-table {
+    margin: 30px 4px 0 4px;
+  }
+
+  .table-index {
+    margin: 0 4px;
+  }
+
+  .table-index {
+    .char {
+      border-color: transparent;
+    }
+  }
+}
diff --git a/algorithms/string/knuth-morris-pratt/animation/index.html b/algorithms/string/knuth-morris-pratt/animation/index.html
@@ -18,8 +18,8 @@
   </head>
   <body>
     <div id="root">
-      <div id="info"></div>
       <div id="stage"></div>
+      <div id="info"></div>
       <div id="pattern-table"></div>
       <div id="search"></div>
     </div>
diff --git a/algorithms/string/knuth-morris-pratt/animation/index.js b/algorithms/string/knuth-morris-pratt/animation/index.js
@@ -6,17 +6,23 @@ import { events } from './utils/events.js';
 import { initKMP } from './services/kmp.js';
 import { initStage } from './services/stage.js';
 import { initPatternTable } from './services/pattern-table.js';
+import { initSearch } from './services/search.js';
+import { initInfo } from './services/info.js';
+import { sleep } from './utils/sleep.js';
 
 const kmp = initKMP(events);
 initStage(events);
 initPatternTable(events);
+initSearch(events);
+initInfo(events);
 
-const fn = kmp('abcd', 'c');
+const fn = kmp('abcdef', 'cd');
 /**
  * @type {{value: *, done?: boolean}}
  */
 let result = { value: undefined, done: false };
 while (!result.done) {
   result = fn.next();
+  await sleep(1e3);
 }
 console.log('result', result);
diff --git a/algorithms/string/knuth-morris-pratt/animation/services/info.js b/algorithms/string/knuth-morris-pratt/animation/services/info.js
@@ -0,0 +1,121 @@
+/**
+ * @since 2024-02-16
+ * @author vivaxy
+ */
+import {
+  createElement,
+  createText,
+  render,
+  // @ts-expect-error remote js
+} from 'https://unpkg.com/@vivaxy/framework/ui/render-app.js';
+
+import * as EVENTS from '../enums/events.js';
+
+/**
+ * @typedef {import('../utils/types.js').EventEmitter} EventEmitter
+ */
+
+/**
+ * @param {{ text: string, target: string, textIndex: number, targetIndex: number, highlightTarget: boolean }} props
+ * @returns {*}
+ */
+function createApp(props) {
+  return createElement('div', {}, [
+    createElement('div', { class: 'text' }, [
+      createElement('label', {}, [createText('Text: ')]),
+      ...props.text.split('').map(function (char) {
+        return createElement('span', { class: 'char' }, [createText(char)]);
+      }),
+    ]),
+    createElement('div', { class: 'text-index' }, [
+      createElement('label', {}, [createText('Text index: ')]),
+
+      ...props.text.split('').map(function (_, i) {
+        return createElement(
+          'span',
+          { class: `char ${i === props.textIndex ? '' : 'hidden'}` },
+          [createText('↑')],
+        );
+      }),
+    ]),
+    createElement(
+      'div',
+      { class: `target ${props.highlightTarget ? 'highlight' : ''}` },
+      [
+        createElement('label', {}, [createText('Target: ')]),
+        ...props.target.split('').map(function (char) {
+          return createElement('span', { class: 'char' }, [createText(char)]);
+        }),
+      ],
+    ),
+    createElement('div', { class: 'target-index' }, [
+      createElement('label', {}, [createText('Target index: ')]),
+      ...props.target.split('').map(function (_, i) {
+        return createElement(
+          'span',
+          { class: `char ${i === props.targetIndex ? '' : 'hidden'}` },
+          [createText('↑')],
+        );
+      }),
+    ]),
+  ]);
+}
+
+/**
+ * @param {EventEmitter} events
+ */
+export function initInfo(events) {
+  let props = {
+    root: document.getElementById('info'),
+    text: '',
+    target: '',
+    textIndex: -1,
+    targetIndex: -1,
+    highlightTarget: false,
+  };
+
+  events.on(EVENTS.INIT_INFO, function ({ text, target }) {
+    props = {
+      ...props,
+      text,
+      target,
+      highlightTarget: false,
+    };
+    render(createApp, props, props.root);
+  });
+
+  events.on(EVENTS.SET_VALUE, function ({ key, value }) {
+    props = {
+      ...props,
+      [key]: value,
+      highlightTarget: false,
+    };
+    render(createApp, props, props.root);
+  });
+
+  events.on(EVENTS.COMPARE, function ({ from }) {
+    if (from === 'target[length]') {
+      props = {
+        ...props,
+        highlightTarget: true,
+      };
+      render(createApp, props, props.root);
+    }
+  });
+
+  events.on(EVENTS.STAGE, function () {
+    props = {
+      ...props,
+      highlightTarget: false,
+    };
+    render(createApp, props, props.root);
+  });
+
+  events.on(EVENTS.RESULT, function () {
+    props = {
+      ...props,
+      highlightTarget: false,
+    };
+    render(createApp, props, props.root);
+  });
+}
diff --git a/algorithms/string/knuth-morris-pratt/animation/services/kmp.js b/algorithms/string/knuth-morris-pratt/animation/services/kmp.js
@@ -4,13 +4,27 @@
  */
 import * as EVENTS from '../enums/events.js';
 
+/**
+ * @typedef {import('../utils/types.js').EventEmitter} EventEmitter
+ */
+
+/**
+ * @param {EventEmitter} events
+ */
 export function initKMP(events) {
   /**
    * @param {string} text
    * @param {string} target
-   * @returns {Generator<number>}
+   * @returns {Generator<*>}
    */
   return function* knuthMorrisPratt(text, target) {
+    yield events.emit(EVENTS.INIT_INFO, { text, target });
+
+    yield events.emit(EVENTS.STAGE, { value: 0 });
+    yield events.emit(EVENTS.COMPARE, {
+      from: 'target[length]',
+      to: '0',
+    });
     if (target.length === 0) {
       yield events.emit(EVENTS.RESULT, { value: 0 });
       return 0;
@@ -29,7 +43,6 @@ export function initKMP(events) {
     let patternTableGeneratorResult = { value: [], done: false };
     while (!patternTableGeneratorResult.done) {
       patternTableGeneratorResult = patternTableGenerator.next();
-      // @ts-expect-error value maybe events or patternTable
       yield patternTableGeneratorResult.value;
     }
     const patternTable = patternTableGeneratorResult.value;
@@ -78,10 +91,15 @@ export function initKMP(events) {
 
   /**
    * @param {string} target
-   * @returns {Generator<number[]>}
+   * @returns {Generator<*>}
    */
   function* buildPatternTable(target) {
     let patternTable = [0];
+    yield events.emit(EVENTS.SET_VALUE, { key: 'tableIndex', value: 0 });
+    yield events.emit(EVENTS.SET_VALUE, {
+      key: 'patternTable[tableIndex]',
+      value: 0,
+    });
     let tableIndex = 1;
     yield events.emit(EVENTS.SET_VALUE, { key: 'tableIndex', value: 1 });
     let currentTargetIndex = 0;
diff --git a/algorithms/string/knuth-morris-pratt/animation/services/pattern-table.js b/algorithms/string/knuth-morris-pratt/animation/services/pattern-table.js
@@ -2,4 +2,76 @@
  * @since 2024-02-04
  * @author vivaxy
  */
-export function initPatternTable() {}
+import {
+  createElement,
+  createText,
+  render,
+  // @ts-expect-error remote js
+} from 'https://unpkg.com/@vivaxy/framework/ui/render-app.js';
+import * as EVENTS from '../enums/events.js';
+
+/**
+ * @typedef {import('../utils/types.js').EventEmitter} EventEmitter
+ */
+
+/**
+ * @param {{ tableIndex: number, patternTable: number[] }} props
+ */
+function createApp(props) {
+  return createElement('div', {}, [
+    createElement('div', { class: 'pattern-table' }, [
+      createElement('label', {}, [createText('Pattern table: ')]),
+      ...props.patternTable.map(function (number) {
+        return createElement('span', {}, [createText(number)]);
+      }),
+    ]),
+    createElement('div', { class: 'table-index' }, [
+      createElement('label', {}, [createText('tableIndex: ')]),
+      ...Array.from(
+        { length: Math.max(props.patternTable.length, props.tableIndex + 1) },
+        function (_, i) {
+          return createElement(
+            'span',
+            { class: `char ${i === props.tableIndex ? '' : 'hidden'}` },
+            [createText('↑')],
+          );
+        },
+      ),
+    ]),
+  ]);
+}
+
+/**
+ * @param {EventEmitter} events
+ */
+export function initPatternTable(events) {
+  let stage = 1;
+  let props = {
+    root: document.getElementById('pattern-table'),
+    patternTable: [],
+    tableIndex: -1,
+  };
+
+  events.on(EVENTS.STAGE, function ({ value }) {
+    stage = value;
+    if (stage === 1) {
+      render(createApp, props, props.root);
+    }
+  });
+  events.on(EVENTS.SET_VALUE, function ({ key, value }) {
+    if (stage === 1) {
+      if (key === 'tableIndex') {
+        props = {
+          ...props,
+          tableIndex: value,
+        };
+        render(createApp, props, props.root);
+      }
+    }
+  });
+  events.on(EVENTS.COMPARE, function ({ from, to }) {
+    if (stage === 1) {
+      console.log('COMPARE', from, to);
+    }
+  });
+}
diff --git a/algorithms/string/knuth-morris-pratt/animation/services/search.js b/algorithms/string/knuth-morris-pratt/animation/services/search.js
@@ -0,0 +1,34 @@
+/**
+ * @since 2024-02-16
+ * @author vivaxy
+ */
+import * as EVENTS from '../enums/events.js';
+
+/**
+ * @typedef {import('../utils/types.js').EventEmitter} EventEmitter
+ */
+
+/**
+ * @param {EventEmitter} events
+ */
+export function initSearch(events) {
+  let stage = 0;
+  events.on(EVENTS.STAGE, function ({ value }) {
+    stage = value;
+  });
+  events.on(EVENTS.SET_VALUE, function (...args) {
+    if (stage !== 1) {
+      console.log('SET_VALUE', ...args);
+    }
+  });
+  events.on(EVENTS.COMPARE, function (...args) {
+    if (stage !== 1) {
+      console.log('COMPARE', ...args);
+    }
+  });
+  events.on(EVENTS.RESULT, function (...args) {
+    if (stage !== 1) {
+      console.log('RESULT', ...args);
+    }
+  });
+}
diff --git a/algorithms/string/knuth-morris-pratt/animation/services/stage.js b/algorithms/string/knuth-morris-pratt/animation/services/stage.js
diff --git a/algorithms/string/knuth-morris-pratt/animation/utils/sleep.js b/algorithms/string/knuth-morris-pratt/animation/utils/sleep.js
diff --git a/algorithms/string/knuth-morris-pratt/animation/utils/types.js b/algorithms/string/knuth-morris-pratt/animation/utils/types.js
