📦 recupération de l'attck, health, mana et flavor de l'api, probleme de depedancies 🍺

models/Card.tsx

@@ -5,18 +5,18 @@ import {Classe} from "./Classe";
 
 export class Card {
 
-    constructor(id: number,name :string, img : string, imgGold : string){//,set : CardSet,type : Type,clas : Classe,rarity : string,cost : number,attack : number, health : number, desc : string,flavor : string,artist : string,collectible : boolean,elite : boolean,race : string,  cropImg :string) {
+    constructor(id: number,name :string,health : number, attack : number,  manaCost : number, flavorText : string, img : string, imgGold : string){//,set : CardSet,type : Type,clas : Classe,rarity : string,, desc : string,flavor : string,artist : string,collectible : boolean,elite : boolean,race : string,  cropImg :string) {
         this._id=id
         this._name=name
         //this._set=set
         // this._type=type
         // this._class=clas
         // this._rarity=rarity
-        // this._cost=cost
-        // this._attack = attack
-        // this._health = health
+        this._manaCost=manaCost
+        this._attack = attack
+        this._health = health
         // this._desc = desc
-        // this._flavor = flavor
+        this._flavorText = flavorText
         // this._artist = artist
         // this._collectible = collectible
         this._img = img
@@ -76,29 +76,30 @@ export class Card {
     // set rarity(value: string) {
     //     this._rarity = value ;
     // }
-    // private _cost : number
 
-    //     get cost(): number {
-    //         return this._cost;
-    //     }
-    //     set cost(value: number) {
-    //         this._cost = value ;
-    //     }
+    private _manaCost : number
+        get manaCost(): number {
+            return this.manaCost;
+        }
+        set manaCost(value: number) {
+            this._manaCost = value ;
+        }
+
+    private _attack : number
+        get attack(): number {
+            return this._attack;
+        }
+        set attack(value: number) {
+            this._attack = value ;
+        }
+    private _health : number
+        get health(): number {
+            return this._health;
+        }
+        set health(value: number) {
+            this._health = value ;
+        }
 
-    // private _attack : number
-    //     get attack(): number {
-    //         return this._attack;
-    //     }
-    //     set attack(value: number) {
-    //         this._attack = value ;
-    //     }
-    // private _health : number
-    //     get health(): number {
-    //         return this._health;
-    //     }
-    //     set health(value: number) {
-    //         this._health = value ;
-    //     }
     // private _desc : string
     //     get desc(): string {
     //         return this._desc;
@@ -107,14 +108,13 @@ export class Card {
     //         this._desc = value ;
     //     }
 
-    // private _flavor : string
-
-    // get flavor(): string {
-    //     return this._flavor;
-    // }
-    // set flavor(value: string) {
-    //     this._flavor = value ;
-    // }
+    private _flavorText : string
+    get flavorText(): string {
+        return this._flavorText;
+    }
+    set flavor(value: string) {
+        this._flavorText = value ;
+    }
 
     // private _artist : string
     // get artist(): string {

package.json

@@ -21,6 +21,7 @@
     "react-native": "0.71.3",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-safe-area-context": "4.5.0",
+    "react-native-table-component": "^1.2.2",
     "react-native-web": "~0.18.11",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1"

redux/actions/actionSelection.tsx

@@ -76,8 +76,13 @@ export const getAllCards = () => {
       //@ts-ignore
       const CardsList: Card[] = CardsListJson['cards'].map(elt => new Card(elt["id"] ? elt["id"] : 1,
                                                                           elt["name"] ? elt["name"] : "",
+                                                                          elt["health"] ? elt["health"] : 0,
+                                                                          elt["attack"] ? elt["attack"] : 0,
+                                                                          elt["manaCost"] ? elt["manaCost"] : 0,
+                                                                          elt["flavorText"] ? elt["flavorText"] : "",
                                                                           elt["image"] ? elt["image"] : "",
                                                                           elt["imageGold"] ? elt["imageGold"] : "",
+                                                                          
                                                                            )); //, elt["cardSet"], elt["type"], elt["faction"], elt["rarity"], elt["cost"], elt["attack"], elt["health"],elt["text"], elt["flavor"], elt["artist"], elt["collectible"], elt["elite"], elt["race"], elt["img"], elt["imgGold"]
       //elt["cardId"] == null ? elt["cardId"] : ""
       

screens/DetailCard.tsx

@@ -3,6 +3,8 @@ import { StatusBar } from 'expo-status-bar';
 import React, { useState } from "react";
 import { Card } from '../models/Card';
 
+import { Table, Row, Rows } from 'react-native-table-component';
+
 //* Components
 import {ListItemComponent} from '../components/ListItemComponent'
 
@@ -11,6 +13,13 @@ export default function DetailMain({ route }){
 
     const { card, other } = route.params;
 
+    const tableHead = ['Stat', 'Value'];
+    const tableData =  [
+        ['cost :', card.manaCost],
+        ['attack : ', card.attack],
+        ['health : ', card.health],
+    ]
+
     let pressed : Boolean = false
     const [titleText, setTitleText] = useState(card.name)
     const onPressTitle = () => {
@@ -21,10 +30,16 @@ export default function DetailMain({ route }){
         <View style={styles.container}>
             <View style={styles.titleView}>
                 <Text style={styles.title} onPress={onPressTitle} >{titleText}</Text>
+                <Text style={styles.flavor}>{card.flavorText}</Text>
             </View>
             <View style={styles.item}>
                 <ListItemComponent url={card.img}/>
             </View>
+
+            <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
+                <Row data={tableHead} style={styles.head} textStyle={styles.text}/>
+                <Rows data={tableData} textStyle={styles.text}/>
+            </Table>        
         </View>
     );
 }
@@ -47,16 +62,21 @@ const styles = StyleSheet.create({
     },
     title: {
         fontStyle: "italic",
+        fontWeight: "bold",
         fontSize: 20,
     },
+    flavor: {
+        fontStyle: "italic",
+    },
     titleView: {
         flex: 1,
         justifyContent: 'center',
-        padding: 10,
+        paddingVertical: 0,
         backgroundColor: '#fff',
         borderRadius : 10,
         borderWidth: 10,
         borderColor: '#efefef',
-        maxHeight: 100,
-    }
+    },
+    head: { height: 40, backgroundColor: '#f1f8ff' },
+    text: { margin: 6 }
 });