scrabble-solver 2.16.7 → 2.18.0

package/packages/scrabble-solver/src/components/Results/Header.tsx

@@ -1,16 +1,19 @@
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout } from '@/app-layout';
-import { useColumns } from '@/hooks';
-import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from '@/icons';
-import { RESULTS_COLUMN_WIDTH } from '@/parameters';
+import { useColumns } from '@/hooks/useColumns';
+import GeoAlt from '@/icons/GeoAlt.svg';
+import OneTwoThree from '@/icons/OneTwoThree.svg';
+import Square from '@/icons/Square.svg';
+import SquareA from '@/icons/SquareA.svg';
+import SquareB from '@/icons/SquareB.svg';
+import Squares from '@/icons/Squares.svg';
+import Words from '@/icons/Words.svg';
 import { ResultColumnId } from '@/types';
 
 import { HeaderButton } from './HeaderButton';
 import styles from './Results.module.scss';
 
 export const Header: FunctionComponent = () => {
-  const { resultWordWidth } = useAppLayout();
   const columns = useColumns();
 
   return (
@@ -20,18 +23,12 @@ export const Header: FunctionComponent = () => {
           className={styles.coordinates}
           Icon={GeoAlt}
           id={ResultColumnId.Coordinates}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Coordinates] }}
           translationKey="settings.showCoordinates"
         />
       )}
 
       {columns[ResultColumnId.Word] && (
-        <HeaderButton
-          className={styles.word}
-          id={ResultColumnId.Word}
-          style={{ flexBasis: resultWordWidth }}
-          translationKey="common.word"
-        />
+        <HeaderButton className={styles.word} id={ResultColumnId.Word} translationKey="common.word" />
       )}
 
       {columns[ResultColumnId.TilesCount] && (
@@ -39,7 +36,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Squares}
           id={ResultColumnId.TilesCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.TilesCount] }}
           translationKey="common.tiles"
         />
       )}
@@ -49,7 +45,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={SquareA}
           id={ResultColumnId.VowelsCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.VowelsCount] }}
           translationKey="common.vowels"
         />
       )}
@@ -59,7 +54,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={SquareB}
           id={ResultColumnId.ConsonantsCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.ConsonantsCount] }}
           translationKey="common.consonants"
         />
       )}
@@ -69,7 +63,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Square}
           id={ResultColumnId.BlanksCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.BlanksCount] }}
           translationKey="common.blanks"
         />
       )}
@@ -79,7 +72,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Words}
           id={ResultColumnId.WordsCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.WordsCount] }}
           translationKey="common.words"
         />
       )}
@@ -89,7 +81,6 @@ export const Header: FunctionComponent = () => {
           className={styles.points}
           Icon={OneTwoThree}
           id={ResultColumnId.Points}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Points] }}
           translationKey="common.points"
         />
       )}

package/packages/scrabble-solver/src/components/Results/HeaderButton.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
-import { type CSSProperties, type FunctionComponent, type ReactElement, type SVGAttributes, useCallback } from 'react';
+import { type FunctionComponent, type ReactElement, type SVGAttributes, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { SortDown, SortUp } from '@/icons';
+import SortDown from '@/icons/SortDown.svg';
+import SortUp from '@/icons/SortUp.svg';
 import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from '@/state';
 import { type ResultColumnId, SortDirection, type TranslationKey } from '@/types';
 
@@ -15,10 +16,9 @@ interface Props {
   Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
   id: ResultColumnId;
   translationKey: TranslationKey;
-  style?: CSSProperties;
 }
 
-export const HeaderButton = ({ className, Icon, id, translationKey, style }: Props): ReactElement => {
+export const HeaderButton = ({ className, Icon, id, translationKey }: Props): ReactElement => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const sort = useTypedSelector(selectResultsSort);
@@ -32,7 +32,6 @@ export const HeaderButton = ({ className, Icon, id, translationKey, style }: Pro
       <button
         aria-label={translate(translationKey)}
         className={classNames(styles.headerButton, className)}
-        style={style}
         type="button"
         onClick={handleClick}
       >

package/packages/scrabble-solver/src/components/Results/Result.tsx

@@ -3,10 +3,9 @@ import { type FocusEventHandler, type MouseEventHandler, type ReactElement, useR
 import Highlighter from 'react-highlight-words';
 import { type RowComponentProps } from 'react-window';
 
-import { useAppLayout } from '@/app-layout';
-import { useColumns } from '@/hooks';
-import { LOCALE_FEATURES } from '@/i18n';
-import { noop } from '@/lib';
+import { useColumns } from '@/hooks/useColumns';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { noop } from '@/lib/noop';
 import {
   selectIsResultMatching,
   selectLocale,
@@ -28,10 +27,8 @@ export const Result = ({
   onClick = noop,
   onFocus = noop,
   onMouseEnter = noop,
-  onMouseLeave = noop,
   style,
 }: RowComponentProps<ResultData>): ReactElement => {
-  const { resultWordWidth } = useAppLayout();
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
@@ -44,7 +41,6 @@ export const Result = ({
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
   const handleMouseEnter: MouseEventHandler = (event) => onMouseEnter(result, event);
-  const handleMouseLeave: MouseEventHandler = (event) => onMouseLeave(result, event);
   const handleBlur: FocusEventHandler = (event) => onBlur(result, event);
   const handleFocus: FocusEventHandler = (event) => onFocus(result, event);
 
@@ -55,7 +51,6 @@ export const Result = ({
       aria-label={result.word}
       className={classNames(styles.result, {
         [styles.highlighted]: index === highlightedIndex,
-        [styles.notMatching]: !isMatching,
       })}
       data-testid="result"
       ref={ref}
@@ -65,7 +60,6 @@ export const Result = ({
       onClick={handleClick}
       onFocus={handleFocus}
       onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
     >
       <span className={styles.resultContent}>
         {columns[ResultColumnId.Coordinates] && (
@@ -73,12 +67,7 @@ export const Result = ({
         )}
 
         {columns[ResultColumnId.Word] && (
-          <Cell
-            className={styles.word}
-            style={{ flexBasis: resultWordWidth }}
-            translationKey="common.word"
-            value={result.word}
-          >
+          <Cell className={styles.word} translationKey="common.word" value={result.word}>
             <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />
           </Cell>
         )}

package/packages/scrabble-solver/src/components/Results/Results.module.scss

@@ -93,7 +93,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   @include button-reset;
 
   user-select: none;
-  transition: var(--transition);
   cursor: pointer;
   font-weight: 400;
 
@@ -146,14 +145,11 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     justify-content: flex-start;
     padding-inline-start: $row-padding-horizontal;
   }
-
-  &:last-child {
-    flex: 1;
-  }
 }
 
 .word {
-  flex: 0 0;
+  flex: 1 1 0;
+  min-width: 0;
   text-transform: uppercase;
 }
 
@@ -168,7 +164,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 .points {
   $width: 80px;
 
-  flex: 1 0 $width;
+  flex: 0 0 $width;
+  max-width: $width;
   font-weight: bold;
 }
 

package/packages/scrabble-solver/src/components/Results/Results.module.scss.d.ts

@@ -0,0 +1,27 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly cell: string;
+  readonly content: string;
+  readonly coordinates: string;
+  readonly emptyState: string;
+  readonly header: string;
+  readonly headerButton: string;
+  readonly headerButtonIcon: string;
+  readonly headerButtonLabel: string;
+  readonly highlight: string;
+  readonly highlighted: string;
+  readonly input: string;
+  readonly list: string;
+  readonly listContainer: string;
+  readonly outdated: string;
+  readonly points: string;
+  readonly result: string;
+  readonly resultContent: string;
+  readonly results: string;
+  readonly solveButton: string;
+  readonly sortIcon: string;
+  readonly stat: string;
+  readonly word: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Results/Results.tsx

@@ -3,9 +3,9 @@ import { useEffect, useMemo, type FunctionComponent } from 'react';
 import { List, useListRef } from 'react-window';
 import { useDebounce } from 'use-debounce';
 
-import { useLatest } from '@/hooks';
-import { LOCALE_FEATURES } from '@/i18n';
-import { RESULTS_ITEM_HEIGHT } from '@/parameters';
+import { useLatest } from '@/hooks/useLatest';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { RESULTS_ITEM_HEIGHT, RESULTS_OVERSCAN_COUNT } from '@/parameters';
 import {
   selectAreResultsOutdated,
   selectLocale,
@@ -44,7 +44,14 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);
   const itemData = useMemo<ResultData>(
-    () => ({ ...callbacks, highlightedIndex, results }),
+    () => ({
+      highlightedIndex,
+      results,
+      onBlur: callbacks.onBlur,
+      onClick: callbacks.onClick,
+      onFocus: callbacks.onFocus,
+      onMouseEnter: callbacks.onMouseEnter,
+    }),
     [callbacks, highlightedIndex, results],
   );
   const listRef = useListRef(null);
@@ -74,6 +81,7 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
       aria-busy={isLoadingDebounced}
       aria-label={translate('results')}
       className={classNames(styles.results, className)}
+      data-outdated={isOutdated}
       data-testid="results"
       role="region"
     >
@@ -111,13 +119,14 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
             )}
 
             {!isOutdated && results.length > 0 && (
-              <div className={styles.listContainer}>
+              <div className={styles.listContainer} onMouseLeave={callbacks.onMouseLeave}>
                 <List
                   className={classNames(styles.list, {
                     [styles.outdated]: isOutdated,
                   })}
                   dir={direction}
                   listRef={listRef}
+                  overscanCount={RESULTS_OVERSCAN_COUNT}
                   rowComponent={Result}
                   rowCount={results.length}
                   rowHeight={RESULTS_ITEM_HEIGHT}

package/packages/scrabble-solver/src/components/Results/SolveButton.tsx

@@ -1,7 +1,7 @@
 import { type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Search } from '@/icons';
+import Search from '@/icons/Search.svg';
 import {
   selectAreResultsOutdated,
   selectSolveIsLoading,

package/packages/scrabble-solver/src/components/Results/types.ts

@@ -1,15 +1,15 @@
 import { type Result } from '@scrabble-solver/types';
-import { type FocusEvent, type MouseEvent } from 'react';
+import { type FocusEvent, type MouseEvent, type MouseEventHandler } from 'react';
 
 export interface ResultCallbacks {
   onBlur?: (result: Result, event: FocusEvent) => void;
   onClick?: (result: Result, event: MouseEvent) => void;
   onFocus?: (result: Result, event: FocusEvent) => void;
   onMouseEnter?: (result: Result, event: MouseEvent) => void;
-  onMouseLeave?: (result: Result, event: MouseEvent) => void;
+  onMouseLeave?: MouseEventHandler;
 }
 
-export interface ResultData extends ResultCallbacks {
+export interface ResultData extends Omit<ResultCallbacks, 'onMouseLeave'> {
   highlightedIndex?: number;
   results: Result[] | undefined;
 }

package/packages/scrabble-solver/src/components/ResultsInput/ResultsInput.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly input: string;
+  readonly resultsInput: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/ResultsInput/ResultsInput.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { type ChangeEvent, type FunctionComponent, type SubmitEventHandler, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { isRegExp } from '@/lib';
+import { isRegExp } from '@/lib/isRegExp';
 import { resultsSlice, selectResultsQuery, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './ResultsInput.module.scss';

package/packages/scrabble-solver/src/components/Solver/Solver.module.scss

@@ -1,17 +1,13 @@
 @use 'styles/mixins' as *;
 
 .solver {
-  --spacing: var(--spacing--xl);
+  --spacing: var(--components-spacing);
 
   position: relative;
   margin: 0 var(--spacing);
   display: flex;
   flex-direction: column;
 
-  @include media('<xl') {
-    --spacing: var(--spacing--l);
-  }
-
   @include media('<l', 'touch') {
     margin-bottom: calc(3 * var(--spacing--l) + var(--button--icon--size));
   }
@@ -108,6 +104,11 @@
 
 .controls {
   width: 100%;
+  max-width: var(--controls-max-width);
+
+  @include media('>=l') {
+    display: none;
+  }
 }
 
 .emptyState {

package/packages/scrabble-solver/src/components/Solver/Solver.module.scss.d.ts

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly board: string;
+  readonly boardContainer: string;
+  readonly bottomContainer: string;
+  readonly bottomContent: string;
+  readonly column: string;
+  readonly container: string;
+  readonly content: string;
+  readonly controls: string;
+  readonly dictionary: string;
+  readonly dictionaryContainer: string;
+  readonly dictionaryInput: string;
+  readonly emptyState: string;
+  readonly results: string;
+  readonly solver: string;
+  readonly submitInput: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Solver/Solver.tsx

@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import { type FunctionComponent, memo, type SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from '@/app-layout';
-import { useIsTouchDevice } from '@/hooks';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 import {
   resultsSlice,
   selectAreResultsOutdated,
@@ -14,6 +14,7 @@ import {
   solveSlice,
   useTranslate,
   useTypedSelector,
+  useTypedStore,
 } from '@/state';
 
 import { Alert } from '../Alert';
@@ -35,16 +36,16 @@ const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { maxControlsWidth, showCompactControls, tileSize } = useAppLayout();
+  const showCompactControls = useMediaQuery('<l');
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const resultCandidate = useTypedSelector(selectResultCandidate);
   const results = useTypedSelector(selectProcessedResults);
+  const store = useTypedStore();
   const [bestResult] = results || [];
   const touchCallbacks = useMemo(
     () => ({
       onClick: (result: Result) => {
-        const isSelected = result === resultCandidate;
+        const isSelected = result === selectResultCandidate(store.getState());
 
         if (isSelected) {
           dispatch(resultsSlice.actions.applyResult(result));
@@ -53,7 +54,7 @@ const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
         }
       },
     }),
-    [dispatch, resultCandidate],
+    [dispatch, store],
   );
   const mouseCallbacks = useMemo(
     () => ({
@@ -112,27 +113,25 @@ const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
       <div className={styles.bottomContainer}>
         <div className={styles.bottomContent}>
           <form onSubmit={handleSubmit}>
-            <Rack className={styles.rack} tileSize={tileSize} />
+            <Rack />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
-          {showCompactControls && (
-            <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
-              <ResultCandidatePicker onResultClick={onShowResults} />
-
-              {error && (
-                <Alert className={styles.emptyState} variant="error">
-                  {error.message}
-                </Alert>
-              )}
-
-              {results && results.length === 0 && !isOutdated && (
-                <Alert className={styles.emptyState} variant="warning">
-                  {translate('results.empty-state.no-results')}
-                </Alert>
-              )}
-            </div>
-          )}
+          <div className={styles.controls}>
+            <ResultCandidatePicker onResultClick={onShowResults} />
+
+            {error && (
+              <Alert className={styles.emptyState} variant="error">
+                {error.message}
+              </Alert>
+            )}
+
+            {results && results.length === 0 && !isOutdated && (
+              <Alert className={styles.emptyState} variant="warning">
+                {translate('results.empty-state.no-results')}
+              </Alert>
+            )}
+          </div>
         </div>
       </div>
     </div>

package/packages/scrabble-solver/src/components/Solver/components/InsertButton/InsertButton.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly icon: string;
+  readonly insertButton: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Solver/components/InsertButton/InsertButton.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Check } from '@/icons';
+import Check from '@/icons/Check.svg';
 import { resultsSlice, selectAreResultsOutdated, selectResultCandidate, useTranslate, useTypedSelector } from '@/state';
 
 import { Button } from '../../../Button';

package/packages/scrabble-solver/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.module.scss.d.ts

@@ -0,0 +1,18 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly bothEnabled: string;
+  readonly button: string;
+  readonly buttons: string;
+  readonly content: string;
+  readonly icon: string;
+  readonly iconContainer: string;
+  readonly insert: string;
+  readonly loading: string;
+  readonly points: string;
+  readonly resultCandidate: string;
+  readonly resultCandidatePicker: string;
+  readonly spinnerContainer: string;
+  readonly word: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -2,7 +2,9 @@ import classNames from 'classnames';
 import { type FunctionComponent, type HTMLProps, type MouseEventHandler } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { ChevronDown, ChevronLeft, ChevronRight } from '@/icons';
+import ChevronDown from '@/icons/ChevronDown.svg';
+import ChevronLeft from '@/icons/ChevronLeft.svg';
+import ChevronRight from '@/icons/ChevronRight.svg';
 import {
   resultsSlice,
   selectAreResultsOutdated,

package/packages/scrabble-solver/src/components/Spinner/Spinner.module.scss.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly hide: string;
+  readonly rotate: string;
+  readonly show: string;
+  readonly spinner: string;
+  readonly wave: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Tile/Tile.module.scss

@@ -4,6 +4,8 @@
   --background-color: transparent;
 
   position: relative;
+  width: var(--tile-size, auto);
+  height: var(--tile-size, auto);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -92,6 +94,7 @@
 .points {
   @include text-stroke(var(--background-color), 1px);
 
+  font-size: max(10px, calc(var(--tile-size) * 0.25));
   position: absolute;
   inset-block-end: 1%;
   inset-inline-end: 9%;

package/packages/scrabble-solver/src/components/Tile/Tile.module.scss.d.ts

@@ -0,0 +1,19 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly alert: string;
+  readonly blank: string;
+  readonly empty: string;
+  readonly highlighted: string;
+  readonly input: string;
+  readonly invalid: string;
+  readonly points: string;
+  readonly points1: string;
+  readonly points2: string;
+  readonly points3: string;
+  readonly points4: string;
+  readonly points5: string;
+  readonly raised: string;
+  readonly tile: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Tile/Tile.tsx

@@ -1,5 +1,6 @@
 import { useMergeRefs } from '@floating-ui/react';
 import { EMPTY_CELL } from '@scrabble-solver/constants';
+import { type Locale } from '@scrabble-solver/types';
 import {
   type ChangeEventHandler,
   type FocusEventHandler,
@@ -9,13 +10,10 @@ import {
   type Ref,
   type TouchEventHandler,
   useCallback,
-  useMemo,
   useRef,
 } from 'react';
 
-import { useAppLayout } from '@/app-layout';
-import { getTileSizes, noop } from '@/lib';
-import { selectLocale, useTypedSelector } from '@/state';
+import { noop } from '@/lib/noop';
 
 import { TilePure } from './TilePure';
 
@@ -29,10 +27,10 @@ interface Props {
   inputRef?: Ref<HTMLInputElement | null>;
   isBlank?: boolean;
   isValid?: boolean;
+  locale: Locale;
   placeholder?: string;
   points?: number;
   raised?: boolean;
-  size: number;
   tabIndex?: number;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;
@@ -51,10 +49,10 @@ export const Tile: FunctionComponent<Props> = ({
   inputRef,
   isBlank,
   isValid,
+  locale,
   placeholder,
   points,
   raised,
-  size,
   tabIndex,
   onChange,
   onFocus = noop,
@@ -62,15 +60,10 @@ export const Tile: FunctionComponent<Props> = ({
   onMouseDown = noop,
   onTouchStart = noop,
 }) => {
-  const locale = useTypedSelector(selectLocale);
-  const { showTilePoints } = useAppLayout();
-  const { pointsFontSize, tileSize } = getTileSizes(size);
-  const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
-  const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
   const ref = useRef<HTMLInputElement>(null);
   const mergedRef = useMergeRefs(inputRef ? [ref, inputRef] : [ref]);
   const isEmpty = !character || character === EMPTY_CELL;
-  const canShowPoints = showTilePoints && (!isEmpty || isBlank) && typeof points !== 'undefined';
+  const canShowPoints = (!isEmpty || isBlank) && typeof points !== 'undefined';
   const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback(
@@ -96,9 +89,7 @@ export const Tile: FunctionComponent<Props> = ({
       placeholder={placeholder}
       points={points}
       pointsFormatted={pointsFormatted}
-      pointsStyle={pointsStyle}
       raised={raised}
-      style={style}
       tabIndex={tabIndex}
       onChange={onChange}
       onFocus={onFocus}