Public
Edited
Oct 7, 2023
epaiseur_trait = 3
Plot.plot({
grid: false,
marginRight: 60,
x: {domain: [-272/2-10,272/2+10]},
y: {domain: [-152/2-50,152/2+50]},
facet: {label: null},
axis: null,
facet: {
data: csv,
x: d => d.num_point % num_facette,
y: d => Math.floor(d.num_point / num_facette)
},
marks: [
Plot.frame(),
Plot.line(coor_table_moins_2, {y: "distance_x", x: "distance_y",stroke: "grey", strokeWidth: epaiseur_trait}),
Plot.areaY(filet_noir1, Plot.windowY({
y: "distance_x",
x1: "distance_y1",
x2: "distance_y2",
fill: "grey",
k: 14
})),
Plot.areaY(filet_noir2, Plot.windowY({
y: "distance_x",
x1: "distance_y1",
x2: "distance_y2",
fill: "grey",
k: 14
})),
//Plot.line(ligne_centrale, {x: "distance_x", y: "distance_y",stroke: "grey", strokeWidth: 1}),
Plot.line(filet_blanc, {y: "distance_x", x: "distance_y",stroke: "grey", strokeWidth: epaiseur_trait}),
Plot.line(ligne_v_un_tier, {y: "distance_x", x: "distance_y",stroke: "grey", strokeWidth: epaiseur_trait-1}),
Plot.line(ligne_v_deux_tier, {y: "distance_x", x: "distance_y",stroke: "grey", strokeWidth: epaiseur_trait-1}),
Plot.line(ligne_h_un_tier_haut, {y: "distance_x", x: "distance_y",stroke: "grey", strokeWidth: epaiseur_trait-1}),
Plot.line(ligne_h_un_tier_bas, {y: "distance_x", x: "distance_y",stroke: "grey", strokeWidth: epaiseur_trait-1}),
Plot.line(ligne_h_deux_tier_haut, {y: "distance_x", x: "distance_y",stroke: "grey", strokeWidth: epaiseur_trait-1}),
Plot.line(ligne_h_deux_tier_bas, {y: "distance_x", x: "distance_y",stroke: "grey", strokeWidth: epaiseur_trait-1}),
Plot.line(liste_element_num_point_coor.filter(d => d.body.includes("service") || d.body.includes("D1") || d.body.includes("D2") || d.body.includes("D3") || d.body.includes("M1") || d.body.includes("M2") || d.body.includes("M3") || d.body.includes("G1") || d.body.includes("G2") || d.body.includes("G3")), {
y: "coor_balle_x",
x: "coor_balle_y",
stroke: "black"
}),
Plot.dot(liste_element_num_point_coor.filter(d => d.body.includes("service") || d.body.includes("D1") || d.body.includes("D2") || d.body.includes("D3") || d.body.includes("M1") || d.body.includes("M2") || d.body.includes("M3") || d.body.includes("G1") || d.body.includes("G2") || d.body.includes("G3")), {
y: "coor_balle_x",
x: "coor_balle_y",
fill: "author",
r:10
}),
Plot.text("num_point", {
y: d => -100,
x: d => 0,
text: ["Point "+((clientMessages_joueur.length == 0)?0:clientMessages_joueur[clientMessages_joueur.length-1].num_point)],
textAnchor: "middle",
fontSize :20,
dx: 0
}),
Plot.text(positions_zones, {
y: "x",
x: "y",
text: "zone",
textAnchor: "middle",
fontSize :50,
dx: 0,
fill: "grey",
opacity: 0.3
}),
Plot.text(liste_element_num_point_coor_pour_coup, {
y: "coor_balle_x",
x: "coor_balle_y",
text: d => (d.body == 'coup_droit')?"C":"R",
textAnchor: "middle",
fontSize :15,
dx: 0,
fill: 'white'
}),
]
})
liste_element_num_point_coor.filter(d => d.body == 'coup_droit' || d.body == 'revers').filter(d => d.num_point == clientMessages_joueur[clientMessages_joueur.length-1].num_point)
positions_zones = [
{x: -TABLE[0].table_width/2 + TABLE[0].table_width/6, y: TABLE[0].table_length/12, zone:"D1"},
{x: -TABLE[0].table_width/2 + TABLE[0].table_width/6, y: (3*TABLE[0].table_length)/12, zone:"D2"},
{x: -TABLE[0].table_width/2 + TABLE[0].table_width/6, y: (5*TABLE[0].table_length)/12, zone:"D3"},
{x: 0, y: TABLE[0].table_length/12, zone:"M1"},
{x: 0, y: (3*TABLE[0].table_length)/12, zone:"M2"},
{x: 0, y: (5*TABLE[0].table_length)/12, zone:"M3"},
{x: +TABLE[0].table_width/2 - TABLE[0].table_width/6, y: TABLE[0].table_length/12, zone:"G1"},
{x: +TABLE[0].table_width/2 - TABLE[0].table_width/6, y: (3*TABLE[0].table_length)/12, zone:"G2"},
{x: +TABLE[0].table_width/2 - TABLE[0].table_width/6, y: (5*TABLE[0].table_length)/12, zone:"G3"},
{x: +TABLE[0].table_width/2 - TABLE[0].table_width/6, y: -TABLE[0].table_length/12, zone:"D1"},
{x: +TABLE[0].table_width/2 - TABLE[0].table_width/6, y: -(3*TABLE[0].table_length)/12, zone:"D2"},
{x: +TABLE[0].table_width/2 - TABLE[0].table_width/6, y: -(5*TABLE[0].table_length)/12, zone:"D3"},
{x: 0, y: -TABLE[0].table_length/12, zone:"M1"},
{x: 0, y: -(3*TABLE[0].table_length)/12, zone:"M2"},
{x: 0, y: -(5*TABLE[0].table_length)/12, zone:"M3"},
{x: -TABLE[0].table_width/2 + TABLE[0].table_width/6, y: -TABLE[0].table_length/12, zone:"G1"},
{x: -TABLE[0].table_width/2 + TABLE[0].table_width/6, y: -(3*TABLE[0].table_length)/12, zone:"G2"},
{x: -TABLE[0].table_width/2 + TABLE[0].table_width/6, y: -(5*TABLE[0].table_length)/12, zone:"G3"},
]
ligne_v_un_tier = [{distance_x:(-TABLE[0].table_width/2)+(TABLE[0].table_width/3),distance_y:-TABLE[0].table_length/2},{distance_x:(-TABLE[0].table_width/2)+(TABLE[0].table_width/3),distance_y:TABLE[0].table_length/2}]
ligne_v_deux_tier = [{distance_x:(TABLE[0].table_width/2)+(-TABLE[0].table_width/3),distance_y:-TABLE[0].table_length/2},{distance_x:(TABLE[0].table_width/2)+(-TABLE[0].table_width/3),distance_y:TABLE[0].table_length/2}]
ligne_h_un_tier_haut = [{distance_x:(-TABLE[0].table_width/2),distance_y:-(TABLE[0].table_length/2)/3},{distance_x:(TABLE[0].table_width/2),distance_y:-(TABLE[0].table_length/2)/3}]
ligne_h_un_tier_bas = [{distance_x:(-TABLE[0].table_width/2),distance_y:(TABLE[0].table_length/2)/3},{distance_x:(TABLE[0].table_width/2),distance_y:(TABLE[0].table_length/2)/3}]
ligne_h_deux_tier_haut = [{distance_x:(-TABLE[0].table_width/2),distance_y:-2*(TABLE[0].table_length/2)/3},{distance_x:(TABLE[0].table_width/2),distance_y:-2*(TABLE[0].table_length/2)/3}]
ligne_h_deux_tier_bas = [{distance_x:(-TABLE[0].table_width/2),distance_y:2*(TABLE[0].table_length/2)/3},{distance_x:(TABLE[0].table_width/2),distance_y:2*(TABLE[0].table_length/2)/3}]
liste_element_num_point_coor_pour_coup = ajout_coor_a_coup(liste_element_num_point_coor.filter(d => d.body == 'coup_droit' || d.body == 'revers'),liste_element_num_point_coor.filter(d => d.body.includes("D1") || d.body.includes("D2") || d.body.includes("D3") || d.body.includes("M1") || d.body.includes("M2") || d.body.includes("M3") || d.body.includes("G1") || d.body.includes("G2") || d.body.includes("G3")))
function ajout_coor_a_coup(liste_coup,liste_zone) {
var liste_sortie = []
for (let index = 0; index < Math.min(liste_zone.length,liste_coup.length); ++index) {
liste_coup[index].coor_balle_x = liste_zone[index].coor_balle_x
liste_coup[index].coor_balle_y = liste_zone[index].coor_balle_y
}
return liste_coup
}
liste_element_num_point_coor = clientMessages_joueur.filter(d => (joueurB.length > 0)?d.author == joueurA || d.author == joueurB:false).sort((a, b) => (a._creationTime > b._creationTime) ? 1 : -1).map(d => {
d.coor_balle_x = calcul_coor_x(d.body,(d.author == joueurA)?'g':'d')
d.coor_balle_y = calcul_coor_y(d.body,(d.author == joueurA)?'g':'d')
return d
})
coor_table_moins_2 = TABLE[0].table_dim
filet_noir1 = TABLE[0].black_net_left
filet_noir2 = TABLE[0].black_net_rigth
ligne_centrale = TABLE[0].center_line
filet_blanc = TABLE[0].white_net
echelle_table = 200
liste_zones = clientZone.filter(d => (joueurB.length > 0)?d.author == joueurA || d.author == joueurB:false).sort((a, b) => (a._creationTime > b._creationTime) ? 1 : -1).map(d => {
d.coor_balle_x = calcul_coor_x(d.body,(d.author == joueurA)?'g':'d')
d.coor_balle_y = calcul_coor_y(d.body,(d.author == joueurA)?'g':'d')
return d
})
function calcul_coor_x(zone,cote) {
var x = 0
if (zone == 'service'){
x = 0
}else if (cote == 'g'){
console.log(TABLE[0].table_width)
if (zone.includes('G')) {
x = TABLE[0].table_width/2 - TABLE[0].table_width/6
}else if (zone.includes('M')) {
x = 0
}else if (zone.includes('D')) {
x = -TABLE[0].table_width/2 + TABLE[0].table_width/6
}
} else {
if (zone.includes('D')) {
x = TABLE[0].table_width/2 - TABLE[0].table_width/6
}else if (zone.includes('M')) {
x = 0
}else if (zone.includes('G')) {
x = -TABLE[0].table_width/2 + TABLE[0].table_width/6
}
}
return x
}
function calcul_coor_y(zone,cote) {
var x = 0
if (cote == 'd'){
if (zone == 'service'){
x = TABLE[0].table_length/2+10
}else if (zone.includes('1')) {
x = -TABLE[0].table_length/12
}else if (zone.includes('2')) {
x = -(3*TABLE[0].table_length)/12
}else if (zone.includes('3')) {
x = -(5*TABLE[0].table_length)/12
}
} else {
if (zone == 'service'){
x = -TABLE[0].table_length/2-10
}else if (zone.includes('1')) {
x = TABLE[0].table_length/12
}else if (zone.includes('2')) {
x = (3*TABLE[0].table_length)/12
}else if (zone.includes('3')) {
x = (5*TABLE[0].table_length)/12
}
}
return x
}
point_joueur = clientPoints2.filter(d => (joueurB.length > 0)?d.author == joueurA || d.author == joueurB:false).sort((a, b) => (a._creationTime > b._creationTime) ? 1 : -1)
data_evolution_score(point_joueur)
clientMessages_joueur = clientMessages.filter(d => (joueurB.length > 0)?d.author == joueurA || d.author == joueurB:false).sort((a, b) => (a._creationTime > b._creationTime) ? 1 : -1)
calcul_num_point(clientMessages_joueur)
function calcul_num_point(liste) {
var i = 0
var num_coup = 0
liste.map(d => {
if (d.body == 'point'){
i += 1
num_coup = 0
}
if (d.body == 'coup_droit' || d.body =='revers'){
num_coup += 1
}
d.num_point = (d.body == 'point' || d.body == 'dehors' || d.body == 'filet')?i-1:i
d.num_coup = num_coup
return d
})
return liste
}
function data_evolution_score(data) {
var liste = []
var score_jA = 0
var score_jB = 0
var num_point = 0
liste.push({score_jA: score_jA, score_jB: score_jB, num_point: num_point, nom_jA: joueurA, nom_jB: joueurB})
for (let index = 0; index < data.length; ++index) {
if (data[index].author == joueurA){
score_jA += 1
num_point += 1
liste.push({score_jA: score_jA, score_jB: score_jB, num_point: num_point, nom_jA: joueurA, nom_jB: joueurB})
}else if (data[index].author == joueurB){
score_jB += 1
num_point += 1
liste.push({score_jA: score_jA, score_jB: score_jB, num_point: num_point, nom_jA: joueurA, nom_jB: joueurB})
}
}
return liste
}
c = import("https://esm.run/convex-dev/react")
origin = "https://dazzling-opossum-637.convex.cloud"
client = new c.ConvexReactClient(origin)
queryGenerator = (client, query, ...args) => {
const watch = client.watchQuery(query, ...args);
return Generators.observe((notify) =>
watch.onUpdate(() => notify(watch.localQueryResult()))
);
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
clientPoints2 = queryGenerator(client, "messages:getPoints", Object.assign({}, {}))
clientMessages = queryGenerator(client, "messages:get", Object.assign({}, {}))
clientCoup = queryGenerator(client, "messages:getCoup", Object.assign({}, {}))
clientZone = queryGenerator(client, "messages:getZone", Object.assign({}, {}))
duration
duration = formatTime(ticker)
button = Inputs.button("Restart timer", {
reduce: () => {
mutable restart = true
}
})
mutable restart = true
ticker = {
restart;
let i = 0;
while (true) {
yield Promises.delay(1*1000, ++i);
}
}
formatTime = (seconds) => {
const format = d3.timeFormat("%M:%S");
const time = new Date(null);
time.setSeconds(seconds);
return format(time);
}
import {
vegaSync,
createFacts,
colorVega,
RangedMultiDimensionalFilter,
sampleArray,
w,
fullscreen
} from "@pierreleripoll/vegasync"
import {TABLE} from "@liris/tt-constantes"
joueurA_from_url = querystrings.get("joueurA") || "NONE"
joueurB_from_url = querystrings.get("joueurB") || "NONE"
import {querystrings} from "@liris/selecteur"
TABLE
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
