Hw3

.eslintrc.json

@@ -4,7 +4,6 @@
   "rules": {
     "camelcase": ["error", { "properties": "never" }],
     "prettier/prettier": "error",
-    "eqeqeq": ["error", "always"],
-    "no-unused-vars": ["error"]
+    "eqeqeq": ["error", "always"]
   }
 }

.gitignore

@@ -12,6 +12,7 @@
 /build
 
 # misc
+.idea
 .DS_Store
 .env.local
 .env.development.local

README.md

@@ -44,3 +44,18 @@ https://skypro-web-developer.github.io/react-memo/
 
 Запускает eslint проверку кода, эта же команда запускается перед каждым коммитом.
 Если не получается закоммитить, попробуйте запустить эту команду и исправить все ошибки и предупреждения.
+
+## Первая домашняя работа (оценка)
+
+Предполагаемое время: 8 часов.
+Фактическое время: 5 часов.
+
+## Вторая домашняя работа (оценка)
+
+Предполагаемое время: 8 часов.
+Фактическое время: 12 часов.
+
+## Курсовая работа работа (оценка)
+
+Предполагаемое время: 9 часов.
+Фактическое время: 10 часов.

src/api/LeadersAPI.js

@@ -0,0 +1,30 @@
+const topLeadersLink = "https://wedev-api.sky.pro/api/v2/leaderboard";
+
+export const getRequest = () => {
+  return fetch(topLeadersLink, {
+    method: "GET",
+  }).then(response => {
+    if (!response.ok) {
+      throw new Error("Что-то я заплутал...");
+    }
+    if (response.status === 400) {
+      throw new Error("Полученные данные не в формате JSON");
+    }
+    return response.json();
+  });
+};
+
+export const postRequest = record => {
+  return fetch(topLeadersLink, {
+    method: "POST",
+    body: JSON.stringify(record),
+  }).then(response => {
+    if (!response.ok) {
+      throw new Error("Что-то пошло не так");
+    }
+    if (response.status === 400) {
+      throw new Error("Полученные данные не в формате JSON!");
+    }
+    return response.json();
+  });
+};

src/components/AchievementsImages/AchievementsImages.jsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import styles from "./AchievementsImages.module.css";
+
+import hardLevelImage from "./images/hardLevel.svg";
+import superPowerImage from "./images/superPower.svg";
+import hardLevelGreyImage from "./images/hardLevelGrey.svg";
+import superPowerGreyImage from "./images/superPowerGrey.svg";
+
+export function HardLevelImg({ disabled }) {
+  const [isOpen, setOpen] = useState(false);
+
+  function mouseHover(value) {
+    if (disabled) return;
+
+    setOpen(value);
+  }
+
+  return (
+    <div className={styles.cntHint}>
+      {!disabled && isOpen && (
+        <p className={styles.cntInsight}>
+          Игра пройдена
+          <br />в сложном режиме
+        </p>
+      )}
+      <img
+        src={disabled ? hardLevelGreyImage : hardLevelImage}
+        alt="hard level"
+        onMouseOver={() => mouseHover(true)}
+        onMouseOut={() => mouseHover(false)}
+      />
+    </div>
+  );
+}
+
+export function SuperPowerImg({ disabled }) {
+  const [isOpen, setOpen] = useState(false);
+
+  function mouseHover(value) {
+    if (disabled) return;
+
+    setOpen(value);
+  }
+
+  return (
+    <div className={styles.cntHint}>
+      {!disabled && isOpen && (
+        <p className={styles.cntInsight}>
+          Игра пройдена
+          <br />
+          без супер-сил
+        </p>
+      )}
+      <img
+        src={disabled ? superPowerGreyImage : superPowerImage}
+        alt="hard level"
+        onMouseOver={() => mouseHover(true)}
+        onMouseOut={() => mouseHover(false)}
+      />
+    </div>
+  );
+}

src/components/AchievementsImages/AchievementsImages.module.css

@@ -0,0 +1,39 @@
+
+.cntHint {
+  position: relative;
+
+  img {
+    display: block;
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.cntInsight {
+  background: #C2F5FF;
+  border-radius: 12px;
+  position: absolute;
+  bottom: 45px;
+  left: 3px;
+  padding: 25px 20px 20px;
+  width: 222px;
+  z-index: 1;
+  box-sizing: border-box;
+  font-family: "StratosSkyeng", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+  color: #004980;
+
+  &:after {
+    content: "";
+    width: 20px;
+    height: 14px;
+    position: absolute;
+    bottom: -9px;
+    left: 14px;
+    background: #C2F5FF;
+    clip-path: polygon(0% 100%, 0% 0%, 100% 0%);
+  }
+}

src/components/Button/Button.module.css

@@ -10,7 +10,7 @@
   font-variant-numeric: lining-nums proportional-nums;
 
   /* Pres → Caption S */
-  font-family: StratosSkyeng;
+  font-family: "StratosSkyeng", sans-serif;
   font-size: 24px;
   font-style: normal;
   font-weight: 400;

src/components/Card/Card.module.css

@@ -40,7 +40,7 @@
 
   color: #000;
   font-variant-numeric: lining-nums proportional-nums;
-  font-family: StratosSkyeng;
+  font-family: "StratosSkyeng", sans-serif;
   font-size: 24px;
   font-style: normal;
   font-weight: 400;
@@ -75,7 +75,7 @@
 /* Анимация переворота */
 /* весь контейнер поддерживает перспективу */
 .flipContainer {
-  perspective: 1000;
+  perspective: 1000px;
 }
 
 .flipContainer:hover .flipper {