commit
d1f1268395
@ -1,52 +1,18 @@
|
|||||||
import { useDispatch } from "react-redux";
|
import { View } from 'react-native';
|
||||||
import { Card } from "../models/Card";
|
import { Image } from 'react-native';
|
||||||
import { setFavList } from "../redux/actions/action_setFavList";
|
|
||||||
import { ImageBackground, TouchableHighlight, View } from "react-native";
|
|
||||||
import React, { useEffect } from "react";
|
|
||||||
import {CardProps} from "../props/favProps"
|
|
||||||
import { FontAwesome } from '@expo/vector-icons';
|
|
||||||
import { StyleSheet} from 'react-native';
|
|
||||||
|
|
||||||
export default function Item(props: CardProps){ // a mettre dans components et definir une props pour passer le param
|
|
||||||
|
|
||||||
const {route} = props;
|
type ItemProps = {
|
||||||
const item: Card = route.card;
|
url : string //Image URL
|
||||||
const bool: boolean = route.bool;
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
|
|
||||||
const HandleAddFav = (props : CardProps) => {
|
|
||||||
dispatch(setFavList(props));
|
|
||||||
}
|
|
||||||
return(
|
|
||||||
|
|
||||||
/* dispatch , */
|
|
||||||
<View style={styles.item}>
|
|
||||||
<ImageBackground testID="card-url" source={{uri:item.img}} style={{flex:1, minHeight:250, minWidth:180}}>
|
|
||||||
<TouchableHighlight testID="button" style={item.fav?styles.favoriteButtonFav:styles.favoriteButtonNonFav} onPress={() => HandleAddFav(props)} >
|
|
||||||
<FontAwesome name="heart-o" size={50} color="#fff" />
|
|
||||||
</TouchableHighlight>
|
|
||||||
</ImageBackground>
|
|
||||||
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
const styles = StyleSheet.create({
|
|
||||||
item: {
|
|
||||||
|
|
||||||
},
|
export function ListItemComponent(props : ItemProps){
|
||||||
favoriteButtonNonFav: {
|
return (
|
||||||
position: 'absolute',
|
<View>
|
||||||
top: 10,
|
<Image
|
||||||
right: 10,
|
source={{uri: props.url}}
|
||||||
backgroundColor: 'red',
|
style={{flex:1, minHeight:250, minWidth:180}}
|
||||||
borderRadius: 50,
|
/>
|
||||||
padding: 10,
|
</View>
|
||||||
},
|
)
|
||||||
favoriteButtonFav: {
|
}
|
||||||
position: 'absolute',
|
|
||||||
top: 10,
|
|
||||||
right: 10,
|
|
||||||
backgroundColor: 'red',
|
|
||||||
borderRadius: 50,
|
|
||||||
padding: 10,
|
|
||||||
},});
|
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
import { useDispatch } from "react-redux";
|
||||||
|
import { Card } from "../models/Card";
|
||||||
|
import { setFavList } from "../redux/actions/action_setFavList";
|
||||||
|
import { Image, TouchableHighlight, View } from "react-native";
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
import {CardProps} from "../props/favProps"
|
||||||
|
import { FontAwesome } from '@expo/vector-icons';
|
||||||
|
import { StyleSheet} from 'react-native';
|
||||||
|
|
||||||
|
|
||||||
|
export default function Item(props: CardProps){ // a mettre dans components et definir une props pour passer le param
|
||||||
|
|
||||||
|
const {route} = props;
|
||||||
|
const item: Card = route.card;
|
||||||
|
const bool: boolean = route.bool;
|
||||||
|
const dispatch = useDispatch()
|
||||||
|
|
||||||
|
const HandleAddFav = (props : CardProps) => {
|
||||||
|
dispatch(setFavList(props));
|
||||||
|
}
|
||||||
|
return(
|
||||||
|
|
||||||
|
/* dispatch , */
|
||||||
|
<View style={styles.item}>
|
||||||
|
<TouchableHighlight testID="button" style={item.fav?styles.favoriteButtonFav:styles.favoriteButtonNonFav} onPress={() => HandleAddFav(props)} >
|
||||||
|
<FontAwesome name="heart-o" size={50} color="#fff" />
|
||||||
|
</TouchableHighlight>
|
||||||
|
<Image
|
||||||
|
source={{uri:item.img}}
|
||||||
|
style={{flex:1, minHeight:250, minWidth:180}}/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
item: {
|
||||||
|
zIndex:0
|
||||||
|
},
|
||||||
|
favoriteButtonNonFav: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
backgroundColor: 'red',
|
||||||
|
borderRadius: 50,
|
||||||
|
padding: 10,
|
||||||
|
zIndex:1
|
||||||
|
},
|
||||||
|
favoriteButtonFav: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 10,
|
||||||
|
right: 10,
|
||||||
|
backgroundColor: 'red',
|
||||||
|
borderRadius: 50,
|
||||||
|
padding: 10,
|
||||||
|
zIndex:1
|
||||||
|
},});
|
||||||
@ -1,27 +1,107 @@
|
|||||||
|
|
||||||
export class Card {
|
export class Card {
|
||||||
|
|
||||||
constructor(id: string,name :string, img : string, imgGold : string,fav : boolean = true){
|
constructor(id: string,name :string,health : string, attack : string, manaCost : string, rarityId : string, flavorText : string, classId : string, multiClassIds : any, img : string, imgGold : string, cropImage : string, artistName : string, fav : boolean){
|
||||||
this.id=id
|
this.id=id
|
||||||
this.name=name
|
this.name=name
|
||||||
|
//this._set=set
|
||||||
|
// this._type=type
|
||||||
|
// this._class=clas
|
||||||
|
// this._rarity=rarity
|
||||||
|
this.manaCost=manaCost
|
||||||
|
this.attack = attack
|
||||||
|
this.health = health
|
||||||
|
this.rarityId = rarityId
|
||||||
|
// this._desc = desc
|
||||||
|
this.flavorText = flavorText
|
||||||
|
|
||||||
|
this.classId = classId
|
||||||
|
this.multiClassIds = multiClassIds
|
||||||
|
this.artistName = artistName
|
||||||
|
// this._collectible = collectible
|
||||||
this.img = img
|
this.img = img
|
||||||
this.imgGold = imgGold
|
this.imgGold = imgGold
|
||||||
|
this.cropImage = cropImage
|
||||||
this.fav = fav
|
this.fav = fav
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ID //
|
// ID //
|
||||||
public id;
|
public id: string;
|
||||||
|
|
||||||
// NAME //
|
// NAME //
|
||||||
public name;
|
public name: string
|
||||||
|
|
||||||
|
|
||||||
|
// set set(value : CardSet){
|
||||||
|
// this._set = value
|
||||||
|
// }
|
||||||
|
|
||||||
|
// private _type : Type;
|
||||||
|
// get type():Type{
|
||||||
|
// return this._type
|
||||||
|
// }
|
||||||
|
// set type(value : Type){
|
||||||
|
// this._type=value
|
||||||
|
// }
|
||||||
|
|
||||||
|
// private _class : Classe;
|
||||||
|
|
||||||
|
// get class():Classe{
|
||||||
|
// return this._class
|
||||||
|
// }
|
||||||
|
// set class(value : Classe){
|
||||||
|
// this._class=value
|
||||||
|
// }
|
||||||
|
// private _rarity : string
|
||||||
|
|
||||||
|
// get rarity(): string {
|
||||||
|
// return this._rarity;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// set rarity(value: string) {
|
||||||
|
// this._rarity = value ;
|
||||||
|
// }
|
||||||
|
|
||||||
|
public manaCost : string;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public attack : string;
|
||||||
|
public health : string;
|
||||||
|
|
||||||
|
// private _desc : string
|
||||||
|
// get desc(): string {
|
||||||
|
// return this._desc;
|
||||||
|
// }
|
||||||
|
// set desc(value: string) {
|
||||||
|
// this._desc = value ;
|
||||||
|
// }
|
||||||
|
public classId : string;
|
||||||
|
|
||||||
|
public flavorText : string
|
||||||
|
|
||||||
|
public rarityId : string
|
||||||
|
|
||||||
|
|
||||||
|
public multiClassIds : any;
|
||||||
|
|
||||||
|
|
||||||
|
public artistName : string;
|
||||||
|
// private _collectible : boolean
|
||||||
|
// get collectible(): boolean {
|
||||||
|
// return this._collectible;
|
||||||
|
// }
|
||||||
|
// set collectible(value: boolean ){
|
||||||
|
// this._collectible = value;
|
||||||
|
// }
|
||||||
|
|
||||||
//IMG//
|
public img : string;
|
||||||
public img;
|
public imgGold : string;
|
||||||
|
|
||||||
//IMGGOLD//
|
public cropImage : string;
|
||||||
public imgGold;
|
//FAV//
|
||||||
|
public fav : boolean;
|
||||||
|
|
||||||
//FAV//
|
|
||||||
public fav;
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
|
||||||
|
import { NavigationContainer } from '@react-navigation/native';
|
||||||
|
import { createStackNavigator } from '@react-navigation/stack';
|
||||||
|
import {createNativeStackNavigator} from '@react-navigation/native-stack';
|
||||||
|
|
||||||
|
import ListScreen from '../screens/ListScreen';
|
||||||
|
import DetailCard from '../screens/DetailCard';
|
||||||
|
|
||||||
|
export default function DetailStackNav() {
|
||||||
|
const Stack = createStackNavigator();
|
||||||
|
return (
|
||||||
|
<Stack.Navigator initialRouteName="CardList">
|
||||||
|
<Stack.Screen name="CardList" component={ListScreen}/>
|
||||||
|
<Stack.Screen name="DetailCard" component={DetailCard}/>
|
||||||
|
</Stack.Navigator>
|
||||||
|
)
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,91 @@
|
|||||||
|
import { StyleSheet, Text, View, Button, FlatList } from 'react-native';
|
||||||
|
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'
|
||||||
|
import { ScrollView } from 'react-native-gesture-handler';
|
||||||
|
|
||||||
|
//@ts-ignore
|
||||||
|
export default function DetailMain({ route }){
|
||||||
|
|
||||||
|
const { card, other } = route.params;
|
||||||
|
|
||||||
|
const tableHead = ['Stat', 'Value'];
|
||||||
|
const tableData = [
|
||||||
|
['Mana cost :', card.manaCost],
|
||||||
|
['Attack : ', card.attack],
|
||||||
|
['Health : ', card.health],
|
||||||
|
['Rarity : ', card.rarity],
|
||||||
|
['Artist : ', card.artistName],
|
||||||
|
['Class : ', card.classId],
|
||||||
|
]
|
||||||
|
|
||||||
|
let pressed : Boolean = false
|
||||||
|
const [titleText, setTitleText] = useState(card.name)
|
||||||
|
const onPressTitle = () => {
|
||||||
|
pressed ? setTitleText(titleText + '\n' + 'Id : ' + card.id) : setTitleText(card.name)
|
||||||
|
pressed ? pressed = false :pressed = true
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<ScrollView>
|
||||||
|
<Table borderStyle={{borderWidth: 5, borderColor: '#c8e1ff'}}>
|
||||||
|
<Row data={tableHead} style={styles.head} textStyle={styles.text}/>
|
||||||
|
<Rows data={tableData} textStyle={styles.text}/>
|
||||||
|
</Table>
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
borderRadius : 15,
|
||||||
|
backgroundColor: '#efefef',
|
||||||
|
padding: 15,
|
||||||
|
maxHeight:300,
|
||||||
|
maxWidth:350,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontStyle: "italic",
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
flavor: {
|
||||||
|
fontStyle: "italic",
|
||||||
|
},
|
||||||
|
titleView: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
paddingVertical: 0,
|
||||||
|
paddingHorizontal : 15,
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius : 10,
|
||||||
|
borderWidth: 10,
|
||||||
|
borderColor: '#efefef',
|
||||||
|
maxHeight:100,
|
||||||
|
minHeight: 100
|
||||||
|
},
|
||||||
|
head: { height: 40, backgroundColor: '#f1f8ff', minWidth: '90%'},
|
||||||
|
text: { margin: 6 }
|
||||||
|
});
|
||||||
Loading…
Reference in new issue