Skip to content

Commit

Permalink
hide answerlines and close #252
Browse files Browse the repository at this point in the history
  • Loading branch information
@geoffrey-wu
geoffrey-wu committed Mar 18, 2024
1 parent 5aa326b commit f2e9d93
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 20 deletions.
45 changes: 37 additions & 8 deletions client/database/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,20 +153,26 @@ function highlightBonusQuery({
function TossupCard({
tossup,
highlightedTossup,
hideAnswerline,
showCardFooter,
fontSize = 16
}) {
const _id = tossup._id;
const packetName = tossup.packet.name;
function clickToCopy() {
let textdata = `${tossup.question}\nANSWER: ${tossup.answer}`;
let tag = '';
if (tossup.category && tossup.subcategory && tossup.category !== tossup.subcategory) {
textdata += `\n<${tossup.category} / ${tossup.subcategory}>`;
tag += `${tossup.category} / ${tossup.subcategory}`;
} else if (tossup.category) {
textdata += `\n<${tossup.category}>`;
tag += `${tossup.category}`;
} else if (tossup.subcategory) {
textdata += `\n<${tossup.subcategory}>`;
tag += `${tossup.subcategory}`;
}
if (tossup.alternate_subcategory) {
tag += ` (${tossup.alternate_subcategory})`;
}
textdata += `\n<${tag}>`;
navigator.clipboard.writeText(textdata);
const toast = new bootstrap.Toast(document.getElementById('clipboard-toast'));
toast.show();
Expand Down Expand Up @@ -262,7 +268,7 @@ function TossupCard({
className: "my-3"
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "ANSWER:"), " ", /*#__PURE__*/React.createElement("span", {
dangerouslySetInnerHTML: {
__html: highlightedTossup?.formatted_answer ?? highlightedTossup.answer
__html: hideAnswerline ? '' : highlightedTossup?.formatted_answer ?? highlightedTossup.answer
}
}))), /*#__PURE__*/React.createElement("div", {
className: `card-footer clickable ${!showCardFooter && 'd-none'}`,
Expand All @@ -284,6 +290,7 @@ function TossupCard({
function BonusCard({
bonus,
highlightedBonus,
hideAnswerlines,
showCardFooter,
fontSize = 16
}) {
Expand All @@ -300,13 +307,18 @@ function BonusCard({
textdata += `${getBonusPartLabel(bonus, i)} ${bonus.parts[i]}\n`;
textdata += `ANSWER: ${bonus.answers[i]}\n`;
}
let tag = '';
if (bonus.category && bonus.subcategory && bonus.category !== bonus.subcategory) {
textdata += `<${bonus.category} / ${bonus.subcategory}>`;
tag += `${bonus.category} / ${bonus.subcategory}`;
} else if (bonus.category) {
textdata += `<${bonus.category}>`;
tag += `${bonus.category}`;
} else if (bonus.subcategory) {
textdata += `<${bonus.subcategory}>`;
tag += `${bonus.subcategory}`;
}
if (bonus.alternate_subcategory) {
tag += ` (${bonus.alternate_subcategory})`;
}
textdata += `<${tag}>`;
navigator.clipboard.writeText(textdata);
const toast = new bootstrap.Toast(document.getElementById('clipboard-toast'));
toast.show();
Expand Down Expand Up @@ -404,7 +416,7 @@ function BonusCard({
}
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "ANSWER: "), /*#__PURE__*/React.createElement("span", {
dangerouslySetInnerHTML: {
__html: (highlightedBonus?.formatted_answers ?? highlightedBonus.answers)[i]
__html: hideAnswerlines ? '' : (highlightedBonus?.formatted_answers ?? highlightedBonus.answers)[i]
}
}))))), /*#__PURE__*/React.createElement("div", {
className: `card-footer clickable ${!showCardFooter && 'd-none'}`,
Expand Down Expand Up @@ -565,6 +577,7 @@ function QueryForm() {
const [diacritics, setDiacritics] = React.useState(false);
const [exactPhrase, setExactPhrase] = React.useState(false);
const [powermarkOnly, setPowermarkOnly] = React.useState(false);
const [hideAnswerlines, setHideAnswerlines] = React.useState(false);
const [showCardFooters, setShowCardFooters] = React.useState(true);
const [currentlySearching, setCurrentlySearching] = React.useState(false);
let [tossupPaginationNumber, setTossupPaginationNumber] = React.useState(1);
Expand Down Expand Up @@ -748,6 +761,7 @@ function QueryForm() {
key: i,
tossup: tossups[i],
highlightedTossup: highlightedTossups[i],
hideAnswerline: hideAnswerlines,
showCardFooter: showCardFooters,
fontSize: fontSize
}));
Expand All @@ -758,6 +772,7 @@ function QueryForm() {
key: i,
bonus: bonuses[i],
highlightedBonus: highlightedBonuses[i],
hideAnswerlines: hideAnswerlines,
showCardFooter: showCardFooters,
fontSize: fontSize
}));
Expand Down Expand Up @@ -1022,6 +1037,20 @@ function QueryForm() {
htmlFor: "toggle-powermark-only"
}, "Powermarked tossups only")), /*#__PURE__*/React.createElement("div", {
className: "form-check form-switch"
}, /*#__PURE__*/React.createElement("input", {
className: "form-check-input",
type: "checkbox",
role: "switch",
id: "toggle-hide-answerlines",
checked: hideAnswerlines,
onChange: () => {
setHideAnswerlines(!hideAnswerlines);
}
}), /*#__PURE__*/React.createElement("label", {
className: "form-check-label",
htmlFor: "toggle-hide-answerlines"
}, "Hide answerlines")), /*#__PURE__*/React.createElement("div", {
className: "form-check form-switch"
}, /*#__PURE__*/React.createElement("input", {
className: "form-check-input",
type: "checkbox",
Expand Down
46 changes: 34 additions & 12 deletions client/database/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,21 +275,28 @@ function highlightBonusQuery({ bonus, regExp, searchType = 'all', ignoreWordOrde
}


function TossupCard({ tossup, highlightedTossup, showCardFooter, fontSize = 16 }) {
function TossupCard({ tossup, highlightedTossup, hideAnswerline, showCardFooter, fontSize = 16 }) {
const _id = tossup._id;
const packetName = tossup.packet.name;

function clickToCopy() {
let textdata = `${tossup.question}\nANSWER: ${tossup.answer}`;

let tag = '';
if (tossup.category && tossup.subcategory && tossup.category !== tossup.subcategory) {
textdata += `\n<${tossup.category} / ${tossup.subcategory}>`;
tag += `${tossup.category} / ${tossup.subcategory}`;
} else if (tossup.category) {
textdata += `\n<${tossup.category}>`;
tag += `${tossup.category}`;
} else if (tossup.subcategory) {
textdata += `\n<${tossup.subcategory}>`;
tag += `${tossup.subcategory}`;
}

if (tossup.alternate_subcategory) {
tag += ` (${tossup.alternate_subcategory})`;
}

textdata += `\n<${tag}>`;

navigator.clipboard.writeText(textdata);

const toast = new bootstrap.Toast(document.getElementById('clipboard-toast'));
Expand Down Expand Up @@ -382,7 +389,7 @@ function TossupCard({ tossup, highlightedTossup, showCardFooter, fontSize = 16 }
<hr className="my-3"></hr>
<div>
<b>ANSWER:</b> <span dangerouslySetInnerHTML={{
__html: highlightedTossup?.formatted_answer ?? highlightedTossup.answer,
__html: hideAnswerline ? '' : (highlightedTossup?.formatted_answer ?? highlightedTossup.answer),
}}></span>
</div>
</div>
Expand All @@ -400,7 +407,7 @@ function TossupCard({ tossup, highlightedTossup, showCardFooter, fontSize = 16 }
}


function BonusCard({ bonus, highlightedBonus, showCardFooter, fontSize = 16 }) {
function BonusCard({ bonus, highlightedBonus, hideAnswerlines, showCardFooter, fontSize = 16 }) {
const _id = bonus._id;
const packetName = bonus.packet.name;
const bonusLength = bonus.parts.length;
Expand All @@ -417,14 +424,22 @@ function BonusCard({ bonus, highlightedBonus, showCardFooter, fontSize = 16 }) {
textdata += `ANSWER: ${bonus.answers[i]}\n`;
}

let tag = '';

if (bonus.category && bonus.subcategory && bonus.category !== bonus.subcategory) {
textdata += `<${bonus.category} / ${bonus.subcategory}>`;
tag += `${bonus.category} / ${bonus.subcategory}`;
} else if (bonus.category) {
textdata += `<${bonus.category}>`;
tag += `${bonus.category}`;
} else if (bonus.subcategory) {
textdata += `<${bonus.subcategory}>`;
tag += `${bonus.subcategory}`;
}

if (bonus.alternate_subcategory) {
tag += ` (${bonus.alternate_subcategory})`;
}

textdata += `<${tag}>`;

navigator.clipboard.writeText(textdata);

const toast = new bootstrap.Toast(document.getElementById('clipboard-toast'));
Expand Down Expand Up @@ -518,7 +533,9 @@ function BonusCard({ bonus, highlightedBonus, showCardFooter, fontSize = 16 }) {
</p>
<div>
<b>ANSWER: </b>
<span dangerouslySetInnerHTML={{ __html: (highlightedBonus?.formatted_answers ?? highlightedBonus.answers)[i] }}></span>
<span dangerouslySetInnerHTML={{
__html: hideAnswerlines ? '' : (highlightedBonus?.formatted_answers ?? highlightedBonus.answers)[i],
}}></span>
</div>
</div>,
)}
Expand Down Expand Up @@ -633,6 +650,7 @@ function QueryForm() {
const [diacritics, setDiacritics] = React.useState(false);
const [exactPhrase, setExactPhrase] = React.useState(false);
const [powermarkOnly, setPowermarkOnly] = React.useState(false);
const [hideAnswerlines, setHideAnswerlines] = React.useState(false);
const [showCardFooters, setShowCardFooters] = React.useState(true);

const [currentlySearching, setCurrentlySearching] = React.useState(false);
Expand Down Expand Up @@ -824,12 +842,12 @@ function QueryForm() {

const tossupCards = [];
for (let i = 0; i < highlightedTossups.length; i++) {
tossupCards.push(<TossupCard key={i} tossup={tossups[i]} highlightedTossup={highlightedTossups[i]} showCardFooter={showCardFooters} fontSize={fontSize}/>);
tossupCards.push(<TossupCard key={i} tossup={tossups[i]} highlightedTossup={highlightedTossups[i]} hideAnswerline={hideAnswerlines} showCardFooter={showCardFooters} fontSize={fontSize}/>);
}

const bonusCards = [];
for (let i = 0; i < highlightedBonuses.length; i++) {
bonusCards.push(<BonusCard key={i} bonus={bonuses[i]} highlightedBonus={highlightedBonuses[i]} showCardFooter={showCardFooters} fontSize={fontSize}/>);
bonusCards.push(<BonusCard key={i} bonus={bonuses[i]} highlightedBonus={highlightedBonuses[i]} hideAnswerlines={hideAnswerlines} showCardFooter={showCardFooters} fontSize={fontSize}/>);
}

React.useEffect(async () => {
Expand Down Expand Up @@ -945,6 +963,10 @@ function QueryForm() {
<input className="form-check-input" type="checkbox" role="switch" id="toggle-powermark-only" checked={powermarkOnly} onChange={() => {setPowermarkOnly(!powermarkOnly);}} />
<label className="form-check-label" htmlFor="toggle-powermark-only">Powermarked tossups only</label>
</div>
<div className="form-check form-switch">
<input className="form-check-input" type="checkbox" role="switch" id="toggle-hide-answerlines" checked={hideAnswerlines} onChange={() => {setHideAnswerlines(!hideAnswerlines);}} />
<label className="form-check-label" htmlFor="toggle-hide-answerlines">Hide answerlines</label>
</div>
<div className="form-check form-switch">
<input className="form-check-input" type="checkbox" role="switch" id="toggle-show-card-footers" checked={showCardFooters} onChange={() => {setShowCardFooters(!showCardFooters);}} />
<label className="form-check-label" htmlFor="toggle-show-card-footers">Show card footers</label>
Expand Down

0 comments on commit f2e9d93

Please sign in to comment.