src/components/lobby/__snapshots__/Lobby.stories.storyshot
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Lobby Default 1`] = `
<div
className="ui container"
>
<div
className="fresnel-container fresnel-greaterThanOrEqual-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="twelve wide column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<h4
className="ui grey center aligned header"
>
list.empty
</h4>
<img
className="ui medium image"
src="/images/hugo-out.png"
style={
Object {
"margin": "0 auto",
}
}
/>
</div>
</div>
</div>
</div>
<div
className="four wide column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui center aligned segment"
>
<h3
className="ui center aligned header"
>
login.title
</h3>
<img
className="ui image"
src="/images/hugo-easy-money.png"
/>
<a
className="ui orange button"
href="/login/guest"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="sign-in icon"
onClick={[Function]}
/>
login.button
</a>
</div>
</div>
</div>
</div>
<div
className="fresnel-container fresnel-lessThan-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui center aligned segment"
>
<h3
className="ui center aligned header"
>
login.title
</h3>
<img
className="ui image"
src="/images/hugo-easy-money.png"
/>
<a
className="ui orange button"
href="/login/guest"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="sign-in icon"
onClick={[Function]}
/>
login.button
</a>
</div>
</div>
</div>
</div>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<h4
className="ui grey center aligned header"
>
list.empty
</h4>
<img
className="ui medium image"
src="/images/hugo-out.png"
style={
Object {
"margin": "0 auto",
}
}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Storyshots Lobby With Matches 1`] = `
<div
className="ui container"
>
<div
className="fresnel-container fresnel-greaterThanOrEqual-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="twelve wide column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<div>
<div
className="ui divided very relaxed items"
size="big"
>
<div
className="matchItem"
>
<div
className="row"
>
<img
alt="game icon"
className="image"
src="https://placeimg.com/120/120/any"
/>
<h3
className="gameName"
>
Kalambury
</h3>
<h4
className="matchName"
>
#qweasd0
</h4>
<i
aria-hidden="true"
className="lock small icon private"
onClick={[Function]}
/>
<span
className="filler"
/>
<span
className="yourGame"
>
list.game.your_match
</span>
<span
className="players"
>
3
/
5
<i
aria-hidden="true"
className="male icon playersIcon"
onClick={[Function]}
/>
</span>
<button
className="ui green button button"
onClick={[Function]}
>
list.game.play
</button>
</div>
<span
className="showDetails"
onClick={[Function]}
>
list.game.more_details ▼
</span>
<div
className="details"
>
<table
className="detailsTable"
>
<tbody>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.description
:
</td>
<td>
info:games.kalambury.description.short
</td>
</tr>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.players
:
</td>
<td>
Tomy, John, Jerry
</td>
<td
className="detailsTableActions"
>
<button
className="ui red tiny basic button"
onClick={[Function]}
style={
Object {
"fontWeight": "bold",
}
}
>
game.leave.button
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
className="matchItem"
>
<div
className="row"
>
<img
alt="game icon"
className="image"
src="https://placeimg.com/120/120/any"
/>
<h3
className="gameName"
>
Kalambury
</h3>
<h4
className="matchName"
>
#qweasd1
</h4>
<span
className="filler"
/>
<span
className="players"
>
2
/
2
<i
aria-hidden="true"
className="male icon playersIcon"
onClick={[Function]}
/>
</span>
<button
className="ui grey disabled button button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
>
list.game.full
</button>
</div>
<span
className="showDetails"
onClick={[Function]}
>
list.game.more_details ▼
</span>
<div
className="details"
>
<table
className="detailsTable"
>
<tbody>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.description
:
</td>
<td>
info:games.kalambury.description.short
</td>
</tr>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.players
:
</td>
<td>
Player 0, Player 1
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
className="matchItem"
>
<div
className="row"
>
<img
alt="game icon"
className="image"
src="https://placeimg.com/120/120/any"
/>
<h3
className="gameName"
>
Kalambury
</h3>
<h4
className="matchName"
>
#qweasd2
</h4>
<span
className="filler"
/>
<span
className="players"
>
1
/
2
<i
aria-hidden="true"
className="male icon playersIcon"
onClick={[Function]}
/>
</span>
<button
className="ui yellow disabled button button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
>
list.game.join
</button>
</div>
<span
className="showDetails"
onClick={[Function]}
>
list.game.more_details ▼
</span>
<div
className="details"
>
<table
className="detailsTable"
>
<tbody>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.description
:
</td>
<td>
info:games.kalambury.description.short
</td>
</tr>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.players
:
</td>
<td>
Player 2
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
className="matchItem"
>
<div
className="row"
>
<img
alt="game icon"
className="image"
src="https://placeimg.com/120/120/any"
/>
<h3
className="gameName"
>
Kalambury
</h3>
<h4
className="matchName"
>
#qweasd3
</h4>
<span
className="filler"
/>
<span
className="players"
>
3
/
3
<i
aria-hidden="true"
className="male icon playersIcon"
onClick={[Function]}
/>
</span>
<button
className="ui grey disabled button button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
>
list.game.full
</button>
</div>
<span
className="showDetails"
onClick={[Function]}
>
list.game.more_details ▼
</span>
<div
className="details"
>
<table
className="detailsTable"
>
<tbody>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.description
:
</td>
<td>
info:games.kalambury.description.short
</td>
</tr>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.players
:
</td>
<td>
Player 3, Player 4, Player 5
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
className="matchItem"
>
<div
className="row"
>
<img
alt="game icon"
className="image"
src="https://placeimg.com/120/120/any"
/>
<h3
className="gameName"
>
Kalambury
</h3>
<h4
className="matchName"
>
#qweasd4
</h4>
<span
className="filler"
/>
<span
className="players"
>
0
/
2
<i
aria-hidden="true"
className="male icon playersIcon"
onClick={[Function]}
/>
</span>
<button
className="ui yellow disabled button button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
>
list.game.join
</button>
</div>
<span
className="showDetails"
onClick={[Function]}
>
list.game.more_details ▼
</span>
<div
className="details"
>
<table
className="detailsTable"
>
<tbody>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.description
:
</td>
<td>
info:games.kalambury.description.short
</td>
</tr>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.players
:
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
style={
Object {
"textAlign": "center",
}
}
>
<div
aria-label="Pagination Navigation"
className="ui pagination menu"
role="navigation"
>
<a
aria-current={false}
aria-disabled={false}
aria-label="First item"
className="item"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
type="firstItem"
value={1}
>
«
</a>
<a
aria-current={false}
aria-disabled={false}
aria-label="Previous item"
className="item"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
type="prevItem"
value={1}
>
⟨
</a>
<a
aria-current={true}
aria-disabled={false}
className="active item"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
type="pageItem"
value={1}
>
1
</a>
<a
aria-current={false}
aria-disabled={false}
aria-label="Next item"
className="item"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
type="nextItem"
value={1}
>
⟩
</a>
<a
aria-current={false}
aria-disabled={false}
aria-label="Last item"
className="item"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
type="lastItem"
value={1}
>
»
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="four wide column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui center aligned segment"
>
<h3
className="ui center aligned header"
>
login.title
</h3>
<img
className="ui image"
src="/images/hugo-easy-money.png"
/>
<a
className="ui orange button"
href="/login/guest"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="sign-in icon"
onClick={[Function]}
/>
login.button
</a>
</div>
</div>
</div>
</div>
<div
className="fresnel-container fresnel-lessThan-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<div>
<div
className="ui divided very relaxed items"
size="big"
>
<div
className="matchItem"
>
<div
className="row"
>
<img
alt="game icon"
className="image"
src="https://placeimg.com/120/120/any"
/>
<h3
className="gameName"
>
Kalambury
</h3>
<h4
className="matchName"
>
#qweasd0
</h4>
<i
aria-hidden="true"
className="lock small icon private"
onClick={[Function]}
/>
<span
className="filler"
/>
<span
className="yourGame"
>
list.game.your_match
</span>
<span
className="players"
>
3
/
5
<i
aria-hidden="true"
className="male icon playersIcon"
onClick={[Function]}
/>
</span>
<button
className="ui green button button"
onClick={[Function]}
>
list.game.play
</button>
</div>
<span
className="showDetails"
onClick={[Function]}
>
list.game.more_details ▼
</span>
<div
className="details"
>
<table
className="detailsTable"
>
<tbody>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.description
:
</td>
<td>
info:games.kalambury.description.short
</td>
</tr>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.players
:
</td>
<td>
Tomy, John, Jerry
</td>
<td
className="detailsTableActions"
>
<button
className="ui red tiny basic button"
onClick={[Function]}
style={
Object {
"fontWeight": "bold",
}
}
>
game.leave.button
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
className="matchItem"
>
<div
className="row"
>
<img
alt="game icon"
className="image"
src="https://placeimg.com/120/120/any"
/>
<h3
className="gameName"
>
Kalambury
</h3>
<h4
className="matchName"
>
#qweasd1
</h4>
<span
className="filler"
/>
<span
className="players"
>
2
/
2
<i
aria-hidden="true"
className="male icon playersIcon"
onClick={[Function]}
/>
</span>
<button
className="ui grey disabled button button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
>
list.game.full
</button>
</div>
<span
className="showDetails"
onClick={[Function]}
>
list.game.more_details ▼
</span>
<div
className="details"
>
<table
className="detailsTable"
>
<tbody>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.description
:
</td>
<td>
info:games.kalambury.description.short
</td>
</tr>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.players
:
</td>
<td>
Player 0, Player 1
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
className="matchItem"
>
<div
className="row"
>
<img
alt="game icon"
className="image"
src="https://placeimg.com/120/120/any"
/>
<h3
className="gameName"
>
Kalambury
</h3>
<h4
className="matchName"
>
#qweasd2
</h4>
<span
className="filler"
/>
<span
className="players"
>
1
/
2
<i
aria-hidden="true"
className="male icon playersIcon"
onClick={[Function]}
/>
</span>
<button
className="ui yellow disabled button button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
>
list.game.join
</button>
</div>
<span
className="showDetails"
onClick={[Function]}
>
list.game.more_details ▼
</span>
<div
className="details"
>
<table
className="detailsTable"
>
<tbody>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.description
:
</td>
<td>
info:games.kalambury.description.short
</td>
</tr>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.players
:
</td>
<td>
Player 2
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
className="matchItem"
>
<div
className="row"
>
<img
alt="game icon"
className="image"
src="https://placeimg.com/120/120/any"
/>
<h3
className="gameName"
>
Kalambury
</h3>
<h4
className="matchName"
>
#qweasd3
</h4>
<span
className="filler"
/>
<span
className="players"
>
3
/
3
<i
aria-hidden="true"
className="male icon playersIcon"
onClick={[Function]}
/>
</span>
<button
className="ui grey disabled button button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
>
list.game.full
</button>
</div>
<span
className="showDetails"
onClick={[Function]}
>
list.game.more_details ▼
</span>
<div
className="details"
>
<table
className="detailsTable"
>
<tbody>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.description
:
</td>
<td>
info:games.kalambury.description.short
</td>
</tr>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.players
:
</td>
<td>
Player 3, Player 4, Player 5
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
className="matchItem"
>
<div
className="row"
>
<img
alt="game icon"
className="image"
src="https://placeimg.com/120/120/any"
/>
<h3
className="gameName"
>
Kalambury
</h3>
<h4
className="matchName"
>
#qweasd4
</h4>
<span
className="filler"
/>
<span
className="players"
>
0
/
2
<i
aria-hidden="true"
className="male icon playersIcon"
onClick={[Function]}
/>
</span>
<button
className="ui yellow disabled button button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
>
list.game.join
</button>
</div>
<span
className="showDetails"
onClick={[Function]}
>
list.game.more_details ▼
</span>
<div
className="details"
>
<table
className="detailsTable"
>
<tbody>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.description
:
</td>
<td>
info:games.kalambury.description.short
</td>
</tr>
<tr>
<td
className="detailsTableLabel"
>
lobby:list.game.players
:
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
style={
Object {
"textAlign": "center",
}
}
>
<div
aria-label="Pagination Navigation"
className="ui pagination menu"
role="navigation"
>
<a
aria-current={false}
aria-disabled={false}
aria-label="First item"
className="item"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
type="firstItem"
value={1}
>
«
</a>
<a
aria-current={false}
aria-disabled={false}
aria-label="Previous item"
className="item"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
type="prevItem"
value={1}
>
⟨
</a>
<a
aria-current={true}
aria-disabled={false}
className="active item"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
type="pageItem"
value={1}
>
1
</a>
<a
aria-current={false}
aria-disabled={false}
aria-label="Next item"
className="item"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
type="nextItem"
value={1}
>
⟩
</a>
<a
aria-current={false}
aria-disabled={false}
aria-label="Last item"
className="item"
onClick={[Function]}
onKeyDown={[Function]}
tabIndex={0}
type="lastItem"
value={1}
>
»
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;