Contracts feature

src/App.js

@@ -18,22 +18,60 @@ export class App extends Component {
     this.resetState = this.resetState.bind(this);
     this.storeState = this.storeState.bind(this);
     this.recoverState = this.recoverState.bind(this);
+    this.onMainButton = this.onMainButton.bind(this);
+    this.availableContracts = this.availableContracts.bind(this);
+    this.startContract = this.startContract.bind(this);
+    this.onContractSuccess = this.onContractSuccess.bind(this);
+    this.onContractFail = this.onContractFail.bind(this);
     this.setParagraph = this.setParagraph.bind(this);
     this.setChapter = this.setChapter.bind(this);
   }
 
   getDefaultState() {
-    return Object.assign({}, {
-      currentChapter: 0,
-      currentParagraph: 0
-    });
+    return Object.assign(
+      {},
+      {
+        currentStade: 0,
+        combatInProgress: false,
+        currentContract: {},
+        finishedContracts: [],
+      }
+    );
   }
 
   componentDidMount() {
-    window.addEventListener('beforeunload', this.storeState);
+    window.addEventListener("beforeunload", this.storeState);
     setInterval(this.storeState, 60000);
   }
 
+  availableContracts(stage) {
+    return chapters.contracts.filter((contract) => {return contract.stage <= stage && !this.state.finishedContracts.includes(contract.id)});
+  }
+
+  startContract(contract) {
+    this.setState({
+      contractInProgress: true,
+      currentContract: contract,
+    });
+  }
+  onContractSuccess() {
+    let newFinishedContracts = this.state.finishedContracts;
+    newFinishedContracts.push(this.state.currentContract.id)
+    this.setState({
+      contractInProgress: false,
+      currentContract: {},
+      finishedContracts: newFinishedContracts
+    });
+  }
+  onContractFail() {
+    let infoText = this.state.currentContract.fail;
+    this.setState({
+      contractInProgress: false,
+      currentContract: {},
+      currentInfoText: infoText,
+    });
+  }
+
   setParagraph(paragraph = (this.state.currentParagraph + 1)) {
     this.setState({
       currentParagraph: paragraph
@@ -42,6 +80,7 @@ export class App extends Component {
   setChapter(chapter = (this.state.currentChapter + 1)) {
     this.setParagraph(0);
     this.setState({
+      contractInProgress:false,
       currentChapter: chapter
     });
   }
@@ -50,10 +89,10 @@ export class App extends Component {
     this.setState(this.getDefaultState());
   }
   storeState() {
-    window.localStorage.setItem('state', JSON.stringify(this.state));
+    window.localStorage.setItem("state", JSON.stringify(this.state));
   }
   recoverState() {
-    let savedState = window.localStorage.getItem('state');
+    let savedState = window.localStorage.getItem("state");
     if (savedState === null) {
       return this.getDefaultState();
     } else {
@@ -72,14 +111,29 @@ export class App extends Component {
           <h1>{chapter.title}</h1>
           <TabView showControls={true}>
             <ContractsTab
-              contracts={chapter.contracts}
+              contracts={this.availableContracts(this.state.currentStade)}
+              onStartContract={this.startContract}
             ></ContractsTab>
             <TabContent>Your den</TabContent>
           </TabView>
           </>
         )}
-      <button onClick={this.resetState} style={{ "fontSize": "x-small", "position": "absolute", "bottom": "0" }}>Reset state</button>
-        <Modal active={false}><BattleComponent></BattleComponent></Modal>
+        <button
+          onClick={this.resetState}
+          style={{ fontSize: "x-small", position: "absolute", bottom: "0" }}
+        >
+          Reset state
+        </button>
+        <Modal active={this.state.contractInProgress}>
+          <h1>{this.state.currentContract.title}</h1>
+          <BattleComponent
+            textEnnemy={this.state.currentContract.ennemy}
+            onSuccess={this.onContractSuccess}
+            onFail={this.onContractFail}
+            health={this.state.currentContract.health}
+            time={this.state.currentContract.time}
+          ></BattleComponent>
+        </Modal>
       </div>
     );
   }

src/BattleComponent.js

@@ -18,10 +18,12 @@ export class BattleComponent extends Component {
   }
 
   render() {
+    let health = this.props.health?this.props.health:10;
+    let time = this.props.time?this.props.time:30;
     return (
       <div className={styles.battleComponent}>
-        <HoverComponent style={{"flex-grow":1}} text={this.props.text} target={this.props.health} onFinished={()=>{this.onFinished(this.props.onSuccess)}}/>
-        <TimerComponent onFinished={()=>{this.onFinished(this.props.onFail)}} target={this.props.time}/>
+        <HoverComponent style={{"flex-grow":1}} text={this.props.text} target={health} onFinished={()=>{this.onFinished(this.props.onSuccess)}}/>
+        <TimerComponent text={this.props.textEnnemy} onFinished={()=>{this.onFinished(this.props.onFail)}} target={time}/>
       </div>
     );
   }

src/Contracts/ContractsTab.js

@@ -1,16 +1,28 @@
 import React, { Component } from "react";
 import TabContent from "../Tabs/TabContent";
+import styles from "./ContractsTab.module.css";
 
 export class ContractsTab extends Component {
   render() {
     return (
       <TabContent>
-        {this.props.contracts.map((contract) => (
-          <div>
-            <h3>{contract.title}</h3>
-            <p>{contract.contents}</p>
-          </div>
-        ))}
+        <div className={styles.Contracts}>
+          {this.props.contracts.map((contract, i) => (
+            <div key={contract + i} className={styles.Contract}>
+              <h3>{contract.title}</h3>
+              <p>{contract.note.contents}</p>
+              <p className={styles.Signature}>{contract.note.author}</p>
+              <button
+                className={styles.StartButton}
+                onClick={() => {
+                  this.props.onStartContract(contract);
+                }}
+              >
+                Start contract
+              </button>
+            </div>
+          ))}
+        </div>
       </TabContent>
     );
   }

src/Contracts/ContractsTab.module.css

@@ -0,0 +1,79 @@
+.Contracts {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: center;
+}
+
+.Contract {
+  max-width: 50%;
+  min-width: 20%;
+  border: 1px solid #232934;
+  border-radius: 3px;
+  flex: 0 0;
+  margin: 20px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+.Contract:hover {
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
+.Contract h3{
+  font-family: 'Caveat', cursive;
+  font-weight: bold;
+}
+.Contract p{
+  font-family: 'Caveat', cursive;
+  text-align: justify;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');
+.Contract .Signature{
+  margin-top: 3em;
+  font-family: 'Homemade Apple', cursive;
+  text-align: right;
+  font-size: 0.8em;
+}
+
+.StartButton {  
+  margin: 0 1em;
+  padding: 0.25em 1em;
+  width: auto;
+  overflow: visible;
+
+  /* inherit font & color from ancestor */
+  color: inherit;
+  font: inherit;
+
+  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+  line-height: normal;
+
+  /* Corrects font smoothing for webkit */
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+
+  /* Corrects inability to style clickable `input` types in iOS */
+  -webkit-appearance: none;
+
+  border: 2px solid #51b7e6;
+  background: transparent;
+  border-radius: 3px;
+
+  transition: background-color 0.4s ease-out;
+}
+
+/* Remove excess padding and border in Firefox 4+ */
+.StartButton::-moz-focus-inner {
+    margin: 0 1em;
+    padding: 0.25em 1em;
+}
+
+.StartButton:hover{
+  background: #232934;
+}

src/gameContent.js

@@ -10,11 +10,11 @@ export default  [
         hideTitle: true
       },
       {
-        info: "You see a unusually long and heavy sword lying next to you.",
+        info: "You see an unusually long and heavy sword lying next to you.",
         button: "Pick up the sword"
       },
       {
-        info: "As you pick it up, you notice from the corner of your eye a wounded boar charging at you.",
+        info: "As you pick it up, you notice a wounded boar charging at you from the corner of the eye.",
         button: "Swing your sword at it",
         battle: {
           health: 10,
@@ -26,18 +26,56 @@ export default  [
         button: "Take refuge in the cave"
       },
       {
-        info: "You found refuge in the cave.",
+        info: "You find refuge in the cave.",
         button: "Drift into a deep slumber"
       },
       {
-        info: "On waking up your body is still aching all over. You find a note thanking you for defeating the boar, along with a nice round coin.",
+        info: "On waking up your body is still aching all over. You are lying on a makeshift bed made of ferns and twigs, and some kind of ointment has been spread on your wounds. You find a note by your side.",
         button: "Read the note"
       }
     ]
   },
   {
     type: "adventure",
     title: "Beginning of an empire",
-    contracts: [{ title: "thanks for the boar", contents: "thanks." },{ title: "thanks for the boar", contents: "thanks." }],
+    contracts: [
+      {
+        id: 1,
+        title: "Thanks for the boar",
+        note: {
+          author: "Thomas, the innkeeper",
+          contents: "Hey there, thanks for taking care of that boar! You managed to kill it, but looking at you I could tell you had it rough. With all those wars, I guess no one has time to get rid of the bloody things before they get that big. Oh well. I found the boar lying dead in a nearby clearing and you in this cave. I can't be bothered with strangers these days, but I couldn't decently leave you in such a mess. I patched you up, stayed by your side until you recovered and got back to my inn. I took the boar in payment, if you don't mind. Anyway, if you find some more that you can handle, feel free to take care of them. You'll get enough coins to turn this cave into something decent in no time!",
+        },
+        ennemy: "A pack of wild piglets",
+        fail: "The pack of piglet trampled your body then disappeared in bushes. You managed to crawl back to your den.",
+        stage: 1,
+        health: 10,
+        time: 30,
+      },
+      {
+        id: 2,
+        title: "thanks for the boar2",
+        note: {
+          author: "The Innkeeper",
+          contents: "thanks.",
+        },
+        ennemy: "test",
+        stage: 2,
+        health: 10,
+        time: 30,
+      },
+      {
+        id: 3,
+        title: "thanks for the boar3",
+        note: {
+          contents: "thanks.",
+          author: "Gérald, the berserker",
+        },
+        ennemy: "test",
+        stage: 2,
+        health: 10,
+        time: 30,
+      },
+    ],
   }
 ]