Open-source interactive fiction engine, powered by React, Redux and TypeScript. _ https://discoteque.pub/
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.
 
 
 
 

75 lines
2.0 KiB

import React, { useMemo } from 'react';
import { Global, css } from '@emotion/core';
import styled from 'styled-components';
import { colors } from '../assets/style-vars'
import Playback from './Playback';
import { Renderer } from './Renderer';
import createEngine from '../engine';
import { Engine } from '../engine/Engine';
import { Provider } from 'react-redux';
import { ToastContainer } from 'react-toastify';
import { EngineConfig } from '../engine/types';
type AppProps<GS = object, MT = undefined, ST extends string = string> = {
config: EngineConfig<GS, MT, ST>
}
const StyledToastContainer = styled(ToastContainer)`
.Toastify__toast {
background: ${colors.MainBgColor};
color: ${colors.MainTextColor};
}
.Toastify__progress-bar--default {
background: ${colors.MainBgColorDark};
}
.Toastify__progress-bar--success {
background: ${colors.MainSuccessColor};
}
.Toastify__progress-bar--error {
background: ${colors.MainErrorColor};
}
.Toastify__close-button {
color: ${colors.MainTextColor};
}
`;
export default <GS, MT, ST extends string, >({ config }: AppProps<GS, MT, ST>) => {
const engine: Engine<GS, MT, ST> = useMemo(
() => createEngine<GS, MT, ST>(config, config.reducer),
[config],
)
return (
<>
<Global styles={css`
@font-face {
font-family: 'Antic Slab Regular';
src: url('./assets/fonts/AnticSlab-Regular.woff2') format('woff2');
}
body {
font-family: "Antic Slab Regular";
font-size: 1.5rem;
color: ${colors.MainTextColor};
background-color: ${colors.MainBgColor};
font-weight: 400;
}
`} />
<Provider store={engine.store}>
<Playback engine={engine} engineConfig={config}>
{(_, config, backlog, location, time, next) => {
return (<Renderer backlog={backlog} next={next} location={location} time={time} config={config} />)
}}
</Playback>
</Provider>
<StyledToastContainer />
</>
);
}