Add Babelstone Han PUA font, resolve issue #11

src/components/CharacterResultReadings/index.tsx

@@ -5,7 +5,7 @@ import { DataContext } from "../../contexts/DataContextProvider";
 import { getStringForCharacterVariants } from "../ComponentsScrollComponents/utils";
 import Button from "@material-ui/core/Button";
 import ButtonGroup from "@material-ui/core/ButtonGroup";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles, withTheme } from "@material-ui/core/styles";
 import { QuickToastContext } from "../../contexts/QuickToastContextProvider";
 import { SharedTextboxContext } from "../../contexts/SharedTextboxContextProvider";
 
@@ -71,6 +71,25 @@ const useButtonStyles = makeStyles((theme) => ({
   },
 }));
 
+const ReadingsContainer = withTheme(styled.div`
+  font-size: 0.9rem;
+  a:link {
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  a:visited {
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  a:hover {
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  a:active {
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+`);
+
 const CharacterResultReadings = React.memo(
   (props: {
     char: string;
@@ -201,7 +220,7 @@ const CharacterResultReadings = React.memo(
 
           {/* <SimpleBar style={{ flex: 1, paddingTop: "5px", height: "100px" }}> */}
           {/* <div> */}
-          <div style={{ fontSize: "0.9rem" }}>
+          <ReadingsContainer>
             {variantsString && (
               <MetadataContainer>{variantsString}</MetadataContainer>
             )}
@@ -218,7 +237,10 @@ const CharacterResultReadings = React.memo(
                   >
                     {entry[0]}:
                   </span>{" "}
-                  {entry[1]}
+                  <div
+                    style={{ display: "inline" }}
+                    dangerouslySetInnerHTML={{ __html: entry[1] }}
+                  />
                 </div>
               ))
             ) : (
@@ -228,7 +250,7 @@ const CharacterResultReadings = React.memo(
                 })}
               </div>
             )}
-          </div>
+          </ReadingsContainer>
         </div>
         {/* </div> */}
         {/* </SimpleBar> */}

src/components/ComponentsScrollComponents/utils.ts

@@ -199,6 +199,11 @@ export const getStringForCharacterVariants = (
           return intl.formatMessage({
             id: "variant.radical",
           });
+
+        case CharacterVariant.unicode_pua:
+          return intl.formatMessage({
+            id: "variant.unicode_pua",
+          });
       }
     })
     .join(" • ");

src/components/ResultsPage/index.tsx

@@ -79,6 +79,8 @@ function ResultsPage(props: {
   const { searchResults } = useContext(SearchContext);
 
   const {
+    output,
+    setOutput,
     relatedComponentsInput: input,
     setRelatedComponentsInput: setInput,
   } = useContext(SharedTextboxContext);
@@ -121,6 +123,10 @@ function ResultsPage(props: {
     col: number,
     radical: string
   ) => {
+    if (selectedInfo.index === index && selectedInfo.col === col) {
+      setOutput(output + radical);
+    }
+
     setSelectedInfo({ index, col, radical });
     event.stopPropagation();
     event.preventDefault();

src/constants.ts

@@ -3,10 +3,10 @@ import {
   indigo,
   cyan,
   purple,
-  yellow,
   amber,
   teal,
   blue,
+  orange,
 } from "@material-ui/core/colors";
 
 export const IDCSet = new Set([
@@ -65,12 +65,12 @@ export const JSON_FILE_NAMES = {
 };
 
 export const CharacterVariantLocaleColors = {
-  chinese_traditional: {dark: cyan[800], light: teal[200]},
-  chinese_simplified: {dark: amber[900], light: amber[600]},
-  japanese: {dark: purple[300], light: purple[200]},
-  korean: {dark: indigo[700], light: indigo['A100']},
-  zhuang: {dark: indigo["A700"], light: blue[400]},
-  vietnamese: {dark: green[800], light: green[200]},
+  chinese_traditional: { dark: cyan[800], light: teal[200] },
+  chinese_simplified: { dark: orange[800], light: amber[600] },
+  japanese: { dark: purple[300], light: purple[200] },
+  korean: { dark: indigo[700], light: indigo["A100"] },
+  zhuang: { dark: indigo["A700"], light: blue[400] },
+  vietnamese: { dark: green[800], light: green[200] },
 };
 
 /* export const PAKO_FILE_NAMES = {

src/i18n_data.json

@@ -1,7 +1,7 @@
 {
   "en": {
     "app_name": "Radically",
-    "app_desc": "A CJK component-based character search utility",
+    "app_desc": "A component-based CJK character search engine",
     "strokes": "{count, plural, one {# stroke} other {# strokes}}",
     "unclear": "Unclear",
     "components": "Components",
@@ -38,7 +38,8 @@
     "variant.other_simplified": "Other-Simplified",
     "variant.sawndip_simplified": "ZA-Simplified",
     "variant.sawndip": "ZA",
-    "variant.radical": "Radical"
+    "variant.radical": "Radical",
+    "variant.unicode_pua": "Unicode PUA"
   },
   "lzh": {
     "app_name": "部將",
@@ -79,6 +80,7 @@
     "variant.other_simplified": "其餘簡化文字",
     "variant.sawndip_simplified": "簡化壯字",
     "variant.sawndip": "壯字",
-    "variant.radical": "部首"
+    "variant.radical": "部首",
+    "variant.unicode_pua": "萬國碼私用領域"
   }
 }

src/index.css

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: "BabelStoneHanPUA";
+  src: url(./fonts/BabelStoneHanPUA.woff2) format("woff2");
+}
+
 @font-face {
   font-family: "UniHentaiKana";
   src: url(./fonts/UniHentaiKana-Regular.woff) format("woff");
@@ -39,7 +44,7 @@
 
 html {
   /* --default-sans: HelveticaLatin, Hanamin, KaiXinSong; */
-  --default-sans: HelveticaLatin, KaiXinSong, UniHentaiKana;
+  --default-sans: HelveticaLatin, BabelStoneHanPUA, KaiXinSong, UniHentaiKana;
 }
 
 body {