More UI customization

src/Character/index.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
-
 import Panel, { FlipPanel } from '../Panel';
 import defaultSound from '../assets/flip.mp3';
 // @ts-expect-error the minified file is not in the type declarations
 import { Howl } from 'howler/dist/howler.min.js';
-
 import * as css from './styles.module.scss';
 
 interface Props {
   background: string;
   borderWidth: string;
+  borderRadius: string;
+  margin: string;
   characterWidth: string | undefined;
   prevValue: string;
   step: number;
@@ -22,10 +22,12 @@ interface StyleProps extends React.HTMLProps<HTMLDivElement> {
   background: string;
   borderWidth: string;
   characterWidth: string | undefined;
+  borderRadius?: string;
+  margin?: string;
 }
 
 function Character(props: StyleProps) {
-  const { children, background, borderWidth, characterWidth, ...rest } = props;
+  const { children, background, borderWidth, characterWidth, borderRadius, margin, ...rest } = props;
   return (
     <div
       {...rest}
@@ -34,6 +36,8 @@ function Character(props: StyleProps) {
         '--background': background,
         '--border-width': borderWidth,
         '--character-width': characterWidth,
+        '--border-radius': borderRadius,
+        '--margin': margin,
       }}
     >
       {children}
@@ -44,6 +48,8 @@ function Character(props: StyleProps) {
 export default function CharacterComponent({
   background,
   borderWidth,
+  borderRadius,
+  margin,
   characterWidth,
   prevValue,
   step,
@@ -101,6 +107,8 @@ export default function CharacterComponent({
       background={background}
       borderWidth={borderWidth}
       characterWidth={characterWidth}
+      borderRadius={borderRadius}
+      margin={margin}
     >
       <Panel position="top" background={background} textColor={textColor} value={value} />
       <Panel position="bottom" background={background} textColor={textColor} value={prevValue} />

src/Character/styles.module.scss

@@ -2,13 +2,17 @@
   --background: #000;
   --character-width: '1rem';
   --border-width: '1px';
+  --border-radius: '10px';
+  --margin: '10px';
 
   background: var(--background);
   display: flex;
   justify-content: center;
   width: var(--character-width);
   padding: 0.5em;
   position: relative;
+  border-radius: var(--border-radius);
+  margin-right: var(--margin);
 
   &:after {
     content: ' ';

src/SplitFlapDisplay/index.tsx

@@ -8,12 +8,15 @@ import * as css from './styles.module.scss';
 export interface SplitFlapDisplayProps extends React.HTMLProps<HTMLDivElement> {
   background?: string;
   borderColor?: string;
+  borderRadius?: string; // New property for border radius
   borderWidth?: string;
   characterSet: string[];
   characterWidth?: string;
+  fontFamily?: string; // New property for font family
   fontSize?: string;
   minLength?: number;
   padDirection?: string;
+  margin?: string; // New property for padding
   step?: number;
   textColor?: string;
   value: string;
@@ -23,12 +26,15 @@ export interface SplitFlapDisplayProps extends React.HTMLProps<HTMLDivElement> {
 const defaultProps = {
   background: '#000000',
   borderColor: '#dddddd',
+  borderRadius: '10px', // Default border radius
   borderWidth: '1px',
   characterSet: NUMERIC,
   characterWidth: '1rem',
+  fontFamily: 'Arial, sans-serif', // Default font family
   fontSize: '1rem',
   minLength: 5,
   padDirection: 'left',
+  margin: '5px', // Default padding
   step: 200,
   textColor: '#dddddd',
   value: '94609',
@@ -51,12 +57,15 @@ export default function SplitFlapDisplay({
   className,
   background = defaultProps.background,
   borderColor = defaultProps.borderColor,
+  borderRadius = defaultProps.borderRadius, // Use border radius from props
   borderWidth = defaultProps.borderWidth,
   characterSet = defaultProps.characterSet,
   characterWidth = defaultProps.characterWidth,
+  fontFamily = defaultProps.fontFamily, // Use font family from props
   fontSize = defaultProps.fontSize,
   minLength = defaultProps.minLength,
   padDirection = defaultProps.padDirection,
+  margin = defaultProps.margin, // Use padding from props
   step = defaultProps.step,
   textColor = defaultProps.textColor,
   value = defaultProps.value,
@@ -139,16 +148,21 @@ export default function SplitFlapDisplay({
       className={clsx(css.wrapper, className)}
       style={{
         '--border-color': borderColor,
+        '--border-radius': borderRadius, // Ensure units are correct
         '--border-width': borderWidth,
         '--color': textColor,
+        '--font-family': fontFamily,
         '--font-size': fontSize,
+        '--margin': margin, // Ensure units are correct
       }}
     >
       {prevChars.map((v: string, idx: number) => (
         <SplitFlapCharacter
           key={`split-flap-${idx}`}
           background={background}
           borderWidth={borderWidth}
+          borderRadius={borderRadius}
+          margin={margin}
           characterWidth={characterWidth}
           prevValue={v === ' ' ? '\u2007' : v}
           step={step}

src/SplitFlapDisplay/styles.module.scss

@@ -1,12 +1,18 @@
 .wrapper {
   --border-color: #ddd;
+  --border-radius: 10px;  // Variable for border radius
   --border-width: 1px;
   --color: #ddd;
+  --font-family: Arial, sans-serif;  // Variable for font family
   --font-size: 1rem;
+  --padding: 10px;
 
   display: flex;
   color: var(--color);
   font-size: var(--font-size);
+  font-family: var(--font-family);  // Apply font family
+  padding: var(--padding);
+  border-radius: var(--border-radius) !important;  // Apply border radius
 
   > * {
     &:not(:first-child) {

src/demo/CodeBlock.tsx

@@ -3,12 +3,15 @@ import React from 'react';
 type CodeBlockProps = {
   background: string;
   borderColor: string;
+  borderRadius: string;
   borderWidth: string;
   characterSet: string;
   characterWidth: string;
+  fontFamily: string;
   fontSize: string;
   minLength: number;
   padDirection: string;
+  margin: string;
   step: number;
   textColor: string;
   value: string;
@@ -18,12 +21,15 @@ type CodeBlockProps = {
 export default function CodeBlock({
   background,
   borderColor,
+  borderRadius,
   borderWidth,
   characterSet,
   characterWidth,
+  fontFamily,
   fontSize,
   minLength,
   padDirection,
+  margin,
   step,
   textColor,
   value,
@@ -35,12 +41,15 @@ export default function CodeBlock({
   <SplitFlapDisplay
     background='${background}'
     borderColor='${borderColor}'
+    borderRadius='${borderRadius}'
     borderWidth='${borderWidth}'
     characterSet={${characterSet}}
     characterWidth='${characterWidth}'
+    fontFamily='${fontFamily}'
     fontSize='${fontSize}'
     minLength={${minLength}}
     padDirection='${padDirection}'
+    margin='${margin}'
     step={${step}}
     textColor='${textColor}'
     value='${value}'

src/demo/index.tsx

@@ -31,6 +31,9 @@ export default function Demo() {
   const [background, setBackground] = useState<string>('#000000');
   const [borderColor, setBorderColor] = useState<string>('#dddddd');
   const [borderWidth, setBorderWidth] = useState<string>('1px');
+  const [borderRadius, setBorderRadius] = useState<string>('10px');
+  const [margin, setMargin] = useState<string>('5px');
+  const [fontFamily, setFontFamily] = useState<string>('Arial, sans-serif');
   const [characterWidth, setCharacterWidth] = useState<string>('1em');
   const [fontSize, setFontSize] = useState<string>('2em');
   const [minLength, setMinLength] = useState<number>(defaultInputs.numeric.length);
@@ -77,6 +80,10 @@ export default function Demo() {
     }
   };
 
+  const onSelectFontFamily = (event: ChangeEvent<HTMLSelectElement>): void => {
+    setFontFamily(event.target.value);
+  };
+
   return (
     <div className={css.container}>
       <h3>React Split Flap Display</h3>
@@ -95,6 +102,9 @@ export default function Demo() {
             textColor={textColor}
             value={value}
             withSound={withSound}
+            borderRadius={borderRadius}
+            margin={margin}
+            fontFamily={fontFamily}
           />
         </div>
         <div className={css.flexContainerHorizontal}>
@@ -106,6 +116,14 @@ export default function Demo() {
                   <input value={value} onChange={generateInputHandler(setValue)} />
                 </label>
               </div>
+              <div>
+                font familty:&nbsp;
+                <select onChange={onSelectFontFamily}>
+                  <option value="Arial, sans-serif">sans-serif</option>
+                  <option value="Courier New, monospace">monospace </option>
+                  <option value="Times New Roman, serif">serif</option>
+                </select>
+              </div>
               <div>
                 character set:&nbsp;
                 <select value={exampleSet} onChange={onSelect}>
@@ -175,6 +193,14 @@ export default function Demo() {
                 border width:&nbsp;
                 <input value={borderWidth} onChange={generateInputHandler(setBorderWidth)} />
               </div>
+              <div>
+                border radius:&nbsp;
+                <input value={borderRadius} onChange={generateInputHandler(setBorderRadius)} />
+              </div>
+              <div>
+                margin-right:&nbsp;
+                <input value={margin} onChange={generateInputHandler(setMargin)} />
+              </div>
               <div>
                 font size:&nbsp;
                 <input value={fontSize} onChange={generateInputHandler(setFontSize)} />
@@ -211,12 +237,15 @@ export default function Demo() {
           <CodeBlock
             background={background}
             borderColor={borderColor}
+            borderRadius={borderRadius}
             borderWidth={borderWidth}
             characterSet={typeToCharSet[exampleSet]}
             characterWidth={characterWidth}
+            fontFamily={fontFamily}
             fontSize={fontSize}
             minLength={minLength}
             padDirection={padDirection}
+            margin={margin}
             step={step}
             textColor={textColor}
             value={value}