Battler 2 Prototype

by Sam Fereday

HTML

<button id="start">
Start
</button>

<button id="pick">
Pick
</button>

<div class="ff7">
  <p>Attack</p>
  <p>Item</p>
</div>

SCSS

#pick {
  display: none;
}

body{
  background-color: black;
  background-image: url(http://i4.ytimg.com/vi/s1AtwwyxMKc/maxresdefault.jpg);
  background-repeat: no-repeat;
  background-position: -150px 0;
}

.ff7{
  border: solid 1px #424542;
  box-shadow: 1px 1px #e7dfe7,
              -1px -1px #e7dfe7,
              1px -1px #e7dfe7,
              -1px 1px #e7dfe7,
              0 -2px #9c9a9c,
              -2px 0 #7b757b,
              0 2px #424542;
  width: 128px;
  padding: 5px 10px;
  margin: 50px 50px;
  background: #04009d;
  background: linear-gradient(to bottom,  #04009d 0%,#06004d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04009d', endColorstr='#06004d',GradientType=0 );
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

.ff7 *{
  color: #eff1ff;
  text-shadow: 2px 2px #212421,
               1px 1px #212021;
  font-family: Verdana, sans-serif;
  font-size: 20px;
  font-weight: normal;
  margin: 5px 0;
}

.ff7 p {
  cursor: pointer;
}

.ff7 p:hover {
  text-decoration: underline;
}

JavaScript

/// A lot of this is an older way of looking at things. It's entirely possible that a reducer
/// may be able to handle a lot of the below! Have a look in to it. This method would translate 
/// to c#, but not sure how easily a reducer might.
console.clear();
const startButton = document.getElementById('start');

/// Helpers
const CalcOut = (stat, modifier) => {
  return stat * modified;
}

/// Data / Flow Data
const MELEE = 0;

// Moves and abilities
const PlayerStats = {
  str: 1
};

const PlayerAbilities = [{
  name: 'Attack',
  type: MELEE
}];

// Turn states (put what you like in these, I'm not fussed if these hold state to be honest).
class ManualChoice {
  constructor() {
    this.isComplete = false;
    this.picker = document.getElementById('pick');
    this.picker.style.display = 'none';
    this.picker.addEventListener('click', () => {
      this.isComplete = true;
      this.picker.style.display = 'none';
    });
  }

  enter(params, onComplete) {
    console.log("Entered manual choice state...");
    this.isComplete = false;
    this.picker.style.display = 'block';
  }

  update() {
    //console.log("Waiting for input...");
  }

  exit() {
    console.log("State exited manual choice...");
  }
}

class ChoiceState {
  constructor() {
    this.isComplete = false;
  }

  enter(params, onComplete) {
    console.log("Entered choice state...");
    this.isComplete = false;
    setTimeout(() => {
      this.isComplete = true;
    }, 1000);
  }

  update() {
    //console.log("Choice state tick...");
  }

  exit() {
    console.log("State exited choice...");
  }
}

class ActionState {
  constructor() {
    this.isComplete = false;
  }

  enter(params) {
    console.log("Entered action state...");
    this.isComplete = false;
    setTimeout(() => {
      this.isComplete = true;
    }, 1000);
  }

  update() {
    //console.log("Action state tick...");
  }

  exit() {
    console.log("State exited action...");
  }
}

// State groupings (run on turn, move,...