Added logic and styling

src/App.tsx

@@ -1,5 +1,6 @@
 import type { Component } from "solid-js";
 import Main from "./pages/Main";
+import "./styles/fonts-grixel.css";
 
 const App: Component = () => {
   return <Main />;

src/index.css

@@ -1 +1,14 @@
-@import 'tailwindcss';
+@import "tailwindcss";
+
+@theme {
+  --animate-fadein: fadein 0.1s ease-in-out 1;
+  @keyframes fadein {
+    0%,
+    100% {
+      transform: rotate(-1deg);
+    }
+    50% {
+      transform: rotate(1deg);
+    }
+  }
+}

src/pages/Main.tsx

@@ -1,4 +1,4 @@
-import { createSignal, type Component } from "solid-js";
+import { createMemo, createSignal, type Component } from "solid-js";
 import { allTypes, girlTypes } from "../typing/girlTypes";
 
 const Main: Component = () => {
@@ -10,13 +10,82 @@ const Main: Component = () => {
         ? prev.filter((value) => value !== girl)
         : [...prev, girl],
     );
-    console.log(selectedTypes());
   };
 
+  const chosenTypes = createMemo(() => {
+    const ret = [
+      ...selectedTypes().map((girl) =>
+        allTypes.find((girlT) => girlT.type === girl),
+      ),
+    ];
+    return ret;
+  });
+
+  const rows = createMemo(() => {
+    console.log("Calculating weaknesses...");
+    let strengths: girlTypes[] = [];
+    let weaknesses: girlTypes[] = [];
+    let immunities: girlTypes[] = [];
+    selectedTypes().forEach((t) => {
+      const currentGirl = allTypes.find((girl) => girl.type === t);
+      if (currentGirl) {
+        strengths = [...strengths, ...currentGirl.strengths];
+        weaknesses = [...weaknesses, ...currentGirl.weaknesses];
+        immunities = [...immunities, ...currentGirl.immunities];
+      }
+    });
+    const girlT = {
+      ...girlTypes,
+    };
+    const keys = Object.keys(girlT);
+    let counts = new Map();
+    keys.forEach((key) => counts.set(girlT[parseInt(key)], 0));
+
+    strengths.forEach((str) =>
+      counts.set(girlTypes[str], counts.get(girlTypes[str]) + 1),
+    );
+    weaknesses.forEach((wea) =>
+      counts.set(girlTypes[wea], counts.get(girlTypes[wea]) - 1),
+    );
+
+    const multipliers = new Set([...counts.values()].sort((a, b) => b - a));
+
+    const rows: { mul: number; girls: string[] }[] = [];
+    multipliers.forEach((mul) => rows.push({ mul: mul, girls: [] }));
+
+    counts.forEach((value, key) =>
+      rows
+        .find((val) => val.mul === value && key != "None" && key != undefined)
+        ?.girls.push(key),
+    );
+
+    const finalRows = rows.map((value) => {
+      return { mul: 1 * Math.pow(2, value.mul), girls: value.girls };
+    });
+
+    if (immunities.length > 0) {
+      finalRows.push({
+        mul: 0,
+        girls: [...immunities.map((value) => girlTypes[value])],
+      });
+    }
+
+    const ret = finalRows.map((value) => {
+      return {
+        mul: value.mul,
+        girls: value.girls.map((girl) =>
+          allTypes.find((girlT) => girlTypes[girlT.type] === girl),
+        ),
+      };
+    });
+
+    return ret;
+  });
+
   return (
-    <div class="flex bg-emerald-950 text-white">
-      <div class="flex-1">
-        <h2>Choose defending Pokémon types</h2>
+    <div class="flex bg-emerald-950 text-white font-[Grixel] h-screen overflow-y-auto ">
+      <div class="flex-1 m-2 my-1 overflow-y-auto">
+        <h2 class="m-2">Choose defending Pokémon types</h2>
         <div class="flex flex-wrap">
           {allTypes.map((t) => (
             <button
@@ -24,25 +93,56 @@ const Main: Component = () => {
               onClick={() => handleClick(t.type)}
               id={t.type + ""}
             >
-              {selectedTypes().find((value) => value === t.type) ? (
-                <img
-                  src={t.displayImage}
-                  alt={t.displayName}
-                  class="brightness-100 contrast-200 border-4 border-indigo-500 "
-                ></img>
-              ) : (
-                <img
-                  src={t.displayImage}
-                  alt={t.displayName}
-                  class="border-4 border-emerald-950"
-                ></img>
-              )}
+              <img
+                src={t.displayImage}
+                alt={t.displayName}
+                class={
+                  selectedTypes().find((value) => value === t.type)
+                    ? "brightness-100 contrast-200 border-4 border-indigo-500 transition-all"
+                    : "border-4 border-emerald-950 transition-all"
+                }
+              ></img>
             </button>
           ))}
         </div>
+        <div class="m-2 my-1">
+          <h2 class="m-2">Your types:</h2>
+          <div class="flex flex-wrap">
+            {chosenTypes().map((g) => (
+              <img
+                src={g?.displayImage}
+                alt={g?.displayName}
+                class={
+                  "border-4 border-emerald-950 transition-all animate-fadein"
+                }
+              ></img>
+            ))}
+          </div>
+          <button
+            onClick={() => setSelectedTypes([])}
+            class="cursor-pointer border-4 border-indigo-500 rounded p-2 py-1 mt-2 bg-indigo-800"
+          >
+            Reset!
+          </button>
+        </div>
       </div>
-      <div class="flex-1">
-        <h2>Takes 1× from</h2>
+      <div class="flex-1 m-2 my-1 overflow-y-auto">
+        {rows().map((row) => (
+          <div>
+            <h2 class="m-2">Takes {row.mul}× from</h2>
+            <div class="flex flex-wrap">
+              {row.girls.map((g) => (
+                <img
+                  src={g?.displayImage}
+                  alt={g?.displayName}
+                  class={
+                    "border-4 border-emerald-950 transition-all animate-fadein"
+                  }
+                ></img>
+              ))}
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   );

src/styles/fonts-grixel.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "Grixel";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local("Grixel Kyrou 7 Wide"),
+    url("/fonts/kyrou 7 wide bold xtnd.ttf") format("truetype");
+}

src/typing/girlTypes.ts

@@ -117,8 +117,8 @@ export const Puppy: girlType = {
   displayName: "PUPPY",
   displayImage: ImgPuppy,
   type: girlTypes.Puppy,
-  strengths: [],
-  weaknesses: [],
+  strengths: [girlTypes.Knight, girlTypes.Puppy, girlTypes.Plushy, girlTypes.Angel, girlTypes.PoolToy],
+  weaknesses: [girlTypes.Kitty, girlTypes.Little, girlTypes.Dragon, girlTypes.Bug, girlTypes.Goddess, girlTypes.Horror, girlTypes.Handler],
   immunities: []
 }