codingtrain / oregon-trail

A p5.js version of the Apple ][ Oregon Trail Game

Oregon Trail Game

Play the Oregon Trail

oregon-trail's Issues

Another way to make a blinking block caret

Edited: Disregard - most browsers won't support this solution anyway.
I was looking into the input.js source and there is actually an easier way to do that in CSS by modifying the caret: shape value and setting it to "block" instead. Either way works but maybe (?) the CSS way wouldn't look as confusing?
see: https://css-tricks.com/almanac/properties/c/caret-shape/

Page layouts

I have looked at the first few pages (before Matt's General Store) and here are all the page configurations that are in use.

1. Image + Options

Breakdown of the elements:

• Image element (The Oregon Trail image)
• Separation image
• Numbered options
• Submit that takes numbers from 1 to the amount of options
• Separation image

2. Text + Options

Breakdown of the elements:

• Separation image
• Some text
• Numbered options
• Submit that takes numbers from 1 to the amount of options
• Separation image

3. Text + [Spacebar]

Breakdown of the elements:

• Separation image
• Some text
• Separation image
• Confirmation message (press SPACE BAR to continue)

4. Image + Question

Breakdown of the elements:

• Image element
• Question
• Text input (Should have a limit of characters)

5. Image + Question + List inputs

Breakdown of the elements:

• Image element
• Question
• Numbered list of inputs (Each should have a limit of characters)
• Confirmation message (Enter names or press Return)
• After inputing, confirmation message changes to a Yes/No confirmation question

6. Loading screen

Breakdown of the elements:

• Image element
• Some text in a bordered container for emphasis

7. Image + [Spacebar]

Breakdown of the elements:

• Image element
• Some text over the image in a bordered container for emphasis
• Confirmation message (press SPACE BAR to continue)

8. Dialogue + [Spacebar]

Breakdown of the elements:

• Some text
• Image element on left
• Bullet points on right
• Confirmation message (press SPACE BAR to continue)

Conclusion

There are a lot of page layouts that are not even the core game. Currently adding pages is hard and not efficient. Maybe a simple page editor that would generate the JSON code will solve this issue.

Render "slide"

Maybe there is a better term, but taking the data from game_data.json and rendering the text and choices.

Found the game sprites

Don't know if any of you have discovered this already but I found what appears to be the full game sprites for Oregon Trail. Perhaps these could be a useful reference for any graphic artists working on this? [Edited] Looks like they're for the PC version though.
Link: https://spritedatabase.net/game/2151

Screen Grab idea for fastest proof of concept

Could there maybe be a collection of saved screenshots organized some way, perhaps in numerical order notation, that could be used to simply paint an image of that screen and grab keyboard input to "play" an alpha version of this? Perhaps maybe whoever is doing the new artwork could refer to it as well?

First issue

Are you going to do it in BASIC, or p5.js? First question!

Add website to description

In order to test/play it without downloading it add this URL as website:
https://codingtrain.github.io/Oregon-Trail/

Slides or Pages?

It seems like there should be only one in use.

So that code like this:

// From js/slide_manager.js lines 107-112
changePageTo(name) {
    const page = this.getSlideByName(name);
    if (page != undefined) {
        this.currentSlide = page;
    }
}

is less confusing:

changeSlideTo(name) {
    const slide = this.getSlideByName(name);
    if (slide != undefined) {
        this.currentSlide = slide;
    }
}

I can refactor it, but I need to know which one.

Is there anything from the DOS version we would like to incorporate?

https://www.retrogames.cz/play_687-DOS.php?language=EN

Create a class to store game state

List of possible classes

• Interface / Slide class?
• Shop extends Interface/Slide?
• Keyboard input class?

??????

Mobile support

Maybe a input element is enough

Game World Editor?

(Been working on my own take on this while checking back here).... After a few attempts to build the various rooms I noticed that, for me anyway as a longtime hobby programmer, it looks like it will be easier to simply build the game world editor program first and then later the game itself. That way it'll be easier (?) to view, manage and update the json files while getting a visual idea of how these screen/pages are going to look like. and all fit together.
So the big question here is, wouldn't it be a better idea to build the world editor first? Because right now I'm seeing a problem here right away, in that the json files here don't seem to logically connect with something like a room number and pointers to/from other room numbers and room class types. Plus back-connector data as well.
Just for as an example on this, a simple "hit spacebar to continue" screen should have "nextRoom" and "prevRoom" data in it, esp. helpful for later bug testing. and of managing and updating the game world itself. To clarify, I don't mean the next or previous element in the json file but the actual room paths back and forth, because those may be different and in a game editor it's going to make more visual sense to page through how the player's going to see these screens.

Accessibility - Screen Reader Support

For each "game slide" (page?), read prompts and describe imagery for screen readers. p5's describe() function might be enough for this?

https://p5js.org/reference/#/p5/describe

Automatic text wrapping

Right now for rendering a new line you must add a new element in the JSON string array.

@shiffman already suggested using the text() function where you can specify the width and height of the textbox.

simple engine for user keyboard input

More accurate font

The VT323 font is really accurate, but the letter width is way too small.

Architecture of the game data json

Hi,
i would like to propose a structure for the game data json file, which is called "slide_data.json" in the repository.

At the JSON root you have a start and end name as Entry- and Exitpoint for the game. Then you have a object called Pages, which holds all the Data for a given Page. Each Page has a Name to reference it in other Pages (think of it as an ID) and a type. The type determines, which Class should Render the Page. e.g. a Page with the Type "shop" should be rendered by the shop class. Everything the class would need to do it's job, would then be in the data object for the page. So when instantiating the Class, you would give it the data Object and it would know how to deal with this data.

This approach would be totally data driven. The type Classes would be instantiated with the data, and some other Class, propably a game Manager of some sort, would get the Instance and would go from there. You propably would need more than one class per Type, for the different game Mechanics, e.g. one for Rendering, one for taking over the input and so on.

The JSON could look something like this

{
    "start": "startPage",
    "end": "ending",
    "pages": [{
        "name": "startPage",
        "type": "start",
        "data": {
            "title": "The Oregon Trail",
            "choices": [{
                "text": "Travel the trail",
                "action": "changePage",
                "newPageName": "travel",
            }, {
                "text": "Learn about the trail",
                "action": "changePage",
                "newPageName": "learn",
            }, {
                "text": "See the Oregon Top Ten",
                "action": "changePage",
                "newPageName": "topTen",
            }, {
                "text": "Turn sound off",
                "action": "toggleSound",
                "atlernativeText": "Turn sound on"
            }],
            "prompt": "What is your choice?",
            "img": "img/title.png",
        }
    }, {
        "type": "choice",
        "name": "travel",
        "data": {
            "text": "First text",
            "choices": [...],
            "img": "",
            "nextPage": "story1"
        }
    }, {
        "type": "story",
        "name": "story1",
        "data": {
            "texts": [
                "This is the first text",
                "This is the second text, which will appear after pressing space"
            ]
        }
    }, {
        "type": "shop",
        "name": "firstShop",
        "data": {
            "items": [{
                "id": 1,
                "name": "Some thing to buy",
                "description": "This is a buyable thing",
                "price": 1600
            }],
            "topText": "Here could be your shop text",
            "nextPage": "pageAfterShop"
        }
    }]
}

Font doesn't suport other languages

Letters like ü or č and many more.

Also there is no exclamation mark.

Adapt text file script into JSON format

Theming and Color Settings

Maybe some kind of Settings file to set some theming (font color, background color)

Add Multiple Langauge Support

• English
• German
• Italian