Résultat de la compétition :
` +const backButton = `Retour` +const cupImg = `
`
+
+const voidFunction = () => {
+}
+let lastRf = 0;
+let rfFonction = voidFunction;
+
+setInterval(() => {
+ rfFonction();
+}, 15000);
+
+function setSubPage(name) {
+ window.location.hash = name;
+ const location = name.split('/');
+ console.log(location);
+
+ switch (location[0]) {
+ case 'home':
+ homePage();
+ break;
+ case 'poule':
+ poulePage(location);
+ break;
+ case 'comb':
+ combPage(location);
+ break;
+ case 'club':
+ clubPage(location);
+ break;
+ case 'all':
+ combsPage();
+ break;
+ }
+}
+
+function homePage() {
+ rootDiv.innerHTML = header;
+
+ let content = document.createElement('div');
+ content.innerHTML = `
+ -
+
- Par poule +
- Par combattant +
- Par club +
- Tous les combattants +
+
+
`
+ pouleDiv.innerHTML = arrayContent;
+ return pouleDiv;
+}
+
+function buildRankArray(rankArray) {
+ const arrayDiv = document.createElement('div');
+ let arrayContent = `| Rouge | ++ | Scores | ++ | Bleu | +Date | +
|---|---|---|---|---|---|
| ${match.red} | +${match.red_w ? cupImg : ""} | +${scoreToString(match.score)} | +${match.blue_w ? cupImg : ""} | +${match.blue} | +${dateToString((match.red_w || match.blue_w) ? match.date : null)} | +
+
+
+
`
+ arrayDiv.innerHTML = arrayContent;
+ return arrayDiv;
+}
+
+function buildTree(treeData) {
+ return drawGraph(initTree(treeData))
+}
+
+function poulePage(location) {
+ rootDiv.innerHTML = header + backButton;
+ const content = document.createElement('div');
+ content.style.marginTop = '1em';
+ content.innerHTML = '| Place | +Nom | +Victoire | +Ratio | +Points marqués | +Points reçus | +
|---|---|---|---|---|---|
| ${row.rank} | +${row.name} | +${row.win} | +${row.pointRate.toFixed(3)} | +${row.pointMake} | +${row.pointTake} | +
Recherche par poule
'; + + const dataContainer = document.createElement('div'); + dataContainer.id = 'data-container'; + + let currentPoule = 0; + const loadPoule = () => { + const loading = startLoading(content); + fetch(`${apiUrlRoot}/poule/data?poule=${currentPoule}&rf=${lastRf}`) + .then(response => { + if (response.status === 204) // No content => no update + return; + + response.json().then(poule => { + lastRf = (poule.genTime !== undefined) ? poule.genTime : 0; + // console.log(poule); + + if (location.length === 3 && poule.type < 3) { + location.pop(); + window.location.hash = location.join('/'); + } + + dataContainer.replaceChildren(); + + if (poule.type === 1) { + for (const g in poule.matchs) { + if (Object.keys(poule.matchs).length > 1) { + const text = document.createElement('h4'); + text.textContent = `Groupe ${g}`; + text.style.marginTop = '2em'; + dataContainer.append(text); + } + dataContainer.append(buildMatchArray(poule.matchs[g])); + dataContainer.append(buildRankArray(poule.rankArray[g])); + } + } else if (poule.type === 2) { + dataContainer.append(buildTree(poule['trees'])); + } else { + const change_view = (isPoule) => { + dataContainer.replaceChildren(buildPouleMenu(isPoule, change_view)); + + if (isPoule) { + for (const g in poule.matchs) { + if (Object.keys(poule.matchs).length > 1) { + const text = document.createElement('h4'); + text.textContent = `Groupe ${g}`; + text.style.marginTop = '2em'; + dataContainer.append(text); + } + dataContainer.append(buildMatchArray(poule.matchs[g])); + dataContainer.append(buildRankArray(poule.rankArray[g])); + } + } else { + dataContainer.append(buildTree(poule['trees'])); + } + + location[2] = isPoule ? 1 : 2; + window.location.hash = location.join('/'); + } + change_view((location.length === 3) ? location[2] === '1' : true); + } + }) + }) + .catch(e => { + console.error(e); + dataContainer.replaceChildren(new Text("Erreur de chargement de la poule")); + }) + .finally(() => stopLoading(loading)); + } + + const loading = startLoading(content); + fetch(`${apiUrlRoot}/poule/list`) + .then(response => response.json()) + .then(poule => { + const select = document.createElement('select'); + select.setAttribute('id', poule.id); + select.innerHTML = ``; + for (const pouleKey of Object.keys(poule).sort()) { + select.innerHTML += ``; + } + select.addEventListener('change', e => { + location[1] = Object.keys(poule).find(key => poule[key] === Number(e.target.value)); + location[1] = encodeURI(location[1]); + window.location.hash = location.join('/'); + lastRf = 0; + currentPoule = e.target.value; + loadPoule(); + }) + content.append(select); + content.appendChild(dataContainer); + + if (location.length > 1 && location[1] !== undefined && location[1] !== '') { + const tmp = poule[decodeURI(location[1])]; + select.value = tmp; + currentPoule = tmp + loadPoule(); + } + }) + .catch(() => rootDiv.append(new Text("Erreur de chargement des poules"))) + .finally(() => stopLoading(loading)); + + rfFonction = () => { + if (currentPoule !== 0) + loadPoule(); + } + + rootDiv.append(content) +} + +function buildCombView(comb) { + const pouleDiv = document.createElement('div'); + let arrayContent = ` +Info :
+-
+
- Nom Prénom : ${comb.name} +
- Club : ${comb.club} +
- Catégorie : ${comb.cat} +
Statistique :
+-
+
- Taux de victoire : ${comb.matchs.length === 0 ? "---" : (comb.totalWin / comb.matchs.length * 100).toFixed(0)}% (${comb.totalWin} sur ${comb.matchs.length}) +
- Points marqués : ${comb.pointMake} +
- Points reçus : ${comb.pointTake} +
- Ratio du score (point marqué / point reçu): ${comb.pointRatio.toFixed(3)} +
Liste des matchs:
+ +
+
+
`
+ pouleDiv.innerHTML = arrayContent;
+ return pouleDiv;
+}
+
+function combPage(location) {
+ rootDiv.innerHTML = header + backButton;
+ const content = document.createElement('div');
+ content.style.marginTop = '1em';
+ content.innerHTML = '| Date | +Poule | +Adversaire | +Scores | +Ratio | ++ |
|---|---|---|---|---|---|
| ${dateToString(match.date)} | +${match.poule} | +${match.adv} | +${scoreToString(match.score)} | +${match.ratio.toFixed(3)} | +${match.win ? cupImg : ""} | +
Recherche par combattant
'; + + const dataContainer = document.createElement('div'); + dataContainer.id = 'data-container'; + + const loadComb = (id) => { + const loading = startLoading(content); + fetch(`${apiUrlRoot}/comb/data?comb=${id}`) + .then(response => response.json()) + .then(comb => { + console.log(comb); + dataContainer.replaceChildren(buildCombView(comb)); + }) + .catch(() => dataContainer.replaceChildren(new Text("Erreur de chargement du combattant"))) + .finally(() => stopLoading(loading)); + } + + const loading = startLoading(content); + fetch(`${apiUrlRoot}/comb/list`) + .then(response => response.json()) + .then(combs => { + const select = document.createElement('select'); + select.innerHTML = ``; + for (const comb of Object.keys(combs).sort()) { + select.innerHTML += ``; + } + select.addEventListener('change', e => { + location[1] = Object.keys(combs).find(key => combs[key] === e.target.value); + location[1] = encodeURI(location[1]); + window.location.hash = location.join('/'); + loadComb(e.target.value); + }) + content.append(select); + content.appendChild(dataContainer); + + if (location.length > 1 && location[1] !== undefined && location[1] !== '') { + const tmp = combs[decodeURI(location[1])]; + select.value = tmp; + loadComb(tmp); + } + }) + .catch(() => rootDiv.append(new Text("Erreur de chargement des combattants"))) + .finally(() => stopLoading(loading)); + + rootDiv.append(content) +} + +function buildClubView(club) { + const pouleDiv = document.createElement('div'); + let arrayContent = ` +Info :
+-
+
- Nom : ${club.name} +
- Nombre d'inscris : ${club.nb_insc} +
Statistique :
+-
+
- Nombre de match disputé : ${club.nb_match} +
- Nombre de victoires : ${club.match_w} +
- Ratio de victoires moyen : ${club.ratioVictoire.toFixed(3)} +
- Points marqués : ${club.pointMake} +
- Points reçus : ${club.pointTake} +
- Ratio de points moyen : ${club.ratioPoint.toFixed(3)} +
Liste des menbres :
+ +
+
+
`
+ pouleDiv.innerHTML = arrayContent;
+ return pouleDiv;
+}
+
+function clubPage(location) {
+ rootDiv.innerHTML = header + backButton;
+ const content = document.createElement('div');
+ content.style.marginTop = '1em';
+ content.innerHTML = '| Catégorie | +Nom | +Victoires | +Défaites | +Ratio victoires | +Points marqués | +Points reçus | +Ratio points | +
|---|---|---|---|---|---|---|---|
| ${comb.cat} | +${comb.name} | +${comb.w} | +${comb.l} | +${comb.ratioVictoire.toFixed(3)} | +${comb.pointMake} | +${comb.pointTake} | +${comb.ratioPoint.toFixed(3)} | +
Recherche par club
'; + + const dataContainer = document.createElement('div'); + dataContainer.id = 'data-container'; + + const loadComb = (id) => { + const loading = startLoading(content); + fetch(`${apiUrlRoot}/club/data?club=${id}`) + .then(response => response.json()) + .then(club => { + console.log(club); + dataContainer.replaceChildren(buildClubView(club)); + }) + .catch(() => dataContainer.replaceChildren(new Text("Erreur de chargement du club"))) + .finally(() => stopLoading(loading)); + } + + const loading = startLoading(content); + fetch(`${apiUrlRoot}/club/list`) + .then(response => response.json()) + .then(clubs => { + const select = document.createElement('select'); + select.innerHTML = ``; + for (const club of Object.keys(clubs).sort()) { + select.innerHTML += ``; + } + select.addEventListener('change', e => { + if (e.target.value === '0') + return; + location[1] = Object.keys(clubs).find(key => clubs[key] === Number(e.target.value)); + location[1] = encodeURI(location[1]); + window.location.hash = location.join('/'); + loadComb(e.target.value); + }) + content.append(select); + content.appendChild(dataContainer); + + if (location.length > 1 && location[1] !== undefined && location[1] !== '') { + const tmp = clubs[decodeURI(location[1])]; + select.value = tmp; + loadComb(tmp); + } + }) + .catch(() => rootDiv.append(new Text("Erreur de chargement des clubs"))) + .finally(() => stopLoading(loading)); + + rootDiv.append(content) +} + +function buildCombsView(combs) { + const pouleDiv = document.createElement('div'); + let arrayContent = ` +Statistique :
+-
+
- Nombre d'inscris : ${combs.nb_insc} +
- Nombre de match disputé : ${combs.tt_match} +
- Points marqués : ${combs.point} +
Liste des combattants :
+ +
+
+
`
+ pouleDiv.innerHTML = arrayContent;
+ return pouleDiv;
+}
+
+function combsPage() {
+ rootDiv.innerHTML = header + backButton;
+ const content = document.createElement('div');
+ content.style.marginTop = '1em';
+
+ const dataContainer = document.createElement('div');
+ dataContainer.id = 'data-container';
+
+ const loading = startLoading(content);
+ fetch(`${apiUrlRoot}/comb/get_all`)
+ .then(response => response.json())
+ .then(combs => {
+ console.log(combs);
+ dataContainer.replaceChildren(buildCombsView(combs));
+ })
+ .catch(() => dataContainer.replaceChildren(new Text("Erreur de chargement de la liste")))
+ .finally(() => stopLoading(loading));
+
+ content.append(dataContainer);
+ rootDiv.append(content)
+}
+
+window.addEventListener("load", () => {
+ let path = document.getElementById('safca_api_script').src;
+ const urlParams = new URLSearchParams(new URL(path).search);
+ apiUrlRoot = path.substring(0, path.lastIndexOf('/')) + "/api/public/result/" + urlParams.get("id");
+
+ console.log("apiUrlRoot:", apiUrlRoot)
+
+ let hash = window.location.hash.substring(1);
+ if (hash.length === 0)
+ setSubPage('home');
+ else
+ setSubPage(hash);
+});
+
+class TreeNode {
+ constructor(data) {
+ this.data = data;
+ this.left = null;
+ this.right = null;
+ }
+
+ death() {
+ let dg = 0;
+ let dd = 0;
+
+ if (this.right != null)
+ dg = this.right.death();
+
+ if (this.left != null)
+ dg = this.left.death();
+
+ return 1 + Math.max(dg, dd);
+ }
+}
+
+function initTree(data_in) {
+ out = [];
+ for (const din of data_in) {
+ out.push(parseTree(din));
+ }
+
+ return out;
+}
+
+function parseTree(data_in) {
+ if (data_in?.data == null)
+ return null;
+
+ let node = new TreeNode(data_in.data);
+ node.left = parseTree(data_in?.left);
+ node.right = parseTree(data_in?.right);
+
+ return node;
+}
+
+const max_x = 500;
+const size = 24;
+
+function getBounds(root) {
+ let px = max_x;
+ let py;
+ let maxx, minx, miny, maxy
+
+ function drawNode(tree, px, py) {
+ let death = tree.death() - 1
+
+ if (death === 0) {
+ if (miny > py - size - ((size * 1.5 / 2) | 0)) miny = py - size - (size * 1.5 / 2) | 0;
+ if (maxy < py + size + ((size * 1.5 / 2) | 0)) maxy = py + size + (size * 1.5 / 2) | 0;
+ } else {
+ if (miny > py - size * 2 * death - ((size * 1.5 / 2) | 0))
+ miny = py - size * 2 * death - ((size * 1.5 / 2) | 0);
+ if (maxy < py + size * 2 * death + ((size * 1.5 / 2) | 0))
+ maxy = py + size * 2 * death + ((size * 1.5 / 2) | 0);
+ }
+ if (minx > px - size * 2 - size * 8) minx = px - size * 2 - size * 8;
+
+ if (tree.left != null) drawNode(tree.left, px - size * 2 - size * 8, py - size * 2 * death);
+ if (tree.right != null) drawNode(tree.right, px - size * 2 - size * 8, py + size * 2 * death);
+ }
+
+ if (root != null) {
+ py = (size * 2 * root.at(0).death() + (((size * 1.5 / 2) | 0) + size) * root.at(0).death()) * 2;
+
+ maxx = px;
+ minx = px;
+ miny = py - (size * 1.5 / 2) | 0;
+ maxy = py + (size * 1.5 / 2) | 0;
+
+ for (const node of root) {
+ px = px - size * 2 - size * 8;
+ if (minx > px) minx = px;
+
+ drawNode(node, px, py);
+ //graphics2D.drawRect(minx, miny, maxx - minx, maxy - miny);
+ py = maxy + ((size * 2 * node.death() + ((size * 1.5 / 2) | 0)));
+ px = maxx;
+ }
+ } else {
+ minx = 0;
+ maxx = 0;
+ miny = 0;
+ maxy = 0;
+ }
+
+ return [minx, maxx, miny, maxy];
+}
+
+function drawGraph(root = []) {
+ const canvas = document.createElement('canvas');
+ canvas.id = "myCanvas";
+ canvas.style.border = "1px solid grey";
+ canvas.style.marginTop = "10px";
+
+ const ctx = canvas.getContext("2d");
+
+ const [minx, maxx, miny, maxy] = getBounds(root);
+ canvas.width = maxx - minx;
+ canvas.height = maxy - miny;
+ ctx.translate(-minx, -miny);
+
+
+ ctx.fillStyle = "#000000"
+ ctx.lineWidth = 2
+ ctx.strokeStyle = "#000000"
+
+ function printText(s, x, y, width, height, lineG, lineD) {
+ ctx.save();
+ ctx.translate(x, y);
+
+ let tSize = 17;
+ let ratioX = height * 1. / 20.;
+
+ ctx.font = "100 " + tSize + "px Arial";
+
+ let mw = width - (ratioX * 2) | 0;
+ if (ctx.measureText(s).width > mw) {
+ let dTextSize = true;
+ do {
+ tSize--;
+ ctx.font = tSize + "px Arial";
+ } while (ctx.measureText(s).width > mw && tSize > 10)
+
+ if (!dTextSize || ctx.measureText(s).width > mw) {
+ let s = "";
+ for (const string2 in s.split(" ")) {
+ if (ctx.measureText(s + string2).width >= mw) {
+ s += "...";
+ break;
+ } else {
+ s += string2 + " "
+ }
+ }
+ }
+ }
+
+ const text = ctx.measureText(s)
+ let dx = (width - text.width) / 2;
+ let dy = ((height - text.actualBoundingBoxDescent) / 2) + (text.actualBoundingBoxAscent / 2);
+
+ ctx.fillText(s, dx, dy, width - dy);
+ ctx.restore();
+
+ ctx.beginPath();
+ if (lineD) {
+ ctx.moveTo((ratioX * 2.5 + x + dx + text.width) | 0, y + height / 2);
+ ctx.lineTo(x + width, y + height / 2)
+ }
+ if (lineG) {
+ ctx.moveTo(x, y + height / 2);
+ ctx.lineTo((dx + x - ratioX * 2.5) | 0, y + height / 2)
+ }
+ ctx.stroke();
+ }
+
+ function printScores(scores, px, py, scale) {
+
+ ctx.save();
+ ctx.translate(px - size * 2, py - size * scale);
+ ctx.font = "100 " + 14 + "px Arial";
+ ctx.textBaseline = 'top';
+
+ for (let i = 0; i < scores.length; i++) {
+ const score = scores[i].s1+"-"+scores[i].s2;
+ const div = (scores.length <= 2) ? 2 : (scores.length >= 4) ? 4 : 3;
+ const text = ctx.measureText(score);
+ let dx = (size * 2 - text.width) / 2;
+ let dy = ((size * 2 / div - text.actualBoundingBoxDescent) / 2) + (text.actualBoundingBoxAscent / 2);
+
+ ctx.fillStyle = '#ffffffdd';
+ ctx.fillRect(dx, size * 2 * scale / div * (i) + dy, text.width, 14);
+ ctx.fillStyle = "#000000";
+ ctx.fillText(score, dx, size * 2 * scale / div * (i) + dy, size * 2);
+ }
+ ctx.restore();
+ }
+
+ function drawNode(tree, px, py) {
+ ctx.beginPath()
+ ctx.moveTo(px, py)
+ ctx.lineTo(px - size, py)
+ ctx.stroke();
+
+ let death = tree.death() - 1
+ let match = tree.data
+
+ if (death === 0) {
+ ctx.beginPath()
+ ctx.moveTo(px - size, py + size)
+ ctx.lineTo(px - size, py - size)
+
+ ctx.moveTo(px - size, py + size)
+ ctx.lineTo(px - size * 2, py + size)
+ ctx.moveTo(px - size, py - size)
+ ctx.lineTo(px - size * 2, py - size)
+ ctx.stroke();
+
+ printScores(match.scores, px, py, 1);
+
+ ctx.fillStyle = "#FF0000";
+ printText((match.c1FullName == null) ? "" : match.c1FullName, px - size * 2 - size * 8, py - size - (size * 1.5 / 2) | 0,
+ size * 8, (size * 1.5) | 0, false, true)
+
+ ctx.fillStyle = "#0000FF";
+ printText((match.c2FullName == null) ? "" : match.c2FullName, px - size * 2 - size * 8, py + size - (size * 1.5 / 2) | 0,
+ size * 8, (size * 1.5) | 0, false, true)
+
+ if (max_y < py + size + ((size * 1.5 / 2) | 0)) max_y = py + size + (size * 1.5 / 2) | 0;
+ } else {
+ ctx.beginPath()
+ ctx.moveTo(px - size, py)
+ ctx.lineTo(px - size, py + size * 2 * death)
+ ctx.moveTo(px - size, py)
+ ctx.lineTo(px - size, py - size * 2 * death)
+
+ ctx.moveTo(px - size, py + size * 2 * death)
+ ctx.lineTo(px - size * 2, py + size * 2 * death)
+ ctx.moveTo(px - size, py - size * 2 * death)
+ ctx.lineTo(px - size * 2, py - size * 2 * death)
+ ctx.stroke();
+
+ printScores(match.scores, px, py, 1.5);
+
+ ctx.fillStyle = "#FF0000";
+ printText((match.c1FullName == null) ? "" : match.c1FullName, px - size * 2 - size * 8, py - size * 2 * death - (size * 1.5 / 2) | 0,
+ size * 8, (size * 1.5) | 0, true, true)
+
+ ctx.fillStyle = "#0000FF";
+ printText((match.c2FullName == null) ? "" : match.c2FullName, px - size * 2 - size * 8, py + size * 2 * death - (size * 1.5 / 2) | 0,
+ size * 8, (size * 1.5) | 0, true, true)
+
+ if (max_y < py + size * 2 * death + ((size * 1.5 / 2) | 0))
+ max_y = py + size * 2 * death + ((size * 1.5 / 2) | 0);
+ }
+
+ ctx.stroke();
+
+ if (tree.left != null) drawNode(tree.left, px - size * 2 - size * 8, py - size * 2 * death);
+ if (tree.right != null) drawNode(tree.right, px - size * 2 - size * 8, py + size * 2 * death);
+ }
+
+ function win(scores) {
+ let sum = 0;
+ for (const score of scores) {
+ if (score.s1 === -1000 || score.s2 === -1000)
+ continue;
+
+ if (score.s1 > score.s2)
+ sum++;
+ else if (score.s1 < score.s2)
+ sum--;
+ }
+ return sum;
+ }
+
+ let px = max_x;
+ let py;
+ let max_y
+
+ if (root != null) {
+ py = (size * 2 * root.at(0).death() + (((size * 1.5 / 2) | 0) + size) * root.at(0).death()) * 2;
+
+ max_y = py + (size * 1.5 / 2) | 0;
+
+ for (const node of root) {
+ let win_name = "";
+ if (node.data.end) {
+ if (win(node.data.scores) > 0)
+ win_name = (node.data.c1FullName === null) ? "???" : node.data.c1FullName;
+ else
+ win_name = (node.data.c2FullName === null) ? "???" : node.data.c2FullName;
+ }
+
+
+ ctx.fillStyle = "#18A918";
+ printText(win_name, px - size * 2 - size * 8, py - ((size * 1.5 / 2) | 0),
+ size * 8, (size * 1.5) | 0, true, false);
+
+ px = px - size * 2 - size * 8;
+
+ drawNode(node, px, py);
+
+ py = max_y + ((size * 2 * node.death() + ((size * 1.5 / 2) | 0)));
+ px = max_x;
+ }
+ }
+
+ return canvas;
+}
diff --git a/src/main/webapp/public/obs_template.json b/src/main/webapp/public/obs_template.json
new file mode 100644
index 0000000..da724c5
--- /dev/null
+++ b/src/main/webapp/public/obs_template.json
@@ -0,0 +1,828 @@
+{
+ "current_scene": "Ovarlay",
+ "current_program_scene": "Ovarlay",
+ "scene_order": [
+ {
+ "name": "Ovarlay"
+ },
+ {
+ "name": "Scène 2"
+ }
+ ],
+ "name": "saf",
+ "groups": [],
+ "quick_transitions": [
+ {
+ "name": "Coupure",
+ "duration": 300,
+ "hotkeys": [],
+ "id": 5,
+ "fade_to_black": false
+ },
+ {
+ "name": "Fondu",
+ "duration": 300,
+ "hotkeys": [],
+ "id": 6,
+ "fade_to_black": false
+ }
+ ],
+ "transitions": [],
+ "saved_projectors": [],
+ "canvases": [],
+ "current_transition": "Fondu",
+ "transition_duration": 300,
+ "preview_locked": false,
+ "scaling_enabled": false,
+ "scaling_level": -9,
+ "scaling_off_x": 0.0,
+ "scaling_off_y": 0.0,
+ "virtual-camera": {
+ "type2": 3
+ },
+ "modules": {
+ "auto-scene-switcher": {
+ "interval": 300,
+ "non_matching_scene": "",
+ "switch_if_not_matching": false,
+ "active": false,
+ "switches": []
+ },
+ "captions": {
+ "source": "",
+ "enabled": false,
+ "lang_id": 1036,
+ "provider": "mssapi"
+ },
+ "output-timer": {
+ "streamTimerHours": 0,
+ "streamTimerMinutes": 0,
+ "streamTimerSeconds": 30,
+ "recordTimerHours": 0,
+ "recordTimerMinutes": 0,
+ "recordTimerSeconds": 30,
+ "autoStartStreamTimer": false,
+ "autoStartRecordTimer": false,
+ "pauseRecordTimer": false
+ },
+ "scripts-tool": []
+ },
+ "version": 1,
+ "sources": [
+ {
+ "prev_ver": 536870916,
+ "name": "Capture d'écran",
+ "uuid": "62b56523-7c2e-4ae2-b4e6-9ca3a36e904b",
+ "id": "monitor_capture",
+ "versioned_id": "monitor_capture",
+ "settings": {
+ "monitor_id": "\\\\?\\DISPLAY#HWP3320#5&3974db33&0&UID143619#{e6f07b5f-ee97-4a90-b076-33f57bf4eaa7}"
+ },
+ "mixers": 0,
+ "sync": 0,
+ "flags": 0,
+ "volume": 1.0,
+ "balance": 0.5,
+ "enabled": true,
+ "muted": false,
+ "push-to-mute": false,
+ "push-to-mute-delay": 0,
+ "push-to-talk": false,
+ "push-to-talk-delay": 0,
+ "hotkeys": {},
+ "deinterlace_mode": 0,
+ "deinterlace_field_order": 0,
+ "monitoring_type": 0,
+ "private_settings": {}
+ },
+ {
+ "prev_ver": 536870916,
+ "name": "Ovarlay",
+ "uuid": "670a1c48-dac6-405a-959a-d40662bab4d8",
+ "id": "scene",
+ "versioned_id": "scene",
+ "settings": {
+ "custom_size": false,
+ "id_counter": 21,
+ "items": [
+ {
+ "name": "sub1.img.blue",
+ "source_uuid": "0a37157d-f356-4657-a2ad-fa4193a298f8",
+ "visible": true,
+ "locked": false,
+ "rot": 0.0,
+ "align": 5,
+ "bounds_type": 0,
+ "bounds_align": 0,
+ "bounds_crop": false,
+ "crop_left": 0,
+ "crop_top": 0,
+ "crop_right": 0,
+ "crop_bottom": 0,
+ "id": 19,
+ "group_item_backup": false,
+ "pos": {
+ "x": 1789.0,
+ "y": 950.0
+ },
+ "scale": {
+ "x": 0.11296296119689941,
+ "y": 0.11296296119689941
+ },
+ "bounds": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "scale_filter": "disable",
+ "blend_method": "default",
+ "blend_type": "normal",
+ "show_transition": {
+ "duration": 0
+ },
+ "hide_transition": {
+ "duration": 0
+ },
+ "private_settings": {}
+ },
+ {
+ "name": "sub1.img.rouge",
+ "source_uuid": "2dfe69bc-9b10-419d-8ee1-6cd9cc53a502",
+ "visible": true,
+ "locked": false,
+ "rot": 0.0,
+ "align": 5,
+ "bounds_type": 0,
+ "bounds_align": 0,
+ "bounds_crop": false,
+ "crop_left": 0,
+ "crop_top": 0,
+ "crop_right": 0,
+ "crop_bottom": 0,
+ "id": 14,
+ "group_item_backup": false,
+ "pos": {
+ "x": 9.0,
+ "y": 950.0
+ },
+ "scale": {
+ "x": 0.11296296119689941,
+ "y": 0.11296296119689941
+ },
+ "bounds": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "scale_filter": "disable",
+ "blend_method": "default",
+ "blend_type": "normal",
+ "show_transition": {
+ "duration": 0
+ },
+ "hide_transition": {
+ "duration": 0
+ },
+ "private_settings": {}
+ },
+ {
+ "name": "sub1.comb.blue",
+ "source_uuid": "4e75e437-20ed-4834-bfac-b668f5cac960",
+ "visible": true,
+ "locked": true,
+ "rot": 0.0,
+ "align": 5,
+ "bounds_type": 0,
+ "bounds_align": 0,
+ "bounds_crop": false,
+ "crop_left": 0,
+ "crop_top": 0,
+ "crop_right": 0,
+ "crop_bottom": 0,
+ "id": 17,
+ "group_item_backup": false,
+ "pos": {
+ "x": 960.0,
+ "y": 945.0
+ },
+ "scale": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "bounds": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "scale_filter": "disable",
+ "blend_method": "default",
+ "blend_type": "normal",
+ "show_transition": {
+ "duration": 0
+ },
+ "hide_transition": {
+ "duration": 0
+ },
+ "private_settings": {}
+ },
+ {
+ "name": "sub1.comb.rouge",
+ "source_uuid": "69594be1-dfdc-4eee-893c-fb546e830a6f",
+ "visible": true,
+ "locked": true,
+ "rot": 0.0,
+ "align": 5,
+ "bounds_type": 0,
+ "bounds_align": 0,
+ "bounds_crop": false,
+ "crop_left": 0,
+ "crop_top": 0,
+ "crop_right": 0,
+ "crop_bottom": 0,
+ "id": 8,
+ "group_item_backup": false,
+ "pos": {
+ "x": 140.0,
+ "y": 945.0
+ },
+ "scale": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "bounds": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "scale_filter": "disable",
+ "blend_method": "default",
+ "blend_type": "normal",
+ "show_transition": {
+ "duration": 0
+ },
+ "hide_transition": {
+ "duration": 0
+ },
+ "private_settings": {}
+ },
+ {
+ "name": "sub1.score.blue",
+ "source_uuid": "264866ab-58e1-45ec-a32f-c440c32057cd",
+ "visible": true,
+ "locked": true,
+ "rot": 0.0,
+ "align": 5,
+ "bounds_type": 0,
+ "bounds_align": 0,
+ "bounds_crop": false,
+ "crop_left": 0,
+ "crop_top": 0,
+ "crop_right": 0,
+ "crop_bottom": 0,
+ "id": 20,
+ "group_item_backup": false,
+ "pos": {
+ "x": 1108.0,
+ "y": 10.0
+ },
+ "scale": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "bounds": {
+ "x": 0.0,
+ "y": 0.0
+ },
+ "scale_filter": "disable",
+ "blend_method": "default",
+ "blend_type": "normal",
+ "show_transition": {
+ "duration": 0
+ },
+ "hide_transition": {
+ "duration": 0
+ },
+ "private_settings": {}
+ },
+ {
+ "name": "sub1.score.rouge",
+ "source_uuid": "8a532b22-7bcd-4742-aa0e-8ea556f39a12",
+ "visible": true,
+ "locked": true,
+ "rot": 0.0,
+ "align": 5,
+ "bounds_type": 0,
+ "bounds_align": 0,
+ "bounds_crop": false,
+ "crop_left": 0,
+ "crop_top": 0,
+ "crop_right": 0,
+ "crop_bottom": 0,
+ "id": 16,
+ "group_item_backup": false,
+ "pos": {
+ "x": 686.0,
+ "y": 10.0
+ },
+ "scale": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "bounds": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "scale_filter": "disable",
+ "blend_method": "default",
+ "blend_type": "normal",
+ "show_transition": {
+ "duration": 0
+ },
+ "hide_transition": {
+ "duration": 0
+ },
+ "private_settings": {}
+ },
+ {
+ "name": "sub1.temps",
+ "source_uuid": "a961104f-2cad-4f65-9ff8-d50ff36f8418",
+ "visible": true,
+ "locked": true,
+ "rot": 0.0,
+ "align": 5,
+ "bounds_type": 0,
+ "bounds_align": 0,
+ "bounds_crop": false,
+ "crop_left": 0,
+ "crop_top": 0,
+ "crop_right": 0,
+ "crop_bottom": 0,
+ "id": 21,
+ "group_item_backup": false,
+ "pos": {
+ "x": 584.0,
+ "y": 0.0
+ },
+ "scale": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "bounds": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "scale_filter": "disable",
+ "blend_method": "default",
+ "blend_type": "normal",
+ "show_transition": {
+ "duration": 0
+ },
+ "hide_transition": {
+ "duration": 0
+ },
+ "private_settings": {}
+ }
+ ]
+ },
+ "mixers": 0,
+ "sync": 0,
+ "flags": 0,
+ "volume": 1.0,
+ "balance": 0.5,
+ "enabled": true,
+ "muted": false,
+ "push-to-mute": false,
+ "push-to-mute-delay": 0,
+ "push-to-talk": false,
+ "push-to-talk-delay": 0,
+ "hotkeys": {
+ "OBSBasic.SelectScene": [],
+ "libobs.show_scene_item.19": [],
+ "libobs.hide_scene_item.19": [],
+ "libobs.show_scene_item.14": [],
+ "libobs.hide_scene_item.14": [],
+ "libobs.show_scene_item.17": [],
+ "libobs.hide_scene_item.17": [],
+ "libobs.show_scene_item.8": [],
+ "libobs.hide_scene_item.8": [],
+ "libobs.show_scene_item.20": [],
+ "libobs.hide_scene_item.20": [],
+ "libobs.show_scene_item.16": [],
+ "libobs.hide_scene_item.16": [],
+ "libobs.show_scene_item.21": [],
+ "libobs.hide_scene_item.21": []
+ },
+ "deinterlace_mode": 0,
+ "deinterlace_field_order": 0,
+ "monitoring_type": 0,
+ "canvas_uuid": "6c69626f-6273-4c00-9d88-c5136d61696e",
+ "private_settings": {}
+ },
+ {
+ "prev_ver": 536870916,
+ "name": "Scène 2",
+ "uuid": "d430fe13-0e4a-4d4b-a28e-7c833eb27bf6",
+ "id": "scene",
+ "versioned_id": "scene",
+ "settings": {
+ "custom_size": false,
+ "id_counter": 2,
+ "items": [
+ {
+ "name": "Capture d'écran",
+ "source_uuid": "62b56523-7c2e-4ae2-b4e6-9ca3a36e904b",
+ "visible": false,
+ "locked": false,
+ "rot": 0.0,
+ "align": 5,
+ "bounds_type": 0,
+ "bounds_align": 0,
+ "bounds_crop": false,
+ "crop_left": 0,
+ "crop_top": 0,
+ "crop_right": 0,
+ "crop_bottom": 0,
+ "id": 2,
+ "group_item_backup": false,
+ "pos": {
+ "x": 0.0,
+ "y": 0.0
+ },
+ "scale": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "bounds": {
+ "x": 0.0,
+ "y": 0.0
+ },
+ "scale_filter": "disable",
+ "blend_method": "default",
+ "blend_type": "normal",
+ "show_transition": {
+ "duration": 0
+ },
+ "hide_transition": {
+ "duration": 0
+ },
+ "private_settings": {}
+ },
+ {
+ "name": "Ovarlay",
+ "source_uuid": "670a1c48-dac6-405a-959a-d40662bab4d8",
+ "visible": true,
+ "locked": false,
+ "rot": 0.0,
+ "align": 5,
+ "bounds_type": 0,
+ "bounds_align": 0,
+ "bounds_crop": false,
+ "crop_left": 0,
+ "crop_top": 0,
+ "crop_right": 0,
+ "crop_bottom": 0,
+ "id": 1,
+ "group_item_backup": false,
+ "pos": {
+ "x": 0.0,
+ "y": 0.0
+ },
+ "scale": {
+ "x": 1.0,
+ "y": 1.0
+ },
+ "bounds": {
+ "x": 0.0,
+ "y": 0.0
+ },
+ "scale_filter": "disable",
+ "blend_method": "default",
+ "blend_type": "normal",
+ "show_transition": {
+ "duration": 0
+ },
+ "hide_transition": {
+ "duration": 0
+ },
+ "private_settings": {}
+ }
+ ]
+ },
+ "mixers": 0,
+ "sync": 0,
+ "flags": 0,
+ "volume": 1.0,
+ "balance": 0.5,
+ "enabled": true,
+ "muted": false,
+ "push-to-mute": false,
+ "push-to-mute-delay": 0,
+ "push-to-talk": false,
+ "push-to-talk-delay": 0,
+ "hotkeys": {
+ "OBSBasic.SelectScene": [],
+ "libobs.show_scene_item.2": [],
+ "libobs.hide_scene_item.2": [],
+ "libobs.show_scene_item.1": [],
+ "libobs.hide_scene_item.1": []
+ },
+ "deinterlace_mode": 0,
+ "deinterlace_field_order": 0,
+ "monitoring_type": 0,
+ "canvas_uuid": "6c69626f-6273-4c00-9d88-c5136d61696e",
+ "private_settings": {}
+ },
+ {
+ "prev_ver": 536870916,
+ "name": "sub1.comb.blue",
+ "uuid": "4e75e437-20ed-4834-bfac-b668f5cac960",
+ "id": "text_gdiplus",
+ "versioned_id": "text_gdiplus_v2",
+ "settings": {
+ "chatlog": false,
+ "extents": true,
+ "gradient": false,
+ "outline": false,
+ "undo_sname": "sub1.comb_rouge",
+ "vertical": false,
+ "font": {
+ "face": "Arial",
+ "flags": 0,
+ "size": 65,
+ "style": "Normal"
+ },
+ "align": "right",
+ "valign": "bottom",
+ "color": 4294917120,
+ "extents_cx": 835,
+ "extents_cy": 120,
+ "antialiasing": true,
+ "overlay": true,
+ "text": "Xavier Login"
+ },
+ "mixers": 0,
+ "sync": 0,
+ "flags": 0,
+ "volume": 1.0,
+ "balance": 0.5,
+ "enabled": true,
+ "muted": false,
+ "push-to-mute": false,
+ "push-to-mute-delay": 0,
+ "push-to-talk": false,
+ "push-to-talk-delay": 0,
+ "hotkeys": {},
+ "deinterlace_mode": 0,
+ "deinterlace_field_order": 0,
+ "monitoring_type": 0,
+ "private_settings": {}
+ },
+ {
+ "prev_ver": 536870916,
+ "name": "sub1.comb.rouge",
+ "uuid": "69594be1-dfdc-4eee-893c-fb546e830a6f",
+ "id": "text_gdiplus",
+ "versioned_id": "text_gdiplus_v2",
+ "settings": {
+ "chatlog": false,
+ "extents": true,
+ "gradient": false,
+ "outline": false,
+ "undo_sname": "sub1.comb_rouge",
+ "vertical": false,
+ "font": {
+ "face": "Arial",
+ "flags": 0,
+ "size": 65,
+ "style": "Normal"
+ },
+ "align": "left",
+ "valign": "bottom",
+ "color": 4278190335,
+ "extents_cx": 820,
+ "extents_cy": 120,
+ "antialiasing": true,
+ "overlay": true,
+ "text": "Xavier Login"
+ },
+ "mixers": 0,
+ "sync": 0,
+ "flags": 0,
+ "volume": 1.0,
+ "balance": 0.5,
+ "enabled": true,
+ "muted": false,
+ "push-to-mute": false,
+ "push-to-mute-delay": 0,
+ "push-to-talk": false,
+ "push-to-talk-delay": 0,
+ "hotkeys": {},
+ "deinterlace_mode": 0,
+ "deinterlace_field_order": 0,
+ "monitoring_type": 0,
+ "private_settings": {}
+ },
+ {
+ "prev_ver": 536870916,
+ "name": "sub1.img.blue",
+ "uuid": "0a37157d-f356-4657-a2ad-fa4193a298f8",
+ "id": "slideshow",
+ "versioned_id": "slideshow",
+ "settings": {
+ "files": [],
+ "transition": "slide",
+ "slide_time": 9000,
+ "transition_speed": 1300,
+ "use_custom_size": "1:1",
+ "playback_behavior": "stop_restart",
+ "slide_mode": "mode_auto",
+ "overlay": true
+ },
+ "mixers": 0,
+ "sync": 0,
+ "flags": 0,
+ "volume": 1.0,
+ "balance": 0.5,
+ "enabled": true,
+ "muted": false,
+ "push-to-mute": false,
+ "push-to-mute-delay": 0,
+ "push-to-talk": false,
+ "push-to-talk-delay": 0,
+ "hotkeys": {
+ "SlideShow.PlayPause": [],
+ "SlideShow.Restart": [],
+ "SlideShow.Stop": [],
+ "SlideShow.NextSlide": [],
+ "SlideShow.PreviousSlide": []
+ },
+ "deinterlace_mode": 0,
+ "deinterlace_field_order": 0,
+ "monitoring_type": 0,
+ "private_settings": {}
+ },
+ {
+ "prev_ver": 536870916,
+ "name": "sub1.img.rouge",
+ "uuid": "2dfe69bc-9b10-419d-8ee1-6cd9cc53a502",
+ "id": "slideshow",
+ "versioned_id": "slideshow",
+ "settings": {
+ "files": [],
+ "transition": "slide",
+ "slide_time": 9000,
+ "transition_speed": 1300,
+ "use_custom_size": "1:1",
+ "playback_behavior": "stop_restart",
+ "slide_mode": "mode_auto",
+ "overlay": true
+ },
+ "mixers": 0,
+ "sync": 0,
+ "flags": 0,
+ "volume": 1.0,
+ "balance": 0.5,
+ "enabled": true,
+ "muted": false,
+ "push-to-mute": false,
+ "push-to-mute-delay": 0,
+ "push-to-talk": false,
+ "push-to-talk-delay": 0,
+ "hotkeys": {
+ "SlideShow.PlayPause": [],
+ "SlideShow.Restart": [],
+ "SlideShow.Stop": [],
+ "SlideShow.NextSlide": [],
+ "SlideShow.PreviousSlide": []
+ },
+ "deinterlace_mode": 0,
+ "deinterlace_field_order": 0,
+ "monitoring_type": 0,
+ "private_settings": {}
+ },
+ {
+ "prev_ver": 536870916,
+ "name": "sub1.score.blue",
+ "uuid": "264866ab-58e1-45ec-a32f-c440c32057cd",
+ "id": "text_gdiplus",
+ "versioned_id": "text_gdiplus_v2",
+ "settings": {
+ "chatlog": false,
+ "extents": true,
+ "gradient": false,
+ "outline": false,
+ "text": "0",
+ "undo_sname": "sub1.comb_rouge",
+ "vertical": false,
+ "font": {
+ "face": "Arial",
+ "flags": 0,
+ "size": 80,
+ "style": "Normal"
+ },
+ "align": "center",
+ "valign": "bottom",
+ "color": 4294917120,
+ "extents_wrap": true,
+ "extents_cx": 163,
+ "extents_cy": 80,
+ "antialiasing": true
+ },
+ "mixers": 0,
+ "sync": 0,
+ "flags": 0,
+ "volume": 1.0,
+ "balance": 0.5,
+ "enabled": true,
+ "muted": false,
+ "push-to-mute": false,
+ "push-to-mute-delay": 0,
+ "push-to-talk": false,
+ "push-to-talk-delay": 0,
+ "hotkeys": {},
+ "deinterlace_mode": 0,
+ "deinterlace_field_order": 0,
+ "monitoring_type": 0,
+ "private_settings": {}
+ },
+ {
+ "prev_ver": 536870916,
+ "name": "sub1.score.rouge",
+ "uuid": "8a532b22-7bcd-4742-aa0e-8ea556f39a12",
+ "id": "text_gdiplus",
+ "versioned_id": "text_gdiplus_v2",
+ "settings": {
+ "chatlog": false,
+ "extents": true,
+ "gradient": false,
+ "outline": false,
+ "text": "0",
+ "undo_sname": "sub1.comb_rouge",
+ "vertical": false,
+ "font": {
+ "face": "Arial",
+ "flags": 0,
+ "size": 80,
+ "style": "Normal"
+ },
+ "align": "center",
+ "valign": "bottom",
+ "color": 4278190335,
+ "extents_wrap": true,
+ "extents_cx": 163,
+ "extents_cy": 80,
+ "antialiasing": true
+ },
+ "mixers": 0,
+ "sync": 0,
+ "flags": 0,
+ "volume": 1.0,
+ "balance": 0.5,
+ "enabled": true,
+ "muted": false,
+ "push-to-mute": false,
+ "push-to-mute-delay": 0,
+ "push-to-talk": false,
+ "push-to-talk-delay": 0,
+ "hotkeys": {},
+ "deinterlace_mode": 0,
+ "deinterlace_field_order": 0,
+ "monitoring_type": 0,
+ "private_settings": {}
+ },
+ {
+ "prev_ver": 536870916,
+ "name": "sub1.temps",
+ "uuid": "a961104f-2cad-4f65-9ff8-d50ff36f8418",
+ "id": "text_gdiplus",
+ "versioned_id": "text_gdiplus_v2",
+ "settings": {
+ "extents": true,
+ "text": "00:10",
+ "font": {
+ "face": "Arial",
+ "flags": 0,
+ "size": 110,
+ "style": "Normal"
+ },
+ "align": "center",
+ "color": -16711936,
+ "extents_wrap": true,
+ "extents_cx": 800,
+ "extents_cy": 110
+ },
+ "mixers": 0,
+ "sync": 0,
+ "flags": 0,
+ "volume": 1.0,
+ "balance": 0.5,
+ "enabled": true,
+ "muted": false,
+ "push-to-mute": false,
+ "push-to-mute-delay": 0,
+ "push-to-talk": false,
+ "push-to-talk-delay": 0,
+ "hotkeys": {},
+ "deinterlace_mode": 0,
+ "deinterlace_field_order": 0,
+ "monitoring_type": 0,
+ "private_settings": {}
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/main/webapp/src/assets/SimpleIconsOBS.ts b/src/main/webapp/src/assets/SimpleIconsOBS.ts
new file mode 100644
index 0000000..2135033
--- /dev/null
+++ b/src/main/webapp/src/assets/SimpleIconsOBS.ts
@@ -0,0 +1,26 @@
+import {
+ IconDefinition,
+ IconName,
+ IconPrefix
+} from "@fortawesome/fontawesome-svg-core";
+
+export const SimpleIconsOBS: IconDefinition = {
+ icon: [
+ // SVG viewbox width (in pixels)
+ 20,
+
+ // SVG viewbox height (in pixels)
+ 20,
+
+ // Aliases (not needed)
+ [],
+
+ // Unicode as hex value (not needed)
+ "",
+
+ // SVG path data
+ "M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.485 10-10S15.515 0 10 0m8.159 14.075c.55-1.617-.057-3.491-1.551-4.448-1.75-1.12-5.196 1.14-5.196 1.14s-.763 2.815-.026 4.007a5.4 5.4 0 0 1-1.77 1.709c-2.348 1.4-5.372.848-7.054-1.209a9 9 0 0 1-.235-.346c1.139 1.423 3.219 1.831 4.855.908 1.809-1.02 1.427-5.124 1.427-5.124S6.598 8.774 5.26 8.799a5.424 5.424 0 0 1 2.993-7.76c.157-.03.317-.05.476-.072a3.76 3.76 0 1 0 4.525 5.435 5.4 5.4 0 0 1 2.794.793c2.199 1.345 3.119 4.041 2.344 6.397-.072.166-.154.324-.234.483"
+ ],
+ iconName: "simple-icons-obs" as IconName,
+ prefix: "simple-icons" as IconPrefix
+};
diff --git a/src/main/webapp/src/components/SmartLogoBackground.jsx b/src/main/webapp/src/components/SmartLogoBackground.jsx
index ca5a42a..270a532 100644
--- a/src/main/webapp/src/components/SmartLogoBackground.jsx
+++ b/src/main/webapp/src/components/SmartLogoBackground.jsx
@@ -2,44 +2,21 @@ import {useEffect, useRef, useState, memo} from 'react';
const cache = {};
-export function SmartLogoBackground({
- src,
+export function detectOptimalBackground(blob,
darkBackground = '#333333',
lightBackground = '#f0f0f0',
defaultBackground = 'transparent',
tolerance = 55,
- minPixels = 10, // Seuil minimal de pixels détectés pour appliquer un fond
- alt = 'Logo',
- style = {},
- imgClassName = '',
- }) {
- const canvasRef = useRef(null);
- const [background, setBackground] = useState(defaultBackground);
- const [load, setLoad] = useState(false)
-
- useEffect(() => {
- if (cache[src]) {
- setBackground(cache[src]);
- return;
- }
- if (!load)
- return;
-
- const canvas = canvasRef.current;
- const ctx = canvas.getContext('2d');
+ minPixels = 10) {
+ return new Promise((resolve) => {
+ const imgUrl = URL.createObjectURL(blob);
const img = new Image();
-
- img.crossOrigin = 'Anonymous';
- img.src = src;
-
- // Prevent error logging
- img.onerror = function () {
- return true;
- }
-
+ img.crossOrigin = "anonymous";
img.onload = () => {
+ const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
+ const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -69,12 +46,9 @@ export function SmartLogoBackground({
const i = Math.round(y * canvas.width + x) * 4;
if (isTransparent(i)) {
const neighbors = [
- i - 4, // Haut
- i + 4, // Bas
- i - 4 * canvas.width, // Gauche
- i + 4 * canvas.width, // Droite
+ i - 4, i + 4, // Haut/Bas
+ i - 4 * canvas.width, i + 4 * canvas.width, // Gauche/Droite
];
-
for (const neighbor of neighbors) {
if (neighbor >= 0 && neighbor < pixels.length) {
if (isLightColor(neighbor)) lightBorderCount++;
@@ -82,24 +56,64 @@ export function SmartLogoBackground({
}
}
}
-
-
- if (lightBorderCount >= 25 || darkBorderCount >= 25)
- break
- }
-
- if (lightBorderCount > darkBorderCount && lightBorderCount >= minPixels) {
- cache[src] = darkBackground;
- setBackground(darkBackground)
- } else if (darkBorderCount > lightBorderCount && darkBorderCount >= minPixels) {
- cache[src] = lightBackground;
- setBackground(lightBackground)
- } else {
- cache[src] = defaultBackground;
- setBackground(defaultBackground)
}
}
- }
+
+ URL.revokeObjectURL(imgUrl);
+ if (lightBorderCount > darkBorderCount && lightBorderCount >= minPixels) {
+ resolve(darkBackground); // Fond sombre
+ } else if (darkBorderCount > lightBorderCount && darkBorderCount >= minPixels) {
+ resolve(lightBackground); // Fond clair
+ } else {
+ resolve(defaultBackground); // Fond transparent
+ }
+ };
+ img.onerror = () => {
+ URL.revokeObjectURL(imgUrl);
+ resolve(defaultBackground); // En cas d'erreur
+ };
+ img.src = imgUrl;
+ });
+}
+
+export function SmartLogoBackground({
+ src,
+ darkBackground = '#333333',
+ lightBackground = '#f0f0f0',
+ defaultBackground = 'transparent',
+ tolerance = 55,
+ minPixels = 10, // Seuil minimal de pixels détectés pour appliquer un fond
+ alt = 'Logo',
+ style = {},
+ imgClassName = '',
+ }) {
+ const canvasRef = useRef(null);
+ const [background, setBackground] = useState(defaultBackground);
+ const [load, setLoad] = useState(false)
+
+ useEffect(() => {
+ if (!load) return;
+
+ const fetchAndDetect = async () => {
+ if (cache[src]) {
+ setBackground(cache[src]);
+ return;
+ }
+
+ try {
+ const response = await fetch(src);
+ const blob = await response.blob();
+ const detectedBackground = await detectOptimalBackground(blob, darkBackground, lightBackground, defaultBackground, tolerance, minPixels);
+ cache[src] = detectedBackground;
+ setBackground(detectedBackground);
+ } catch (error) {
+ console.error("Erreur de détection du fond:", error);
+ cache[src] = defaultBackground;
+ setBackground(defaultBackground);
+ }
+ };
+
+ fetchAndDetect();
}, [src, darkBackground, lightBackground, defaultBackground, tolerance, minPixels, load]);
return <>
diff --git a/src/main/webapp/src/hooks/useExternalWindow.jsx b/src/main/webapp/src/hooks/useExternalWindow.jsx
index 233b052..db7f53d 100644
--- a/src/main/webapp/src/hooks/useExternalWindow.jsx
+++ b/src/main/webapp/src/hooks/useExternalWindow.jsx
@@ -1,6 +1,15 @@
import {createContext, useContext, useReducer} from "react";
-const PubAffContext = createContext({next: [], c1: undefined, c2: undefined, showScore: true, timeCb: undefined, scoreRouge: 0, scoreBleu: 0});
+const PubAffContext = createContext({
+ next: [],
+ c1: undefined,
+ c2: undefined,
+ showScore: true,
+ timeCb: undefined,
+ timeCb2: undefined,
+ scoreRouge: 0,
+ scoreBleu: 0
+});
const PubAffDispatchContext = createContext(() => {
});
@@ -11,6 +20,8 @@ function reducer(state, action) {
case 'CALL_TIME':
if (state.timeCb)
state.timeCb(action.payload)
+ if (state.timeCb2)
+ state.timeCb2(action.payload)
return state
case 'CLEAR_CB_TIME':
return {...state, timeCb: undefined}
diff --git a/src/main/webapp/src/hooks/useOBS.jsx b/src/main/webapp/src/hooks/useOBS.jsx
new file mode 100644
index 0000000..6f74831
--- /dev/null
+++ b/src/main/webapp/src/hooks/useOBS.jsx
@@ -0,0 +1,183 @@
+import {createContext, useContext, useEffect, useRef, useState} from "react";
+import OBSWebSocket from "obs-websocket-js";
+import {hex2rgb} from "../utils/Tools.js";
+
+const OBSContext = createContext({connected: false, obs: null})
+
+export function OBSProvider({children}) {
+ const obs = useRef(null)
+ const obsParm = useRef(null)
+ const assets = useRef(null)
+ const [connected, setConnected] = useState(false)
+ const [doReconnect, setDoReconnect] = useState(false)
+
+ useEffect(() => {
+ if (!doReconnect)
+ return;
+
+ const timer = setInterval(() => {
+ if (obs.current && !connected && doReconnect) {
+ console.log("Reconnecting to OBS WebSocket...")
+ obs.current.connect(obsParm.current.adresse, obsParm.current.password)
+ .then(data => {
+ console.log("Reconnected to OBS WebSocket", data)
+ setDoReconnect(false)
+ })
+ }
+ }, 5000);
+ return () => clearInterval(timer);
+ }, [connected, doReconnect]);
+
+ const connect = (adresse, password = undefined, assets_dir = undefined) => {
+ if (connected && obs.current)
+ return;
+ assets.current = assets_dir;
+
+ const obs_ = new OBSWebSocket();
+ obs_.connect(adresse, password)
+ .then(data => {
+ console.log("Connected to OBS WebSocket", data)
+ })
+ .catch(err => {
+ console.error("Failed to connect to OBS WebSocket", err)
+ });
+ obs_.on('ConnectionOpened', () => {
+ setConnected(true)
+ console.log("OBS WebSocket connection opened")
+ });
+ obs_.on('ConnectionClosed', err => {
+ setConnected(false)
+ console.log("OBS WebSocket connection closed", err.code, err.message)
+ if (err.code === 1000 || err.code === 4009) // 1000 = Normal Closure, 4009 = Authentication Failure
+ return;
+ obsParm.current = {adresse, password}
+ setDoReconnect(true)
+ });
+ obs_.on('error', err => {
+ console.error("OBS WebSocket error", err)
+ });
+
+ obs.current = obs_;
+ }
+
+ const disconnect = () => {
+ if (obs.current && connected) {
+ obs.current.disconnect();
+ obs.current = null;
+ }
+ }
+
+ const ret = {connected, obs: obs.current, connect, disconnect, assets: assets.current}
+ return | Catégorie | +Club | +Nom | +Victoires | +Défaites | +Ratio victoires | +Points marqués | +Points reçus | +Ratios points | +
|---|---|---|---|---|---|---|---|---|
| ${comb.cat} | +${comb.club} | +${comb.name} | +${comb.w} | +${comb.l} | +${comb.ratioVictoire.toFixed(3)} | +${comb.pointMake} | +${comb.pointTake} | +${comb.ratioPoint.toFixed(3)} | +
@@ -35,10 +45,261 @@ export function CMAdmin() {
+
+
+}
+
+let tto = [];
+
+function resizeImageWithOptimalBackground(blob) {
+ return new Promise(async (resolve) => {
+ const background = await detectOptimalBackground(blob);
+ const imgUrl = URL.createObjectURL(blob);
+ const img = new Image();
+ img.crossOrigin = "anonymous";
+ img.onload = () => {
+ const canvas = document.createElement('canvas');
+ canvas.width = 1080;
+ canvas.height = 1080;
+ const ctx = canvas.getContext('2d');
+
+ // Dessiner l'image centrée
+ const scale = Math.min(1080 / img.width, 1080 / img.height);
+ const newWidth = img.width * scale;
+ const newHeight = img.height * scale;
+ const x = (1080 - newWidth) / 2;
+ const y = (1080 - newHeight) / 2;
+
+ ctx.filter = `drop-shadow(0 0 2rem ${background})`;
+ ctx.drawImage(img, x, y, newWidth, newHeight);
+
+ // Exporter en PNG
+ canvas.toBlob((newBlob) => {
+ resolve(newBlob);
+ URL.revokeObjectURL(imgUrl);
+ }, 'image/png', 1.0);
+ };
+ img.onerror = () => resolve(blob); // Retourne l'original en cas d'erreur
+ img.src = imgUrl;
+ });
+}
+
+async function downloadResourcesAsZip(resourceList) {
+ const zip = new JSZip();
+ const modal = new bootstrap.Modal(document.getElementById('progressModal'));
+ const progressBar = document.getElementById('progressBar');
+ const progressText = document.getElementById('progressText');
+ let completed = 0;
+
+ if (!resourceList.some(d => d.url === '/obs_template.json'))
+ resourceList.push({url: '/obs_template.json', name: 'saf_obs_template.json'});
+
+ // Afficher la modale
+ modal.show();
+
+ // Fonction pour télécharger une ressource et l'ajouter au ZIP
+ const addResourceToZip = async (data) => {
+ try {
+ const response = await fetch(data.url);
+ if (!response.ok) {
+ if (response.status === 404) {
+ return {success: false, filename: data.name || data.url.split('/').pop()};
+ }
+ // noinspection ExceptionCaughtLocallyJS
+ throw new Error(`Erreur HTTP: ${response.status}`);
+ }
+ const blob = await response.blob();
+ const filename = data.name || data.url.split('/').pop();
+ const format = filename.split('.').pop().toLowerCase();
+
+ if (['png', 'jpg', 'jpeg', 'svg'].includes(format)) {
+ const resizedBlob = await resizeImageWithOptimalBackground(blob);
+ const pngFilename = filename.replace(/\.[^/.]+$/, ".png");
+ zip.file(pngFilename, resizedBlob);
+ return {success: true, pngFilename};
+ } else {
+ zip.file(filename, blob);
+ return {success: true, filename};
+ }
+ } catch (error) {
+ console.error(`Impossible d'ajouter ${data.url} au ZIP:`, error);
+ return {success: false, filename: data.name || data.url.split('/').pop()};
+ }
+ };
+
+ // Télécharger toutes les ressources et mettre à jour la progression
+ await Promise.all(
+ resourceList.map(async (data) => {
+ const result = await addResourceToZip(data);
+ completed++;
+ const progress = Math.round((completed / resourceList.length) * 100);
+ progressBar.style.width = `${progress}%`;
+ progressText.textContent = `Téléchargement (${completed}/${resourceList.length}) : ${result.filename}`;
+ return result;
+ })
+ );
+
+ // Générer le ZIP et déclencher le téléchargement
+ const zipBlob = await zip.generateAsync({type: 'blob'});
+ const zipUrl = URL.createObjectURL(zipBlob);
+ const a = document.createElement('a');
+ a.href = zipUrl;
+ a.download = 'ressources.zip';
+ a.click();
+ URL.revokeObjectURL(zipUrl);
+
+ // Fermer la modale
+ modal.hide();
+ progressText.textContent = "Téléchargement terminé !";
+}
+
+function Menu({menuActions, compUuid}) {
+ const e = document.getElementById("actionMenu")
+ const longPress = useRef({time: null, timer: null, button: null});
+ const obsModal = useRef(null);
+
+ for (const x of tto)
+ x.dispose();
+ const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip2"]')
+ tto = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+
+ const longTimeAction = (button) => {
+ if (button === "obs") {
+ obsModal.current.click();
+ }
+ }
+
+ const longPressDown = (button) => {
+ longPress.current.button = button;
+ longPress.current.time = new Date();
+ longPress.current.timer = setTimeout(() => {
+ longTimeAction(button);
+
+ longPress.current.time = null;
+ longPress.current.button = null;
+ }, 1000);
+ }
+
+ const longPressUp = (button) => {
+ clearTimeout(longPress.current.timer);
+
+ if (longPress.current.time) {
+ const diff = new Date() - longPress.current.time;
+ if (longPress.current.button === button) {
+ if (diff >= 1000) {
+ longTimeAction(button);
+ } else {
+ if (button === "obs") {
+ downloadResourcesAsZip(menuActions.current.resourceList || [])
+ .then(__ => console.log("Ressources téléchargées"));
+ }
+ }
+ }
+
+ longPress.current.time = null;
+ longPress.current.button = null;
+ }
+ }
+
+ const handleOBSSubmit = (e) => {
+ e.preventDefault();
+ const form = e.target;
+ const adresse = form[0].value;
+ const password = form[1].value;
+ const assets_dir = form[2].value;
+
+ exportOBSConfiguration(adresse, password, assets_dir)
+ }
+
+ const copyScriptToClipboard = () => {
+ navigator.clipboard.writeText(`
+ `
+ ).then(() => {
+ toast.success("Texte copié dans le presse-papier ! Collez-le dans une balise HTML sur votre WordPress.");
+ }).catch(err => {
+ toast.error("Erreur lors de la copie dans le presse-papier : " + err);
+ });
+ }
+
+ if (!e)
+ return <>;
+ return <>
+ {createPortal(
+ <>
+
+
-
+
Edition de la catégorie
-
-
- Nom des zones de combat (séparée par des ';')
+ setLice(e.target.value)}/>
@@ -373,6 +650,22 @@ function ModalContent({state, setCatId, setConfirm, confirmRef}) {
+ {state.id !== undefined && }
}
diff --git a/src/main/webapp/src/pages/competition/editor/CMTChronoPanel.jsx b/src/main/webapp/src/pages/competition/editor/CMTChronoPanel.jsx
index 40ac209..2c744b5 100644
--- a/src/main/webapp/src/pages/competition/editor/CMTChronoPanel.jsx
+++ b/src/main/webapp/src/pages/competition/editor/CMTChronoPanel.jsx
@@ -9,7 +9,7 @@ export function ChronoPanel() {
})
const [chrono, setChrono] = useState({time: 0, startTime: 0})
const chronoText = useRef(null)
- const state = useRef({chronoState: 0, countBlink: 20, lastColor: "black", lastTimeStr: "00:00"})
+ const state = useRef({chronoState: 0, countBlink: 20, lastColor: "#000000", lastTimeStr: "00:00"})
const publicAffDispatch = usePubAffDispatch();
const addTime = (time) => setChrono(prev => ({...prev, time: prev.time - time}))
@@ -34,12 +34,12 @@ export function ChronoPanel() {
const timer = setInterval(() => {
let currentDuration = config.time
- let color = "black"
+ let color = "#000000"
if (state_.chronoState === 1) {
- color = (state_.countBlink < blinkRfDuration) ? "black" : "red"
+ color = (state_.countBlink < blinkRfDuration) ? "#000000" : "#ff0000"
} else if (state_.chronoState === 2) {
currentDuration = (state_.chronoState === 0) ? 10000 : config.pause
- color = (state_.countBlink < blinkRfDuration) ? "green" : "red"
+ color = (state_.countBlink < blinkRfDuration) ? "#008000" : "#ff0000"
}
const timeStr = timePrint(currentDuration - getTime())
diff --git a/src/main/webapp/src/pages/competition/editor/CMTMatchPanel.jsx b/src/main/webapp/src/pages/competition/editor/CMTMatchPanel.jsx
index 4b8e048..a4522be 100644
--- a/src/main/webapp/src/pages/competition/editor/CMTMatchPanel.jsx
+++ b/src/main/webapp/src/pages/competition/editor/CMTMatchPanel.jsx
@@ -11,6 +11,7 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faCircleQuestion} from "@fortawesome/free-regular-svg-icons";
import {toast} from "react-toastify";
import "./CMTMatchPanel.css"
+import {useOBS} from "../../../hooks/useOBS.jsx";
function CupImg() {
return Catégorie
@@ -131,10 +151,15 @@ function ListMatch({cat, matches, trees, menuActions}) { const [type, setType] = useState(1); useEffect(() => { + if (!cat) + return; if ((cat.type & type) === 0) setType(cat.type); }, [cat]); + if (!cat) + return <>; + return
{cat && cat.type === 3 && <>
-
@@ -173,6 +198,10 @@ function MatchList({matches, cat, menuActions}) {
.map(m => ({...m, win: win(m.scores)}))
const firstIndex = marches2.findLastIndex(m => m.poule === '-') + 1;
+ const isActiveMatch = (index) => {
+ return liceName.length === 1 || (liceName[(index - firstIndex) % liceName.length] === lice)
+ }
+
const match = matches.find(m => m.id === activeMatch)
useEffect(() => {
if (!match) {
@@ -183,7 +212,7 @@ function MatchList({matches, cat, menuActions}) {
payload: {
c1: match.c1,
c2: match.c2,
- next: marches2.filter((m, index) => !m.end && liceName[(index - firstIndex) % liceName.length] === lice && m.id !== activeMatch).map(m => ({
+ next: marches2.filter((m, index) => !m.end && isActiveMatch(index) && m.id !== activeMatch).map(m => ({
c1: m.c1,
c2: m.c2
}))
@@ -198,7 +227,7 @@ function MatchList({matches, cat, menuActions}) {
useEffect(() => {
if (match && match.poule !== lice)
- setActiveMatch(marches2.find((m, index) => !m.end && liceName[(index - firstIndex) % liceName.length] === lice)?.id)
+ setActiveMatch(marches2.find((m, index) => !m.end && isActiveMatch(index))?.id)
}, [lice]);
useEffect(() => {
@@ -207,12 +236,12 @@ function MatchList({matches, cat, menuActions}) {
if (marches2.some(m => m.id === activeMatch))
return;
- setActiveMatch(marches2.find((m, index) => !m.end && liceName[(index - firstIndex) % liceName.length] === lice)?.id);
+ setActiveMatch(marches2.find((m, index) => !m.end && isActiveMatch(index))?.id);
}, [matches])
return <>
{liceName.length > 1 &&
-
-
+
+
}
-
+
- {activeMatch &&
| L | +Z | P | N° | @@ -240,7 +269,7 @@ function MatchList({matches, cat, menuActions}) { |
|---|---|---|---|---|
| {liceName[(index - firstIndex) % liceName.length]} | @@ -259,7 +288,7 @@ function MatchList({matches, cat, menuActions}) {
-
-
-
+
}
-function ScorePanel({matchId, match, menuActions}) {
+function ScorePanel({matchId, matchs, match, menuActions}) {
const onClickVoid = useRef(() => {
});
return
+
{currentMatch?.matchSelect &&
-
+
+
-
+
}
-function ScorePanel_({matchId, match, menuActions, onClickVoid_}) {
+function ScorePanel_({matchId, matchs, match, menuActions, onClickVoid_}) {
const {sendRequest} = useWS()
const setLoading = useLoadingSwitcher()
@@ -355,6 +386,11 @@ function ScorePanel_({matchId, match, menuActions, onClickVoid_}) {
const tableRef = useRef(null)
const scoreRef = useRef([])
const lastScoreClick = useRef(null)
+ const scoreInRef = useRef(null)
+
+ useEffect(() => {
+ scoreInRef.current = scoreIn;
+ }, [scoreIn]);
useEffect(() => {
menuActions.current.saveScore = (scoreRed, scoreBlue) => {
@@ -403,9 +439,12 @@ function ScorePanel_({matchId, match, menuActions, onClickVoid_}) {
const {matchId, round, comb} = lastScoreClick.current;
lastScoreClick.current = null;
- const scoreIn_ = String(scoreIn).trim() === "" ? -1000 : Number(scoreIn);
+ const scoreIn_ = String(scoreInRef.current).trim() === "" ? -1000 : Number(scoreInRef.current);
+
+ const score = matchs.find(m => m.id === matchId).scores.find(s => s.n_round === round);
+
+ console.log("Updating score", matchId, round, comb, scoreIn_, score);
- const score = match.scores.find(s => s.n_round === round);
let newScore;
if (score) {
if (comb === 1)
@@ -474,6 +513,18 @@ function ScorePanel_({matchId, match, menuActions, onClickVoid_}) {
setEnd(match.end);
}, [match]);
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (inputRef.current && !inputRef.current.contains(event.target)) {
+ onClickVoid();
+ }
+ };
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, []);
+
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const o = [...tooltipTriggerList]
o.map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
diff --git a/src/main/webapp/src/pages/competition/editor/CMTable.jsx b/src/main/webapp/src/pages/competition/editor/CMTable.jsx
index e9e2ddb..287b77e 100644
--- a/src/main/webapp/src/pages/competition/editor/CMTable.jsx
+++ b/src/main/webapp/src/pages/competition/editor/CMTable.jsx
@@ -1,16 +1,20 @@
import React, {useEffect, useRef, useState} from "react";
import {useRequestWS} from "../../../hooks/useWS.jsx";
-import {useCombsDispatch} from "../../../hooks/useComb.jsx";
+import {useCombs, useCombsDispatch} from "../../../hooks/useComb.jsx";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {createPortal} from "react-dom";
import {copyStyles} from "../../../utils/copyStyles.js";
-import {PubAffProvider, usePubAffDispatch} from "../../../hooks/useExternalWindow.jsx";
+import {PubAffProvider, usePubAffDispatch, usePubAffState} from "../../../hooks/useExternalWindow.jsx";
import {faArrowRightArrowLeft, faDisplay} from "@fortawesome/free-solid-svg-icons";
import {PubAffWindow} from "./PubAffWindow.jsx";
import {SimpleIconsScore} from "../../../assets/SimpleIconsScore.ts";
import {ChronoPanel} from "./CMTChronoPanel.jsx";
import {CategorieSelect} from "./CMTMatchPanel.jsx";
import {PointPanel} from "./CMTPoint.jsx";
+import {importOBSConfiguration, OBSProvider, useOBS} from "../../../hooks/useOBS.jsx";
+import {SimpleIconsOBS} from "../../../assets/SimpleIconsOBS.ts";
+import {timePrint} from "../../../utils/Tools.js";
+import {toast} from "react-toastify";
export function CMTable() {
const combDispatch = useCombsDispatch()
@@ -24,39 +28,39 @@ export function CMTable() {
combDispatch({type: 'SET_ALL', payload: {source: "register", data: data}});
}, [data]);
- return
-
-
-
-
Chronomètre
-
-
+
+
+
+
}
const windowName = "FFSAFScorePublicWindow";
@@ -68,6 +72,9 @@ function Menu({menuActions}) {
const publicAffDispatch = usePubAffDispatch()
const [showPubAff, setShowPubAff] = useState(false)
const [showScore, setShowScore] = useState(true)
+ const {connected, connect, disconnect} = useOBS();
+ const longPress = useRef({time: null, timer: null, button: null});
+ const obsModal = useRef(null);
const externalWindow = useRef(null)
const containerEl = useRef(document.createElement("div"))
@@ -76,11 +83,6 @@ function Menu({menuActions}) {
if (sessionStorage.getItem(windowName + "_open") === "true") {
handlePubAff();
}
- //return () => {
- // if (!externalWindow.current)
- // return;
- // externalWindow.current.close();
- //}
}, []);
const handlePubAff = __ => {
@@ -118,15 +120,76 @@ function Menu({menuActions}) {
menuActions.current.switchSore?.();
}
+ const longTimeAction = (button) => {
+ if (button === "obs") {
+ obsModal.current.click();
+ }
+ }
+
+ const longPressDown = (button) => {
+ longPress.current.button = button;
+ longPress.current.time = new Date();
+ longPress.current.timer = setTimeout(() => {
+ longTimeAction(button);
+
+ longPress.current.time = null;
+ longPress.current.button = null;
+ }, 1000);
+ }
+
+ const longPressUp = (button) => {
+ clearTimeout(longPress.current.timer);
+
+ if (longPress.current.time) {
+ const diff = new Date() - longPress.current.time;
+ if (longPress.current.button === button) {
+ if (diff >= 1000) {
+ longTimeAction(button);
+ } else {
+ if (button === "obs") {
+ if (connected) {
+ disconnect();
+ } else {
+ importOBSConfiguration()
+ .then(config => {
+ connect("ws://" + config.adresse + "/", config.password, config.assets_dir);
+ })
+ .catch(() => {
+ toast.error("Aucune configuration OBS trouvée, veuillez en importer une");
+ });
+ }
+ }
+ }
+ }
+
+ longPress.current.time = null;
+ longPress.current.button = null;
+ }
+ }
+
+ const handleOBSSubmit = (e) => {
+ e.preventDefault();
+ const form = e.target;
+ const prefix = form[0].value;
+
+ sessionStorage.setItem("obs_prefix", prefix);
+ }
+
if (!e)
return <>;
return <>
{createPortal(
<>
- longPressDown("obs")}
+ onMouseUp={() => longPressUp("obs")}
+ data-bs-toggle="tooltip2" data-bs-placement="top"
+ data-bs-title="Clique court : Charger la configuration et se connecter. Clique long : Configuration de la lice"/>
, containerEl.current)}
+
+
+
}
+
+function ObsAutoSyncWhitPubAff() {
+ const {connected, setText, setTextAndColor, setDiapo} = useOBS();
+ const oldState = useRef({timeColor: "#000000", timeStr: "--:--", c1: null, c2: null, showScore: true, scoreRouge: 0, scoreBleu: 0});
+ const state = usePubAffState();
+ const {getComb} = useCombs();
+
+ useEffect(() => {
+ if (state.c1 !== oldState.current.c1) {
+ const comb = getComb(state.c1);
+ setText("comb.rouge", comb ? (comb?.fname + " " + comb?.lname) : "");
+ const files = []
+ if (comb?.club_uuid) files.push(`club_${comb.club_uuid}.png`)
+ if (comb?.country) files.push(`flag_${comb.country.toLowerCase()}.png`)
+ setDiapo("img.rouge", files);
+ oldState.current.c1 = state.c1;
+ }
+
+ if (state.c2 !== oldState.current.c2) {
+ const comb = getComb(state.c2);
+ setText("comb.blue", comb ? (comb?.fname + " " + comb?.lname) : "");
+ const files = []
+ if (comb?.club_uuid) files.push(`club_${comb.club_uuid}.png`)
+ if (comb?.country) files.push(`flag_${comb.country.toLowerCase()}.png`)
+ setDiapo("img.blue", files);
+ oldState.current.c2 = state.c2;
+ }
+
+ if (state.showScore !== oldState.current.showScore) {
+ setText("score.rouge", state.showScore ? state.scoreRouge.toString() : "");
+ setText("score.blue", state.showScore ? state.scoreBleu.toString() : "");
+ oldState.current.showScore = state.showScore;
+ }
+
+ if (state.showScore === undefined || state.showScore) {
+ if (state.scoreRouge !== oldState.current.scoreRouge) {
+ setText("score.rouge", (state.scoreRouge || 0).toString());
+ oldState.current.scoreRouge = state.scoreRouge;
+ }
+ if (state.scoreBleu !== oldState.current.scoreBleu) {
+ setText("score.blue", (state.scoreBleu || 0).toString());
+ oldState.current.scoreBleu = state.scoreBleu;
+ }
+ }
+ }, [state]);
+
+ state.timeCb2 = (payload) => {
+ if (payload.timeStr && payload.timeColor) {
+ setTextAndColor("temps", payload.timeStr, payload.timeColor === "#000000" ? "#ffffff" : payload.timeColor);
+
+ oldState.current.timeStr = payload.timeStr;
+ oldState.current.lastColor = payload.timeColor;
+ }
+ }
+
+ useEffect(() => {
+ if (!connected)
+ return;
+ // Initial sync
+ const comb = getComb(oldState.current.c1);
+ const comb2 = getComb(oldState.current.c2);
+ setText("comb.rouge", comb ? (comb?.fname + " " + comb?.lname) : "");
+ setText("comb.blue", comb2 ? (comb2?.fname + " " + comb2?.lname) : "");
+ setTextAndColor("temps", oldState.current.timeStr, oldState.current.timeColor === "#000000" ? "#ffffff" : oldState.current.timeColor);
+ setText("score.rouge", oldState.current.showScore === undefined || oldState.current.showScore ? oldState.current.scoreRouge.toString() : "");
+ setText("score.blue", oldState.current.showScore === undefined || oldState.current.showScore ? oldState.current.scoreBleu.toString() : "");
+
+ }, [connected])
+}
diff --git a/src/main/webapp/src/pages/competition/editor/CategoryAdminContent.jsx b/src/main/webapp/src/pages/competition/editor/CategoryAdminContent.jsx
index 7df2e9d..faae064 100644
--- a/src/main/webapp/src/pages/competition/editor/CategoryAdminContent.jsx
+++ b/src/main/webapp/src/pages/competition/editor/CategoryAdminContent.jsx
@@ -17,13 +17,15 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faTrash} from "@fortawesome/free-solid-svg-icons";
import {win} from "../../../utils/Tools.js";
+const vite_url = import.meta.env.VITE_URL;
+
function CupImg() {
return 
}
-export function CategoryContent({cat, catId, setCat}) {
+export function CategoryContent({cat, catId, setCat, menuActions}) {
const setLoading = useLoadingSwitcher()
const {sendRequest, dispatch} = useWS();
const [matches, reducer] = useReducer(MarchReducer, []);
@@ -47,10 +49,10 @@ export function CategoryContent({cat, catId, setCat}) {
const treeListener = ({data}) => {
if (!cat || data.length < 1 || data[0].categorie !== cat.id)
return
- setCat({
- ...cat,
- trees: data.map(d => from_sendTree(d, true))
- })
+ setCat(cat_ => ({
+ ...cat_,
+ trees: data.sort((a, b) => a.level - b.level).map(d => from_sendTree(d, true))
+ }))
let matches2 = [];
let combsToAdd = [];
@@ -64,10 +66,16 @@ export function CategoryContent({cat, catId, setCat}) {
reducer({type: 'UPDATE_OR_ADD', payload: {...data, c1: data.c1?.id, c2: data.c2?.id}});
combDispatch({type: 'SET_ALL', payload: {source: "match", data: [data.c1, data.c2].filter(d => d != null)}});
- if (data.c1 !== null && !groupsRef.current.some(g => g.id === data.c1?.id))
- setGroups(prev => [...prev, {id: data.c1?.id, poule: data.poule}]);
- if (data.c2 !== null && !groupsRef.current.some(g => g.id === data.c2?.id))
- setGroups(prev => [...prev, {id: data.c2?.id, poule: data.poule}]);
+ setGroups(prev => {
+ if (data.c1 !== null && !prev.some(g => g.id === data.c1?.id))
+ return [...prev, {id: data.c1?.id, poule: data.poule}];
+ return prev;
+ })
+ setGroups(prev => {
+ if (data.c2 !== null && !prev.some(g => g.id === data.c2?.id))
+ return [...prev, {id: data.c2?.id, poule: data.poule}];
+ return prev;
+ })
}
}
@@ -103,7 +111,7 @@ export function CategoryContent({cat, catId, setCat}) {
name: data.name,
liceName: data.liceName,
type: data.type,
- trees: data.trees.map(d => from_sendTree(d, true))
+ trees: data.trees.sort((a, b) => a.level - b.level).map(d => from_sendTree(d, true))
})
let matches2 = [];
@@ -142,7 +150,7 @@ export function CategoryContent({cat, catId, setCat}) {
return <>
+
-
+
-
+
-
+
- Chronomètre
+
+
-
- Score
-
-
+
+
+
+ Score
+
+
+
+
+
+
Matches
+
+
+
-
+
-
- Matches
-
-
-
-
- D
-
-
}
-export function CategoryContent({cat, catId, setCat}) {
+export function CategoryContent({cat, catId, setCat, menuActions}) {
const setLoading = useLoadingSwitcher()
const {sendRequest, dispatch} = useWS();
const [matches, reducer] = useReducer(MarchReducer, []);
@@ -47,10 +49,10 @@ export function CategoryContent({cat, catId, setCat}) {
const treeListener = ({data}) => {
if (!cat || data.length < 1 || data[0].categorie !== cat.id)
return
- setCat({
- ...cat,
- trees: data.map(d => from_sendTree(d, true))
- })
+ setCat(cat_ => ({
+ ...cat_,
+ trees: data.sort((a, b) => a.level - b.level).map(d => from_sendTree(d, true))
+ }))
let matches2 = [];
let combsToAdd = [];
@@ -64,10 +66,16 @@ export function CategoryContent({cat, catId, setCat}) {
reducer({type: 'UPDATE_OR_ADD', payload: {...data, c1: data.c1?.id, c2: data.c2?.id}});
combDispatch({type: 'SET_ALL', payload: {source: "match", data: [data.c1, data.c2].filter(d => d != null)}});
- if (data.c1 !== null && !groupsRef.current.some(g => g.id === data.c1?.id))
- setGroups(prev => [...prev, {id: data.c1?.id, poule: data.poule}]);
- if (data.c2 !== null && !groupsRef.current.some(g => g.id === data.c2?.id))
- setGroups(prev => [...prev, {id: data.c2?.id, poule: data.poule}]);
+ setGroups(prev => {
+ if (data.c1 !== null && !prev.some(g => g.id === data.c1?.id))
+ return [...prev, {id: data.c1?.id, poule: data.poule}];
+ return prev;
+ })
+ setGroups(prev => {
+ if (data.c2 !== null && !prev.some(g => g.id === data.c2?.id))
+ return [...prev, {id: data.c2?.id, poule: data.poule}];
+ return prev;
+ })
}
}
@@ -103,7 +111,7 @@ export function CategoryContent({cat, catId, setCat}) {
name: data.name,
liceName: data.liceName,
type: data.type,
- trees: data.trees.map(d => from_sendTree(d, true))
+ trees: data.trees.sort((a, b) => a.level - b.level).map(d => from_sendTree(d, true))
})
let matches2 = [];
@@ -142,7 +150,7 @@ export function CategoryContent({cat, catId, setCat}) {
return <>
-
+
{cat && }
@@ -150,7 +158,7 @@ export function CategoryContent({cat, catId, setCat}) {
}
-function AddComb({groups, setGroups, removeGroup}) {
+function AddComb({groups, setGroups, removeGroup, menuActions}) {
const {data, setData} = useRequestWS("getRegister", null)
const combDispatch = useCombsDispatch()
const {dispatch} = useWS()
@@ -184,6 +192,21 @@ function AddComb({groups, setGroups, removeGroup}) {
if (data === null)
return;
combDispatch({type: 'SET_ALL', payload: {source: "register", data: data}});
+
+ const resourceList = []
+ data.forEach(d => {
+ if (d.club_uuid) {
+ const url = `${vite_url}/api/club/${d.club_uuid}/logo`;
+ if (!resourceList.some(d => d.url === url))
+ resourceList.push({url: url, name: `club_${d.club_uuid}.png`});
+ }
+ if (d.country) {
+ const url = `/flags/svg/${d.country.toLowerCase()}.svg`;
+ if (!resourceList.some(d => d.url === url))
+ resourceList.push({url: url, name: `flag_${d.country.toLowerCase()}.svg`});
+ }
+ })
+ menuActions.current.resourceList = resourceList
}, [data]);
return <>
@@ -554,7 +577,7 @@ function MatchList({matches, cat, groups, reducer}) {
N°
Poule
- Lice
+ Zone
Rouge
Blue
diff --git a/src/main/webapp/src/pages/competition/editor/CompetitionManagerRoot.jsx b/src/main/webapp/src/pages/competition/editor/CompetitionManagerRoot.jsx
index f47dbd3..59e7c3c 100644
--- a/src/main/webapp/src/pages/competition/editor/CompetitionManagerRoot.jsx
+++ b/src/main/webapp/src/pages/competition/editor/CompetitionManagerRoot.jsx
@@ -66,7 +66,7 @@ function HomeComp() {
}/>
- }/>
+ }/>
}/>
@@ -95,7 +95,7 @@ function WSStatus({setPerm}) {
return () => dispatch({type: 'removeListener', payload: welcomeListener})
}, [])
- return
+ return
{name}
Serveur: