Contributor and Cheese icons

odota · Oct 16, 2018 · 9cd7b44 · 9cd7b44
1 parent 470ba5b
commit 9cd7b44
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 829 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -144,6 +144,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-svg')
     implementation project(':react-native-svg')
     implementation project(':react-native-device-info')
     implementation project(':react-native-google-analytics-bridge')

diff --git a/app/components/Icons/Cheese.js b/app/components/Icons/Cheese.js
@@ -0,0 +1,60 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+const Cheese = ({style = {height: 24, width: 24}, fill = "#f5f5f5", strokeColor="#b3b3b3", strokeWidth = 14, ...props} = {}) => (
+    <Svg
+        height={style.height}
+        width={style.width}
+        {...props}
+        viewBox="0 0 300 300"
+        style={{
+            ...style
+        }}
+    >
+        <Path
+            d="M141.4,234.6c0,0,17.4-7.3,39-10s38.7,0.7,38.7,0.7"
+            fill={fill}
+            strokeWidth={strokeWidth}
+            stroke={strokeColor}
+        />
+        <Path
+            d="M9.2,143.9c0,0-10.4,104.6,2.3,115.7c7.7,6.8,26.1-0.8,53.3-3.6c46.9-4.8,83.5-8.9,83.5-9.6
+      c0.1-1-10.1-12-10.1-24.8c0-15.3,5.6-36.9,37.7-40.2c26.2-2.7,43.1,10.1,44.5,30.1c0.9,13.6-6.3,25.9-5.7,26.3s71.4-6.5,77.2-14.6
+      c2.6-3.5,1.7-20.4,1.9-44.8c0.3-31.6,1.1-70.4,1.1-70.4"
+            fill={fill}
+            strokeWidth={strokeWidth}
+            stroke={strokeColor}
+        />
+        <Path
+            d="M125.9,127.9c8.6-1.2,17.5-2.4,26.4-3.5c75.5-9.5,142.5-16.4,142.5-16.4s1-32.5-56.1-54s-99.1-17.8-104-11.5
+      c-7.8,10.3,5.1,8.5,5.7,18s-13.6,17-25.4,18.5c-11.8,1.5-20-5.9-20-5.9s-20.9,18-44,35.3c-21.6,16.2-45.2,31.4-41.5,36.4
+      c3.2,4.4,17.1-2.8,30.4-5.2c9.5-1.7,30.1-5.1,30.3-4.6c0.1,0.5-6.7-4.5-3.9-11c2.8-6.5,19.8-11.1,34.2-10.2
+      c7.7,0.5,15.6,3.9,20.2,7.5C124.6,124.5,125.9,127.9,125.9,127.9s1.4,12.3-6.7,25.7c-5.7,9.6-20.4,14-30.9,11.9
+      c-25.3-5-18.1-30.4-18.1-30.4"
+            fill={fill}
+            strokeWidth={strokeWidth}
+            stroke={strokeColor}
+        />
+        <Path
+            d="M222.2,88.8c0.3,7.1-10.5,9.8-24.1,12.1c-17.8,3-26.5-0.2-27-7.2c-0.6-7,11.2-15.7,25-16.8
+      C209.7,75.8,221.8,81.7,222.2,88.8z"
+            fill={fill}
+            strokeWidth={strokeWidth}
+            stroke={strokeColor}
+        />
+        <Path
+            d="M269.7,144.9c0,10.1-9.4,19.6-21.1,19.6s-21.4-0.3-21.4-10.4s9.4-18.6,21.2-18.6S269.7,134.8,269.7,144.9z"
+            fill={fill}
+            strokeWidth={strokeWidth}
+            stroke={strokeColor}
+        />
+        <Path
+            d="M78.3,219c0,10.1-9.9,17.5-21.7,17.5s-17.3-7.4-17.3-17.5c0-10.1,8-20.7,19.8-20.7S78.3,208.9,78.3,219z"
+            fill={fill}
+            strokeWidth={strokeWidth}
+            stroke={strokeColor}
+        />
+    </Svg>
+);
+
+export default Cheese
diff --git a/app/components/Icons/Contributor.js b/app/components/Icons/Contributor.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+const Contributor = ({oColor = "#21be93" , dColor = "#212121", style = {height: 24, width: 24}, ...props} = {})=> (
+    <Svg version={1} viewBox="0 0 1138 1138" width={style.width} height={style.height} style={style} {...props}>
+        <Path
+            fill={oColor}
+            d="M450 1047h60a1 1 0 0 0 0-957h-60zm120-807a.9 1 0 0 1 0 660z"
+        />
+        <Path
+            fill={dColor}
+            d="M436.5 216.4c-87.2 18.3-162.6 66.3-216.3 137.8-38.2 50.9-61.1 109.7-69.4 177.8-1.7 13.7-1.7 59.2 0 73.5 9.9 85.6 44.9 159 103.8 217.9 52.5 52.5 116.8 86.1 191.4 100 24.6 4.6 31 5.1 63.5 5 33 0 42.3-.8 68.5-6 136.4-27 244.8-129.1 279.6-263.4 8-30.9 10.9-54.8 10.9-90 0-28.6-.7-37.7-5-62.5-21.9-127.8-114.1-235.7-237.2-277.9-14.2-4.8-31-9.5-43.8-12.1-4.4-.9-9-1.8-10.2-2.1l-2.3-.4v122.7l10.3 3.3c75.2 23.7 133 81 157 155.5 32.5 101.1-5 211-92.6 271.3-40.1 27.6-85.6 41.5-135.7 41.5-50.1 0-95.6-13.9-135.7-41.5-44.2-30.4-76.2-73.4-92.6-124.4-30.5-94.7.6-198.2 78.3-260.6 24.4-19.6 54.4-35.1 83.1-43.1l7.9-2.2v-61.3c0-48.3-.3-61.2-1.2-61.1-.7 0-6.2 1.1-12.3 2.3z"
+        />
+    </Svg>
+)
+
+export default Contributor
diff --git a/app/components/RankIcon.js → app/components/Icons/RankIcon.js b/app/components/RankIcon.js → app/components/Icons/RankIcon.js
@@ -29,26 +29,26 @@ const styles = StyleSheet.create({
 
 var RankIcon = ({rankTier, leaderboardRank}) =>  {
     const rankIcons = {
-        '0': require('../assets/rank_icons/rank_icon_0.png'),
-        '1': require('../assets/rank_icons/rank_icon_1.png'),
-        '2': require('../assets/rank_icons/rank_icon_2.png'),
-        '3': require('../assets/rank_icons/rank_icon_3.png'),
-        '4': require('../assets/rank_icons/rank_icon_4.png'),
-        '5': require('../assets/rank_icons/rank_icon_5.png'),
-        '6': require('../assets/rank_icons/rank_icon_6.png'),
-        '7': require('../assets/rank_icons/rank_icon_7.png'),
-        '7a': require('../assets/rank_icons/rank_icon_7a.png'),
-        '7b': require('../assets/rank_icons/rank_icon_7b.png'),
-        '7c': require('../assets/rank_icons/rank_icon_7c.png'),
-        '8': require('../assets/rank_icons/rank_icon_8.png')
+        '0': require('../../assets/rank_icons/rank_icon_0.png'),
+        '1': require('../../assets/rank_icons/rank_icon_1.png'),
+        '2': require('../../assets/rank_icons/rank_icon_2.png'),
+        '3': require('../../assets/rank_icons/rank_icon_3.png'),
+        '4': require('../../assets/rank_icons/rank_icon_4.png'),
+        '5': require('../../assets/rank_icons/rank_icon_5.png'),
+        '6': require('../../assets/rank_icons/rank_icon_6.png'),
+        '7': require('../../assets/rank_icons/rank_icon_7.png'),
+        '7a': require('../../assets/rank_icons/rank_icon_7a.png'),
+        '7b': require('../../assets/rank_icons/rank_icon_7b.png'),
+        '7c': require('../../assets/rank_icons/rank_icon_7c.png'),
+        '8': require('../../assets/rank_icons/rank_icon_8.png')
     };
 
     const starIcons = {
-        '1': require('../assets/rank_icons/rank_star_1.png'),
-        '2': require('../assets/rank_icons/rank_star_2.png'),
-        '3': require('../assets/rank_icons/rank_star_3.png'),
-        '4': require('../assets/rank_icons/rank_star_4.png'),
-        '5': require('../assets/rank_icons/rank_star_5.png'),
+        '1': require('../../assets/rank_icons/rank_star_1.png'),
+        '2': require('../../assets/rank_icons/rank_star_2.png'),
+        '3': require('../../assets/rank_icons/rank_star_3.png'),
+        '4': require('../../assets/rank_icons/rank_star_4.png'),
+        '5': require('../../assets/rank_icons/rank_star_5.png'),
     };
 
     if (!rankTier) return null;

diff --git a/app/components/Icons/index.js b/app/components/Icons/index.js
@@ -0,0 +1,4 @@
+export {default as IconCheese } from './Cheese'
+export {default as IconContributor} from './Contributor'
+export {default as RankIcon} from './RankIcon'
+
diff --git a/app/components/ProfileCard.js b/app/components/ProfileCard.js
@@ -10,14 +10,14 @@ import {
 
 import { connect } from 'react-redux';
 
-import RankIcon from './RankIcon';
-
 import Colors from '../themes/Colors';
 import base from '../themes/BaseStyles';
 import Fonts from '../themes/Fonts';
 
 import Slider from 'react-native-slider';
 
+import { IconCheese, IconContributor, RankIcon } from './Icons'
+
 import _ from 'lodash';
 
 export const mapStateToProps = state => ({
@@ -78,6 +78,10 @@ class ProfileCard extends Component {
                             <View style={styles.nameContainer}>
                                 {name}
                             </View>
+                            <View style={baseStyles.profileIcons}>
+                                {profile.is_contributor && <IconContributor style={baseStyles.contributorIcon}/>}
+                                {profile.cheese > 0 && <IconCheese fill="#fff" style={baseStyles.cheeseIcon}/>}
+                            </View>
                             <View style={{ flexDirection: 'row', marginBottom: 5 }}>
                                 <View style={{ alignItems: 'center', flex: 1 }}>
                                     <Text style={[styles.captionText, { color: this.props.legend }]}>WINS</Text>
@@ -92,7 +96,8 @@ class ProfileCard extends Component {
                                     <Text style={[styles.contentText, { color: this.props.secondLegend }]}>{winPercentage}%</Text>
                                 </View>
                             </View>
-                            <RankIcon rankTier={rankTier} leaderboardRank={leaderboardRank} />
+                                <RankIcon rankTier={rankTier} leaderboardRank={leaderboardRank} />
+
                         </View>
                     </View>
 
@@ -206,6 +211,29 @@ const baseStyles = _.extend(base.general, {
         fontWeight: 'bold',
         fontFamily: Fonts.base
     },
+    profileIcons: {
+        flexDirection: 'row'
+    },
+    contributorIcon: {
+        width: 24,
+        height: 24,
+        marginLeft: 5,
+        marginRight: 5,
+        shadowColor: "rgb(102,187,255)",
+        shadowOffset: {width: 0, height: 0},
+        shadowRadius: 6,
+        shadowOpacity: 1
+    },
+    cheeseIcon: {
+        width: 24,
+        height: 24,
+        marginLeft: 5,
+        marginRight: 5,
+        shadowColor: "rgb(255,255,0)",
+        shadowOffset: {width: 0, height: 0},
+        shadowRadius: 6,
+        shadowOpacity: 0.6,
+    }
 });
 
 const styles = StyleSheet.create(baseStyles);

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "react-native-scrollable-tab-view": "git+https://github.com/happypancake/react-native-scrollable-tab-view.git",
     "react-native-simple-radio-button": "^2.7.1",
     "react-native-slider": "0.11.0",
-    "react-native-svg": "7.0.3",
+    "react-native-svg": "6.2.1",
     "react-native-svg-charts": "git+https://github.com/Proyoyo/react-native-svg-charts.git",
     "react-native-vector-icons": "5.0.0",
     "react-redux": "5.0.6",