feat: normalize font sizes (#12)

* feat: font normalization

and heirlooms page tweaks

* feat: portal screen tweaks

* feat: bone trader tweaks

* feat: buy container tweaks

* feat: map view tweaks

Author: GabenGar

public/config.js

@@ -1664,7 +1664,6 @@ function portalClicked(noUniChange) {
 	document.getElementById('inPortalC2Name').innerHTML = (game.global.highestRadonLevelCleared >= 49) ? "<span class='icomoon icon-infinity'></span>" : "2";
 	var className = (game.global.highestRadonLevelCleared >= 49) ? "thingColorInfinite" : "thingColorSquared";
 	swapClass("thingColor", className, document.getElementById('inPortalC2Button'))
-	document.getElementById("challengeDescription").style.height = (getSLevel(true) >= 1) ? "19vw" : "22.5vw";
 	document.getElementById("challengeDescriptionPre").innerHTML = (getSLevel(true) >= 1) ? "Don't forget to bring a challenge<br/>" : 'You can also choose to activate a challenge before using your portal. Completing a challenge will earn you a permanent reward. You can abandon or view an active challenge at any time by clicking the "View Perks" button.';
 	if (game.global.canRespecPerks) {
 		document.getElementById("respecPortalBtn").innerHTML = "Respec";
@@ -5743,7 +5742,6 @@ function hideAdvMaps(displayOnly, hideForVoid){
 	document.getElementById('mapsCreateRow').style.paddingBottom = (hidden) ? "1vw" : "0";
 	var maps2 = checkAdvMaps2(hidden);
 	var mapSize = (hidden) ? "0" : ((maps2) ? "2" : "1");
-	swapClass('mapSize', 'mapSize' + mapSize, document.getElementById('mapsHere'));
 }
 
 function getUnlockZone(what){
@@ -10013,9 +10011,6 @@ function drawGrid(maps) { //maps t or f. This function overwrites the current gr
 			cell.setAttribute("id", idText + counter);
 			row.appendChild(cell);
 			cell.style.width = (100 / cols) + "%";
-			cell.style.paddingTop = ((100 / cols) / 19)+ "vh";
-			cell.style.paddingBottom = ((100 / cols) / 19) + "vh";
-			cell.style.fontSize = ((cols / 14) + 1) + "vh";
 			var className = "battleCell cellColorNotBeaten"
 			if (maps && game.global.mapGridArray[counter].name == "Pumpkimp") className += " mapPumpkimp";
 			if (maps && map.location == "Void") className += " voidCell";
@@ -10385,7 +10380,6 @@ function toggleMapGridHtml(on, currentMapObj){
 	document.getElementById("mapGrid").style.display = settings[0];
 	if (game.options.menu.extraMapBtns.enabled){
 		swapClass("col-xs", "col-xs-" + settings[1], document.getElementById("extraMapBtns"));
-		swapClass("col-xs", "col-xs-" + settings[2], document.getElementById("gridContainer"));
 	}
 	document.getElementById("repeatBtn").style.display = settings[3];
 	if (!on) return;
@@ -16872,7 +16866,9 @@ function toggleVoidMaps(updateOnly){
 	else if (!game.global.preMapsActive) game.global.voidMapsToggled = false;
 	if (!game.global.voidMapsToggled){
 		voidMapsHere.style.display = "none";
-		mapsHere.style.display = "block";
+		mapsHere.style.display = "flex";
+		mapsHere.style.flexFlow = "row wrap";
+		mapsHere.style.gap = "1em";
 		mapsCreate.style.display = "block";
 		heirRare.style.display = "none";
 		elem.innerHTML = "Void Maps (" + game.global.totalVoidMaps + ")";

public/main.js

@@ -4102,7 +4102,6 @@ function resetGame(keepPortal, resetting) {
 	document.getElementById("energyShieldLayer2").style.width = "0%";
 	document.getElementById("openTutorialContainer").style.display = "none";
 	lookingAtCurrentChallenge = false;
-	swapClass("col-xs", "col-xs-10", document.getElementById("gridContainer"));
 	swapClass("col-xs", "col-xs-off", document.getElementById("extraMapBtns"));
 	mutations.Magma.multiplier = -1;
 	mutations.Magma.lastCalculatedMultiplier = -1;

public/updates.js

@@ -0,0 +1,46 @@
+@use "../../styles/sass/variables.scss" as *;
+@use "../../styles/sass/mixins" as mixins;
+
+.block {
+  @include mixins.button();
+
+  &_clicking {
+    cursor: progress;
+  }
+}
+
+.submit {
+  --local-colour-text-primary: var(--submit-colour-text-primary);
+  --local-colour-text-secondary: var(--submit-colour-text-secondary);
+  --local-colour-text-tertiary: var(--submit-colour-text-tertiary);
+  --local-colour-background-primary: var(--submit-colour-background-primary);
+  --local-colour-background-secondary: var(
+    --submit-colour-background-secondary
+  );
+  --local-colour-background-tertiary: var(--submit-colour-background-secondary);
+}
+
+.positive {
+  --local-colour-text-primary: var(--positive-colour-text-primary);
+  --local-colour-text-secondary: var(--positive-colour-text-secondary);
+  --local-colour-text-tertiary: var(--positive-colour-text-tertiary);
+  --local-colour-background-primary: var(--positive-colour-background-primary);
+  --local-colour-background-secondary: var(
+    --positive-colour-background-secondary
+  );
+  --local-colour-background-tertiary: var(
+    --positive-colour-background-secondary
+  );
+}
+.negative {
+  --local-colour-text-primary: var(--negative-colour-text-primary);
+  --local-colour-text-secondary: var(--negative-colour-text-secondary);
+  --local-colour-text-tertiary: var(--negative-colour-text-tertiary);
+  --local-colour-background-primary: var(--negative-colour-background-primary);
+  --local-colour-background-secondary: var(
+    --negative-colour-background-secondary
+  );
+  --local-colour-background-tertiary: var(
+    --negative-colour-background-secondary
+  );
+}

src/components/buttons/base.module.scss

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import clsx from "clsx";
+import {
+  createBlockComponent,
+  IBaseComponentPropsWithChildren,
+} from "#components/meta";
+import type { IClickEvent, IViewType } from "./types";
+
+import styles from "./base.module.scss";
+
+export interface IButtonBaseProps
+  extends IBaseComponentPropsWithChildren<"button"> {
+  /**
+   * A type of the view of button.
+   * Is not related to `HTMLButtonElement.type`
+   * because it only affects the looks and not the behaviour.
+   * For cases like a submit button within a nested dependant form -
+   * it needs to behave like a submit button, but look like a normal one.
+   */
+  viewType?: IViewType;
+  onClick?: (event: IClickEvent) => Promise<void> | void;
+}
+
+export const ButtonBase = createBlockComponent(styles, Component);
+
+function Component({
+  className,
+  viewType = "button",
+  onClick,
+  ...props
+}: IButtonBaseProps) {
+  const [isClicking, switchClicking] = useState(false);
+  const blockClass = clsx(
+    className,
+    styles[viewType],
+    isClicking && styles.block_clicking,
+  );
+
+  async function handleClick(event: IClickEvent) {
+    if (isClicking) {
+      return;
+    }
+
+    try {
+      switchClicking(true);
+      if (onClick) {
+        await onClick(event);
+      }
+    } finally {
+      switchClicking(false);
+    }
+  }
+
+  return <button className={blockClass} onClick={handleClick} {...props} />;
+}

src/components/buttons/base.tsx

@@ -0,0 +1,12 @@
+import { createBlockComponent } from "#components/meta";
+import { ButtonBase, type IButtonBaseProps } from "./base";
+
+export interface IButtonProps
+  extends Omit<IButtonBaseProps, "type" | "onClick">,
+    Pick<Required<IButtonBaseProps>, "onClick"> {}
+
+export const Button = createBlockComponent(undefined, Component);
+
+function Component({ ...props }: IButtonProps) {
+  return <ButtonBase type="button" {...props} />;
+}

src/components/buttons/button.tsx

@@ -0,0 +1 @@
+export { Button } from "./button";

src/components/buttons/index.ts

@@ -0,0 +1,16 @@
+import { type MouseEvent as IReactMouseEvent } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const VIEW_TYPES = [
+  "button",
+  "submit",
+  "reset",
+  "negative",
+  "positive",
+] as const;
+
+export type IViewType = (typeof VIEW_TYPES)[number];
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface IClickEvent
+  extends IReactMouseEvent<HTMLButtonElement, MouseEvent> {}

src/components/buttons/types.ts

@@ -0,0 +1,68 @@
+import clsx from "clsx";
+
+export type IFuncComponent<PropsType> = (
+  props: PropsType,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref?: any,
+) => JSX.Element;
+
+interface IBaseProps {
+  className?: string;
+}
+
+interface IBlockStyles {
+  block?: string;
+}
+
+/**
+ * Concatenates `className` of the component with the `className`
+ * of the props passed to it, so it could be passed with `{...props}` call.
+ * @param blockClassName
+ * Either a `className` string or a `styles` object module.
+ * The `styles` object always assumes the presence of the `.block` style.
+ *
+ * @example
+ * Without decorator:
+ * ```tsx
+ * import type { ComponentPropsWithoutRef } from "react";
+ *
+ * import styles from "./base.module.scss";
+ *
+ * interface IProps extends ComponentPropsWithoutRef<"button"> {}
+ *
+ * export function Button({ className, ...props }: IProps) {
+ *   return <button className={`${styles.block} ${className}`} {...props} />;
+ * }
+ * ```
+ * @example
+ * With decorator:
+ * ```tsx
+ * import type { ComponentPropsWithoutRef } from "react";
+ * import { createBlockComponent } from "@repo/ui/meta";
+ *
+ * import styles from "./base.module.scss";
+ *
+ * interface IProps extends ComponentPropsWithoutRef<"button"> {}
+ *
+ * export const Button = createBlockComponent(styles, Component);
+ *
+ * function Component({ ...props }: IProps) {
+ *   return <button {...props} />;
+ * }
+ * ```
+ */
+export function createBlockComponent<Props extends IBaseProps = IBaseProps>(
+  blockClassName: IBlockStyles | string | undefined,
+  functionComponent: IFuncComponent<Props>,
+): typeof functionComponent {
+  return (...args: Parameters<typeof functionComponent>) => {
+    const [props, ref] = args;
+    const baseClassName =
+      typeof blockClassName === "string"
+        ? blockClassName
+        : blockClassName?.block;
+    const className = clsx(baseClassName, props.className);
+
+    return functionComponent({ ...props, className }, ref);
+  };
+}

src/components/meta/block-component.ts

@@ -0,0 +1,5 @@
+export { createBlockComponent } from "./block-component";
+export type {
+  IBaseComponentProps,
+  IBaseComponentPropsWithChildren,
+} from "./types";