From 55b514beaa30911aa4c4568fbe71a74a1e672679 Mon Sep 17 00:00:00 2001 From: corentin Date: Wed, 5 Jul 2023 00:04:01 +0200 Subject: [PATCH] [demo] Improve updating the match --- demo/with-ui.html | 76 ++++++++++++++++++++++-------------- dist/brackets-viewer.min.css | 2 +- src/style.scss | 38 ------------------ 3 files changed, 47 insertions(+), 69 deletions(-) diff --git a/demo/with-ui.html b/demo/with-ui.html index bb75568..8ba0eaa 100644 --- a/demo/with-ui.html +++ b/demo/with-ui.html @@ -12,16 +12,44 @@ - @@ -40,12 +68,6 @@



-

Who won?

-
-
-

@@ -56,9 +78,6 @@

const INPUT_SUBMIT = 'input-submit'; const OPPONENT1 = 'opponent1'; const OPPONENT2 = 'opponent2'; - const RADIO_OPPONENT1 = 'won-opponent1'; - const RADIO_OPPONENT2 = 'won-opponent2'; - const RADIO_DRAW = 'won-draw'; const ELEMENT_ID = 'bracketsViewerExample'; const urlParams = new URLSearchParams(window.location.search); const id = urlParams.get('id'); @@ -193,34 +212,26 @@

const matchTitle = document.querySelector(`[data-match-id="${match.id}"] .opponents > span`).textContent; inputMask.querySelector('h3').innerText = matchTitle; - const inputButton = document.getElementById(INPUT_SUBMIT); - inputButton.onclick = async () => { - const opponent1 = parseInt(document.getElementById(OPPONENT1).value); - const opponent2 = parseInt(document.getElementById(OPPONENT2).value); - - const payload1 = { score: opponent1 } - const payload2 = { score: opponent2 } - - if (document.getElementById(RADIO_OPPONENT1).checked) { - payload1['result'] = 'win'; + const enterKeyListener = (event) => { + if (event.key === 'Enter') { + updateMatch() } + } - if (document.getElementById(RADIO_OPPONENT2).checked) { - payload2['result'] = 'win'; - } + document.addEventListener('keypress', enterKeyListener) - if (document.getElementById(RADIO_DRAW).checked) { - payload1['result'] = 'draw'; - payload2['result'] = 'draw'; - } + const updateMatch = async () => { + const opponent1 = parseInt(document.getElementById(OPPONENT1).value); + const opponent2 = parseInt(document.getElementById(OPPONENT2).value); const data = loadData(id); await window.bracketsManager.import(data); await window.bracketsManager.update.match({ id: match.id, - opponent1: payload1, - opponent2: payload2, + status: 4, + opponent1: { score: opponent1 }, + opponent2: { score: opponent2 }, }); const newData = await window.bracketsManager.export(); @@ -231,7 +242,12 @@

localStorage.setItem(BRACKETS, JSON.stringify(bracketsStore)); inputMask.style.display = 'none'; + + document.removeEventListener('keypress', enterKeyListener) } + + const inputButton = document.getElementById(INPUT_SUBMIT); + inputButton.onclick = updateMatch } const data = loadData(id); diff --git a/dist/brackets-viewer.min.css b/dist/brackets-viewer.min.css index c0fe7cc..8a25807 100644 --- a/dist/brackets-viewer.min.css +++ b/dist/brackets-viewer.min.css @@ -1 +1 @@ -.brackets-viewer{--primary-background: #fff;--secondary-background: #eceff1;--match-background: var(--primary-background);--font-color: #212529;--win-color: #50b649;--loss-color: #e61a1a;--label-color: grey;--hint-color: #a7a7a7;--connector-color: #9e9e9e;--border-color: #d9d9d9;--border-hover-color: #b6b5b5;--text-size: 12px;--round-margin: 40px;--match-width: 150px;--match-horizontal-padding: 8px;--match-vertical-padding: 6px;--connector-border-width: 2px;--match-border-width: 1px;--match-border-radius: 0.3em;--participant-image-size: 1em}.brackets-viewer{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";background:var(--primary-background);color:var(--font-color);font-size:var(--text-size);text-align:left;display:flex;flex-direction:column;align-items:flex-start;overflow:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:0 auto;padding:10px 50px}.brackets-viewer:empty{display:none}.brackets-viewer *,.brackets-viewer ::after,.brackets-viewer ::before{box-sizing:border-box}.brackets-viewer h1,.brackets-viewer h2,.brackets-viewer h3{margin-bottom:.5em;font-weight:500;line-height:1.2}.brackets-viewer h1{font-size:2em;margin-top:30px;margin-bottom:20px}.brackets-viewer h2{font-size:1.7em}.brackets-viewer h3{text-align:center;background:var(--secondary-background);font-size:1.1em;padding:10px 0px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:var(--match-width)}.brackets-viewer .round-robin{display:flex;flex-wrap:wrap;justify-content:center;row-gap:24px}.brackets-viewer .round-robin h1{flex-basis:100%}.brackets-viewer .round-robin h2{text-align:center}.brackets-viewer .round-robin .group:not(:last-of-type){margin-right:var(--round-margin)}.brackets-viewer .round-robin .group h2{margin:0 0 25px 0}.brackets-viewer .round-robin .group table{font-size:1em;margin:30px 0 20px 0;color:#a7a7a7;border-collapse:collapse}.brackets-viewer .round-robin .group th{font-weight:normal;text-align:start;cursor:help;border-bottom:var(--match-border-width) solid var(--border-color)}.brackets-viewer .round-robin .group td.hover{background:var(--secondary-background)}.brackets-viewer .round-robin .group th,.brackets-viewer .round-robin .group td{padding:5px}.brackets-viewer .round-robin .group td:nth-of-type(2),.brackets-viewer .round-robin .group td:last-of-type{color:var(--font-color);font-weight:500}.brackets-viewer .round-robin .round{width:-moz-fit-content;width:fit-content;margin:0 auto}.brackets-viewer .bracket h2{font-size:1.5em;color:gray}.brackets-viewer .bracket .rounds{display:flex}.brackets-viewer .bracket .rounds:not(:last-of-type){margin-bottom:15px}.brackets-viewer .bracket .rounds .round{display:flex;flex-direction:column}.brackets-viewer .bracket .rounds .round:not(:last-of-type){margin-right:var(--round-margin)}.brackets-viewer .match{flex:1;display:flex;align-items:center;margin:10px 0;width:var(--match-width);position:relative}.brackets-viewer .match.connect-next::after{content:"";display:block;position:absolute;right:calc(-1 * var(--round-margin)/2);width:calc(var(--round-margin)/2);height:50%;border-right:var(--connector-border-width) solid var(--connector-color)}.brackets-viewer .match.connect-next:nth-of-type(odd)::after{top:50%;border-top:var(--connector-border-width) solid var(--connector-color)}.brackets-viewer .match.connect-next:nth-of-type(even)::after{top:0;border-bottom:var(--connector-border-width) solid var(--connector-color)}.brackets-viewer .match.connect-next.straight::after{width:var(--round-margin);right:calc(-1*var(--round-margin));top:0;border-bottom:var(--connector-border-width) solid var(--connector-color);border-top:unset;border-right:unset}.brackets-viewer .opponents{width:100%;position:relative;border:var(--match-border-width) solid var(--border-color);border-radius:var(--match-border-radius);background:var(--match-background)}.brackets-viewer .opponents:hover{border:1px solid var(--border-hover-color)}.brackets-viewer .opponents>span{position:absolute;top:-10px;font-size:.8em;padding:0 5px;color:var(--label-color);background:var(--primary-background);border-radius:3px}.brackets-viewer .opponents>span:nth-of-type(1){left:3px}.brackets-viewer .opponents>span:nth-of-type(2){right:3px}.brackets-viewer .opponents.connect-previous::before{content:"";display:block;position:absolute;left:calc(-1 * var(--round-margin)/2);width:calc(var(--round-margin)/2);height:50%;border-bottom:var(--connector-border-width) solid var(--connector-color)}.bracket:nth-of-type(2) .brackets-viewer .opponents.connect-previous .opponents.connect-previous.straight::before,.bracket:nth-of-type(1) .brackets-viewer .opponents.connect-previous .opponents.connect-previous.straight::after{border-left:unset;left:var(--round-margin);width:var(--round-margin)}.bracket:nth-of-type(1) .brackets-viewer .opponents.connect-previous.straight::before{content:unset}.bracket:nth-of-type(2) .brackets-viewer .opponents.connect-previous.straight::after{content:unset}.brackets-viewer .participant{display:flex;justify-content:space-between;padding:2px var(--match-horizontal-padding);background:var(--match-background)}.brackets-viewer .participant.hover{background:var(--secondary-background) !important}.brackets-viewer .participant:nth-of-type(1){border-bottom:none;border-top-left-radius:var(--match-border-radius);border-top-right-radius:var(--match-border-radius);padding-top:var(--match-vertical-padding)}.brackets-viewer .participant:nth-of-type(2){border-top:none;border-bottom-left-radius:var(--match-border-radius);border-bottom-right-radius:var(--match-border-radius);padding-bottom:var(--match-vertical-padding)}.brackets-viewer .participant .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:80%}.brackets-viewer .participant .name.hint{color:var(--hint-color)}.brackets-viewer .participant .name>img{width:var(--participant-image-size);height:var(--participant-image-size);margin-right:4px;-o-object-fit:cover;object-fit:cover;border-radius:4px;vertical-align:middle;position:relative;bottom:1px}.brackets-viewer .participant .name>span{color:var(--hint-color);font-size:.9em;font-weight:initial}.brackets-viewer .participant.win .name{font-weight:bold}.brackets-viewer .participant .result{margin-left:10px;width:15%;text-align:center}.brackets-viewer .participant.win .result{color:var(--win-color)}.brackets-viewer .participant.loss .result{color:var(--loss-color)}#input-mask{position:absolute;left:50%;margin-left:-150px;width:300px;height:190px;top:50%;margin-top:-95px;background:#9e9e9e;box-shadow:#14191f;border-radius:5px;z-index:1;display:none;justify-content:center;align-items:center}#input-mask>div{text-align:center}#createNewBracket>div{display:grid;grid-template-columns:1fr 2fr;margin:5px;align-items:center;justify-content:center}#createNewBracket>div:last-child{grid-template-columns:1fr} +.brackets-viewer{--primary-background: #fff;--secondary-background: #eceff1;--match-background: var(--primary-background);--font-color: #212529;--win-color: #50b649;--loss-color: #e61a1a;--label-color: grey;--hint-color: #a7a7a7;--connector-color: #9e9e9e;--border-color: #d9d9d9;--border-hover-color: #b6b5b5;--text-size: 12px;--round-margin: 40px;--match-width: 150px;--match-horizontal-padding: 8px;--match-vertical-padding: 6px;--connector-border-width: 2px;--match-border-width: 1px;--match-border-radius: 0.3em;--participant-image-size: 1em}.brackets-viewer{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";background:var(--primary-background);color:var(--font-color);font-size:var(--text-size);text-align:left;display:flex;flex-direction:column;align-items:flex-start;overflow:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:0 auto;padding:10px 50px}.brackets-viewer:empty{display:none}.brackets-viewer *,.brackets-viewer ::after,.brackets-viewer ::before{box-sizing:border-box}.brackets-viewer h1,.brackets-viewer h2,.brackets-viewer h3{margin-bottom:.5em;font-weight:500;line-height:1.2}.brackets-viewer h1{font-size:2em;margin-top:30px;margin-bottom:20px}.brackets-viewer h2{font-size:1.7em}.brackets-viewer h3{text-align:center;background:var(--secondary-background);font-size:1.1em;padding:10px 0px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:var(--match-width)}.brackets-viewer .round-robin{display:flex;flex-wrap:wrap;justify-content:center;row-gap:24px}.brackets-viewer .round-robin h1{flex-basis:100%}.brackets-viewer .round-robin h2{text-align:center}.brackets-viewer .round-robin .group:not(:last-of-type){margin-right:var(--round-margin)}.brackets-viewer .round-robin .group h2{margin:0 0 25px 0}.brackets-viewer .round-robin .group table{font-size:1em;margin:30px 0 20px 0;color:#a7a7a7;border-collapse:collapse}.brackets-viewer .round-robin .group th{font-weight:normal;text-align:start;cursor:help;border-bottom:var(--match-border-width) solid var(--border-color)}.brackets-viewer .round-robin .group td.hover{background:var(--secondary-background)}.brackets-viewer .round-robin .group th,.brackets-viewer .round-robin .group td{padding:5px}.brackets-viewer .round-robin .group td:nth-of-type(2),.brackets-viewer .round-robin .group td:last-of-type{color:var(--font-color);font-weight:500}.brackets-viewer .round-robin .round{width:-moz-fit-content;width:fit-content;margin:0 auto}.brackets-viewer .bracket h2{font-size:1.5em;color:gray}.brackets-viewer .bracket .rounds{display:flex}.brackets-viewer .bracket .rounds:not(:last-of-type){margin-bottom:15px}.brackets-viewer .bracket .rounds .round{display:flex;flex-direction:column}.brackets-viewer .bracket .rounds .round:not(:last-of-type){margin-right:var(--round-margin)}.brackets-viewer .match{flex:1;display:flex;align-items:center;margin:10px 0;width:var(--match-width);position:relative}.brackets-viewer .match.connect-next::after{content:"";display:block;position:absolute;right:calc(-1 * var(--round-margin)/2);width:calc(var(--round-margin)/2);height:50%;border-right:var(--connector-border-width) solid var(--connector-color)}.brackets-viewer .match.connect-next:nth-of-type(odd)::after{top:50%;border-top:var(--connector-border-width) solid var(--connector-color)}.brackets-viewer .match.connect-next:nth-of-type(even)::after{top:0;border-bottom:var(--connector-border-width) solid var(--connector-color)}.brackets-viewer .match.connect-next.straight::after{width:var(--round-margin);right:calc(-1*var(--round-margin));top:0;border-bottom:var(--connector-border-width) solid var(--connector-color);border-top:unset;border-right:unset}.brackets-viewer .opponents{width:100%;position:relative;border:var(--match-border-width) solid var(--border-color);border-radius:var(--match-border-radius);background:var(--match-background)}.brackets-viewer .opponents:hover{border:1px solid var(--border-hover-color)}.brackets-viewer .opponents>span{position:absolute;top:-10px;font-size:.8em;padding:0 5px;color:var(--label-color);background:var(--primary-background);border-radius:3px}.brackets-viewer .opponents>span:nth-of-type(1){left:3px}.brackets-viewer .opponents>span:nth-of-type(2){right:3px}.brackets-viewer .opponents.connect-previous::before{content:"";display:block;position:absolute;left:calc(-1 * var(--round-margin)/2);width:calc(var(--round-margin)/2);height:50%;border-bottom:var(--connector-border-width) solid var(--connector-color)}.bracket:nth-of-type(2) .brackets-viewer .opponents.connect-previous .opponents.connect-previous.straight::before,.bracket:nth-of-type(1) .brackets-viewer .opponents.connect-previous .opponents.connect-previous.straight::after{border-left:unset;left:var(--round-margin);width:var(--round-margin)}.bracket:nth-of-type(1) .brackets-viewer .opponents.connect-previous.straight::before{content:unset}.bracket:nth-of-type(2) .brackets-viewer .opponents.connect-previous.straight::after{content:unset}.brackets-viewer .participant{display:flex;justify-content:space-between;padding:2px var(--match-horizontal-padding);background:var(--match-background)}.brackets-viewer .participant.hover{background:var(--secondary-background) !important}.brackets-viewer .participant:nth-of-type(1){border-bottom:none;border-top-left-radius:var(--match-border-radius);border-top-right-radius:var(--match-border-radius);padding-top:var(--match-vertical-padding)}.brackets-viewer .participant:nth-of-type(2){border-top:none;border-bottom-left-radius:var(--match-border-radius);border-bottom-right-radius:var(--match-border-radius);padding-bottom:var(--match-vertical-padding)}.brackets-viewer .participant .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:80%}.brackets-viewer .participant .name.hint{color:var(--hint-color)}.brackets-viewer .participant .name>img{width:var(--participant-image-size);height:var(--participant-image-size);margin-right:4px;-o-object-fit:cover;object-fit:cover;border-radius:4px;vertical-align:middle;position:relative;bottom:1px}.brackets-viewer .participant .name>span{color:var(--hint-color);font-size:.9em;font-weight:initial}.brackets-viewer .participant.win .name{font-weight:bold}.brackets-viewer .participant .result{margin-left:10px;width:15%;text-align:center}.brackets-viewer .participant.win .result{color:var(--win-color)}.brackets-viewer .participant.loss .result{color:var(--loss-color)} diff --git a/src/style.scss b/src/style.scss index 4ba7585..758b129 100644 --- a/src/style.scss +++ b/src/style.scss @@ -348,41 +348,3 @@ } } } - -#input-mask { - position: absolute; - left: 50%; - margin-left: -150px; - width: 300px; - - height: 190px; - top: 50%; - margin-top: -95px; - - background: #9e9e9e; - box-shadow: #14191f; - - border-radius: 5px; - - z-index: 1; - - display: none; - justify-content: center; - align-items: center; -} - -#input-mask > div { - text-align: center; -} - -#createNewBracket > div { - display: grid; - grid-template-columns: 1fr 2fr; - margin: 5px; - align-items: center; - justify-content: center; -} - -#createNewBracket > div:last-child { - grid-template-columns: 1fr; -}