{this.props.current_level}

# Coding a very basic choice text-based rpg in react

**URL:** <https://forum.kirupa.com/t/coding-a-very-basic-choice-text-based-rpg-in-react/645156>\
**Category:** programming\
**Created:** [December 2, 2020, 6:07pm UTC](https://forum.kirupa.com/t/coding-a-very-basic-choice-text-based-rpg-in-react/645156 "2020-12-02T18:07:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![StraightUpRader](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/straightuprader/32/13005_2.png) [@StraightUpRader](https://forum.kirupa.com/u/StraightUpRader)\
**Post date:** [December 2, 2020, 6:07pm UTC](https://forum.kirupa.com/t/coding-a-very-basic-choice-text-based-rpg-in-react/645156/1 "2020-12-02T18:07:56Z")

</div>

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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/1/11129f28d7c7f997baf592c763c67ca503bfc2ae.jpeg)

---

<div class="post-metadata">

**Author:** ![StraightUpRader](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/straightuprader/32/13005_2.png) [@StraightUpRader](https://forum.kirupa.com/u/StraightUpRader)\
**Post date:** [December 3, 2020, 12:19am UTC](https://forum.kirupa.com/t/coding-a-very-basic-choice-text-based-rpg-in-react/645156/2 "2020-12-03T00:19:37Z")

</div>

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: [9db5821e-3221-4890-8a31-e355db32fbaa@anonaddy.me](mailto:9db5821e-3221-4890-8a31-e355db32fbaa@anonaddy.me)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 3, 2020, 2:53am UTC](https://forum.kirupa.com/t/coding-a-very-basic-choice-text-based-rpg-in-react/645156/3 "2020-12-03T02:53:15Z")

</div>

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 + ")"
};

```

🙂

---

<div class="post-metadata">

**Author:** ![StraightUpRader](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/straightuprader/32/13005_2.png) [@StraightUpRader](https://forum.kirupa.com/u/StraightUpRader)\
**Post date:** [December 3, 2020, 4:19am UTC](https://forum.kirupa.com/t/coding-a-very-basic-choice-text-based-rpg-in-react/645156/4 "2020-12-03T04:19:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![StraightUpRader](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/straightuprader/32/13005_2.png) [@StraightUpRader](https://forum.kirupa.com/u/StraightUpRader)\
**Post date:** [December 3, 2020, 4:47am UTC](https://forum.kirupa.com/t/coding-a-very-basic-choice-text-based-rpg-in-react/645156/5 "2020-12-03T04:47:55Z")

</div>

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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/c/c8180a06b9ec3abb1bc0bf31f4e1aafa6d410626.png)

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 3, 2020, 5:12am UTC](https://forum.kirupa.com/t/coding-a-very-basic-choice-text-based-rpg-in-react/645156/6 "2020-12-03T05:12:05Z")

</div>

That seems to clear it up a bit 🙂 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.

---

<div class="post-metadata">

**Author:** ![StraightUpRader](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/straightuprader/32/13005_2.png) [@StraightUpRader](https://forum.kirupa.com/u/StraightUpRader)\
**Post date:** [December 3, 2020, 5:19am UTC](https://forum.kirupa.com/t/coding-a-very-basic-choice-text-based-rpg-in-react/645156/7 "2020-12-03T05:19:05Z")

</div>

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