v1.2.1

CHANGELOG.md

@@ -3,6 +3,17 @@
 This changelog goes through all the changes that have been made in each release on the
 [vocascan-frontend](https://github.com/vocascan/vocascan-frontend).
 
+## [v1.2.1](https://github.com/vocascan/vocascan-frontend/releases/tag/v1.2.1) - 2022.01.29
+
+This release of vocascan-frontend fixes the country flags in firefox and the linebreaks in the vocab card description. The new password complexity indicator will force secure passwords to the users.
+
+- Features
+  - Password complexity (#97)
+- Bugfixes
+  - fixed flags in firefox (#95)
+  - Fix/translations (#96)
+  - fix linebreaks on vocab card and vocab table (#98)
+
 ## [v1.2.0](https://github.com/vocascan/vocascan-frontend/releases/tag/v1.2.0) - 2022.01.22
 
 This is one of the biggest updates for Vocascan so far. We moved the React app out of the desktop app to split up the desktop app into two different repositories. As a result, the frontend is also accessible from within the browser to make learning on foreign or not supported devices a lot easier. Additionally, there are lots of new features (in conjunction with a Vocascan server) to legally secure your site if you want to make it available to the public.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vocascan-frontend",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "description": "A highly configurable vocabulary trainer",
   "author": "vocascan <[email protected]>",

src/Components/Flag/Flag.jsx

@@ -1,24 +1,57 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
+import { useEffect } from "react";
 
-import { countryFlags, languageCountryMap } from "./language-country-map.js";
+import {
+  languageCountryMap,
+  spriteSheetPositions,
+} from "./language-country-map.js";
 
 import "./Flag.scss";
 
-const Flag = ({ languageCode, border = false, size = "small" }) => {
-  let code = null;
+const sizeMap = {
+  small: 0.13,
+  medium: 0.3,
+  large: 0.6,
+};
+
+const Flag = ({ languageCode, border = false, size = "small", scale }) => {
+  const [computedScale, setComputedScale] = useState(0);
+
+  useEffect(() => {
+    if (scale) {
+      setComputedScale(scale);
+    } else if (size && sizeMap[size]) {
+      setComputedScale(sizeMap[size]);
+    } else {
+      setComputedScale(sizeMap.small);
+    }
+  }, [scale, size]);
+
+  const style = useMemo(() => {
+    let code = "unknown";
+
+    if (Object.keys(spriteSheetPositions).includes(languageCode)) {
+      code = languageCode;
+    } else if (languageCountryMap[languageCode]) {
+      code = languageCountryMap[languageCode];
+    }
 
-  if (countryFlags.includes(languageCode)) {
-    code = languageCode;
-  } else if (languageCountryMap[languageCode]) {
-    code = languageCountryMap[languageCode];
-  }
+    return {
+      width: 200 * computedScale,
+      height: 150 * computedScale,
+      backgroundSize: `${3300 * computedScale}px ${3060 * computedScale}px`,
+      backgroundPosition: spriteSheetPositions[code]
+        .map((x) => `${x * computedScale}px`)
+        .join(" "),
+      borderRadius: `${30 * computedScale}px`,
+      boxShadow: border ? `0 0 0 ${10 * computedScale}px` : "none",
+    };
+  }, [border, computedScale, languageCode]);
 
   return (
-    <span
-      className={`flag flag-${code || "unknown"} ${
-        border ? "bordered" : ""
-      } ${size}`}
-    />
+    <div className="flag">
+      <span style={style} />
+    </div>
   );
 };