easy chars

README.md

@@ -33,15 +33,10 @@ courtesy of https://github.com/rewtnull/amigafonts/ 🖤
 
 --------------------------------------
 
-## CHANGE CHARSET:
+## CHANGE CHARS:
 
-default charset: ```|_/\:\`´-'```
-
-simply append any charset you like to the URL, like so:
-
-https://datenkatze.de/hansi/#|()([]){}
-
-up to 10 characters.
+Double-Click a Character to change it.  
+Characters are saved in the URL.
 
 --------------------------------------
 

src/App.js

@@ -30,15 +30,20 @@ function App (props) {
 
   const [, updateState] = useState()
 
-  let chars = decodeURIComponent(window.location.hash.substring(1)).split('')
-  chars = chars.slice(0, 10)
+  let chars = decodeURIComponent(window.location.hash.substring(1))
+    .split('')
+    .slice(0, 10)
 
-  if (chars.length === 0) {
-    const hash = '|_/\\:`´-\''
-    window.location.hash = `#${encodeURIComponent(hash)}`
+  const changeChars = (newChars) => {
+    chars = newChars.slice(0, 10)
+    window.location.hash = `#${encodeURIComponent(chars.join(''))}`
     updateState({})
   }
 
+  if (chars.length === 0) {
+    changeChars(['|', '_', '/', '\\', ':', '`', '´', '-', '\'', '~'])
+  }
+
   const toggleGrid = () => {
     showGrid = !showGrid
   }
@@ -397,7 +402,17 @@ function App (props) {
           if (key === 10) {
             key = 0
           }
-          return <button key={i}>{char}<sub>{key}</sub></button>
+          return <button key={i}>
+            <input type="text"
+                   value={char}
+                   className="form-control-sm"
+                   onChange={(e) => {
+                     chars[i] = e.target.value
+                     changeChars(chars)
+                   }}
+            />
+            <sub>{key}</sub>
+          </button>
         })}
       </h3>
       <div className={`ansi ${showGrid ? '' : 'no-grid'}`}>

src/App.scss

@@ -18,6 +18,15 @@ h3 {
         font-size: 14px;
         padding: 10px;
 
+        input {
+            width: 25px;
+            height: 25px !important;
+            line-height: 20px;
+            padding: 0 !important;
+            text-align: center;
+            border-radius: 0 !important;
+        }
+
         sub {
             position: absolute;
             bottom: 6px;