Skip to content

Pronouns #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jamsge wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Pronouns #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6371273
new html/css for pronoun inputs
jamsge Oct 25, 2022
9327b0b
gui.js additions
jamsge Oct 25, 2022
2a9e93e
Game Scoreboard.html addtions:
jamsge Oct 25, 2022
191e881
Game Scoreboard.js additions:
jamsge Oct 25, 2022
a68f81d
bruh moment
jamsge Oct 25, 2022
db88e94
set font size in script instead of css, small adjustments
jamsge Oct 25, 2022
8f00598
fix window sizing
jamsge Oct 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions Interface Source Code/src/gui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -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');
Expand Down Expand Up @@ -779,13 +795,15 @@ function writeScoreboard() {
let scoreboardJson = {
p1Name: p1NameInp.value,
p1Team: p1TagInp.value,
p1Pronouns: p1PronounsInp.value,
p1Character: charP1,
p1Skin: skinP1,
p1Color: colorP1,
p1Score: checkScore(p1Win1, p1Win2, p1Win3),
p1WL: currentP1WL,
p2Name: p2NameInp.value,
p2Team: p2TagInp.value,
p2Pronouns: p2PronounsInp.value,
p2Character: charP2,
p2Skin: skinP2,
p2Color: colorP2,
Expand Down
12 changes: 10 additions & 2 deletions Interface Source Code/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
10 changes: 6 additions & 4 deletions Interface Source Code/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@
<div id="p1Info" class="pInfo">
<input type="text" id="p1Tag" class="textInput mousetrap" tabindex="1" placeholder="Tag" title="Insert the tag/team/sponsor here" spellcheck="false" contenteditable="true">
<input type="text" id="p1Name" class="textInput mousetrap" tabindex="2" placeholder="Player 1" title="Insert P1's name here" spellcheck="false">
<div id="p1Color" class="pColor" tabindex="5" title="Change the color slot for this player">
<input type="text" id="p1Pronouns" class="textInput mousetrap" tabindex="3" placeholder="Pronouns" title="Insert P1's pronouns here" spellcheck="false">
<div id="p1Color" class="pColor" tabindex="7" title="Change the color slot for this player">
<div class="colorContainer">
<div id="p1ColorRect" class="pColorRect"></div>
</div>
Expand Down Expand Up @@ -100,9 +101,10 @@
<div class="pEditor">

<div id="p2Info" class="pInfo">
<input type="text" id="p2Tag" class="textInput mousetrap" tabindex="3" placeholder="Tag" title="Insert the tag/team/sponsor here." spellcheck="false">
<input type="text" id="p2Name" class="textInput mousetrap" tabindex="4" placeholder="Player 2" title="Insert P2's name here." spellcheck="false">
<div id="p2Color" class="pColor" tabindex="6">
<input type="text" id="p2Tag" class="textInput mousetrap" tabindex="4" placeholder="Tag" title="Insert the tag/team/sponsor here." spellcheck="false">
<input type="text" id="p2Name" class="textInput mousetrap" tabindex="5" placeholder="Player 2" title="Insert P2's name here." spellcheck="false">
<input type="text" id="p2Pronouns" class="textInput mousetrap" tabindex="6" placeholder="Pronouns" title="Insert P2's pronouns here" spellcheck="false">
<div id="p2Color" class="pColor" tabindex="8">
<div class="colorContainer" title="Change the color slot for this player">
<div id="p2ColorRect" class="pColorRect"></div>
</div>
Expand Down
9 changes: 4 additions & 5 deletions Interface Source Code/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
28 changes: 27 additions & 1 deletion Stream Tool/Game Scoreboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -414,6 +432,14 @@
</span>
</div>

<span class="pronouns-wrapper" id="p1Pronouns-wrapper">
<span id="p1Pronouns"></span>
</span>

<span class="pronouns-wrapper" id="p2Pronouns-wrapper">
<span id="p2Pronouns"></span>
</span>

<div id="scoresP1" class="scores">
<div id="win1P1" class="scoreTick">
<svg width="35" height="23" id="win1P1Color" class="absol">
Expand Down
26 changes: 19 additions & 7 deletions Stream Tool/Resources/Scripts/Game Scoreboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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'];
Expand All @@ -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'];
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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});
Expand Down Expand Up @@ -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")
});
}

Expand Down Expand Up @@ -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");
});
}

Expand Down Expand Up @@ -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');
Expand Down