semantic-ui-react#Grid TypeScript Examples

render() {
        const props = this.props as any
        const appState = props.appState as AppState

        if(appState.isSafari){
            const localVideo = document.getElementById("localVideo");
            appState.localVideoElement.setAttribute('playsinline', 'playsinline')
            localVideo!!.appendChild(appState.localVideoElement)
        }
        return (

            <Grid>
                <Grid.Row>
                    <Grid.Column width={16}>
                        <LobbyHeader {...props} />
                    </Grid.Column>
                </Grid.Row>
                <Grid.Row>
                    <Grid.Column width={16}>
                        <LobbyMain  {...props} />
                    </Grid.Column>

                </Grid.Row>
                <Grid.Row>
                    <Grid.Column width={16}>
                        2020, FLECT CO., LTD. 
                    </Grid.Column>
                </Grid.Row>

            </Grid>
        )
    }

RewardsGrid = (props: any) => {
	const { rewards } = props;

	if (rewards.length == 0) return (<></>);

	const getImageName = (reward) => {
		let img = reward.icon?.file.replace(/\//g, '_');
		if (img.substr(0, 1) == '_') img = img.substr(1); else img = '/atlas/' + img;
		if (img.substr(-4) != '.png') img += '.png';
		return img;
	};

	const quantityLabel = (quantity) => {
		if (quantity >= 10000)
			return quantity/1000+'K';
		return quantity;
	};

	return (
		<Grid columns={rewards.length}>
			{rewards.map((reward, idx) => {
				const img = getImageName(reward);
				return (
					<Grid.Column key={idx}>
						<ItemDisplay
							src={`${process.env.GATSBY_ASSETS_URL}${img}`}
							size={32}
							maxRarity={reward.rarity}
						/>
						{reward.quantity > 1 && (<div><small>{quantityLabel(reward.quantity)}</small></div>)}
					</Grid.Column>
				);
			})}
		</Grid>
	);
}

renderConstellation() {
		if (!this.state.constellation) {
			return <span />;
		}

		const { constellation } = this.state;

		return (
			<Segment>
				<Header as='h4'>{constellation.name}</Header>
				<div dangerouslySetInnerHTML={{ __html: constellation.flavor }} />
				<Grid columns={5} centered padded>
					{constellation.keystones.map((kk, idx) => (
					<Grid.Column key={idx} textAlign='center'>
						<img width={48} src={`${process.env.GATSBY_ASSETS_URL}${kk.icon.file.substr(1).replace(/\//g, '_')}`} />
						<br/ >
						<Link to={`/?search=trait:${kk.short_name}`}>
						<span style={{ fontWeight: 'bolder' }}>
							{kk.short_name}
						</span>
						</Link>
					</Grid.Column>
					))}
				</Grid>
			</Segment>
		);
	}

renderVariants() {
		if (this.state.variants.length == 0) {
			return <span />;
		}

		return (
			this.state.variants.map((group, idx) => (
				<Segment key={idx}>
					<Header as='h4'>Variants of {group.name}</Header>
					<Grid centered padded>
						{group.trait_variants.map(variant => (
							<Grid.Column key={variant.symbol} textAlign='center' mobile={8} tablet={5} computer={4}>
								<ItemDisplay
									src={`${process.env.GATSBY_ASSETS_URL}${variant.imageUrlPortrait}`}
									size={128}
									maxRarity={variant.max_rarity}
									rarity={variant.max_rarity}
								/>
								<div><Link to={`/crew/${variant.symbol}/`}>{variant.name}</Link></div>
							</Grid.Column>
						))}
					</Grid>
				</Segment>
			))
		);
	}

render() {
		const { voyageStats, allCrew } = this.state;

    if (!this.state.voyageStats || !this.state.allCrew) {
			return <div className='ui medium centered text active inline loader'>Loading hall of fame...</div>;
    }

		return (
			<>
        <Header as="h1" textAlign="center">Voyage Hall of Fame</Header>
				<Grid columns={3} divided>
          <Grid.Row>
            <Grid.Column>
              <VoyageStatsForPeriod period='allTime' stats={voyageStats.allTime} allCrew={allCrew} />
            </Grid.Column>
            <Grid.Column>
              <VoyageStatsForPeriod period='lastSevenDays' stats={voyageStats.lastSevenDays} allCrew={allCrew} />
            </Grid.Column>
            <Grid.Column>
              <VoyageStatsForPeriod period='lastThirtyDays' stats={voyageStats.lastThirtyDays} allCrew={allCrew} />
            </Grid.Column>
          </Grid.Row>
        </Grid>
			</>
		);
	}

render() {
        const props = this.props as any
        const gs = this.props as GlobalState
        const inputVideoResolutionsOpts=gs.inputVideoResolutions!.map(info => { return { key: info, text: info, value: info } })

        return (
            <Grid>
                <Grid.Row>
                    <Grid.Column>
                    
                    <Dropdown
                        pointing='top left'
                        options={inputVideoResolutionsOpts}
                        trigger={trigger}
                        onChange={(e, { value }) => props.selectInputVideoResolution(value as string)}
                    />
                    </Grid.Column>
                </Grid.Row>

            </Grid>

        )
    }

generateStampTiles = () => {

    const props = this.props as any
    const appState = props.appState as AppState

    const stamps = []
    for (const i in RS_STAMPS) {
      const imgPath = RS_STAMPS[i]

      stamps.push(
            <img src={imgPath} width="10%" alt="" onClick={(e) => { 
              props.sendStampBySignal(appState.focusedMeeting, appState.joinedMeetings[appState.focusedMeeting].focusAttendeeId, imgPath)
            }} />
      )
    }
    return (
      <Grid divided='vertically'>
        <Grid.Row >
          <Grid.Column width={16} >
            {stamps}
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }

generateStampTiles = () => {

    const props = this.props as any
    const appState = props.appState as AppState
    const stamps = []
    for (const i in RS_STAMPS) {
      const imgPath = RS_STAMPS[i]

      stamps.push(
            <img src={imgPath} width="10%" alt="" onClick={(e) => { props.sendStamp(appState.focusedMeeting, appState.joinedMeetings[appState.focusedMeeting].focusAttendeeId, imgPath) }} />
      )
    }
    return (
      <Grid divided='vertically'>
        <Grid.Row >
          <Grid.Column width={16} >
            {stamps}
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }

generateSettingModal = () => {
        return (
            <Modal onClose={this.settingClose} open={this.state.open}>
            <Modal.Header>Setting</Modal.Header>
            <Modal.Content>
                <Grid>
                <Grid.Row>
                    Virtual background
                    </Grid.Row>
                <Grid.Row>
                    {this.generateVGSettingPanal()}
                </Grid.Row>
                </Grid>
            </Modal.Content>
            <Button content='Close' negative onClick={this.settingClose} />
            </Modal>
        )
    }

render() {
		const { crew, markdownRemark } = this.props;

		return (
			<React.Fragment>
				<Divider horizontal>
					<Header>
						<Link to={`/crew${markdownRemark.fields.slug}`}>
							{crew.name} <Rating defaultRating={crew.max_rarity} maxRating={5} icon='star' size='large' disabled />
						</Link>
					</Header>
				</Divider>
				<Grid columns={2}>
					<Grid.Row>
						<Grid.Column width={4}>
							{crew.series && <Image src={`/media/series/${crew.series}.png`} size='small' />}
							<Link to={`/crew${markdownRemark.fields.slug}`}>
								<Image src={`${process.env.GATSBY_ASSETS_URL}${crew.imageUrlFullBody}`} size='small' />
							</Link>
						</Grid.Column>
						<Grid.Column width={12}>
							<CommonCrewData crew={crew} markdownRemark={markdownRemark} />

							<div dangerouslySetInnerHTML={{ __html: markdownRemark.html }} />
						</Grid.Column>
					</Grid.Row>
				</Grid>
			</React.Fragment>
		);
	}

render() {
		const { groupedByTier } = this.state;
		const header = this.props.data.sections.edges[0];

		return (
			<Layout title='The Big Book of Behold Advice'>
				<div>
						<Header as='h2' style={{ paddingTop: '1em' }}>
							{header.node.frontmatter.title}
						</Header>
						<div dangerouslySetInnerHTML={{ __html: header.node.html }} />
				</div>
				{[...groupedByTier.keys()].map((tier, idx) => (
					<React.Fragment key={idx}>
						<Header as='h3'>Tier {formatTierLabel(tier, true)}</Header>
						<Grid columns={isMobile ? 4 : 6}>{groupedByTier.get(tier).map(entry => this.renderCrew(entry))}</Grid>
					</React.Fragment>
				))}
			</Layout>
		);
	}

_renderRewards(rewards) {
		rewards = rewards.sort((a, b) => {
			if (a.type == b.type && a.item_type === b.item_type && a.rarity == b.rarity)
				return a.full_name.localeCompare(b.full_name);
			else if (a.type == b.type && a.item_type === b.item_type)
				return b.rarity - a.rarity;
			else if (a.type == b.type)
				return b.item_type - a.item_type;
			else if (a.type == 2)
				return 1;
			else if (b.type == 2)
				return -1;
			return a.type - b.type;
		});
		const hideRarity = entry => entry.type == 3;
		const rarity = entry => entry.type == 1 ? 1 : entry.rarity;
		const assetURL = file => {
			let url = file === 'energy_icon'
				? 'atlas/energy_icon.png'
				: `${file.substring(1).replaceAll('/', '_')}`;

			if (!url.match(/\.png$/))
				url += '.png'
			return `${process.env.GATSBY_ASSETS_URL}${url}`;
		};

		return (
			<div>
				<Grid columns={isMobile ? 2 : 5} centered padded>
					{rewards.map((entry, idx) => (
						<Grid.Column key={idx}>
								<Header
									style={{ display: 'flex' }}
									icon={
										<ItemDisplay
											src={assetURL(entry.icon.file)}
											size={48}
											rarity={rarity(entry)}
											maxRarity={entry.rarity}
											hideRarity={hideRarity(entry)}
										/>
									}
									content={entry.name}
									subheader={`Got ${entry.quantity}`}
								/>
						</Grid.Column>
					))}
				</Grid>
			</div>
		);
	}

render() {
		if (this.state.allcrew.length === 0) {
			return (
				<Layout title='Behold helper / crew comparison'>
					<div className='ui medium centered text active inline loader'>Loading data...</div>
				</Layout>
			);
		}

		let peopleToShow = [...this.state.peopleList];
		if (this.state.minRarity) {
			peopleToShow = peopleToShow.filter((crew) => crew.max_rarity >= this.state.minRarity);
		}

		return (
			<Layout title='Behold helper / crew comparison'>
				<Header as='h2'>Behold helper / crew comparison</Header>
				<Form>
					<Form.Group>
						<Dropdown
							clearable
							fluid
							multiple
							search
							selection
							closeOnChange
							options={peopleToShow}
							placeholder='Search for crew to compare'
							label='Behold crew'
							value={this.state.currentSelectedItems}
							onChange={(e, { value }) => this._selectionChanged(value)}
						/>
						<Form.Field
							control={Dropdown}
							placeholder={this.state.minRarity ? `Minimum rarity: ${this.state.minRarity}` : `Minimum rarity`}
							selection
							options={rarityOptions}
							value={this.state.minRarity}
							onChange={(e, { value }) => this.setState({ minRarity: value })}
						/>
					</Form.Group>
				</Form>
				{this.state.currentSelectedItems?.length > 0 && (
					<Button compact icon='add user' color='green' content='Preview all in your roster' onClick={() => { this._addProspects(); }} />
				)}

				<Divider horizontal hidden />

				<Grid columns={3} stackable centered padded divided>
					{this.state.entries.map((entry, idx) => (
						<Grid.Column key={idx}>
							<Header as='h5'>
								<Link to={`/crew/${entry.crew.symbol}/`}>
									{entry.crew.name}{' '}
									<Rating defaultRating={entry.crew.max_rarity} maxRating={entry.crew.max_rarity} icon='star' size='small' disabled />
								</Link>
							</Header>
							<CommonCrewData compact={true} crewDemands={entry.crewDemands} crew={entry.crew} markdownRemark={entry.markdownRemark} roster={this.state.roster}/>
							{entry.markdown && (
								<React.Fragment>
									<div dangerouslySetInnerHTML={{ __html: entry.markdown }} />
									<div style={{ marginTop: '1em' }}>
										<a href={`https://www.bigbook.app/crew/${entry.crew.symbol}`}>View {entry.crew.name} on Big Book</a>
									</div>
								</React.Fragment>
							)}
						</Grid.Column>
					))}
				</Grid>
			</Layout>
		);
	}

_renderCrew() {
		const {voyageData} = this.props;
		const  ship  = this.ship;

		return (
			<div>
			  {ship && (<span>Ship : <b>{ship.name}</b></span>)}
				<Grid columns={isMobile ? 1 : 2}>
					<Grid.Column>
						<ul>
							{Object.values(CONFIG.VOYAGE_CREW_SLOTS).map((entry, idx) => {
								let { crew, name }  = Object.values(voyageData.crew_slots).find(slot => slot.symbol == entry);

								if (!crew.imageUrlPortrait)
									crew.imageUrlPortrait =
										`${crew.portrait.file.substring(1).replaceAll('/', '_')}.png`;

								return (
									<li key={idx}>
										{name}
										{'  :  '}
										<CrewPopup crew={crew} useBase={false} />
										</li>
									);
								})}
							</ul>
						</Grid.Column>
						<Grid.Column verticalAlign="middle">
							<ul>
								<li>
									Antimatter
									{' : '}
									<b>{voyageData.max_hp}</b>
								</li>
							</ul>
							<ul>
								{Object.keys(CONFIG.SKILLS).map((entry, idx) => {
									const agg = voyageData.skill_aggregates[entry];

									if (typeof(agg) === 'number') {
										return (<li key={idx}>{`${CONFIG.SKILLS[entry]} : ${Math.round(agg)}`}</li>);
									} else {
										const score = Math.floor(agg.core + (agg.range_min + agg.range_max)/2);

										return (
											<li key={idx}>
												{CONFIG.SKILLS[entry]}
												{' : '}
												<Popup wide trigger={<span style={{ cursor: 'help', fontWeight: 'bolder' }}>{score}</span>}>
													<Popup.Content>
														{agg.core + ' +(' + agg.range_min + '-' + agg.range_max + ')'}
													</Popup.Content>
												</Popup>
											</li>
										);
									}
								})}
							</ul>
						</Grid.Column>
					</Grid>
				</div>
			);
	}

renderCrew(entry): JSX.Element {
		let markdownRemark = {
			frontmatter: {
				bigbook_tier: entry.bcrew.bigbook_tier,
				events: entry.bcrew.events,
				in_portal: entry.bcrew.in_portal
			}
		};

		return (
			<Grid.Column key={entry.crew.symbol}>
				<div style={{ textAlign: 'center', fontSize: '0.75em' }}>
					<Popup
						trigger={
							<Image
								src={`${process.env.GATSBY_ASSETS_URL}${entry.crew.imageUrlPortrait}`}
								size='small'
								style={{
									borderColor: CONFIG.RARITIES[entry.crew.max_rarity].color,
									borderWidth: '1px',
									borderRadius: '4px',
									borderStyle: 'solid'
								}}
							/>
						}
						wide='very'
						on='click'>
						<Header>
							<Link to={`/crew/${entry.crew.symbol}/`}>
								{entry.crew.name}{' '}
								<Rating rating={entry.crew.max_rarity} maxRating={entry.crew.max_rarity} icon='star' size='large' disabled />
							</Link>
						</Header>
						<CommonCrewData crew={entry.crew} markdownRemark={markdownRemark} />

						<div dangerouslySetInnerHTML={{ __html: marked(entry.bcrew.markdownContent) }} />
					</Popup>
					<Link to={`/crew/${entry.crew.symbol}/`}>{entry.crew.name}</Link>
				</div>
			</Grid.Column>
		);
	}

VoyageMain = (props: VoyageMainProps) => {
	const { myCrew, allShips } = props;

	const [voyageData, setVoyageData] = useStateWithStorage('tools/voyageData', undefined);
	const [voyageConfig, setVoyageConfig] = React.useState(undefined);
	const [voyageState, setVoyageState] = React.useState('input');	// input or from voyageData: started, recalled

	if (!voyageConfig) {
		if (voyageData) {
			// Voyage started, config will be full voyage data
			if (voyageData.voyage && voyageData.voyage.length > 0) {
				setVoyageConfig(voyageData.voyage[0]);
				setVoyageState(voyageData.voyage[0].state);
			}
			// Voyage awaiting input, config will be input parameters only
			else {
				setVoyageConfig(voyageData.voyage_descriptions[0]);
			}
		}
		else {
			// voyageData not found in cache, config will be blank voyage
			setVoyageConfig({ skills: {} });
		}
		return (<></>);
	}

	return (
		<React.Fragment>
			{voyageState == 'input' &&
				<Grid columns={2} stackable>
					<Grid.Column width={14}>
						<Card.Group>
							<Card>
								<Card.Content>
									<Image floated='right' src={`${process.env.GATSBY_ASSETS_URL}atlas/icon_${voyageConfig.skills.primary_skill}.png`} style={{ height: '2em' }} />
									<Card.Header>{CONFIG.SKILLS[voyageConfig.skills.primary_skill]}</Card.Header>
									<p>primary</p>
								</Card.Content>
							</Card>
							<Card>
								<Card.Content>
									<Image floated='right' src={`${process.env.GATSBY_ASSETS_URL}atlas/icon_${voyageConfig.skills.secondary_skill}.png`} style={{ height: '2em' }} />
									<Card.Header>{CONFIG.SKILLS[voyageConfig.skills.secondary_skill]}</Card.Header>
									<p>secondary</p>
								</Card.Content>
							</Card>
							<Card>
								<Card.Content>
									<Card.Header>{allTraits.ship_trait_names[voyageConfig.ship_trait]}</Card.Header>
									<p>ship trait</p>
								</Card.Content>
							</Card>
						</Card.Group>
					</Grid.Column>
					<Grid.Column width={2} textAlign='right'>
						<VoyageEditConfigModal voyageConfig={voyageConfig} updateConfig={updateConfig} />
					</Grid.Column>
				</Grid>
			}
			{voyageState != 'input' && (<VoyageExisting voyageConfig={voyageConfig} allShips={allShips} useCalc={() => setVoyageState('input')} />)}
			{voyageState == 'input' && (<VoyageInput voyageConfig={voyageConfig} myCrew={myCrew} allShips={allShips} useInVoyage={() => setVoyageState(voyageConfig.state)} />)}
		</React.Fragment>
	);

	function updateConfig(voyageConfig: any): void {
		setVoyageConfig({...voyageConfig});
		// Update stored voyageData with new voyageConfig
		setVoyageData({
			voyage_descriptions: [{...voyageConfig}],
			voyage: []
		});
		setVoyageState('input');
	}
}

render() {
		const { playerData } = this.props;

		let itemCount = playerData.player.character.items.length;
		let itemLimit = 1000, itemWarning = .9*itemLimit;
		// Hardcoded limit works now, but if the game increases limit, we'll have to update
		//	We should get this from playerData.player.character.item_limit, but it's not in preparedProfileData

		return (
			<div>
				{itemCount > itemWarning && (
					<Message warning>
						<Message.Header>Items approaching limit</Message.Header>
						<p>
							You have {itemCount} items in your inventory. At {itemLimit} the game starts randomly losing
							items; go and replicate away some unnecessary stuff.
						</p>
					</Message>
				)}

				{this.state.fuelschematics.length > 0 && (
					<React.Fragment>
						<Header as='h4'>Here are {this.state.fuelschematics.length} Ship Schematics that you don't need (used to upgrade ships you already maxed):</Header>
						<Grid columns={5} centered padded>
							{this.state.fuelschematics.map((item, idx) => (
								<Grid.Column key={idx} rel={item.archetype_id} textAlign='center'>
									<ItemDisplay
										src={`${process.env.GATSBY_ASSETS_URL}${item.imageUrl}`}
										size={64}
										maxRarity={item.rarity}
										rarity={item.rarity}
									/>
									<p>{item.name}</p>
								</Grid.Column>
							))}
						</Grid>
					</React.Fragment>
				)}

				{this.state.fuelspecific.length > 0 && (
					<React.Fragment>
						<Header as='h4'>Here are {this.state.fuelspecific.length} Equipment items that you don't need (used to equip specific crew you already equipped):</Header>
						<Grid columns={5} centered padded>
							{this.state.fuelspecific.map((item, idx) => (
								<Grid.Column key={idx} rel={item.archetype_id} textAlign='center'>
									<ItemDisplay
										src={`${process.env.GATSBY_ASSETS_URL}${item.imageUrl}`}
										size={64}
										maxRarity={item.rarity}
										rarity={item.rarity}
									/>
									<p>{item.name}</p>
								</Grid.Column>
							))}
						</Grid>
					</React.Fragment>
				)}

				{this.state.fuelgeneric.length > 0 && (
					<React.Fragment>
						<Header as='h4'>Here are {this.state.fuelgeneric.length} Equipment items that you don't need now, but might be useful in the future:</Header>
						<Grid columns={5} centered padded>
							{this.state.fuelgeneric.map((item, idx) => (
								<Grid.Column key={idx} rel={item.archetype_id} textAlign='center'>
									<ItemDisplay
										src={`${process.env.GATSBY_ASSETS_URL}${item.imageUrl}`}
										size={64}
										maxRarity={item.rarity}
										rarity={item.rarity}
									/>
									<p>{item.name}</p>
								</Grid.Column>
							))}
						</Grid>
					</React.Fragment>
				)}
			</div>
		);
	}

render() {
		const { user, password, loginDialogOpen, loggingIn, errorMessage, messageModalOpen } = this.state;
		const { narrowLayout, children } = this.props;
		const windowGlobal = typeof window !== 'undefined' && window;
		let isLoggedIn = windowGlobal && window.localStorage && window.localStorage.getItem('token') && window.localStorage.getItem('username');
		const userName = isLoggedIn ? window.localStorage.getItem('username') : '';

		return (
			<React.Fragment>
				<NavBar narrowLayout={narrowLayout} onMessageClicked={() => this.setState({ messageModalOpen: true })}>
					{children}
				</NavBar>

				<Modal open={loginDialogOpen} onClose={() => this._closeLoginDialog()} size='tiny'>
					<Modal.Header>Log-in to your account</Modal.Header>
					<Modal.Content>
						<Grid textAlign='center' verticalAlign='middle'>
							<Grid.Column style={{ maxWidth: 450 }}>
								<Form size='large' loading={loggingIn}>
									<Segment>
										<Form.Input
											fluid
											icon='user'
											iconPosition='left'
											placeholder='Username'
											value={user}
											onChange={(e, { value }) => this.setState({ user: value })}
										/>
										<Form.Input
											fluid
											icon='lock'
											iconPosition='left'
											placeholder='Password'
											type='password'
											value={password}
											onChange={(e, { value }) => this.setState({ password: value })}
										/>
									</Segment>
								</Form>
								{errorMessage && <Message error>{errorMessage}</Message>}
								{!errorMessage && (
									<Message>If you are an approved book editor, log in here to submit changes directly from the site.</Message>
								)}
							</Grid.Column>
						</Grid>
					</Modal.Content>
					<Modal.Actions>
						<Button content='Cancel' onClick={() => this._closeLoginDialog()} />
						<Button positive content='Login' onClick={() => this._doLogin()} />
					</Modal.Actions>
				</Modal>

				<Modal open={messageModalOpen} closeOnEscape={false} closeOnDimmerClick={false} onClose={() => this._closeMessageDialog()}>
					<Modal.Header>The DataCore website and bot are in need of software engineers!</Modal.Header>
					<Modal.Content>
						<p>
							We need your help! The project is <a href='https://github.com/stt-datacore'>open source</a> so we're open for contributions
							from software engineers, designers, devops, testers and so on. Reach out on our{' '}
							<a href='https://discord.gg/2SY8W7Aeme'>development Discord</a> if you're not sure where to start.
						</p>
						<p>
							If you've always wanted a feature on DataCore, here's your chance to hack on the project and implement it yourself! Most of
							the project is written in TypeScript, with node.js on the backend and React with Gatsby on the frontend.
						</p>
					</Modal.Content>
					<Modal.Actions>
						<Button icon='checkmark' onClick={() => this._closeMessageDialog()} content='Ok' />
					</Modal.Actions>
				</Modal>
			</React.Fragment>
		);
	}

renderEquipmentDetails(crew) {
		if (!this.state.selectedEquipment) {
			return <span />;
		}

		let es = crew.equipment_slots.find(es => es.symbol === this.state.selectedEquipment);
		let equipment = this.state.items.find(item => item.symbol === es.symbol);
		if (!equipment) {
			console.error('Could not find equipment for slot', es);
			return <span />;
		}

		if (!equipment.recipe) {
			return (
				<div>
					<br />
					<p>This item is not craftable, you can find it in these sources:</p>
					<ItemSources item_sources={equipment.item_sources} />
				</div>
			);
		}

		return (
			<div>
				<Grid columns={4} centered padded>
					{equipment.recipe.list.map(entry => {
						let recipeEntry = this.state.items.find(item => item.symbol === entry.symbol);
						return (
							<Grid.Column key={recipeEntry.name + recipeEntry.rarity} textAlign='center'>
								<Popup
									trigger={
										<Label as='a' style={{ background: CONFIG.RARITIES[recipeEntry.rarity].color }} image size='big'>
											<img src={`${process.env.GATSBY_ASSETS_URL}${recipeEntry.imageUrl}`} />x{entry.count}
										</Label>
									}
									header={CONFIG.RARITIES[recipeEntry.rarity].name + ' ' + recipeEntry.name}
									content={<ItemSources item_sources={recipeEntry.item_sources} />}
									wide
								/>
							</Grid.Column>
						);
					})}
				</Grid>
			</div>
		);
	}

ComboGrid = (props: ComboGridProps) => {
	const { crew, fuseGroups } = props;
	let combos = [...props.combos];

	let [fuseIndex, setFuseIndex] = React.useState(1);
	let [groupIndex, setGroupIndex] = React.useState(0);

	React.useEffect(() => {
		setGroupIndex(0);
	}, [fuseIndex]);

	// Reset indices if out of bounds after changing filters
	if (!fuseGroups['x'+fuseIndex]) fuseIndex = 1;
	const groups = fuseGroups['x'+fuseIndex];
	if (!groups[groupIndex]) groupIndex = 0;

	const fuseOptions = [];
	[1, 2, 3, 4, 5].forEach(fuse => {
		const fuseId = 'x'+fuse;
		if (fuseGroups[fuseId] && fuseGroups[fuseId].length > 0) {
			fuseOptions.push({ key: fuse, value: fuse, text: fuseId });
		}
	});

	let groupOptions = [];
	if (fuseIndex > 1) {
		combos = groups[groupIndex].map((comboId) => combos[comboId]);
		groupOptions = groups.map((group, groupId) => {
			return { key: groupId, value: groupId, text: 'Option '+(groupId+1) };
		});
		// Only show first 200 options
		if (groupOptions.length > 200)
			groupOptions = groupOptions.slice(0, 200);
	}

	return (
		<div>
			<div className='title' style={{ marginBottom: '1em' }}>
				Use <b>{fuseIndex == 1 ? combos.length == 1 ? 'the combo' : 'any combo' : 'all combos'}</b> below to retrieve <b>{crew.name}</b>
				{fuseOptions.length > 1 && (
					<Dropdown
						style={{ marginLeft: '1em' }}
						options={fuseOptions}
						value={fuseIndex}
						onChange={(e, { value }) => setFuseIndex(value)}
					/>
				)}
				{groupOptions.length > 1 && (
					<Dropdown scrolling
						style={{ marginLeft: '1em' }}
						options={groupOptions}
						value={groupIndex}
						onChange={(e, { value }) => setGroupIndex(value)}
					/>
				)}
			</div>
			<div className='content'>
				<Grid columns='equal' onClick={() => cycleGroupOptions()}>
					{combos.map((combo, cdx) =>
						<Grid.Row key={'combo'+cdx}>
							{combo.map((polestar, pdx) => (
								<Grid.Column key={'combo'+cdx+',polestar'+pdx}>
									<img width={32} src={`${process.env.GATSBY_ASSETS_URL}${polestar.icon.file.substr(1).replace(/\//g, '_')}`} />
									<br />{polestar.short_name}
									<br /><small>({polestar.loaned ? `${polestar.quantity-polestar.loaned} +${polestar.loaned} added` : polestar.quantity})</small>
								</Grid.Column>
							))}
						</Grid.Row>
					)}
				</Grid>
			</div>
		</div>
	);

	function cycleGroupOptions(): void {
		if (groupOptions.length <= 1) return;
		setGroupIndex(groupIndex+1 < groupOptions.length ? groupIndex+1 : 0);
	}
}

render() {
		const { crew, items } = this.props;

		if (!crew || !this.props.visible) {
			return <span />;
		}

		let { craftCost, demands, factionOnlyTotal, totalChronCost } = calculateCrewDemands(crew, items);

		return (
			<Modal open={this.props.visible} onClose={() => this.props.onClosed()}>
				<Modal.Header>{crew.name}'s expanded equipment recipe trees</Modal.Header>
				<Modal.Content scrolling>
					<p>
						Faction-only items required <b>{factionOnlyTotal}</b>
					</p>
					<p>
						Estimated chroniton cost{' '}
						<span style={{ display: 'inline-block' }}>
							<img src={`${process.env.GATSBY_ASSETS_URL}atlas/energy_icon.png`} height={14} />
						</span>{' '}
						<b>{totalChronCost}</b>
						<Popup
							wide
							trigger={<Icon fitted name='help' />}
							header={'How is this calculated?'}
							content={
								<div>
									<p>This sums the estimated chroniton cost of each equipment and component in the tree.</p>
									<p>It estimates an item's cost by running the formula below for each mission and choosing the cheapest:</p>
									<p>
										<code>
											(6 - PIPS) * 1.8 * <i>mission cost</i>
										</code>
									</p>
									<p>See code for details. Feedback is welcome!</p>
								</div>
							}
						/>
					</p>
					<p>
						Build cost{' '}
						<span style={{ display: 'inline-block' }}>
							<img src={`${process.env.GATSBY_ASSETS_URL}currency_sc_currency_0.png`} height={16} />
						</span>{' '}
						<b>{craftCost}</b>
					</p>
					<Grid columns={3} centered padded>
						{demands.map((entry, idx) => (
							<Grid.Column key={idx}>
								<Popup
									trigger={
										<Header
											style={{ display: 'flex', cursor: 'zoom-in' }}
											icon={
												<ItemDisplay
													src={`${process.env.GATSBY_ASSETS_URL}${entry.equipment.imageUrl}`}
													size={48}
													maxRarity={entry.equipment.rarity}
													rarity={entry.equipment.rarity}
												/>
											}
											content={entry.equipment.name}
											subheader={`Need ${entry.count} ${entry.factionOnly ? ' (FACTION)' : ''}`}
										/>
									}
									header={CONFIG.RARITIES[entry.equipment.rarity].name + ' ' + entry.equipment.name}
									content={<ItemSources item_sources={entry.equipment.item_sources} />}
									on='click'
									wide
								/>
							</Grid.Column>
						))}
					</Grid>
				</Modal.Content>
			</Modal>
		);
	}

render() {
        const gs = this.props as GlobalState
        const props = this.props as any

        let lobbyMainColumnConfig: LobbyMainColumnConfigInf | null = null

        if(gs.windowConfig.leftBarDisplay === true && gs.windowConfig.rightBarDisplay === true){
            lobbyMainColumnConfig = LobbyMainColumnConfig.default
        }else if(gs.windowConfig.leftBarDisplay === true && gs.windowConfig.rightBarDisplay === false){
            lobbyMainColumnConfig = LobbyMainColumnConfig.noUserPanel
        }else if(gs.windowConfig.leftBarDisplay === false && gs.windowConfig.rightBarDisplay === true){
            lobbyMainColumnConfig = LobbyMainColumnConfig.noRoomList
        }else if(gs.windowConfig.leftBarDisplay === false && gs.windowConfig.rightBarDisplay === false){
            lobbyMainColumnConfig = LobbyMainColumnConfig.mainOnly
        }

        

        // @ts-ignore
        const leftColumn   = lobbyMainColumnConfig!.left   === 0 ? <div/> : <Grid.Column width={lobbyMainColumnConfig!.left}>   <LobbyRoomList  {...props}/>    </Grid.Column>
        // @ts-ignore
        const centerColumn = lobbyMainColumnConfig!.center === 0 ? <div/> : <Grid.Column width={lobbyMainColumnConfig!.center}> <LobbyMeetingRoom  {...props}/> </Grid.Column>
        // @ts-ignore
        const rightColumn  = lobbyMainColumnConfig!.right  === 0 ? <div/> : <Grid.Column width={lobbyMainColumnConfig!.right}>  <LobbyUserPanel  {...props}/>   </Grid.Column>


        return (
            <div>
            <Grid padded="horizontally">
                <Grid.Row>
                        {leftColumn}
                        {centerColumn}
                        {rightColumn}
                </Grid.Row>
            </Grid>

            </div>



        )
    }

render(){
        const props = this.props as any
        const appState = props.appState as AppState
        const gs = this.props as GlobalState

        const thisAttendeeId = props.thisAttendeeId as string
        const thisMeetingId  = props.thisMeetingId as string
        const attendeeInfo = appState.joinedMeetings[thisMeetingId].roster[thisAttendeeId]
        let attendeeName = "loading...."
        //let meetingShortId = thisMeetingId.substr(0,5)
        const meetingName = gs.meetings.filter((x)=>{return x.meetingId === thisMeetingId})[0].meetingName
        let muted = <span/>
        let paused = <span/>
        let focusIcon = <span/>

        if(attendeeInfo === undefined){
        }else{
            attendeeName = (attendeeInfo.name !== undefined && attendeeInfo.name !== null)? attendeeInfo.name!.substring(0,20) : "unknown"
            muted = attendeeInfo.muted ? (<Icon name="mute"  color="red" />) : (<Icon name="unmute"/>)
            paused = attendeeInfo.paused ?
             (<Icon name="pause circle outline" color="red" link onClick={()=>{
                props.unpauseVideoTile(thisAttendeeId)
                }} />)
             : 
             (<Icon name="pause circle outline" link onClick={()=>{
                props.pauseVideoTile(thisAttendeeId)
                }} />)
            focusIcon = thisAttendeeId === appState.joinedMeetings[thisMeetingId].focusAttendeeId ? (<Icon name="eye"  color="red" />) : (<span />)

        }


        const thisTileId = getTileId(thisAttendeeId, appState.joinedMeetings[thisMeetingId].videoTileStates)
        if(thisTileId > 0 && this.tileOverlayVideoRef.current !== null){
            if(appState.joinedMeetings[thisMeetingId].videoTileStates[thisTileId].localTile){
                const videoElement = this.tileOverlayVideoRef.current.getVideoRef().current!
                appState.joinedMeetings[thisMeetingId].meetingSession?.audioVideo.bindVideoElement(thisTileId, videoElement)
                videoElement.style.setProperty('-webkit-transform', 'scaleX(1)');
                videoElement.style.setProperty('transform', 'scaleX(1)');
            }else{
                appState.joinedMeetings[thisMeetingId].meetingSession?.audioVideo.bindVideoElement(thisTileId, this.tileOverlayVideoRef.current.getVideoRef().current!)
            }
        }

        return(
            <Grid.Column width={4} >
                <div style={{padding:"5px"}}>
                <OverlayVideoElement {...props} ref={this.tileOverlayVideoRef}/>
                </div>
                <span>
                {muted}
                </span>
                <span>
                {paused}
                </span>
                {focusIcon}
                {attendeeName} @ {meetingName}
            </Grid.Column>
        )
    }

render() {
        this.id2ref = {}
        const gs = this.props as GlobalState
        const props = this.props as any
        const appState = props.appState as AppState
        if(gs.status !== AppStatus.IN_MEETING){
            return(<div />)
        }

        // for(let key in appState.videoTileStates){
        //     const attendeeId = appState.videoTileStates[key].boundAttendeeId
        //     const tileId = appState.videoTileStates[key].tileId
        //     const tmpRef = React.createRef<MainOverlayVideoElement>()
        //     this.id2ref[tileId!] = tmpRef
        //     const cell = (
        //         <TileScreenTile {...props} thisAttendeeId={attendeeId}/>
        //     )
        //     this.cells.push(cell)
        // }

        const mainScreens:JSX.Element[]=[]
        if(this.state.showMainScreen===true){
            for(let key in appState.joinedMeetings){
                const focusAttendeeId = appState.joinedMeetings[key].focusAttendeeId
                const meetingId = key
                mainScreens.push(
                    <MainScreen {...props} thisAttendeeId={focusAttendeeId} thisMeetingId={meetingId} />
                )
            }
        }

        const tiles:JSX.Element[]=[]
        if(this.state.showTileScreen === true){
            for(let meetingId in appState.joinedMeetings){
                const tileStates = appState.joinedMeetings[meetingId].videoTileStates
                for(let tileId in tileStates){
                    const attendeeId = tileStates[tileId].boundAttendeeId
                    const tmpRef = React.createRef<MainOverlayVideoElement>()
                    this.id2ref[tileId] = tmpRef
                    const cell = (
                        <TileScreenTile {...props} thisAttendeeId={attendeeId} thisMeetingId={meetingId} />
                    )
                    tiles.push(cell)
                }
            }
        }

        return (
            <div>

                <Menu stackable  secondary>
                    {/* <Menu.Item as="h2"
                        name={gs.joinInfo?.MeetingName}
                    >
                    </Menu.Item> */}
                    <Menu.Menu position='right'>
                        <Menu.Item color="teal" onClick={(e)=>{this.toggleShowMainScreen()}} active={this.state.showMainScreen}>
                            <Icon name="square full" />
                        </Menu.Item>
                        <Menu.Item color="teal" onClick={(e)=>{this.toggleShowTileScreen()}} active={this.state.showTileScreen}>
                            <Icon name="grid layout"/>
                        </Menu.Item>
                    </Menu.Menu>
                </Menu>


                <Grid>
                    <Grid.Row>
                        <Grid.Column>
                            {mainScreens}
                        </Grid.Column>
                    </Grid.Row>
                    <Grid.Row >
                            {tiles}
                    </Grid.Row>
                </Grid>
            </div>
        )

    }

render() {
        const props = this.props as any
        const gs = this.props as GlobalState
        const appState = props.appState as AppState
        const inputAudioDevicesOpts=gs.inputAudioDevices!.map(info => { return { key: info.label, text: info.label, value: info.deviceId } })

        const muteIcon=appState.currentSettings.mute ?
        (
            <Popup
            trigger={
                <Icon.Group link onClick={() => { props.toggleMute() }}>
                    <Icon size="large" color='black' name='microphone' />
                    <Icon size="large" color='red' name='dont' />
                </Icon.Group>        
            }       
            content="unmute."
            />
        )
        :
        (
            <Popup
            trigger={
                <Icon size="large" name="microphone"  color="black" link onClick={() => { props.toggleMute() }}/>
            }
            content="mute."
            />
        )

        return (
            <Grid>
                <Grid.Row>
                    <Grid.Column >
                    {muteIcon}
                    <Dropdown
                        style={{paddingLeft:"10px"}}
                        pointing='top left'
                        options={inputAudioDevicesOpts}
                        trigger={trigger}
                        onChange={(e, { value }) => props.selectInputAudioDevice(value as string)}
                    />

                        {/* <List style={{paddingLeft:"15px",paddingTop:"0px",paddingBottom:"0px"}} link>
                            <List.Item as='a' active onClick={() => { props.toggleMute() }}><Icon name="ban" color={appState.currentSettings.mute ? "red" : "grey"} />Mute</List.Item>
                        </List>  */}



                    </Grid.Column>
                </Grid.Row>
            </Grid>            


        )
    }

generateVGSettingPanal = () => {
        const props = this.props as any
        const appState = props.appState as AppState

        const images = []
        RS_VBG.sort()
        for (const i in RS_VBG) {
            const imgPath = RS_VBG[i]
            images.push(
            <Grid.Column width={4}>
                <div onClick={() => { 
                    if(imgPath.indexOf("share_screen.jpg")>=0){
                        const streamConstraints = {
                            // frameRate: {
                            //     max: 15,
                            // },
                        }
                        // @ts-ignore https://github.com/microsoft/TypeScript/issues/31821
                        navigator.mediaDevices.getDisplayMedia().then(media => {
                            props.setScreenShareAsVirtualBackground(media)
                        })
                        this.settingClose()
                    }else{
                        props.setVirtualBackground(imgPath) 
                    }
                }} style={
                (() => {
                    return appState.localVideoEffectors.virtualBackgroundImagePath === imgPath ?
                    { color: "red", border: "2px solid #ff0000", width: "100%", height: "100%" } :
                    { width: "100%", height: "100%" }
                })()
                }>
                <img src={imgPath} width="100%" height="100%" alt="" />

                </div>
            </Grid.Column>
            )
        }
        return (
            images
        )
    }

render() {
        const props = this.props as any
        const gs = this.props as GlobalState
        const appState = props.appState as AppState
        const outputAudioDevicesOpts=gs.outputAudioDevices!.map(info => { return { key: info.label, text: info.label, value: info.deviceId } })

        const enableIcon=appState.currentSettings.speakerEnable ?
        (
            <Popup
            trigger={
                <Icon size="large" name="sound"  color="black" link onClick={() => { props.toggleSpeaker() }}/>
            }
            content="disable."
            />
        )
        :
        (
            <Popup
            trigger={
                <Icon.Group link onClick={() => { props.toggleSpeaker() }}>
                    <Icon size="large" color='black' name='sound' />
                    <Icon size="large" color='red' name='dont' />
                </Icon.Group>        
            }       
            content="enable."
        />
        )

        return (

            <Grid>
                <Grid.Row>
                    <Grid.Column >
                    {enableIcon}
                    <Dropdown
                        style={{paddingLeft:"10px"}}
                        pointing='top left'
                        options={outputAudioDevicesOpts}
                        trigger={trigger}
                        onChange={(e, { value }) => props.selectOutputAudioDevice(value as string)}
                    />
                        {/* <List style={{paddingLeft:"15px",paddingTop:"0px",paddingBottom:"0px"}} link>
                            <List.Item as='a' active onClick={() => { props.toggleSpeaker() }}><Icon name="ban" color={appState.currentSettings.speakerEnable ? "grey" : "red"}/>Disable Speaker</List.Item>
                        </List>  */}


                    </Grid.Column>
                </Grid.Row>
            </Grid>

        )
    }

public render() {
        return (
            <Grid className="welcome-page" divided>
                <Grid.Row className="welcome-navbar" columns={1}>
                    <Grid.Column>
                        <Header as="h3" dividing>
                            Ballerina Examples
                        </Header>
                        {this.state && this.state.noSearchReults ?
                            (<>No search results found!</>) : null
                        }
                        {this.state && this.state.samples && this.state.samples.length > 0 ?
                            (
                                <Form>
                                    <Form.Field inline>
                                        <Input
                                            ref={(ref) => {
                                                this.searchInput = ref as Input;
                                            }}
                                            loading={!this.state || !this.state.samples}
                                            placeholder="Search"
                                            onChange={(event: React.SyntheticEvent<HTMLInputElement>) => {
                                                this.setState({
                                                    searchQuery: event.currentTarget.value,
                                                });
                                                this.onSearchQueryEdit();
                                            }}
                                            className="search-control"
                                        />
                                    </Form.Field>
                                </Form>
                            ) : (
                                <>No Samples found in [BALLERINA_HOME]/examples folder.</>
                            )
                        }
                    </Grid.Column>
                </Grid.Row>
                <Grid.Row className="welcome-content-wrapper">
                    <Grid.Column mobile={16} tablet={16} computer={16} className="rightContainer">
                        <Grid>
                            {this.state && this.state.samples &&
                                <Grid.Row columns={4} className="sample-wrapper">
                                    {
                                        this.getColumnContents().map((column, index) => {
                                            return (
                                                <Grid.Column key={index} mobile={16} tablet={8} computer={4}>
                                                    {column.map((columnItem) => this.renderColumnItem(columnItem))}
                                                </Grid.Column>
                                            );
                                        })
                                    }
                                </Grid.Row>
                            }
                        </Grid>
                    </Grid.Column>
                </Grid.Row>
            </Grid>);
    }

render() {
        const props = this.props as any
        const gs = this.props as GlobalState
        const appState = props.appState as AppState
        const inputVideoDevicesOpts=gs.inputVideoDevices!.map(info => { return { key: info.label, text: info.label, value: info.deviceId } })

        const enableIcon=appState.currentSettings.videoEnable ?
        (
            <Popup
            trigger={
                <Icon size="large" name="video camera"  color="black" link onClick={() => { props.toggleVideo() }}/>
            }
            content="disable."
            />
        )
        :
        (
            <Popup
            trigger={
                <Icon.Group link onClick={() => { props.toggleVideo() }}>
                    <Icon size="large" color='black' name='video camera' />
                    <Icon size="large" color='red' name='dont' />
                </Icon.Group>        
            }       
            content="enable."
        />
        )
        
        return (
            <Grid>
                <Grid.Row>
                    <Grid.Column>

                    {enableIcon}
                    
                    <Dropdown
                        style={{paddingLeft:"10px"}}
                        pointing='top left'
                        options={inputVideoDevicesOpts}
                        trigger={trigger}
                        onChange={(e, { value }) => props.selectInputVideoDevice(value as string)}
                    />
                        {/* <List style={{paddingLeft:"15px",paddingTop:"0px",paddingBottom:"0px"}} link>
                            <List.Item as='a' active onClick={() => { props.toggleVideo() }}><Icon name="ban" color={appState.currentSettings.videoEnable ? "grey" : "red"}/>Disable Camera</List.Item>
                        </List>  */}
                    </Grid.Column>
                </Grid.Row>
                <Grid.Row>
                    <Grid.Column>
                        <List link>
                            <List.Item as='a' active onClick={() => this.fileInputRef.current!.click()}>
                                <Icon name="folder"  active />dummy mov.
                            </List.Item>
                        </List>
                        <input
                            ref={this.fileInputRef}
                            type="file"
                            hidden
                            onChange={(e) => props.setSelectedVideo(e)}
                        />

                    </Grid.Column>
                </Grid.Row>


            </Grid>

        )
    }