mirror of
https://github.com/TheRealOwenRees/echecsfrance.git
synced 2026-07-23 04:26:57 +00:00
more formatting and refactoring of team component
This commit is contained in:
@@ -1,14 +1,12 @@
|
||||
import { Document, Font, Page, Text, View } from "@react-pdf/renderer";
|
||||
import { Document, Page, Text, View } from "@react-pdf/renderer";
|
||||
|
||||
import { type MatchFormValues } from "@/app/[locale]/(main)/match/MatchForm";
|
||||
import Header from "@/app/[locale]/(main)/match/components/pdf/Header";
|
||||
import InfoTable from "@/app/[locale]/(main)/match/components/pdf/InfoTable";
|
||||
import Team from "@/app/[locale]/(main)/match/components/pdf/Team";
|
||||
|
||||
import { styles } from "./pdf/styles";
|
||||
|
||||
// Register fonts if needed (optional)
|
||||
// Font.register({ family: 'Roboto', src: '...' });
|
||||
|
||||
interface PdfProps {
|
||||
data: MatchFormValues;
|
||||
}
|
||||
@@ -18,6 +16,7 @@ export const FeuilleMatchPdf = ({ data }: PdfProps) => {
|
||||
data.team1_players?.length || 0,
|
||||
data.team2_players?.length || 0,
|
||||
);
|
||||
|
||||
const boards = Array.from({ length: boardsCount });
|
||||
|
||||
return (
|
||||
@@ -32,170 +31,43 @@ export const FeuilleMatchPdf = ({ data }: PdfProps) => {
|
||||
<InfoTable date={data.date} lieu={data.lieu} ronde={data.ronde} />
|
||||
</View>
|
||||
|
||||
{/*Team Container*/}
|
||||
{/* Main Content: Two Columns for Teams */}
|
||||
<View
|
||||
style={{
|
||||
width: "90%",
|
||||
width: "100%",
|
||||
marginTop: 20,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
{/*Team Headers*/}
|
||||
<View style={{ border: "1px solid black" }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
fontSize: 8,
|
||||
}}
|
||||
>
|
||||
<Text>CLUB RECEVANT (ayant les blancs sur l'échiquier 1)</Text>
|
||||
<Text>Code Club</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<Text>{data.team1}</Text>
|
||||
<Text>2</Text>
|
||||
</View>
|
||||
</View>
|
||||
{/* --- Team A Column --- */}
|
||||
<Team
|
||||
team={"A"}
|
||||
boards={boards}
|
||||
teamPlayers={data.team1_players}
|
||||
teamName={data.team1}
|
||||
/>
|
||||
|
||||
<View style={{ border: "1px solid black" }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
fontSize: 8,
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
CLUB SE DEPLACANT ( ayant les noirs sur l'échiquier 1)
|
||||
</Text>
|
||||
<Text>Code Club</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<Text>{data.team2}</Text>
|
||||
<Text>2</Text>
|
||||
</View>
|
||||
</View>
|
||||
{/* --- Team B Column --- */}
|
||||
<Team
|
||||
team={"B"}
|
||||
boards={boards}
|
||||
teamPlayers={data.team2_players}
|
||||
teamName={data.team2}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/*Board Header Container*/}
|
||||
<View
|
||||
style={{
|
||||
width: "90%",
|
||||
marginTop: 20,
|
||||
marginTop: 50,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
justifyContent: "space-around",
|
||||
}}
|
||||
>
|
||||
<View style={styles.boardHeaderRow}>
|
||||
<Text>Ech.</Text>
|
||||
<Text>Nom</Text>
|
||||
<Text>Code FFE</Text>
|
||||
<Text>ELO</Text>
|
||||
<Text>Result</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.boardHeaderRow}>
|
||||
<Text>Ech.</Text>
|
||||
<Text>Nom</Text>
|
||||
<Text>Code FFE</Text>
|
||||
<Text>ELO</Text>
|
||||
<Text>Result</Text>
|
||||
</View>
|
||||
<Text>Capitaine A</Text>
|
||||
<Text>Arbitre</Text>
|
||||
<Text>Capitaine B</Text>
|
||||
</View>
|
||||
|
||||
{/*Boards Container*/}
|
||||
<View
|
||||
style={{
|
||||
width: "90%",
|
||||
marginTop: 20,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: "column" }}>
|
||||
{boards.map((_, i) => (
|
||||
<View key={`team1-board-${i}`} style={{ flexDirection: "row" }}>
|
||||
<Text>
|
||||
{`${i + 1}`} {i === 0 || i % 2 == 0 ? "B" : "N"}
|
||||
</Text>
|
||||
<Text>{data.team1_players[i]?.name || ""}</Text>
|
||||
<Text>{data.team1_players[i]?.nrFFE || ""}</Text>
|
||||
<Text>{data.team1_players[i]?.elo || ""}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View style={{ flexDirection: "column" }}>
|
||||
{boards.map((_, i) => (
|
||||
<View key={`team2-board-${i}`} style={{ flexDirection: "row" }}>
|
||||
<Text>
|
||||
{`${i + 1}`} {i === 0 || i % 2 == 0 ? "N" : "B"}
|
||||
</Text>
|
||||
<Text>{data.team2_players[i]?.name || ""}</Text>
|
||||
<Text>{data.team2_players[i]?.nrFFE || ""}</Text>
|
||||
<Text>{data.team2_players[i]?.elo || ""}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Table Header */}
|
||||
{/*<View style={styles.headerRow}>*/}
|
||||
{/* <Text style={styles.cellSmall}>Ech.</Text>*/}
|
||||
{/* <Text style={styles.cell}>Noms Prénoms (A)</Text>*/}
|
||||
{/* <Text style={styles.cellSmall}>Elo</Text>*/}
|
||||
{/* <Text style={styles.cellSmall}>Res.</Text>*/}
|
||||
{/* <Text style={styles.cell}>Noms Prénoms (B)</Text>*/}
|
||||
{/* <Text style={styles.cellSmall}>Elo</Text>*/}
|
||||
{/*</View>*/}
|
||||
|
||||
{/* Table Rows */}
|
||||
{/*{boards.map((_, i) => (*/}
|
||||
{/* <View key={i} style={styles.row}>*/}
|
||||
{/* <Text style={styles.cellSmall}>{i + 1}</Text>*/}
|
||||
{/* <Text style={styles.cell}>*/}
|
||||
{/* {data.team1_players?.[i]?.name || ""}*/}
|
||||
{/* </Text>*/}
|
||||
{/* <Text style={styles.cellSmall}>*/}
|
||||
{/* {data.team1_players?.[i]?.elo || ""}*/}
|
||||
{/* </Text>*/}
|
||||
{/* <Text style={styles.cellSmall}></Text> /!* Result placeholder *!/*/}
|
||||
{/* <Text style={styles.cell}>*/}
|
||||
{/* {data.team2_players?.[i]?.name || ""}*/}
|
||||
{/* </Text>*/}
|
||||
{/* <Text style={styles.cellSmall}>*/}
|
||||
{/* {data.team2_players?.[i]?.elo || ""}*/}
|
||||
{/* </Text>*/}
|
||||
{/* </View>*/}
|
||||
{/*))}*/}
|
||||
|
||||
{/*<View*/}
|
||||
{/* style={{*/}
|
||||
{/* marginTop: 50,*/}
|
||||
{/* flexDirection: "row",*/}
|
||||
{/* justifyContent: "space-around",*/}
|
||||
{/* }}*/}
|
||||
{/*>*/}
|
||||
{/* <Text>Capitaine A</Text>*/}
|
||||
{/* <Text>Arbitre</Text>*/}
|
||||
{/* <Text>Capitaine B</Text>*/}
|
||||
{/*</View>*/}
|
||||
</Page>
|
||||
</Document>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
import { Text, View } from "@react-pdf/renderer";
|
||||
|
||||
import { styles } from "@/app/[locale]/(main)/match/components/pdf/styles";
|
||||
import { Player } from "@/interfaces";
|
||||
|
||||
const teamAHeaderText = "CLUB RECEVANT (Blancs échiquier 1)";
|
||||
const teamBHeaderText = "CLUB SE DEPLACANT (Noirs échiquier 1)";
|
||||
|
||||
interface IProps {
|
||||
team: "A" | "B";
|
||||
teamName: string;
|
||||
teamPlayers: Pick<Player, "name" | "elo" | "nrFFE">[];
|
||||
boards: unknown[];
|
||||
}
|
||||
|
||||
const Team = ({ team, teamName, teamPlayers, boards }: IProps) => {
|
||||
const calculateBoardColor = ({
|
||||
team,
|
||||
boardNumber,
|
||||
}: {
|
||||
team: "A" | "B";
|
||||
boardNumber: number;
|
||||
}) => {
|
||||
const option1 = team === "A" ? "B" : "N";
|
||||
const option2 = team === "A" ? "N" : "B";
|
||||
return boardNumber % 2 !== 0 ? option1 : option2;
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={{ width: "48%", flexDirection: "column" }}>
|
||||
{/* Header Info */}
|
||||
<View
|
||||
style={{
|
||||
border: "1px solid black",
|
||||
marginBottom: 5,
|
||||
padding: 4,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
fontSize: 8,
|
||||
marginBottom: 2,
|
||||
}}
|
||||
>
|
||||
<Text>{team === "A" ? teamAHeaderText : teamBHeaderText}</Text>
|
||||
<Text>Code Club</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<Text>{teamName}</Text>
|
||||
<Text></Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Team Board Header */}
|
||||
<View style={styles.boardHeaderRow}>
|
||||
<Text style={{ width: "10%" }}>Ech.</Text>
|
||||
<Text style={{ width: "45%" }}>Nom</Text>
|
||||
<Text style={{ width: "20%" }}>Code FFE</Text>
|
||||
<Text style={{ width: "10%" }}>ELO</Text>
|
||||
<Text style={{ width: "15%", textAlign: "center" }}>Result</Text>
|
||||
</View>
|
||||
|
||||
{/* Team Players List */}
|
||||
<View style={{ flexDirection: "column" }}>
|
||||
{boards.map((_, i) => (
|
||||
<View
|
||||
key={`team1-board-${i}`}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
paddingVertical: 2,
|
||||
borderBottom: "1px solid #eee",
|
||||
alignItems: "center",
|
||||
paddingTop: 5,
|
||||
paddingBottom: 5,
|
||||
}}
|
||||
>
|
||||
<Text style={{ width: "10%" }}>
|
||||
{`${i + 1}`} {calculateBoardColor({ team, boardNumber: i + 1 })}
|
||||
</Text>
|
||||
<Text style={{ width: "45%", fontSize: 9 }}>
|
||||
{teamPlayers[i]?.name || ""}
|
||||
</Text>
|
||||
<Text style={{ width: "20%", fontSize: 9 }}>
|
||||
{teamPlayers[i]?.nrFFE || ""}
|
||||
</Text>
|
||||
<Text style={{ width: "10%", fontSize: 9 }}>
|
||||
{teamPlayers[i]?.elo || ""}
|
||||
</Text>
|
||||
<Text style={{ width: "15%" }}> </Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
paddingTop: 2,
|
||||
paddingBottom: 2,
|
||||
}}
|
||||
>
|
||||
<Text>Gain: 1</Text>
|
||||
<Text>Null: X</Text>
|
||||
<Text>Perte: 0</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
@@ -30,6 +30,7 @@ export const styles = StyleSheet.create({
|
||||
boardHeaderRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
borderBottom: "1px solid black",
|
||||
},
|
||||
infoTable: {
|
||||
borderWidth: 1,
|
||||
|
||||
Reference in New Issue
Block a user