diff --git a/Interface Source Code/src/gui.js b/Interface Source Code/src/gui.js index 11ed176..6bb6416 100644 --- a/Interface Source Code/src/gui.js +++ b/Interface Source Code/src/gui.js @@ -24,8 +24,10 @@ const viewport = document.getElementById('viewport'); const p1NameInp = document.getElementById('p1Name'); const p1TagInp = document.getElementById('p1Tag'); +const p1PronounsInp = document.getElementById('p1Pronouns'); const p2NameInp = document.getElementById('p2Name'); const p2TagInp = document.getElementById('p2Tag'); +const p2PronounsInp = document.getElementById('p2Pronouns'); const charImgP1 = document.getElementById('p1CharImg'); const charImgP2 = document.getElementById('p2CharImg'); @@ -114,6 +116,10 @@ function init() { //resize the box whenever the user types p1TagInp.addEventListener("input", resizeInput); p2TagInp.addEventListener("input", resizeInput); + + //resize the box whenever the user types + p1PronounsInp.addEventListener("input", resizeInput); + p2PronounsInp.addEventListener("input", resizeInput); //set click listeners to change the "best of" status @@ -672,18 +678,24 @@ function checkRound() { function swap() { let tempP1Name = p1NameInp.value; let tempP1Team = p1TagInp.value; + let tempP1Pronouns = p1PronounsInp.value; let tempP2Name = p2NameInp.value; let tempP2Team = p2TagInp.value; + let tempP2Pronouns = p2PronounsInp.value; p1NameInp.value = tempP2Name; p1TagInp.value = tempP2Team; + p1PronounsInp.value = tempP2Pronouns p2NameInp.value = tempP1Name; p2TagInp.value = tempP1Team; + p2PronounsInp.value = tempP1Pronouns changeInputWidth(p1NameInp); changeInputWidth(p1TagInp); + changeInputWidth(p1PronounsInp); changeInputWidth(p2NameInp); changeInputWidth(p2TagInp); + changeInputWidth(p2PronounsInp); let tempP1Char = charP1; @@ -710,12 +722,16 @@ function clearPlayers() { //clear player texts p1TagInp.value = ""; p1NameInp.value = ""; + p1PronounsInp.value=""; p2TagInp.value = ""; p2NameInp.value = ""; + p2PronounsInp.value=""; changeInputWidth(p1TagInp); changeInputWidth(p1NameInp); + changeInputWidth(p1PronounsInp); changeInputWidth(p2TagInp); changeInputWidth(p2NameInp); + changeInputWidth(p2PronounsInp); //reset characters to random document.getElementById('p1CharSelector').setAttribute('src', charPath + '/CSS/Random.png'); @@ -779,6 +795,7 @@ function writeScoreboard() { let scoreboardJson = { p1Name: p1NameInp.value, p1Team: p1TagInp.value, + p1Pronouns: p1PronounsInp.value, p1Character: charP1, p1Skin: skinP1, p1Color: colorP1, @@ -786,6 +803,7 @@ function writeScoreboard() { p1WL: currentP1WL, p2Name: p2NameInp.value, p2Team: p2TagInp.value, + p2Pronouns: p2PronounsInp.value, p2Character: charP2, p2Skin: skinP2, p2Color: colorP2, diff --git a/Interface Source Code/src/index.css b/Interface Source Code/src/index.css index 035867f..93cf4ee 100644 --- a/Interface Source Code/src/index.css +++ b/Interface Source Code/src/index.css @@ -132,9 +132,17 @@ input[type="text"] { #p1Name, #p2Name { float: left; - min-width: 60px; + min-width: 70px; max-width: 174px; - width: 60px; + width: 70px; + border-radius: 0px; +} + +#p1Pronouns, #p2Pronouns { + float: left; + min-width: 70px; + max-width: 184px; + width: 70px; border-radius: 0px; } diff --git a/Interface Source Code/src/index.html b/Interface Source Code/src/index.html index 8a27f29..b7cb9c5 100644 --- a/Interface Source Code/src/index.html +++ b/Interface Source Code/src/index.html @@ -31,7 +31,8 @@
-
+ +
@@ -100,9 +101,10 @@
- - -
+ + + +
diff --git a/Interface Source Code/src/index.js b/Interface Source Code/src/index.js index 772b92f..74197cc 100644 --- a/Interface Source Code/src/index.js +++ b/Interface Source Code/src/index.js @@ -9,13 +9,12 @@ if (require('electron-squirrel-startup')) { // eslint-disable-line global-requir const createWindow = () => { // Create the browser window. const mainWindow = new BrowserWindow({ - width: 600, - height: 300, - + minHeight: 360, minWidth: 600, - minHeight: 300, + maxHeight: 360, maxWidth: 600, - maxHeight: 300, + height:360, + width:360, webPreferences: { nodeIntegration: true, diff --git a/Stream Tool/Game Scoreboard.html b/Stream Tool/Game Scoreboard.html index b070ac8..cbebfb4 100644 --- a/Stream Tool/Game Scoreboard.html +++ b/Stream Tool/Game Scoreboard.html @@ -153,10 +153,28 @@ #p1Wrapper { left: 5px; } - + #p2Wrapper { right: 5px; } + + .pronouns-wrapper { + text-transform: none; + position:absolute; + text-align: center; + top:430px; + width: 150px; + height: 54px; + font-family: "Deansgate"; + } + + #p1Pronouns-wrapper { + left: 18px; + } + + #p2Pronouns-wrapper { + right: 18px; + } .teams { color: rgb(116, 116, 116); @@ -414,6 +432,14 @@
+ + + + + + + +
diff --git a/Stream Tool/Resources/Scripts/Game Scoreboard.js b/Stream Tool/Resources/Scripts/Game Scoreboard.js index 50b3819..baa719c 100644 --- a/Stream Tool/Resources/Scripts/Game Scoreboard.js +++ b/Stream Tool/Resources/Scripts/Game Scoreboard.js @@ -12,6 +12,7 @@ let p2CharacterPrev, p2SkinPrev, p2ScorePrev, p2ColorPrev, p2wlPrev; let bestOfPrev; //max text sizes (used when resizing back) +const pronounSize = '24px'; const roundSize = '32px'; const casterSize = '24px'; const twitterSize = '20px'; @@ -42,6 +43,7 @@ function init() { async function getData(scInfo) { let p1Name = scInfo['p1Name']; let p1Team = scInfo['p1Team']; + let p1Pronouns = scInfo['p1Pronouns']; let p1Score = scInfo['p1Score']; let p1Color = scInfo['p1Color']; let p1Character = scInfo['p1Character']; @@ -50,6 +52,7 @@ async function getData(scInfo) { let p2Name = scInfo['p2Name']; let p2Team = scInfo['p2Team']; + let p2Pronouns = scInfo['p2Pronouns']; let p2Score = scInfo['p2Score']; let p2Color = scInfo['p2Color']; let p2Character = scInfo['p2Character']; @@ -148,7 +151,7 @@ async function getData(scInfo) { //finally out of the intro, now lets start with player 1 first //update player name and team name texts - updatePlayerName('p1Wrapper', 'p1Name', 'p1Team', p1Name, p1Team); + updatePlayerName('p1Wrapper', 'p1Name', 'p1Team', 'p1Pronouns', p1Name, p1Team, p1Pronouns); //sets the starting position for the player text, then fades in and moves the p1 text to the next keyframe gsap.fromTo("#p1Wrapper", {x: -pMove}, //from @@ -180,7 +183,7 @@ async function getData(scInfo) { //took notes from player 1? well, this is exactly the same! - updatePlayerName('p2Wrapper', 'p2Name', 'p2Team', p2Name, p2Team); + updatePlayerName('p2Wrapper', 'p2Name', 'p2Team', 'p2Pronouns', p2Name, p2Team, p2Pronouns); gsap.fromTo("#p2Wrapper", {x: pMove}, {delay: introDelay+.1, x: 0, opacity: 1, ease: "power2.out", duration: fadeInTime}); @@ -271,13 +274,15 @@ async function getData(scInfo) { //player 1 time! if (document.getElementById('p1Name').textContent != p1Name || - document.getElementById('p1Team').textContent != p1Team) { + document.getElementById('p1Team').textContent != p1Team || + document.getElementById('p1Pronouns').textContent != p1Pronouns) { //move and fade out the player 1's text fadeOutMove("#p1Wrapper", -pMove, () => { //now that nobody is seeing it, quick, change the text's content! - updatePlayerName('p1Wrapper', 'p1Name', 'p1Team', p1Name, p1Team); + updatePlayerName('p1Wrapper', 'p1Name', 'p1Team', 'p1Pronouns', p1Name, p1Team, p1Pronouns); //fade the name back in with a sick movement fadeInMove("#p1Wrapper"); + fadeInMove("#p1Pronouns-wrapper") }); } @@ -336,10 +341,12 @@ async function getData(scInfo) { //did you pay attention earlier? Well, this is the same as player 1! if (document.getElementById('p2Name').textContent != p2Name || - document.getElementById('p2Team').textContent != p2Team){ + document.getElementById('p2Team').textContent != p2Team || + document.getElementById('p2Pronouns').textContent != p2Pronouns){ fadeOutMove("#p2Wrapper", pMove, () => { - updatePlayerName('p2Wrapper', 'p2Name', 'p2Team', p2Name, p2Team); + updatePlayerName('p2Wrapper', 'p2Name', 'p2Team', 'p2Pronouns', p2Name, p2Team, p2Pronouns); fadeInMove("#p2Wrapper"); + fadeInMove("#p2Pronouns-wrapper"); }); } @@ -616,16 +623,21 @@ function updateSocial(mainSocial, mainText, mainBox, otherSocial, otherBox) { } //player text change -function updatePlayerName(wrapperID, nameID, teamID, pName, pTeam) { +function updatePlayerName(wrapperID, nameID, teamID, pronounsID, pName, pTeam, pPronouns) { const nameEL = document.getElementById(nameID); nameEL.style.fontSize = '30px'; //set original text size nameEL.textContent = pName; //change the actual text const teamEL = document.getElementById(teamID); teamEL.style.fontSize = '20px'; teamEL.textContent = pTeam; + const pronounsEL = document.getElementById(pronounsID); + pronounsEL.style.fontSize = pronounSize; // set original text size + pronounsEL.textContent = pPronouns; // change the actual text + resizeText(pronounsEL); // resize if it overflows resizeText(document.getElementById(wrapperID)); //resize if it overflows } + //round change function updateRound(round) { const roundEL = document.getElementById('round');