You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.8 KiB
78 lines
2.8 KiB
import { FC, ReactNode } from "react"
|
|
import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
|
|
import React from "react"
|
|
import { Skin } from "../core/skin"
|
|
|
|
/*
|
|
Importing the correct stylesheet
|
|
*/
|
|
import styles from "./style/Skin.style"
|
|
import { useDispatch, useSelector } from "react-redux"
|
|
import { loginUser } from "../redux/features/currentUserSlice"
|
|
import { RootState } from "../redux/store"
|
|
|
|
export const SkinComponent :
|
|
/* Parameters :
|
|
* skin : Skin to be displayed
|
|
* state : Indicates from wich screen the component has been called
|
|
*/
|
|
FC<{skin: Skin, state: String}> =
|
|
({skin, state}) =>
|
|
{
|
|
const dispatch=useDispatch();
|
|
|
|
const currentUser = useSelector((state: RootState) => state.currentUserManager.currentUser);
|
|
|
|
/* The display of this component depends of the screen from where it has been called:
|
|
* From the TopBar (icon) : Small image in a circle
|
|
* From the shop (shop) : Image + Name + Price, Pressable => Buy the skin
|
|
* From the profile (profile) : Name + Image, Pressable => Change the skin
|
|
*/
|
|
switch (state) {
|
|
case 'icon':
|
|
return (
|
|
<View>
|
|
<Image source={skin.getSkinSource()} style={styles.icon}/>
|
|
</View>
|
|
)
|
|
|
|
case 'shop':
|
|
return(
|
|
<Pressable onPress={() => Alert.alert("Achat du skin")} style={styles.imageWrapper}>
|
|
<Text style={styles.nomSkin}>{skin.getSkinName()}</Text>
|
|
<Image
|
|
style={styles.imageSkin}
|
|
source={skin.getSkinSource()}
|
|
/>
|
|
<Text style={styles.nomSkin}>100€</Text>
|
|
</Pressable>
|
|
)
|
|
case 'liste':
|
|
return(
|
|
<Pressable onPress={() => {currentUser.setCurrentSkin(skin); dispatch(loginUser(currentUser))}} style={styles.imageWrapper}>
|
|
<Text style={styles.nomSkin}>{skin.getSkinName()}</Text>
|
|
<Image
|
|
style={styles.imageSkin}
|
|
source={skin.getSkinSource()}
|
|
/>
|
|
</Pressable>
|
|
)
|
|
case 'profile':
|
|
return(
|
|
<Pressable onPress={() => Alert.alert("Achat du skin")} style={styles.imageWrapperProfil}>
|
|
<Text style={styles.nomSkin}>{skin.getSkinName()}</Text>
|
|
<Image
|
|
style={styles.imageSkin}
|
|
source={skin.getSkinSource()}
|
|
/>
|
|
</Pressable>
|
|
)
|
|
default:
|
|
return(
|
|
<Image
|
|
style={styles.imageSkin}
|
|
source={skin.getSkinSource()}
|
|
/>
|
|
)
|
|
}
|
|
} |