2.0.0 • Published 10 months ago

react-gamefic v2.0.0

Weekly downloads
18
License
MIT
Repository
github
Last release
10 months ago

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 specialized MultipleChoice 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 import normal 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.

2.0.0

10 months ago

1.6.2

10 months ago

1.6.1

10 months ago

1.5.2

12 months ago

1.6.0

12 months ago

1.5.1

12 months ago

1.5.0

1 year ago

1.4.0

1 year ago

1.3.0

1 year ago

1.2.0

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.1

2 years ago

1.0.0

2 years ago

0.7.0-beta.0

2 years ago

0.7.0-beta.1

2 years ago

0.7.0-beta.2

2 years ago

0.7.0-beta.3

2 years ago

0.10.1

2 years ago

0.7.0-beta.4

2 years ago

0.7.0-beta.6

2 years ago

0.7.0-beta.7

2 years ago

0.10.0

2 years ago

0.9.0

2 years ago

0.8.1

2 years ago

0.8.0

2 years ago

0.7.0

2 years ago

0.6.0

2 years ago

0.5.1

4 years ago

0.5.0

5 years ago

0.4.2

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.0

5 years ago

0.2.3

5 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.3

7 years ago

0.0.2

8 years ago

0.0.1

8 years ago