Tomasz Stańczak /noritorihotondo

components/VikingCard/VikingCard.module.css

@@ -0,0 +1,41 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 30px;
+
+  width: 300px;
+  margin: 0 auto;
+  padding: 30px;
+  border-radius: 10px;
+
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: grey;
+  background-blend-mode: multiply;
+
+  color: azure;
+  transition: 2s;
+}
+
+.wrapper:hover {
+  transform: scale(1.1);
+  -webkit-animation: glowing 1s ease-in-out infinite alternate;
+  -moz-animation: glowing 1s ease-in-out infinite alternate;
+  animation: glowing 1s ease-in-out infinite alternate;
+}
+@keyframes glowing {
+  from {
+    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px rgb(17, 0, 255),
+      0 0 40px #0ff, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
+  }
+  to {
+    box-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6,
+      0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
+  }
+}
+
+.wrapper > h4 {
+  color: rgb(172, 202, 238);
+}

components/VikingCard/index.tsx

@@ -0,0 +1,34 @@
+import { Viking } from "../../types";
+import styles from "./VikingCard.module.css";
+import VikingWeaponAbility from "../VikingWeaponAbility";
+
+interface Props {
+  viking: Viking;
+  backgroundImage: string;
+}
+
+export default function VikingCard({ viking, backgroundImage }: Props) {
+  return (
+    <div
+      className={styles.wrapper}
+      style={{ backgroundImage: `url("${backgroundImage}")` }}
+    >
+      <h4>{viking.fullName}</h4>
+      <p>age: {viking.age}</p>
+      <p>children: {viking.presenceOfChildren ? "yes" : "no"}</p>
+      <p>hometown: {viking.hometown}</p>
+      <VikingWeaponAbility
+        state={viking.canFightWithAxe}
+        weapon="axe"
+      />
+      <VikingWeaponAbility
+        state={viking.canFightWithSpear}
+        weapon="spear"
+      />
+      <VikingWeaponAbility
+        state={viking.canFightWithSword}
+        weapon="sword"
+      />
+    </div>
+  );
+}

components/VikingList/VikingList.module.css

@@ -0,0 +1,6 @@
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 30px;
+}

components/VikingList/index.tsx

@@ -0,0 +1,71 @@
+import { Viking } from "../../types";
+import VikingCard from "../VikingCard";
+import styles from "./VikingList.module.css";
+
+interface Props {
+  vikings: Viking[];
+}
+
+const getRandomInt = (min: number, max: number): number => {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+const images = [
+  "/viking_background.jpg",
+  "/viking_background2.jpg",
+  "/viking_background3.jpg",
+  "/viking_background4.jpg",
+  "/viking_background5.jpg",
+  "/viking_background6.jpg",
+  "/viking_background7.jpg",
+  "/viking_background8.jpg",
+  "/viking_background9.jpg",
+  "/viking_background10.jpg",
+  "/viking_background11.jpg",
+  "/viking_background12.jpg",
+  "/viking_background13.jpg",
+  "/viking_background14.jpg",
+  "/viking_background15.jpg",
+  "/viking_background16.jpg",
+  "/viking_background17.jpg",
+  "/viking_background18.jpg",
+  "/viking_background19.jpg",
+  "/viking_background20.jpg",
+];
+
+const getRandomImage = (images: string[]): string => {
+  const randomInt = getRandomInt(0, images.length - 1);
+  const randomImgSrc = images[randomInt];
+  return randomImgSrc;
+};
+
+const getRandomImagesArray = (amount: number): string[] => {
+  const imagesCopy = [...images];
+  const result: string[] = [];
+  for (let i = 0; i < amount; i++) {
+    const randomImage = getRandomImage(imagesCopy);
+    const randomImageIndex = imagesCopy.indexOf(randomImage);
+    imagesCopy.splice(randomImageIndex, 1);
+    result.push(randomImage);
+  }
+
+  return result;
+};
+
+export default function VikingList({ vikings }: Props) {
+  const backgroundImages = getRandomImagesArray(vikings.length);
+
+  return (
+    <div className={styles.wrapper}>
+      {vikings.map((viking, i) => (
+        <VikingCard
+          viking={viking}
+          key={viking.fullName}
+          backgroundImage={backgroundImages[i] ?? "/viking_background8.jpg"}
+        />
+      ))}
+    </div>
+  );
+}

components/VikingWeaponAbility/VikingWeaponAbility.module.css

@@ -0,0 +1,4 @@
+.wrapper {
+  display: flex;
+  gap: 5px;
+}

components/VikingWeaponAbility/index.tsx

@@ -0,0 +1,28 @@
+import Image from "next/image";
+import { VikingWeapon } from "../../types";
+import styles from "./VikingWeaponAbility.module.css";
+
+interface Props {
+  state: boolean;
+  weapon: VikingWeapon;
+}
+
+export default function VikingWeaponAbility({ state, weapon }: Props) {
+  const imageProps = {
+    src: state ? `/${weapon}.png` : "/cantfight.jpg",
+    alt: state
+      ? `Viking can fight with ${weapon}`
+      : `Viking can not fight with ${weapon}`,
+  };
+  return (
+    <div className={styles.wrapper}>
+      can fight with {weapon}
+      <Image
+        src={imageProps.src}
+        alt={imageProps.alt}
+        width={20}
+        height={20}
+      />
+    </div>
+  );
+}

lib/index.ts

@@ -0,0 +1,59 @@
+import fs from "fs/promises";
+import yaml from "js-yaml";
+import { YamlViking, JsonViking, Viking, VikingWeapon } from "../types";
+
+const getRandomInt = (min: number, max: number): number => {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+const getRandomWeapon = (): VikingWeapon => {
+  const weapons: VikingWeapon[] = ["axe", "sword", "spear"];
+  const randomInt = getRandomInt(0, weapons.length - 1);
+  return weapons[randomInt];
+};
+
+export const getYamlVikings = async (): Promise<YamlViking[]> =>
+  yaml.load(await fs.readFile("vikings.yaml", "utf-8")) as YamlViking[];
+
+export const getJsonVikings = async (): Promise<JsonViking[]> =>
+  JSON.parse(await fs.readFile("vikings.json", { encoding: "utf-8" }));
+
+export const mapFromYamlVikingToViking = (
+  yamlVikings: YamlViking[]
+): Viking[] => {
+  return yamlVikings.map((viking) => {
+    const fullName = `${viking.name} ${viking.name_of_father}son`;
+    const data: Viking = {
+      fullName,
+      age: viking.years_old,
+      hometown: viking.has_home_in,
+      presenceOfChildren: viking.number_of_children > 0,
+      canFightWithAxe: viking.weapon === "axe",
+      canFightWithSpear: viking.weapon === "spear",
+      canFightWithSword: viking.weapon === "sword",
+    };
+
+    return data;
+  });
+};
+
+export const mapFromJsonVikingToViking = (
+  jsonVikings: JsonViking[]
+): Viking[] => {
+  return jsonVikings.map((viking) => {
+    const weapon = getRandomWeapon();
+    const data: Viking = {
+      fullName: viking.fullName,
+      age: viking.age,
+      hometown: viking.village,
+      presenceOfChildren: viking.hasSon,
+      canFightWithAxe: weapon === "axe",
+      canFightWithSpear: weapon === "spear",
+      canFightWithSword: weapon === "sword",
+    };
+
+    return data;
+  });
+};

package.json

@@ -14,9 +14,13 @@
     "@types/react-dom": "18.0.9",
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.6",
+    "js-yaml": "^4.1.0",
     "next": "13.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.4"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.5"
   }
 }

pages/_app.tsx

@@ -1,6 +1,6 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

pages/api/vikings.ts

@@ -0,0 +1,26 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import {
+  getYamlVikings,
+  getJsonVikings,
+  mapFromJsonVikingToViking,
+  mapFromYamlVikingToViking,
+} from "../../lib";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const yamlVikings = await getYamlVikings();
+  const jsonVikings = await getJsonVikings();
+  const vikings = [
+    ...mapFromJsonVikingToViking(jsonVikings),
+    ...mapFromYamlVikingToViking(yamlVikings),
+  ];
+
+  const filteredVikings = vikings.filter(
+    (viking) => viking.age >= 25 && viking.age <= 65
+  );
+
+  res.status(200).json(filteredVikings);
+}