Coding a very basic choice text-based rpg in react

programming
1

I’m doing this for my final assignment for my GUI class. I’m going into cybersecurity for my masters in a few years and I’m not very good at GUI or any front end coding.
I want to essentially code a game that has levels, and for each level a map of a network is given. Based on that map of the network and given information the player will make choices (multiple choice).
Think telltale type game if you’ve ever played wlaking dead by telltale games. The map can be updated (just an image update) if the player say chose to do some OSINT. A lot of the coding could be just nested if statements for the choices, but that sounds inefficient. If you guys can show me how I should go about structuring and coding this it would be a huge help. Essentially though I want the player to make cyber choices on how to attack a network and also have failure in it obviously.

cyber-game
cyber-game1029×638 130 KB

2

Right now I am currently trying to make the map part of it change based on the level number passed down as a prop.

import "./Map.css"
import React, { Component } from "react";

import image1_0 from './images/1.png';

class Map extends Component {
render() {

    function level_image() {
        return "image" + this.props.current_level;
    }

    var mapStyle = {
        height: 500,
        width: 500,
        backgroundImage: "url(" + level_image() + ")"
    };

    return (
        <div style={mapStyle}>
            <h1>{this.props.current_level}</h1>
        </div>
    );
}
}

export default Map;

Does anybody know how I should go about doing this. I want to pass down a lvl number and then be able to display the correct image.

If anybody wants to contact me directly to help me with this or talk about it contact me: [email protected]

3

I am on my phone, so my formatting may be off. But, why not try this:

var mapStyle = {
    height: 500,
    width: 500,
    backgroundImage: "url(" + this.props.current_level + ")"
};

:slight_smile:

4

Thing is I’m importing a level 1 image for the map for when the current_level is 1.
import image1 from './images/1_0.png';
I want to somehow display image 1, when this.props.current_level is 1.

I also tried…
backgroundImage: "url(" + "image" + this.props.current_level + ")"
…sadly didn’t work

5

For the user prompt I essentially want to have some number of choices and then connect those choices to new prompts.

I want to somehow parse all of the question and answer data from some json data.

Anyone know where I should look on how to do that?

image

I also want to be able to change the number of options and only show each option from the json data that is imported

6

That seems to clear it up a bit :slight_smile: Thanks!

How are you calling your Map? What does the call to it look like? I’m trying to follow the prop from Map through to this app to see how it looks.

7

Here is my Game.js page that calls it

import React, { Component } from "react";

    import "./Game.css"

    import Map from "./Map"

    import User from "./User"

    class Game extends Component {

        render() {

            var current_level = 1;

            return (

                <div className="levelDisplay">

                    {current_level}

                    <Map current_level={current_level} />

                    <User />

                </div>

            );

        }

    }

export default Game;

I just made the prop name for Map level and changed it in my component on my Map.js page
It still shows blank with no image