Scenario generator for vore roleplay and story ideas.
https://scenario-generator.deliciousreya.net/responses
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.5 KiB
42 lines
1.5 KiB
import { createContext } from 'preact';
|
|
import { responseListIdPrefix, ResponseType, type ResponseTypeProps } from './ResponseType';
|
|
import { IncludesGenerator } from './GeneratorPage';
|
|
import { LinkButton } from './Button';
|
|
import { TableEmoji, tableIdentifier, TableName } from './TableHeader';
|
|
import { useContext } from 'preact/hooks';
|
|
|
|
export const IncludesResponses = createContext(false)
|
|
|
|
export interface ResponsesProps {
|
|
types: ResponseTypeProps[]
|
|
}
|
|
|
|
export interface ResponsesEvents {
|
|
onSelectResponse: (tableId: number, mappingId: number) => void
|
|
}
|
|
|
|
// TODO: add a "reconstitute" function for ResponsesPage
|
|
|
|
export function ResponsesPage({ types, onSelectResponse }: ResponsesProps & ResponsesEvents) {
|
|
const includesGenerator = useContext(IncludesGenerator);
|
|
return <div id="responses" class="page">
|
|
<header id="responsesHeader" class="window">
|
|
<h1 id="responsesHead">Possible Responses</h1>
|
|
<nav id="responsesHeaderNav" class="buttons">
|
|
{types.map(type =>
|
|
<LinkButton key={tableIdentifier(type.table)} href={`#${responseListIdPrefix}${tableIdentifier(type.table)}`} external={false}>
|
|
<TableEmoji emoji={type.table.emoji} />{' '}<TableName name={type.table.name} />
|
|
</LinkButton>)}
|
|
{includesGenerator
|
|
? <LinkButton href={"#generator"} external={false} id="returnToGenerator">Return to Generator</LinkButton>
|
|
: null}
|
|
</nav>
|
|
</header>
|
|
<ul id="responseLists">
|
|
{types.map(type =>
|
|
<ResponseType key={tableIdentifier(type.table)}
|
|
onSelectResponse={onSelectResponse}
|
|
{...type} />)}
|
|
</ul>
|
|
</div>
|
|
}
|
|
|