commit
d1f1268395
@ -1,52 +1,18 @@
|
||||
import { useDispatch } from "react-redux";
|
||||
import { Card } from "../models/Card";
|
||||
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';
|
||||
import { View } from 'react-native';
|
||||
import { Image } 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}>
|
||||
<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>
|
||||
type ItemProps = {
|
||||
url : string //Image URL
|
||||
}
|
||||
|
||||
export function ListItemComponent(props : ItemProps){
|
||||
return (
|
||||
<View>
|
||||
<Image
|
||||
source={{uri: props.url}}
|
||||
style={{flex:1, minHeight:250, minWidth:180}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
)
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
item: {
|
||||
|
||||
},
|
||||
favoriteButtonNonFav: {
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: 10,
|
||||
backgroundColor: 'red',
|
||||
borderRadius: 50,
|
||||
padding: 10,
|
||||
},
|
||||
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 {
|
||||
|
||||
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.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.imgGold = imgGold
|
||||
this.cropImage = cropImage
|
||||
this.fav = fav
|
||||
|
||||
}
|
||||
|
||||
// ID //
|
||||
public id;
|
||||
public id: string;
|
||||
|
||||
// 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;
|
||||
|
||||
|
||||
//IMG//
|
||||
public img;
|
||||
|
||||
//IMGGOLD//
|
||||
public imgGold;
|
||||
|
||||
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;
|
||||
// }
|
||||
|
||||
public img : string;
|
||||
public imgGold : string;
|
||||
|
||||
public cropImage : string;
|
||||
//FAV//
|
||||
public fav;
|
||||
public fav : boolean;
|
||||
|
||||
}
|
||||
@ -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