Make it work

Signed-off-by: Release-Candidate <[e-mail]>

.eslintrc.json

···
                 ]
             }
         ],
-        "no-mixed-operators": "error",
+        "no-mixed-operators": "off",
         "no-multi-assign": "error",
         "no-multi-spaces": "error",
         "no-multi-str": "error",

src/App.tsx

···
  * The app's main entry point.
  * @returns {JSX.Element} Main app component.
  */
+// eslint-disable-next-line max-lines-per-function
 function App(): JSX.Element {
-    const [count, setCount] = createSignal(0);
+    const [z1, setZ1] = createSignal(0);
+    const [z2, setZ2] = createSignal(0);
+    const [deg1, setDeg1] = createSignal(0);
+    const [deg2, setDeg2] = createSignal(0);
+    const [min1, setMin1] = createSignal(0);
+    const [min2, setMin2] = createSignal(0);
+    const angle: z.ZodiacAngle = {
+        z: z1() as z.Zodiacs,
+        degrees: 15,
+        minutes: 20,
+    };
+    const angle2: z.ZodiacAngle = {
+        z: z.Zodiacs.Cancer,
+        degrees: 8,
+        minutes: 45,
+    };
 
     return (
         <>
             <h1>Bisectriz</h1>
-            {circle}
+            <p>
+                <label for="zodiac1">Zvieratník:</label>
+                <select
+                    name="zodiac1"
+                    id="zodiac1"
+                    onChange={(e) => setZ1(Number(e.target.value))}>
+                    <option value="0">baran</option>
+                    <option value="1">býk</option>
+                    <option value="2">bliženci</option>
+                    <option value="3">rak</option>
+                    <option value="4">lev</option>
+                    <option value="5">panna</option>
+                    <option value="6">váhy</option>
+                    <option value="7">škorpion</option>
+                    <option value="8">strelec</option>
+                    <option value="9">kozorožec</option>
+                    <option value="10">vodnár</option>
+                    <option value="11">ryby</option>
+                </select>
+
+                <label for="zodiac1-deg"> deg: </label>
+                <input
+                    type="number"
+                    name="zodiac1-deg"
+                    id="zodiac1-deg"
+                    value="0"
+                    min="0"
+                    max="29"
+                    onChange={(e) => setDeg1(Number(e.target.value))}
+                />
+
+                <label for="zodiac1-min"> min: </label>
+                <input
+                    type="number"
+                    name="zodiac1-min"
+                    id="zodiac1-min"
+                    value="0"
+                    min="0"
+                    max="59"
+                    onChange={(e) => setMin1(Number(e.target.value))}
+                />
+            </p>
+            <p>
+                <label for="zodiac2">Zvieratník:</label>
+                <select
+                    name="zodiac2"
+                    id="zodiac2"
+                    onChange={(e) => setZ2(Number(e.target.value))}>
+                    <option value="0">baran</option>
+                    <option value="1">býk</option>
+                    <option value="2">bliženci</option>
+                    <option value="3">rak</option>
+                    <option value="4">lev</option>
+                    <option value="5">panna</option>
+                    <option value="6">váhy</option>
+                    <option value="7">škorpion</option>
+                    <option value="8">strelec</option>
+                    <option value="9">kozorožec</option>
+                    <option value="10">vodnár</option>
+                    <option value="11">ryby</option>
+                </select>
+
+                <label for="zodiac2-deg"> deg: </label>
+                <input
+                    type="number"
+                    name="zodiac2-deg"
+                    id="zodiac2-deg"
+                    value="0"
+                    min="0"
+                    max="29"
+                    onChange={(e) => setDeg2(Number(e.target.value))}
+                />
+
+                <label for="zodiac2-min"> min: </label>
+                <input
+                    type="number"
+                    name="zodiac2-min"
+                    id="zodiac2-min"
+                    value="0"
+                    min="0"
+                    max="59"
+                    onChange={(e) => setMin2(Number(e.target.value))}
+                />
+            </p>
             <div class="card  m-4 bg-orange-200">
-                <button class="" onClick={() => setCount((cnt) => cnt + 1)}>
-                    count is {count()}
-                </button>
                 <p>
-                    Edit <code>src/App.tsx</code> and save to test HMR{" "}
-                    {z.zodiacSymbol(z.Zodiacs.Cancer)}
+                    Bisectriz:{" "}
+                    {z.zodiacAngleString(
+                        z.bisectZodiacAngle(
+                            { z: z1(), degrees: deg1(), minutes: min1() },
+                            { z: z2(), degrees: deg2(), minutes: min2() },
+                        ),
+                    )}
                 </p>
             </div>
+            {circle}
         </>
     );
 }

src/zodiacs.ts

···
 }
 
 /**
+ * Constant to multiply the zodiac index with to get the angle in degrees.
+ * Starting with Aries at 0°.
+ */
+const zodiacDegreeFactor = 30;
+
+/**
+ * Return the angle in degrees of the given zodiac, starting with aries at 0.
+ * @param z The zodiac to get the angle of.
+ * @returns The angle in degrees of the given zodiac, starting with aries at 0.
+ */
+export function zodiacDegrees(z: Zodiacs): number {
+    return z * zodiacDegreeFactor;
+}
+
+/**
  * The name of the 12 zodiac sign in slovak.
  */
 const zodiacSlovak = [
···
 /**
  * The Unicode symbols of the 12 zodiac signs.
  */
-export const zodiacSymbols = [
+const zodiacSymbols = [
     "♈",
     "♉",
     "♊",
···
 export function zodiacSymbol(z: Zodiacs): string {
     return zodiacSymbols[z];
 }
+
+/**
+ * A angle given in zodiac signs, degrees and minutes.
+ * `z` is angle in as a zodiac sign, the angle in 30° increments,
+ * `degrees` is the remainder of the angle in degrees should be between 0 and 30
+ *  (exclusive),
+ * `minutes` is the remainder of the angle in minutes.
+ */
+export type ZodiacAngle = {
+    // eslint-disable-next-line lines-around-comment
+    /**
+     * The zodiac sign of the angle. This is a angle in 30° increments.
+     */
+    z: Zodiacs;
+
+    /**
+     * The part of the angle in degrees, should be between 0 and 30 (exclusive).
+     */
+    degrees: number;
+
+    /**
+     * The part of the angle in minutes, should be between 0 and 59 (exclusive).
+     * A minute is 1/60 of a degree.
+     */
+    minutes: number;
+};
+
+/**
+ * Return a string representation of the given `ZodiacAngle`.
+ * @param a The `ZodiacAngle` to convert to a string.
+ * @returns The string representation of the given `ZodiacAngle`.
+ */
+export function zodiacAngleString(a: ZodiacAngle): string {
+    return `${zodiacString(a.z)} ${a.degrees}°${a.minutes}'`;
+}
+
+/**
+ * Return the angle in degrees of the given `ZodiacAngle`.
+ * @param a The `ZodiacAngle` to convert to degrees.
+ * @returns The angle in degrees of the given `ZodiacAngle`.
+ */
+export function zodiacAngle2Deg(a: ZodiacAngle): number {
+    // eslint-disable-next-line no-magic-numbers
+    return (a.z * zodiacDegreeFactor + a.degrees + a.minutes / 60) % 360;
+}
+
+/**
+ * Return the `ZodiacAngle` of the given angle in degrees.
+ * @param angle The angle in degrees to convert to a `ZodiacAngle`.
+ * @returns The `ZodiacAngle` of the given angle in degrees.
+ */
+export function deg2ZodiacAngle(angle: number): ZodiacAngle {
+    // eslint-disable-next-line no-magic-numbers
+    const z = Math.floor(angle / zodiacDegreeFactor) % 12;
+    const degrees = Math.floor(angle % zodiacDegreeFactor);
+    // Round two times, once to a factor of ten and then round again after / 10.
+    const minutes = Math.round(
+        // eslint-disable-next-line no-magic-numbers, @typescript-eslint/no-extra-parens
+        Math.round(((angle - (z * zodiacDegreeFactor + degrees)) * 600) % 600) *
+            // eslint-disable-next-line no-magic-numbers
+            0.1,
+    );
+    return { z, degrees, minutes };
+}
+
+/**
+ * Return the bisection of the angle between the two given `ZodiacAngle`s.
+ * @param a The first `ZodiacAngle` of the angle to bisect.
+ * @param b The second `ZodiacAngle` of the angle to bisect.
+ * @returns The bisection of the angle between the two given `ZodiacAngle`s.
+ */
+export function bisectZodiacAngle(a: ZodiacAngle, b: ZodiacAngle): ZodiacAngle {
+    const aDeg = zodiacAngle2Deg(a);
+    const bDeg = zodiacAngle2Deg(b);
+    // eslint-disable-next-line no-magic-numbers
+    const cDeg = (aDeg + bDeg) * 0.5;
+    return deg2ZodiacAngle(cDeg);
+}