mirror of
https://github.com/FAUSheppy/is-it-the-junglers-fault
synced 2025-12-09 15:38:31 +01:00
implement basic functionality
This commit is contained in:
Yannik Schmidt
152
src/App.js
152
src/App.js
@@ -1,21 +1,151 @@
|
||||
import React from 'react';
|
||||
import './App.css';
|
||||
|
||||
function buttonsForState(state){
|
||||
return (
|
||||
<button>Test</button>
|
||||
);
|
||||
var text00 = "So you just died in your lane, let's fine out if it was the jungler's fault."
|
||||
var text01 = "Was the enemy jungler involved in your death?"
|
||||
var text02 = "Did you see the enemy jungler walking over a ward and you didn't see or ignored it?"
|
||||
var text03 = "Did you have a ward?"
|
||||
var text04 = "Was the enemy lane playing suspeciously before the gank?"
|
||||
var text05 = "Were you standing in an uncomfortable position that made a gank easy?"
|
||||
var text06 = "Do you have a scaling/farming jungle like shyyvanna ok a jungler that generally doesn't before hitting a certain level like nocture?"
|
||||
var text07 = "Did you get dove?"
|
||||
var text08 = "Did you ping for help before getting dove and your jungler ignored it?"
|
||||
var text09 = "Did your jungler make a cross map play or get an objective?"
|
||||
var text10 = "Do you want to win your game?"
|
||||
var answer01 = "No IT WAS YOUR FUCKING FAULT, grow the fuck up stop blaming your teammates"
|
||||
var answer02 = "Yes IT WAS YOUR FUCKING fault, watch the goddamn minimap for fuck sake"
|
||||
var answer03 = "Yes IT WAS OYUR FUCKING fault, pay attention, stop autopilotion"
|
||||
var answer04 = "IT WAS YOUR FUCKING FAUL, study the fuck up on your shit wavemanagement"
|
||||
var answer05 = "If your jungler makes a crossmap play it is your fault if you die for it, either your death was worth it because the enemies didn't go to the objective or it was preventable because your could have left your tower but decided to greed for the wave."
|
||||
var answer06 = "It was probably the junglers fault. But remember nobody is perfect, sometimes junglers make mistakes, just like laners sometimes die in 1v1 or 2v2s, be kind to your jungler and try your best to win the game."
|
||||
var answer07 = "Flame the shit out of that trash and tell him to uninstall the game or play yuumi for the rest of his worthless life."
|
||||
var answer08 = "If you are in danger of being dove, it's your responsibility to inform your team you need help. It's not the junglers responsibility to know more about your lane-state than yourself."
|
||||
var answer09 = "Stay at your goddamn tower. Stop blaming the jungler."
|
||||
var answer10 = "If you want to push, you have to ward, if you don't have a ward, you can't push. It's not the junglers fault you died."
|
||||
|
||||
class MainDialog extends React.Component{
|
||||
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.stateMap = new Map()
|
||||
this.stateMap.set("start", { "type" : "q", "text" : text00, "yes" : "j_involved", "no" : null })
|
||||
this.stateMap.set("j_involved", { "type" : "q", "text" : text01, "yes" : "j_was_seen", "no" : "a_grow_up" })
|
||||
this.stateMap.set("j_was_seen", { "type" : "q", "text" : text02, "yes" : "a_minimap", "no" : "s_had_ward" })
|
||||
this.stateMap.set("s_had_ward", { "type" : "q", "text" : text03, "yes" : "e_playstyle", "no" : "a_p_ward" })
|
||||
this.stateMap.set("e_playstyle", { "type" : "q", "text" : text04, "yes" : "a_autopilot", "no" : "s_bad_pos" })
|
||||
this.stateMap.set("s_bad_pos", { "type" : "q", "text" : text05, "yes" : "a_waves", "no" : "j_scaling" })
|
||||
this.stateMap.set("j_scaling", { "type" : "q", "text" : text06, "yes" : "s_got_dove", "no" : "j_cross_map" })
|
||||
this.stateMap.set("s_got_dove", { "type" : "q", "text" : text07, "yes" : "s_pinged", "no" : "a_play_def" })
|
||||
this.stateMap.set("s_pinged", { "type" : "q", "text" : text08, "yes" : "s_win_game", "no" : "a_ping_help" })
|
||||
this.stateMap.set("j_cross_map", { "type" : "q", "text" : text09, "yes" : "a_awareness", "no" : "s_got_dove" })
|
||||
this.stateMap.set("s_win_game", { "type" : "q", "text" : text10, "yes" : "a_jungler", "no" : "a_flame" })
|
||||
|
||||
this.stateMap.set("a_grow_up", { "type" : "a", "text" : answer01 })
|
||||
this.stateMap.set("a_minimap", { "type" : "a", "text" : answer02 })
|
||||
this.stateMap.set("a_autopilot", { "type" : "a", "text" : answer03 })
|
||||
this.stateMap.set("a_waves", { "type" : "a", "text" : answer04 })
|
||||
this.stateMap.set("a_crossmap", { "type" : "a", "text" : answer05 })
|
||||
this.stateMap.set("a_jungler", { "type" : "a", "text" : answer06 })
|
||||
this.stateMap.set("a_flame", { "type" : "a", "text" : answer07 })
|
||||
this.stateMap.set("a_ping_help", { "type" : "a", "text" : answer08 })
|
||||
this.stateMap.set("a_play_def", { "type" : "a", "text" : answer09 })
|
||||
this.stateMap.set("a_p_ward", { "type" : "a", "text" : answer10 })
|
||||
this.state = this.stateMap.get("start")
|
||||
|
||||
this.updateStateYes = this.updateStateYes.bind(this);
|
||||
this.updateStateNo = this.updateStateNo.bind(this);
|
||||
this.updateStateReset = this.updateStateReset.bind(this);
|
||||
}
|
||||
|
||||
function Dialog(state) {
|
||||
updateStateYes(){
|
||||
this.setState(this.stateMap.get(this.state["yes"]))
|
||||
}
|
||||
|
||||
updateStateNo(){
|
||||
this.setState(this.stateMap.get(this.state["no"]))
|
||||
}
|
||||
|
||||
updateStateReset(){
|
||||
this.setState(this.stateMap.get("start"))
|
||||
}
|
||||
|
||||
buttonsForState(){
|
||||
if(this.state["type"] === "a"){
|
||||
return (
|
||||
<div className="container">
|
||||
<header>
|
||||
"text for state logo"
|
||||
</header>
|
||||
{buttonsForState(state)}
|
||||
<React.Fragment>
|
||||
<button className="btn-secondary yes button-big pl-5 pr-5" onClick={this.updateStateReset}>Return
|
||||
</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
}else if(this.state["no"] == null){
|
||||
return (
|
||||
<React.Fragment>
|
||||
<button className="btn-secondary yes button-big pl-5 pr-5" onClick={this.updateStateYes}>Ok</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
}else{
|
||||
return (
|
||||
<React.Fragment>
|
||||
<button className="btn-secondary yes pl-5 pr-5 m-5 button-big" onClick={this.updateStateYes}>Yes</button>
|
||||
<button className="btn-secondary no pl-5 pr-5 m-5 button-big" onClick={this.updateStateNo}>No</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
navbar(){
|
||||
return (
|
||||
<React.Fragment>
|
||||
<nav className="navbar navbar-expand-md navbar-dark bg-dark fake placeholder"></nav>
|
||||
<nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark" id="navbar">
|
||||
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-primary"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbar-primary">
|
||||
<ul className="navbar-nav mr-auto">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="https://github.com/FAUSheppy">My Github</a>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="https://atlantishq.de/impressum">Legal</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="navbar-nav right">
|
||||
<li className="nav-item">
|
||||
<a className="navbar-brand hover-to-75" href="https://www.buymeacoffee.com/sheppy">
|
||||
<img alt="Buy me a coffee" className="navbar-image" src='https://media.atlantishq.de/buymeacoffee.png'>
|
||||
</img>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dialog;
|
||||
footer(){
|
||||
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<React.Fragment>
|
||||
{this.navbar()}
|
||||
<div className="spacer"></div>
|
||||
<div className="container mt-5 main">
|
||||
<div className="main-text">
|
||||
{this.state["text"]}
|
||||
</div>
|
||||
<div className="spacer"></div>
|
||||
{this.buttonsForState()}
|
||||
</div>
|
||||
<div className="spacer"></div>
|
||||
{this.footer()}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MainDialog
|
||||
|
||||
@@ -5,9 +5,48 @@ body {
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: darkgray;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
.main{
|
||||
background-color: #eae9e9;
|
||||
border-radius: 1vw;
|
||||
padding: 1vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button-big{
|
||||
font-size: 4vw;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
.yes{
|
||||
background-color: darkgreen;
|
||||
}
|
||||
|
||||
.no{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.main-text{
|
||||
font-size: 3vw;
|
||||
margin-top: 1vw;
|
||||
}
|
||||
|
||||
.spacer{
|
||||
padding: 2vw;
|
||||
}
|
||||
|
||||
.navbar-image{
|
||||
max-height: 2rem;
|
||||
}
|
||||
|
||||
.btn-secondary:active:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import 'bootstrap/dist/js/bootstrap.js';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import MainDialog from './App';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<MainDialog />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user