react-gamefic v2.0.0
react-gamefic
React components for Gamefic.
Requirements
This project requires Node, Ruby, and the Gamefic SDK. The SDK is available as a RubyGem:
$ gem install gamefic-sdk
Using React and Gamefic
Run the following commands to create a new Gamefic project that targets the React platform:
$ gamefic init my-game
$ cd my-game
$ rake web:generate
$ rake web:build
The web:generate
task creates the React application in the web directory. The web:build
task compiles the application in the web/build
directory.
The Basics
The generated app is designed to be as mininal as possible while still providing the base functionality of a playable game. The only required
component library is react-gamefic
, although it also uses react-modal
to power the menu options. Most styles and UI elements should be
easy to modify, extend, or replace altogether.
The Console
Component
The Console
is the top-level game container. It accepts a driver
prop and provides a context for other components.
The driver
prop accepts a Driver object as defined in the gamefic-driver package.
The Terminal
component provides a common component for rendering scenes.
The Modals
component provides modal dialogs for saving and restoring games.
Scenes
The Terminal
takes a typedScenes
prop that provides components for rendering different types of scenes.
Activity
- The top-level component for Activity scenes.MultipleChoice
- The top-level component for Multiple Choice scenes.YesOrNo
- A specializedMultipleChoice
scene.Pause
- The top-level component for Pause scenes.Conclusion
- The top-level component for Conclusion scenes.
All the scene components are exported into the project for ease of customization.
It's also possible to configure a namedScenes
prop to use specialized components for user-defined scenes. One possible use
for a named scene component is a minigame that the player must complete before proceeding with the story.
Scene Components
CommandForm
- A form with a text input for accepting typed commands.CommandButton
- A button that triggers a command.CommandLink
- A button styled as a link that triggers a command.Turn
- The display for a single turn's output.History
- A collection of previous Turns.HtmlText
- A display container for messages.OptionList
- A list of command links, such as the options in a Multiple Choice scene.
Modals
The Modals
component provides modal dialogs for saving and restoring game snapshots. There is also a Modal
component based
on react-modal that can be used to create custom modals with the same default style.
Built-in Styles
The react-gamefic package includes several styles that can be imported into projects. To import the terminal
style, for example:
import 'react-gamefic/styles/terminal'; // Import the built-in style first
import './style.css'; // Import your own style second to add your customizations
The following styles are available:
normal
: A minimal foundation for responsiveness and readability. The other built-in styles importnormal
first.ebook
: A simple black-on-white text style.terminal
: A green-on-black style designed to emulate command-line terminals.
The app's stylesheet is limited to four classes: .component
, .terminal
, .modal
, and .overlay
(a helper element for modals). Styles can
be customized by modifying or replacing web/src/style.css
. Even the stylesheet imported from react-gamefic is optional.
Testing the Component Library Locally
If you're working on the react-gamefic library itself and need to link to a local copy of react-gamefic, you might run into invalid hook errors. One solution is to add the following aliases to the test app's webpack config, as mentioned in this Stack Overflow discussion:
resolve: {
alias: {
'react': path.resolve('./node_modules/react'),
'react-dom': path.resolve('./node_modules/react-dom')
}
}
More Info
Refer to the official website or the Gamefic SDK repo for more information about developing with Gamefic.
10 months ago
10 months ago
10 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
8 years ago
8 years ago