Merge pull request #194 from CaptainFact/improvement/add-achievements

Add `Artist` and `GoodVibes` achievements

app/assets/assets/help/en/achievements.md

@@ -8,19 +8,28 @@
 * `🛡️ Bulletproof` Install the browser extension
 * `💉 Social Addict` Connect or link your account with third party (Facebook)
 
-# Rare
+# Special
 
 * `👻 Ghostbuster` you [report a bug](/help/bug_report) that gets confirmed
 * `🌟 Fact Check Me, I'm Famous` You made your way up to the monthly leaderboard
+* `Good Vibes` You made some suggestions for improvements or new features, and we find them interesting!
 
 # Legendary
 
 * `🏴‍☠️ Born to hack` You responsibly report us a security breach that gets confirmed
 * `📁 Ambassador` You helped the project in a unique way
+* `📁 Artist` One of your creations is integrated to the project
 
 ----------------------
 
 # Credits
 
-* [U Maja](https://society6.com/rabbitball) for the Bulletproof achievement
+* [U Maja](https://society6.com/rabbitball) for the `Bulletproof` achievement
+* [Alain Ternaute](https://captainfact.io/u/justinternet)
+  - `Open minded`
+  - `Fact's tamer`
+  - `You made a point`
+  - `Good vibes`
+  - `Hit machine`
+  - `Artist`
 * Want to contribute ? Checkout [this link](https://github.com/CaptainFact/captain-fact-frontend/issues/6)!

app/assets/assets/help/fr/achievements.md

@@ -3,24 +3,35 @@
 ## Médailles ordinaires
 
 * `🎉 Welcome` Bienvenue dans la communauté !
-* `🤖 Not a Robot` Email vérifié
-* `🎸 Help !` Vous avez lu au moins une page de l'aide
-* `🛡️ Bulletproof` Vous installez l'extension Chrome ou Firefox
-* `💉 Social Addict` Connectez-vous avec ou liez un compte tierce (Facebook)
+* `🤖 Pas un robot` Email vérifié
+* `🎸 Everybody hurts` Vous avez lu au moins une page de l'aide
+* `🛡️ À l'épreuve des balles` Vous installez l'extension Chrome ou Firefox
+* `💉 Addict aux réseaux sociaux` Connectez-vous avec ou liez un compte tierce (Facebook)
 
 ## Médailles rares
 
-* `👻 Ghostbuster` vous [signalez un bug](/help/bug_report)
+* `👻 Chasseur de fantômes` vous [signalez un bug](/help/bug_report)
 * `🌟 Fact Check Me, I'm Famous` Vous êtes arrivé dans le top contributeurs mensuel
+* `Ondes Positives` Une de vos suggestions d'améliorations ou de nouvelle fonctionnalités a été retenue.
 
 ## Médailles légendaires
 
-* `🏴‍☠️ Born to hack` Vous nous rapportez une faille de sécurité qui est confirmée
-* `📁 Ambassador` Vous avez aidé le projet d'une façon unique
+* `🏴‍☠️ Born to hack` Vous nous signalez une faille de sécurité qui est confirmée
+* `📁 Ambassador` Vous avez été nommé Ambassadeur de la communauté.
+* `📁 Artiste` Une ou plusieurs de vos créations sont intégrées dans le projet. Chapeau l'artiste !
 
 ----------------------
 
 ### Remerciements
 
+* [Alain Ternaute](https://captainfact.io/u/justinternet) pour ses nombreuses contributions :
+  - `🔝 Hit machine`
+  - `🎨 Artiste`
+  - `🐅 Fact's tamer`
+  - `👍 You made a point`
+  - `Open minded`
+  - `Good vibes`
+
 * [U Maja](https://society6.com/rabbitball) pour la médaille `🛡️ Bulletproof`
+
 * Vous souhaitez contribuer ? Jetez un coup d'oeuil [par ici](https://github.com/CaptainFact/captain-fact-frontend/issues/6)!

app/components/Users/Achievement.jsx

@@ -1,39 +1,60 @@
 import React from 'react'
 import { translate } from 'react-i18next'
 
+// Import all achievements images
+import imgDefault from '../../assets/assets/achievements/default.png'
+import imgWelcome from '../../assets/assets/achievements/welcome.jpg'
+import imgRobot from '../../assets/assets/achievements/robot.jpg'
+import imgHelp from '../../assets/assets/achievements/help.jpg'
+import imgBulletproof from '../../assets/assets/achievements/bulletproof.png'
+import imgTrump from '../../assets/assets/achievements/trump.png'
+import imgSocialAddict from '../../assets/assets/achievements/socialAddict.jpg'
+import imgAmbassador from '../../assets/assets/achievements/ambassador.jpg'
+import imgBug from '../../assets/assets/achievements/bug.jpg'
+import imgFamous from '../../assets/assets/achievements/famous.jpg'
+import imgArtist from '../../assets/assets/achievements/artist.jpg'
+import imgGoodVibes from '../../assets/assets/achievements/goodVibes.jpg'
+
+// Import all achievements videos
+import videoWelcome from '../../assets/assets/achievements/welcome.mp4'
+import videoRobot from '../../assets/assets/achievements/robot.mp4'
+import videoSocialAddict from '../../assets/assets/achievements/socialAddict.mp4'
+import videoAmbassador from '../../assets/assets/achievements/ambassador.mp4'
+import videoBug from '../../assets/assets/achievements/bug.mp4'
+import videoFamous from '../../assets/assets/achievements/famous.mp4'
 
-const pictures = {
-  1: 'welcome.jpg',
-  2: 'robot.jpg',
-  3: 'help.jpg',
-  4: 'bulletproof.png',
-  5: 'trump.png',
-  6: 'socialAddict.jpg',
-  7: 'ambassador.jpg',
-  8: 'bug.jpg',
-  9: 'famous.jpg'
-}
 
-const animations = {
-  1: 'welcome.mp4',
-  2: 'robot.mp4',
-  6: 'socialAddict.mp4',
-  7: 'ambassador.mp4',
-  8: 'bug.mp4',
-  9: 'famous.mp4'
+const KNOWN_ACHIEVEMENTS = {
+  1: {img: imgWelcome, video: videoWelcome},
+  2: {img: imgRobot, video: videoRobot},
+  3: {img: imgHelp},
+  4: {img: imgBulletproof},
+  5: {img: imgTrump},
+  6: {img: imgSocialAddict, video: videoSocialAddict},
+  7: {img: imgAmbassador, video: videoAmbassador},
+  8: {img: imgBug, video: videoBug},
+  9: {img: imgFamous, video: videoFamous},
+  10: {img: imgArtist},
+  11: {img: imgGoodVibes}
 }
 
+const UNKNOWN_ACHIEVEMENT = {img: imgDefault}
+
+const renderVisual = ({img, video}) => (
+  video
+    ? (<video src={video} poster={img} autoPlay loop controls={false}/>)
+    : (<img src={img} alt=""/>)
+)
+
 const Achievement = ({t, id}) => {
   const {title, description} = t(id, {returnObjects: true})
-  const image = pictures[id] ? `/assets/achievements/${pictures[id]}` : '/assets/achievements/default.png'
-  const animation = animations[id] ? `/assets/achievements/${animations[id]}` : null
+  const achievement = KNOWN_ACHIEVEMENTS[id] || UNKNOWN_ACHIEVEMENT
 
   return (
     <div className="achievement">
       <div className="card has-text-centered">
         <div className="card-image">
-          {!animation && <img src={image}/>}
-          {animation && <video src={animation} poster={image} autoPlay loop controls={false}/>}
+          {renderVisual(achievement)}
         </div>
         <div className="card-content">
           <div className="content">

app/i18n/en/achievements.js

@@ -37,5 +37,13 @@ export default {
   9: {
     title: 'Fact Check Me, I\'m Famous',
     description: 'You made your way up to the leaderboard, congrats Captain!'
+  },
+  10: {
+    title: 'Artist',
+    description: 'One of your creations is integrated to the project'
+  },
+  11: {
+    title: 'Good Vibes',
+    description: 'You made some suggestions for improvements or new features, and we find them interesting!'
   }
 }

app/i18n/fr/achievements.js

@@ -1,41 +1,49 @@
 export default {
   title: 'Médailles',
   about: 'À propos',
-  unlocked: 'Vous venez de déverouiller le succès « {{achievement}} »',
+  unlocked: 'Vous venez de déverrouiller le succès « {{achievement}} »',
   1: {
     title: 'Welcome',
     description: 'Bienvenue dans l\'aventure !'
   },
   2: {
-    title: 'Not a robot',
+    title: 'Pas un robot',
     description: 'Avec une si belle adresse e-mail, vous ne pouvez pas être un robot'
   },
   3: {
     title: 'Everybody hurts',
     description: 'Chercher de l\'aide dans la section « Aide » était la bonne chose à faire'
   },
   4: {
-    title: 'Bulletproof',
-    description: 'Avec l\'extension pour navigateur installée, on ne vous la mettra plus à l\'envers'
+    title: "À l'épreuve des balles",
+    description: "Avec l'extension pour navigateur installée, on ne vous la mettra plus à l'envers"
   },
   5: {
-    title: 'You\'re fake news!',
+    title: "You're fake news !",
     description: 'On dirait que vous avec détruit cette source'
   },
   6: {
-    title: 'Social Addict',
-    description: 'Vous aimez vous faire espionner par ces entreprises Américaines, n\'est-ce pas ?'
+    title: 'Addict aux réseaux sociaux',
+    description: "Vous aimez vous faire espionner par ces entreprises Américaines, n'est-ce pas ?"
   },
   7: {
-    title: 'Ambassador',
-    description: 'Vous avez été nommé ambassadeur de la communauté'
+    title: 'Ambassadeur',
+    description: 'Vous avez été nommé Ambassadeur de la communauté.'
   },
   8: {
-    title: 'Ghostbuster',
+    title: 'Chasseur de fantômes',
     description: 'Merci de nous avoir signalé ce bug !'
   },
   9: {
-    title: 'Fact Check Me, I\'m Famous',
+    title: "Fact Check Me, I'm Famous",
     description: 'Vous êtes arrivé en haut du classement ce mois-ci, bravo Capitaine !'
+  },
+  10: {
+    title: 'Artiste',
+    description: "Une ou plusieurs de vos créations sont intégrées dans le projet. Chapeau l'artiste !"
+  },
+  11: {
+    title: 'Ondes Positives',
+    description: "Une de vos suggestions d'améliorations ou de nouvelles fonctionnalités a été retenue."
   }
 }

app/styles/_components/User/achievements.sass

@@ -14,11 +14,10 @@
       &:hover
         transform: scale(1.05)
         opacity: 1
-        box-shadow: 0px 3px 2em $grey
+        box-shadow: 0 5px 15px #b1b1b1
         .card .content .title
           text-shadow: 0px 0px 20px $logo-main
     .card
-      //border-radius: 25px
       background: $grey-dark
       .card-image
         padding: 0
@@ -39,4 +38,4 @@
           border-bottom: 1px solid $grey
           padding-bottom: 20px
         p
-          color: whitesmoke
+          color: whitesmoke

webpack.loaders.js

@@ -126,6 +126,23 @@ module.exports = isProd => [
       }
     ]
   },
+  {
+    test: /\.mp4/,
+    include: [
+      path.resolve(__dirname, 'app/assets')
+    ],
+    exclude: path.resolve(__dirname, 'node_modules'),
+    use: [
+      {
+        loader: 'file-loader',
+        options: {
+          limit: 10000,
+          mimetype: 'video/mp4',
+          name: '[path][name].[ext]'
+        }
+      }
+    ]
+  },
   // ==========
   // = Styles =
   // ==========
@@ -168,4 +185,4 @@ module.exports = isProd => [
       }
     ]
   }
-]
+]