Demo version

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^4.3.1",
+    "hi-base64": "^0.2.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-scripts": "2.1.8"

src/App.css

@@ -1,33 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.hide {
+  display: none
+}

src/App.js

@@ -1,19 +1,31 @@
 import React, { Component } from 'react';
+import './App.css'
 import 'bootstrap/dist/css/bootstrap.css';
-
+import EncodeForm from './components/encodeForm'
+import DecodeForm from './components/decodeForm'
 class App extends Component {
-
+  constructor(props){
+    super(props)
+    this.state= {
+      activeIndex: 0
+    }
+  }
+
+  handleClick = (activeIndex) =>{
+    this.setState({activeIndex})
+  }
+
   render() {
+    const { activeIndex } = this.state
     return (
-      <div class="container">
-        <div>
-          <span>編碼</span>
-          <textarea type="text"/>
-        </div>
-        <div>
-          <span>解碼</span>
-          <textarea type="text"/>
-        </div>
+      <div className="container">
+        <nav className="nav nav-pills nav-justified" style={{padding:'1em'}}>
+          <a className={`nav-item nav-link ${activeIndex===0? 'active' :''}`} href="javascript:void(0)" onClick={() => this.handleClick(0)}>編碼</a>
+          <a className={`nav-item nav-link ${activeIndex===1? 'active' :''}`} href="javascript:void(0)" onClick={() => this.handleClick(1)}>解碼</a>
+        </nav>
+        {activeIndex === 0?
+          (<EncodeForm></EncodeForm>):(<DecodeForm></DecodeForm>)
+        }
       </div>
     );
   }

src/components/decodeForm.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import nouns from "../data/nouns.js";
+import verbs from "../data/verbs.js";
+const base64 = require('hi-base64');
+
+class EncodeForm extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      base64Text: '',
+      plainText: '',
+      encodedText: ''
+    }
+  }
+
+  handleEncodedTextChange = (evt) => {
+    this.setState({ encodedText: evt.target.value })
+  }
+
+  handleClick = (evt) => {
+    this.setState({ plainText: this.decode(this.state.encodedText) })
+  }
+
+  decode = (text) => {
+    const cleanText = text.replace(/，|。/g, '')
+    const arrCleanText = cleanText.split('')
+    let result = ''
+    let subject
+    let keyword
+    for(let i =0 ; i< cleanText.length/2; i++){
+      keyword = arrCleanText.splice(0,2).join('')
+      subject = i%3 === 1? verbs: nouns
+      result += subject.find(({key}) => key == keyword).value 
+    }
+    this.setState({base64Text:result})
+    return base64.decode(result)
+  }
+
+  render() {
+    const { encodedText, plainText, base64Text } = this.state
+    return (
+      <div className="container">
+        <div className="form-group">
+          <textarea rows="10" className="form-control" id="encodedText" type="text" onChange={this.handleEncodedTextChange} value={encodedText} />
+          <button className="btn btn-primary my-2" onClick={this.handleClick}>decode</button>
+        </div>
+        <div>編碼結果：{base64Text}</div>
+        <textarea rows="20" className="form-control" type="text" value={plainText} />
+        <div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default EncodeForm;

src/components/encodeForm.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import nouns from "../data/nouns.js";
+import verbs from "../data/verbs.js";
+const base64 = require('hi-base64');
+
+class EncodeForm extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      base64Text: '',
+      plainText: '',
+      encodedText: ''
+    }
+  }
+
+  handlePlainTextChange = (evt) => {
+    this.setState({ plainText: evt.target.value })
+  }
+
+  handleClick = (evt) => {
+    this.setState({ encodedText: this.encode(this.state.plainText) })
+  }
+
+  encode = (text) => {
+    const b64text = base64.encode(text)
+    this.setState({base64Text:b64text})
+    let junk = ''
+    b64text.split('').forEach((char, index) => {
+      if (index % 3 === 0) {
+        const matched = nouns.find(({ value }) => value == char)
+        junk += matched? matched.key : '$'
+      } else if (index % 3 === 1) {
+        const matched = verbs.find(({ value }) => value == char)
+        junk += matched? matched.key : '$'
+      } else {
+        const matched = nouns.find(({ value }) => value == char)
+        junk += matched? matched.key : '$'
+        junk += index === b64text.length -1 ? '。': '，'
+      }
+    })
+    return junk
+  }
+
+  render() {
+    const { encodedText, plainText, base64Text } = this.state
+    return (
+      <div className="container">
+        <div className="form-group">
+          <textarea rows="10" className="form-control" id="plainText" type="text" onChange={this.handlePlainTextChange} value={plainText} />
+          <button className="btn btn-primary my-2" onClick={this.handleClick}>encode</button>
+        </div>
+        <div>編碼結果：{base64Text}</div>
+        <textarea rows="20" className="form-control" type="text" value={encodedText} />
+        <div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default EncodeForm;

src/example.txt

@@ -0,0 +1,2 @@
+我們練習廢文，不顧北京反對！
+你知道小熊維尼從20190304開始一連串的還願嗎？

yarn.lock

@@ -3816,6 +3816,11 @@ hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
 
+hi-base64@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/hi-base64/-/hi-base64-0.2.1.tgz#29efa016e6896199e609d1984f4ceb426a5b6650"
+  integrity sha1-Ke+gFuaJYZnmCdGYT0zrQmpbZlA=
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"