background red

components/BigCard.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/BigCard.module.scss"
+
+
+
+const BigCard = ({ lang, title, short, picture, url, type, price }) => {
+
+  return (
+    <a href={`/${url}`} className={`bg-shadow-${type} ${styles.item}`}>
+      <div >
+        <div className={styles.mainpicture} style={{ backgroundImage: `url("${picture}")` }}>
+        </div>
+        {price && <div className={styles.price}>${price}</div>}
+        <div className={styles.textpart}>
+          <div className={styles.title}>
+            {title}
+          </div>
+        </div>
+      </div>
+    </a>
+  )
+}
+
+export default BigCard

components/BigCardList.js

@@ -0,0 +1,46 @@
+import React, { useState } from "react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/BigCardList.module.scss"
+import BigCard from "./BigCard"
+import BiggestCard from "./BiggestCard"
+
+
+const BigCardList = ({ items, title, type }) => {
+
+  return (
+    // <div className={styles.itemgallery}>
+    //   <div className={styles.title}>{title}</div>
+    //   <div className={styles.relateditems}>
+    //     {items.map((item, index) => (
+    //       const lang = item.lang === "default" ? "/en" : `/${item.lang}`;
+    //       return(
+    //       <div>
+    //         {type=="product" && <SmallCard title={item.content.title} picture={item.content.mainpicture.filename} url={item.full_slug} type={type} price={item.content.price} />}
+    //         {type!="product" && <SmallCard title={item.content.title} picture={item.content.mainpicture.filename} url={item.full_slug} type={type} />}
+    //       </div>
+    //       );
+    //     ))}
+    //   </div>
+    // </div>
+
+
+    <div className={styles.itemgallery}>
+      {title&&title!=""&&<div className={styles.title}>{title}</div>}
+      <div className={styles.gallerycontent}>
+      {items.map((item) => {
+        const lang = item.lang === "default" ? "/en" : `/${item.lang}`;
+        return (
+          <div className={styles.smallcardwrapper}>
+            {type == "minimumage" && <BiggestCard lang={lang} picture={item.content.logo.filename } url={"https://pegi.info/"} />}
+            {type != "product" && type != "minimumage"&& <BigCard lang={lang} title={item.content.title} picture={item.content.logo.filename} url={item.full_slug} type={type} />}
+          </div>
+        );
+      })}
+      </div>
+
+    </div>
+
+  )
+}
+
+export default BigCardList

components/BiggestCard.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/BigCard.module.scss"
+
+
+
+const BigCard = ({ lang, title, short, picture, url, type, price }) => {
+
+  return (
+    <a href={url} className={`bg-shadow-${type} ${styles.item}`}>
+      <div >
+        <div className={styles.mainpicture} style={{ backgroundImage: `url("${picture}")` }}>
+        </div>
+        {price && <div className={styles.price}>${price}</div>}
+        <div className={styles.textpart}>
+          <div className={styles.title}>
+            {title}
+          </div>
+        </div>
+      </div>
+    </a>
+  )
+}
+
+export default BigCard

components/Character.js

@@ -0,0 +1,163 @@
+import React, { useState } from "react"
+import SbEditable from "storyblok-react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/Character.module.scss"
+import { getData } from "../utils/storyblok"
+import RelatedItemGallerySmall from "./RelatedItemGallerySmall"
+import RelatedItemGallery from "./RelatedItemGallery"
+import InPageSlideshow from "./InPageSlideshow"
+import SmallCardList from "./SmallCardList"
+import { resolveHref } from "next/dist/next-server/lib/router/router"
+
+// const resolveDirectors = {
+//   en: 'Directors',
+//   nl: 'Regisseurs',
+// }
+
+// const resolveWriters = {
+//   en: 'Writers',
+//   nl: 'Schrijvers',
+// }
+
+// const resolveStars = {
+//   en: 'Stars',
+//   nl: 'Sterren',
+// }
+
+// const resolveMerchandise = {
+//   en: 'Merchandise',
+//   nl: 'Producten',
+// }
+
+// const resolveNews = {
+//   en: 'News',
+//   nl: 'Nieuws',
+// }
+const resolveCharacters = {
+  en: 'Characters',
+  nl: 'Personages',
+  fr: 'Personnages'
+}
+const resolveEnnemies = {
+  en: 'Friends, family and ennemies',
+  nl: 'Vrienden, gezin en vijanden',
+  fr: 'Amis, famille et ennemis',
+}
+const resolveGames = {
+  en: 'Games',
+  nl: 'Spellen',
+  fr: 'Jeux',
+}
+const resolveAge = {
+  en: 'Age of the character:',
+  nl: 'Leeftijd van het personage:',
+  fr: 'Âge du personnage:',
+}
+const Character = ({ data, level }) => {
+  var locale = 'en';
+  //enriching data
+  if (level === 'data') {
+
+    locale = data.story.lang;
+    var content = data.story.content;
+    var roles = data.rels.filter(obj => {
+      return content.role.includes(obj.uuid);
+    });
+    // var genders =data.story.content.gender;
+    var genders=data.rels.filter(obj => {
+      return content.gender.includes(obj.uuid);
+      });
+    var relatedcharacters=data.rels.filter(obj => {
+    return content.character.includes(obj.uuid);
+    })
+    var playables = data.rels.filter(obj => {
+      return content.playable.includes(obj.uuid);
+    });
+    // var directors = data.rels.filter(obj => {
+    //   return content.directors.includes(obj.uuid);
+    // });
+    // var stars = data.rels.filter(obj => {
+    //   return content.stars.includes(obj.uuid);
+    // });
+    // var writers = data.rels.filter(obj => {
+    //   return content.writers.includes(obj.uuid);
+    // })
+    // var studios = data.rels.filter(obj => {
+    //   return content.studios.includes(obj.uuid);
+    // })
+
+
+    var pictures = content.mainpicture;
+  } else {
+    var content = data;
+  }
+  // const [products, setProducts] = useState([]);
+  // getData(data.story.uuid, locale, content.preview = false, 'product', 'game').then(
+  //   function (result) {
+  //     setProducts(result.data.stories);
+  //   });
+
+  // const [newsitems, setNewsitems] = useState([]);
+  // getData(data.story.uuid, locale, content.preview = false, 'newsitem', 'game').then(
+  //   function (result) {
+  //     setNewsitems(result.data.stories);
+  //   });
+  const [games_good, setGames] = useState([]);
+  getData(data.story.uuid, locale, content.preview = false, 'game', 'character').then(
+    function (result) {
+      setGames(result.data.stories);
+    });
+
+  //returning the HTML
+  return (
+    <SbEditable content={content} key={content._uid}>
+      <main>
+        {/* <div className={[styles.movie, styles.test].join(' ')}> */}
+        <div className={styles.character}>
+          <h1 className={styles.title}>
+            {content.title}
+          </h1>
+          <div className={styles.genders}>
+            {genders.map((item, index) => (
+              <div className={styles.gendersname}> 
+              {item.content.title}
+              <div className={styles.gender}> 
+                <img src={item.content.logo.filename}></img>
+
+                        </div>
+                  </div> ))} 
+          <div className={styles.roles}>
+            {roles.map((item, index) => (
+              <div className={styles.role}> 
+                <img src={item.content.logo.filename}></img>
+                  </div>
+            ))} 
+            <div className={styles.roles}>
+            {roles.map((item, index) => (
+              <div className={styles.rolesname}> 
+                {item.content.title}
+                  </div>
+            ))} </div>
+          </div>
+
+          <div className={styles.age}>  
+          {resolveAge[locale]} {render(content.age)} 
+          </div>
+          <div className={styles.mainpicture} style={{ backgroundImage: `url("${content.mainpicture.filename}")` }}>
+          </div>
+          <div className={styles.imagegallery} style={{ backgroundImage: `url("${content.mainpicture.filename}")` }}>
+          </div>
+          <div className={styles.relatedcharacters}> 
+        {relatedcharacters && relatedcharacters.length > 0 && <SmallCardList items={relatedcharacters} title={resolveEnnemies[locale]} type='character'></SmallCardList>}
+        </div>
+          {/* <div className={styles.links}>
+              <a href={""}>VISIT</a>
+            </div> */}
+        </div>
+        {games_good && games_good.length > 0 && <SmallCardList items={games_good} title={resolveGames[locale]} type="game"></SmallCardList>}</div>
+      </main>
+    </SbEditable>
+  )
+}
+
+export default Character

components/CharacterList.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react"
+import SbEditable from "storyblok-react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/CharacterList.module.scss"
+import { getAllItems } from "../utils/storyblok"
+import SmallCardList from "./SmallCardList"
+
+const CharacterList = ({ data, level, locale }) => {
+  if (level === 'data') {
+    var content = data.story.content;
+  } else {
+    var content = data;
+  }
+  const [sortby, setSortby] = useState();
+
+  const [items, setItems] = useState([]);
+  getAllItems('character', locale, sortby).then(
+    function (result) {
+      setItems(result.data.stories);
+    });
+
+  return (
+    <div className={styles.list}>
+      <div>
+        {items && items.length > 0 && <SmallCardList items={items} type="character"></SmallCardList>}
+      </div>
+    </div>
+
+  );
+};
+
+export default CharacterList;

components/Company.js

@@ -0,0 +1,66 @@
+import React, { useState } from "react"
+import SbEditable from "storyblok-react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/Company.module.scss"
+import { getData } from "../utils/storyblok"
+import BigCardList from "./BigCardList"
+import SmallCardList from "./SmallCardList"
+const resolvePlatform ={
+  en: 'Platforms',
+  nl: 'Platforms',
+  fr: 'Plateformes',
+}
+const resolveGames = {
+  en: 'Games',
+  nl: 'Spellen',
+  fr: 'Jeux',
+}
+const Company= ({ data }) => {
+  var locale = data.story.lang;
+
+  var content = data.story.content;
+  var countries = data.rels.filter(obj => {
+    return content.country.includes(obj.uuid);
+  });
+
+  const [platforms_good, setPlatforms] = useState([]);
+  getData(data.story.uuid, locale, content.preview = false, 'platform', 'companies').then(
+    function (result) {
+      setPlatforms(result.data.stories);
+    });
+    const [games_good, setGames] = useState([]);
+  getData(data.story.uuid, locale, content.preview = false, 'game', 'publisher').then(
+    function (result) {
+      setGames(result.data.stories);
+    });
+  return (
+    <SbEditable content={content} key={content._uid}>
+      <main>
+        {/* <div className={[styles.movie, styles.test].join(' ')}> */}
+        <div className={styles.studio}>
+          <h1 className={styles.title}>
+            {content.title}
+          </h1><div className={styles.logo}>
+          <img src={content.logo.filename} />
+          </div>
+            {countries.map((item, index) => (
+              <div className={styles.country}>
+                <img src={item.content.flag.filename}></img>
+              </div>
+            ))}
+
+
+        <div className={styles.description}>
+          {render(content.description)}
+        </div>
+
+
+  {platforms_good && platforms_good.length > 0 && <BigCardList items={platforms_good}  title={resolvePlatform[locale]} type="platform"></BigCardList>} 
+  {games_good && games_good.length > 0 && <SmallCardList items={games_good}  title={resolveGames[locale]} type="game"></SmallCardList>} </div>
+
+      </main>
+    </SbEditable>
+  )
+}
+
+export default Company

components/CompanyList.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react"
+import SbEditable from "storyblok-react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/CompanyList.module.scss"
+import { getAllItems } from "../utils/storyblok"
+import BigCardList from "./BigCardList"
+
+const CompanyList = ({ data, level, locale }) => {
+  if (level === 'data') {
+    var content = data.story.content;
+  } else {
+    var content = data;
+  }
+  const [sortby, setSortby] = useState();
+
+  const [items, setItems] = useState([]);
+  getAllItems('Company', locale, sortby).then(
+    function (result) {
+      setItems(result.data.stories);
+    });
+
+  return (
+    <div className={styles.list}>
+      <div>
+        {items && items.length > 0 && <BigCardList items={items} type="Company"></BigCardList>}
+      </div>
+    </div>
+
+  );
+};
+
+export default CompanyList;