react-icons/fa#FaChartBar TypeScript Examples
The following examples show how to use
react-icons/fa#FaChartBar.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: construct.tsx From crosshare with GNU Affero General Public License v3.0 | 4 votes |
|
export default function BuilderPage() {
const [ready, error, loading, setLoaded] = useWordDB();
const [showBuilder, setShowBuilder] = useState(false);
const ctx = useContext(AuthContext);
const loginButton = renderLoginButtonIfNeeded(ctx);
const size = 5;
const grid = new Array(size * size).fill(' ');
const props = {
size: {
rows: size,
cols: size,
},
grid: grid,
};
if (ready && ctx.user && showBuilder) {
return <Builder {...props} user={ctx.user} isAdmin={ctx.isAdmin} />;
}
if (error) {
console.error(error);
}
let heroContent: ReactNode;
if (ctx.loading) {
heroContent = <p>Checking if you have an existing account...</p>;
} else if (loginButton) {
heroContent = (
<>
<p>
To construct a puzzle, you need to log in with Google first. We use
your sign in to keep track of the puzzles you've created.
</p>
{loginButton}
</>
);
} else if (loading) {
heroContent = <p>Checking for existing word database...</p>;
} else if (!ready) {
heroContent = (
<>
<p>
The first time you use the constructor on a new browser Crosshare
needs to download and build a word database. Occassional rebuilds are
needed as Crosshare adds new words.
</p>
<LoadButton
buttonText="Build Database"
onComplete={() => setLoaded()}
/>
</>
);
} else {
heroContent = (
<>
<p>
<Button
css={{
fontSize: '1.5em',
marginTop: '0.75em',
}}
onClick={() => setShowBuilder(true)}
text="Launch Constructor"
/>
</p>
</>
);
}
const description = `Build your own crossword puzzles for free with the Crosshare constructor.
Autofill makes grid construction a breeze. Once you finish you can publish your
puzzle to share with your friends or the world.`;
return (
<>
<Head>
<title>Constructor | Crosshare | crossword puzzle builder</title>
<meta
key="og:title"
property="og:title"
content="Crosshare Crossword Constructor"
/>
<meta key="description" name="description" content={description} />
<meta
key="og:description"
property="og:description"
content={description}
/>
</Head>
<Hero text="Construct crossword puzzles in a flash">{heroContent}</Hero>
<BigQuote
quote="The Crosshare constructor helps me build better puzzles faster. The interface is more intuitive than Crossfire's and the autofill feature works far more efficiently."
attribution={
<>
Will Pfadenhauer of{' '}
<Link href={'/PBWMC'}>
Pandora's Blocks Weekly Meta Crossword
</Link>
</>
}
/>
<FeatureList>
<FeatureListItem
icon={<MdMoneyOff />}
heading="It's 100% free"
text="Constructing puzzles on Crosshare is always free. You can publish as many puzzles as you'd like and share with them with as many solvers as you can find."
/>
<FeatureListItem
icon={<FaMagic />}
heading="Fill grids like magic"
text="The autofiller instantly fills in the rest of the grid as you enter your fill. Press the `Enter` key to shake things up and get a different autofill."
/>
<FeatureListItem
icon={<IoMdResize />}
heading="All shapes and sizes are welcome"
text="Crosshare supports grids of any size. The interface is optimized to fit as large a grid (and as many clues) as possible on any devices you and your solvers are using."
/>
<FeatureListItem
icon={<FaBicycle />}
heading="Construct on the go"
text="The Crosshare constructor works on desktops, tablets, and phones. Construct a mini puzzle while waiting for the bus, or work on a grid from your iPad on the couch."
/>
<FeatureListItem
icon={<IoMdPhonePortrait />}
heading="An app-like experience"
text="Crosshare's solving interface is mobile-first and makes solving your puzzle as smooth as butter on desktops, tablets, and phones. Almost 50% of solvers are using mobile devices - don't let a poor interface keep them from solving your puzzles. Crosshare also supports dark mode, grid highlighting and tooltips for referenced entries, and more best-in-class features."
/>
<FeatureListItem
icon={<FaShareSquare />}
heading="Crosswords are social"
text="Crosshare puzzles are made to share. Our search engine optimization and social tags will get as many people solving your puzzle as possible. Social media posts automatically include grid preview images, puzzle titles, and teaser clues."
/>
<FeatureListItem
icon={<FaChartBar />}
heading="Advanced analytics"
text="As a constructor, you get access to advanced analytics about your puzzle. Find out how many people solve your puzzle, how long it takes them, and view heatmaps of exactly which cells they get stuck on."
/>
<FeatureListItem
icon={<FaComment />}
heading="An instant crossword blog"
text="After constructing your first puzzle you can reserve your own URL and instantly create a crossword blog. You get a centralized page to share and talk about all of your puzzles. Commenting is enabled from the start and Crosshare is the only place where comments feature solve times, clue tooltips, and other crossword specific features."
/>
<FeatureListItem
icon={<FaQuestionCircle />}
heading="First class meta puzzle support"
text="Crosshare is the only puzzle host that has built in support for meta/contest crosswords including submission tracking, a leaderboard, and detailed statistics."
/>
<FeatureListItem
icon={<FaCode />}
heading="Dead simple embedding"
text="Any of your puzzles can be embedded on another site with just a few clicks."
/>
<FeatureListItem
icon={<CgSidebarRight />}
heading="Barred grids"
text="Barred crosswords (and combinations of bars and blocks) have first class support in the constructor and the solving interface."
/>
<FeatureListItem
icon={<FaCat />}
heading="Schrödinger puzzles and bidirectional rebuses"
text="Crosshare also natively supports puzzles with an arbitrary number of valid solutions. The alternate solutions are shown to the solver after the grid is complete to make sure they have the aha moment."
/>
</FeatureList>
<div
css={{
padding: '0 0.5em',
backgroundColor: 'var(--primary)',
textAlign: 'center',
color: 'var(--text)',
paddingTop: '1em',
minHeight: 225,
[SMALL_AND_UP]: {
minHeight: 175,
},
[LARGE_AND_UP]: {
minHeight: 125,
},
}}
>
{heroContent}
</div>
<div
css={{
display: 'flex',
margin: '1em',
flexWrap: 'wrap',
}}
>
<div
css={{
width: '100%',
flex: 'none',
[LARGE_AND_UP]: {
flex: '1 1 0',
marginRight: '1em',
},
}}
>
<h2 css={{ textAlign: 'center' }}>New to making crosswords?</h2>
<p>
Don’t be intimidated! Constructing great crosswords takes a lot of
practice, but it’s easy to get started. When you first launch the
constructor, Crosshare defaults you to a 5x5 mini grid (to create a
different sized puzzle click on “More” in the top bar and then click
“New Puzzle”). Mini puzzles are a great way to get started because
you don’t need to worry so much about the grid layout - you just
need to focus on getting fill you like and coming up with fun clues.
</p>
<h3>Filling the grid</h3>
<p>
After launching the constructor, click anywhere in the grid and
start typing your first fill entry. As you type you’ll notice the
Crosshare autofiller magically fills in the rest of the grid. You
shouldn’t rely exclusively on the autofiller - the wordlist(s)
beside the grid give you other options for the currently selected
entry. You can also use any other word you like even if it’s not in
the list - it’s all COVFEFE.
</p>
<h3>Using black squares</h3>
<p>
You can create a black square by typing the ‘.’ key on your keyboard
or hitting the all black key on the keyboard if you’re on a mobile
device. Select the square and hit ‘.’ or type any letter to toggle
it back. Placing black squares is an art form for larger grids. This{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.nytimes.com/2018/05/11/crosswords/how-to-make-crossword-puzzle-grid.html"
>
nytimes article
</a>{' '}
does a pretty good job of introducing some of the ideas behind where
they should go.
</p>
<h3>Finalizing the grid</h3>
<p>
It can take a lot of tweaking to get a grid that you’re happy with.
Maybe you really want to work a specific word in but every time you
try it makes for poor (or no!) choices elsewhere. The best thing to
do is to try to stay flexible and keep playing with different
options until it all clicks. The Crosshare autofiller can help this
along by showing you different candidate fills - every time you
press the ‘Enter’ key (or click ‘Rerun Autofill’ in the top bar)
you’ll get a slightly different fill.
</p>
<h3>Adding clues</h3>
<p>
Once your grid is filled in click the “Clues” button in the top bar
to go to the clue view. You’ll see every word in your grid with an
input next to it for your clue. Try to come up with your own
interesting clue for each word. It’s important to have some easier
clues (especially on mini puzzles!) so that solvers have a place to
start. This{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.nytimes.com/2018/07/11/crosswords/how-to-make-a-crossword-puzzle-4.html"
>
nytimes article
</a>{' '}
talks about cluing and might be a good read for a beginner. It can
also help to look up words in a clue database like{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://crosswordtracker.com/"
>
crosswordtracker
</a>{' '}
to see how other constructors have clued them. The only way to get
better at cluing, though, is to force yourself to come up with some
of your own!
</p>
<h3>Publishing</h3>
<p>
After all of your clues are filled in, come up with a title for your
puzzle. This gets entered at the top of the clue view. Now click
“Back to Grid”, give it one more look, and hit “Publish”. After
publishing, Crosshare will redirect you to your puzzle’s new home.
You might want to add a comment (solvers will see it they finish
solving). When you’re ready, copy the link and share it with as many
solvers as you can find! As the author, you’ll be able to view solve
stats for your puzzle - click “More” and then “Stats” from the
puzzle page.
</p>
<p>
That’s all there is to it! If you’re looking for more info about
constructing your first puzzle,{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://medium.com/@that314guy/creating-and-publishing-my-first-crossword-154bc93ff298"
>
this article
</a>{' '}
has a lot of good information.
</p>
</div>
<div
css={{
width: '100%',
flex: 'none',
[LARGE_AND_UP]: {
flex: '1 1 0',
marginLeft: '1em',
},
}}
>
<h2 css={{ textAlign: 'center' }}>FAQ</h2>
<h3>What if I have an existing puzzle I’d like to upload?</h3>
<p>
Crosshare supports .puz uploading <Link href="/upload">here</Link>.
</p>
<h3>Does Crosshare support rebuses?</h3>
<p>
Yup, both the constructor and the solver support entering rebuses -
hit ‘Escape’ (or ‘Rebus’ on your mobile device keyboard) to enter a
rebus. The autofiller supports filling around them, too{' '}
<Emoji symbol="?" />.
</p>
<h3>What about circled / shaded squares?</h3>
<p>Yup, and yup!</p>
<h3>How do clue cross-references work?</h3>
<p>
When you use something like <i>7-Across</i> or <i>5D</i> in a clue
it will automatically get linked to the referenced clue. This sets
up clue highlighting and tooltips for solvers. You can also prefix
clues with a ‘*’ and use phrases like “the starred
clues” in another clue to set up references to them.
</p>
<h3>
What if my clue uses <i>3D</i> but it's not supposed to be a
cross-reference?
</h3>
<p>
You can prefix a clue with ‘!@’ to tell Crosshare to
skip it when scanning for clue references. Solvers won't see
the !@, obviously.
</p>
<h3>Where does the wordlist come from?</h3>
<p>
Crosshare uses a custom wordlist that’s mostly based off{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.spreadthewordlist.com/"
>
spread the word(list)
</a>
, with additions from{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://peterbroda.me/crosswords/wordlist/"
>
Peter Broda’s list
</a>
,{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/ewojcik"
>
Erica’s
</a>{' '}
expanded name list, and some additional words that have frequently
appeared in NYT puzzles.
</p>
<h3>Can I use my own wordlist?</h3>
<p>Custom wordlists / wordlist editing will be released soon.</p>
<h3>Can I create rectangular grids?</h3>
<p>
Yup, you can use any dimensions you want. Better yet, both the
constructor and solver interfaces optimize around whatever size grid
you use - to maximize usability on smaller screens.
</p>
<h3>
Does the constructor work on (iPad / iPhone / Android / Windows / OS
X / Linux)?
</h3>
<p>
The Crosshare constructor should work on any modern browser, and is
optimized for mobile devices. For the first time you can have a
first class constructing experience on your iPad. If you have any
issues on any device, please get in touch and let me know!
</p>
<h3>Can I work on more than one puzzle at a time?</h3>
<p>
Saving and loading multiple puzzles is coming soon. In the meantime
you can use the export/import .puz features to save a local copy of
a puzzle in progress and then import it again later.
</p>
<h3>Will Crosshare ever have an offline mode?</h3>
<p>
I know I’m sounding like a broken record, but this is coming soon
too!
</p>
<h3>Can I export my puzzle as a PDF or .puz file?</h3>
<p>
You can export a .puz file directly from the constructor. After
publishing a puzzle both PDF and .puz become available for solvers.
To get a nicely formatted PDF for printing: click “More” and then
“Print puzzle”. To download a .puz click “More” and then “Download
.puz”
</p>
<h3>What types of grid symmetry are supported?</h3>
<p>ALL OF THEM.</p>
<h3>What if I have a different question?</h3>
<p>
Please get in touch via <ContactLinks />.
</p>
</div>
</div>
</>
);
}
Example #2
| Source File: upload.tsx From crosshare with GNU Affero General Public License v3.0 | 4 votes |
|
export default function UploadPage() {
const ctx = useContext(AuthContext);
const [puzzle, setPuzzle] = useState<PuzzleInProgressT | null>(null);
const [error, setError] = useState<string | null>(null);
const loginButton = renderLoginButtonIfNeeded(ctx);
function handleFile(f: FileList | null) {
if (!f || !f[0]) {
setError('No file selected');
return;
}
const fileReader = new FileReader();
fileReader.onloadend = () => {
if (!fileReader.result) {
setError('No file result');
} else if (typeof fileReader.result === 'string') {
setError('Failed to read as binary');
} else {
try {
const puzzle = importFile(new Uint8Array(fileReader.result));
if (!puzzle) {
setError('Failed to parse file');
} else {
setPuzzle(puzzle);
}
} catch (error) {
console.error(error);
if (error instanceof Error) {
setError(error.message);
} else {
setError('Could not import file');
}
}
}
};
fileReader.readAsArrayBuffer(f[0]);
}
if (puzzle && ctx.user) {
return <Preview user={ctx.user} isAdmin={ctx.isAdmin} {...puzzle} />;
}
const description =
'Import your existing puzzle to share it on Crosshare. Get your .puz files playable on the web. Crosshare gives your solvers a first-class experience on any device, and gives you access to statistics about solves.';
return (
<>
<Head>
<title>Upload/Import Crossword Puzzles | Crosshare</title>
<meta
key="og:title"
property="og:title"
content="Crosshare Crossword Upload / Import"
/>
<meta key="description" name="description" content={description} />
<meta
key="og:description"
property="og:description"
content={description}
/>
</Head>
<Hero text="Your crossword puzzles deserve to get shared">
{error ? (
<>
<p>Error: {error}</p>
<p>
If your puzzle isn't uploading correctly please get in touch
via <ContactLinks /> so we can help!
</p>
</>
) : (
''
)}
{ctx.loading ? (
<>
<p>Checking if you have an exisiting account...</p>
</>
) : loginButton ? (
<>
<p>
To upload a puzzle, you need to log in with Google first. We use
your sign in to keep track of the puzzles you've uploaded.
</p>
{loginButton}
</>
) : (
<>
<label>
<p>
Select a .puz file to upload - you'll be able to review the
puzzle before publishing
</p>
<input
css={{ overflow: 'hidden', maxWidth: '70vw' }}
type="file"
accept=".puz"
onChange={(e) => handleFile(e.target.files)}
/>
</label>
</>
)}
</Hero>
<BigQuote
quote="Crosshare changed the way I share my puzzles. The analytics allow me to better understand which parts of my grids are most difficult for solvers. It's a big part of why WWMC started and is still running today."
attribution={
<>
Will Pfadenhauer of{' '}
<Link href={'/PBWMC'}>
Pandora's Blocks Weekly Meta Crossword
</Link>
</>
}
/>
<FeatureList>
<FeatureListItem
icon={<MdMoneyOff />}
heading="It's 100% free"
text="Sharing puzzles on Crosshare is always free. You can publish as many puzzles as you'd like and share with them with as many solvers as you can find."
/>
<FeatureListItem
icon={<RiPagesLine />}
heading="Make your .puz files interactive"
text="If you're only publishing .puz and .pdf files, you're missing out on a bunch of potential solvers. Crosshare instantly gives your puzzle a home on the web and expands your audience."
/>
<FeatureListItem
icon={<IoMdResize />}
heading="All shapes and sizes are welcome"
text="Crosshare supports grids of any size. The interface is optimized to fit as large a grid (and as many clues) as possible on any device your solvers are using."
/>
<FeatureListItem
icon={<IoMdPhonePortrait />}
heading="An app-like experience"
text="Crosshare's solving interface is mobile-first and makes solving your puzzle as smooth as butter on desktops, tablets, and phones. Almost 50% of solvers are using mobile devices - don't let a poor interface keep them from solving your puzzles. Crosshare also supports dark mode, grid highlighting and tooltips for referenced entries, and more best-in-class features."
/>
<FeatureListItem
icon={<FaShareSquare />}
heading="Crosswords are social"
text="Crosshare puzzles are made to share. Our search engine optimization and social tags will get as many people solving your puzzle as possible. Social media posts automatically include grid preview images, puzzle titles, and teaser clues."
/>
<FeatureListItem
icon={<FaChartBar />}
heading="Advanced analytics"
text="As a constructor, you get access to advanced analytics about your puzzle. Find out how many people solve your puzzle, how long it takes them, and view heatmaps of exactly which cells they get stuck on."
/>
<FeatureListItem
icon={<FaComment />}
heading="An instant crossword blog"
text="After publishing a puzzle you can reserve your own URL and instantly create a crossword blog. You get a centralized page to share and talk about all of your puzzles. Commenting is enabled from the start and Crosshare is the only place where comments feature solve times, clue tooltips, and other crossword specific features."
/>
<FeatureListItem
icon={<FaQuestionCircle />}
heading="First class meta puzzle support"
text="Crosshare is the only puzzle host that has built in support for meta/contest crosswords including submission tracking, a leaderboard, and detailed statistics."
/>
<FeatureListItem
icon={<FaCode />}
heading="Dead simple embedding"
text="Any of your puzzles can be embedded on another site with just a few clicks."
/>
<FeatureListItem
icon={<CgSidebarRight />}
heading="Barred grids"
text="Barred crosswords (and combinations of bars and blocks) have first class support in the constructor and the solving interface."
/>
<FeatureListItem
icon={<FaCat />}
heading="Schrödinger puzzles and bidirectional rebuses"
text="Crosshare also natively supports puzzles with an arbitrary number of valid solutions. The alternate solutions are shown to the solver after the grid is complete to make sure they have the aha moment."
/>
</FeatureList>
<div css={{ textAlign: 'center', marginBottom: '2em' }}>
<p>Don’t have a .puz file to upload?</p>
<LinkButton href="/construct">
Make your own puzzle with the Crosshare constructor
</LinkButton>
</div>
</>
);
}
