Merge branch 'typescript' of https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY into typescript

bob_party/package.json

@@ -14,13 +14,13 @@
     "@react-navigation/stack": "^6.3.2",
     "expo": "^46.0.15",
     "expo-status-bar": "~1.4.0",
-    "jest": "^29.1.2",
+    "jest": "^26.6.3",
     "node": "^18.10.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "^0.69.6",
-    "react-native-gesture-handler": "^2.7.1",
+    "react-native-gesture-handler": "~2.5.0",
-    "react-native-safe-area-context": "^4.4.1",
+    "react-native-safe-area-context": "4.3.1",
     "react-native-web": "~0.18.7"
   },
   "devDependencies": {

bob_party/src/components/Element.tsx

@@ -0,0 +1,46 @@
+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"
+import { trace } from "console"
+import { Game } from "../core/Game"
+
+export const ElementAffichage : 
+FC<{element: any, styleImage: ImageStyle, styleTitle : TextStyle,nav: any}> = 
+({element, styleImage, styleTitle, nav}) => 
+{
+        if (element instanceof Skin)
+        {
+            return(
+                <View>
+                    <Pressable onPress={() => Alert.alert("Achat du skin")}>
+                        <Image
+                            style={styleImage}
+                            source={element.getSkinSource()}
+                        />
+                        <Text style={styleTitle}>{element.getSkinName()}</Text>
+                    </Pressable>
+                </View>
+            )
+        }
+        if(element instanceof Game)
+        {
+            return (
+                <View>
+                    <Pressable onPress={() => Alert.alert("Lancement du jeu")}>
+                        <Image
+                            style={styleImage}
+                            source={element.getImageSource()}
+                        />
+                        <Text style={styleTitle}>{element.getName()}</Text>
+                    </Pressable>
+                </View> 
+            )
+        }
+        return(
+            <View>
+                <Text>Type invalide pour ce composant</Text>
+            </View>
+        )
+        
+}

bob_party/src/components/GoBackBar.tsx

@@ -0,0 +1,22 @@
+import { FC, ReactNode } from "react"
+import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
+import { Skin } from "../core/Skin"
+import React from "react"
+import { SkinComponent } from "./skinAvatar"
+import MainTabNavigator from "../navigation/AppNavigator"
+import { BottomTabNavigationProp } from "@react-navigation/bottom-tabs"
+
+
+export const GoBackBar : 
+FC<{title: String, rightIcon: ImageSourcePropType, styleIcon: ImageStyle, nav: any, styleTitle: TextStyle, styleHeader : any}> = 
+({title, rightIcon, styleIcon, nav, styleTitle, styleHeader}) => 
+{
+    return (
+    <View style={styleHeader}>
+            <Text style={styleTitle}>{title}</Text>
+            <Pressable onPress={() => nav.goBack()}>
+                <Image source={rightIcon} style={styleIcon}/>
+            </Pressable>
+    </View>
+    )
+}

bob_party/src/components/skinAvatar.tsx

@@ -4,6 +4,7 @@ import { Skin } from "../core/Skin"
 import React from "react"
 
 export const SkinComponent : FC<{skin: Skin, children: ImageStyle}> = ({skin, children}) => {
+
     return (
     <View>
         <Image source={ skin.getSkinSource()} style={children}/>

bob_party/src/core/Game.ts

@@ -1,11 +1,14 @@
-export interface Game{
+import { randomBytes } from "crypto";
-    private Name:String;
+import { ImageSourcePropType } from "react-native";
-    private ImageSource:String;
-    private GameSource:String;
 
-    constructor(name:String, imageSource:String, gameSource:String){
+export class Game{
+    private Name:string;
+    private ImageSource:ImageSourcePropType;
+    private GameSource:string ;
+
+    constructor (name:string, imageSource:ImageSourcePropType, gameSource:string){
         this.Name=name;
-        this.ImageSource=imageSource
+        this.ImageSource=imageSource;
         this.GameSource=gameSource;
     }
 
@@ -13,15 +16,15 @@ export interface Game{
         return this.Name;
     }
 
-    setName(name:String){
+    setName(name:string){
         this.Name=name;
     }
 
-    getImageSource(imageSource:String){
+    getImageSource(){
         return this.ImageSource;
     }
 
-    setImageSource(imageSource:String){
+    setImageSource(imageSource:ImageSourcePropType){
         this.ImageSource=imageSource;
     }
 
@@ -29,7 +32,7 @@ export interface Game{
         return this.GameSource;
     }
 
-    setGameSource(gameSource:String){
+    setGameSource(gameSource:string){
         this.GameSource=gameSource;
     }
 }

bob_party/src/core/gameSolo.ts

@@ -0,0 +1,5 @@
+import { Game } from './game'
+
+export class GameSolo extends Game{
+    private 
+}

bob_party/src/core/skin.ts

@@ -1,8 +1,10 @@
+import { ImageSourcePropType } from "react-native";
+
 export class Skin{
     private Name: string;
-    private Source: any;
+    private Source: ImageSourcePropType;
 
-    constructor(name: string, source:any){
+    constructor(name: string, source:ImageSourcePropType){
         this.Name=name;
         this.Source=source;
     }
@@ -11,7 +13,7 @@ export class Skin{
         this.Name=name;
     }
 
-    setSkinSource(source: any){
+    setSkinSource(source: ImageSourcePropType){
         this.Source=source;
     }
 

bob_party/src/navigation/AppNavigator.tsx

@@ -8,6 +8,7 @@ import Store from '../screens/Store'
 import Chat from '../screens/Chat'
 import Settings from '../screens/Settings'
 import Profile from '../screens/Profile'
+import GameChoice from '../screens/GameChoice'
 
 
 import Test from '../screens/Test'
@@ -20,6 +21,7 @@ function HomeStackScreen() {
     <HomeStack.Navigator screenOptions={{headerShown: false}}>
       <HomeStack.Screen name="Home" component={Home} />
       <HomeStack.Screen name="Settings" component={Settings} />
+      <HomeStack.Screen name='GameChoice' component={GameChoice} />
     </HomeStack.Navigator>
   );
 }

bob_party/src/screens/GameChoice.tsx

@@ -0,0 +1,168 @@
+import { StatusBar } from 'expo-status-bar'
+import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
+import React from 'react';
+import { Game } from '../core/Game';
+import { Skin } from '../core/skin';
+import { TopBar } from '../components/TopBar';
+import { BotBar } from '../components/BotBar';
+import { ElementAffichage } from '../components/Element';
+import { GoBackBar } from '../components/GoBackBar';
+
+
+const msc = require('../../assets/Icons/FondGris.png');
+const avatar = require('../../assets/Icons/BobClassic.png');
+const skinTest= new Skin("Bob",require('../../assets/Icons/BobClassic.png'));
+const jeuTest= new Game("SNAKE", require('../../assets/Icons/UnSelected/Gamepad.png'),"ouin");
+const cross = require('../../assets/Icons/UnSelected/Cross.png');
+const gamepad = require('../../assets/Icons/Selected/SGamepad.png');
+const message = require('../../assets/Icons/UnSelected/Chat.png');
+const store = require('../../assets/Icons/UnSelected/Store.png');
+
+function GameChoice(props: { navigation: any; }) {
+    const { navigation } = props
+    return (
+    <View style={styles.container}>
+      <GoBackBar
+        title="JOUONS !"
+        styleTitle={styles.titre}
+        styleHeader={styles.header}
+        styleIcon={styles.engrenage}
+        rightIcon={cross}
+        nav={navigation}
+      />
+      <View style={styles.body}>
+        <ElementAffichage
+          element={jeuTest}
+          styleImage={styles.imageSkin}
+          styleTitle={styles.nomSkin}
+          nav={navigation}
+        />
+      </View>
+      <BotBar 
+          messages={message}
+          games={gamepad}
+          shop={store}
+          style={styles.iconFooter}
+          styleStore={styles.iconStore}
+          nav={navigation}
+          styleBar={styles.footer}
+      />
+    </View>
+  );
+}
+
+
+function Button(props: { onPress: any; title?: any | undefined; }) {
+  const { onPress, title = 'Save' } = props;
+  return (
+    <Pressable style={styles.button} onPress={onPress}>
+      <Text style={styles.text}>{title}</Text>
+    </Pressable>
+  );
+}
+
+
+const styles = StyleSheet.create({
+    body: {
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        width: '70%',
+    },
+    
+    container: {
+    flex: 1,
+    backgroundColor: "#45444E",
+    flexDirection: "column",
+    justifyContent: "flex-start",
+    alignItems: "center",
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '30%',
+    width: '100%',
+    marginTop: '10%',
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 10,
+    elevation: 3,
+    backgroundColor: '#0085FF',
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: 'white',
+  },
+  header: {
+    flex : 0.15,
+    width: '100%',
+    flexDirection: 'row',
+    backgroundColor: '#2D2C33',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  titre: {
+    flex: 0.7,
+    flexDirection: 'column',
+    textAlign: 'center',
+    fontSize: 30,
+    fontFamily: 'Helvetica',
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: 'white',
+  },
+  engrenage: {
+    borderRadius: 50,
+    width: 50,
+    height: 50,
+  },
+  avatar: {
+    borderRadius: 50,
+    width: 50,
+    height: 50,
+  },
+  
+  footer: {
+    flex: 0.15,
+    flexDirection: 'row',
+    backgroundColor: '#2D2C33',
+    flexWrap: 'wrap',
+    width: '100%',
+    justifyContent: 'space-evenly',
+  },
+  iconFooter: {
+    marginBottom: 25,
+    marginTop: 10,
+    width: 65,
+    height: 50,
+  },
+  iconStore: {
+    marginBottom: 25,
+    marginTop: 10,
+    marginLeft: 7,
+    marginRight: 8,
+    width: 50,
+    height: 50,
+  },
+  imageSkin : {
+    borderRadius: 15,
+    marginTop: 15,
+    marginRight: 15,
+    width: 100,
+    height: 100,
+  },
+  nomSkin :{
+    textAlign: 'center',
+    fontSize: 15,
+    fontFamily: 'Helvetica',
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: 'white',
+  },
+
+});
+
+export default GameChoice

bob_party/src/screens/Home.tsx

@@ -1,5 +1,5 @@
 import { StatusBar } from 'expo-status-bar'
-import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
+import { StyleSheet, View, Text, Alert, Pressable, Image, ImageSourcePropType} from 'react-native'
 import React, { Children } from 'react';
 import { SkinComponent } from '../components/skinAvatar';
 import { User } from '../core/user';
@@ -10,13 +10,20 @@ import { Conversation } from '../core/conversation';
 
 
 
+const avatar = require('../../assets/Icons/BobClassic.png');
+
+let test:ImageSourcePropType;
+const test2:string="('../../assets/Icons/BobClassic.png')";
+
+test = test2 as ImageSourcePropType;
+
 let tabSkin:Skin[];
 const skinTest= new Skin("Bob",require('../../assets/Icons/BobClassic.png'));
 const skinTest2= new Skin("wesh",require('../../assets/BobsSkins/BobBlue.png'));
 tabSkin=[skinTest];
 tabSkin.push(skinTest2);
 let tabConv:Conversation[]=[];
-const UserActu=new User("14", "leBg", "ouioui", "grand", "la", 12222, 123324, skinTest, tabSkin, tabConv);
+const UserActu=new User("14", "leBg", "ouioui", "grand", new Date(2022,12,12), 12222, 123324, skinTest, tabSkin, tabConv);
 
 function Home(props: { navigation: any; }) {
     const { navigation } = props
@@ -29,11 +36,11 @@ function Home(props: { navigation: any; }) {
       <View style={styles.body}>
         <Button 
         title='Jouer Seul'
-        onPress={() => Alert.alert('On Joue seul')}
+        onPress={() => navigation.navigate('GameChoice')}
         />
         <Button 
         title='Défier mes amis'
-        onPress={() => Alert.alert('On Joue avec les potos')}
+        onPress={() => navigation.navigate('GameChoice')}
         />
       </View>
       <BotBar 

bob_party/src/screens/Store.tsx

@@ -6,6 +6,7 @@ import { User } from '../core/user';
 import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
+import { ElementAffichage } from '../components/Element';
 
 
 const skinTest= new Skin("Bob",require('../../assets/Icons/BobClassic.png'));
@@ -23,7 +24,12 @@ function Store(props: { navigation: any; }) {
         nav={navigation}
       />
       <View style={styles.body}>
-        <Text style={styles.text}>couille</Text>
+        <ElementAffichage
+          element={skinTest}
+          styleImage={styles.imageSkin}
+          styleTitle={styles.nomSkin}
+          nav={navigation}
+        />
       </View>
       <BotBar 
           nav={navigation}
@@ -129,6 +135,21 @@ const styles = StyleSheet.create({
     width: 50,
     height: 50,
   },
+  imageSkin : {
+    borderRadius: 15,
+    marginTop: 15,
+    marginRight: 15,
+    width: 100,
+    height: 100,
+  },
+  nomSkin :{
+    textAlign: 'center',
+    fontSize: 15,
+    fontFamily: 'Helvetica',
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: 'white',
+  },
 
 });