campfire story editor JS App

A visualization for editing Campfire JavaScript stories

by falldeaf

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="container">
  <div class="container room">
  
  <ul class="list-group list-group-horizontal">
    <li class="list-group-item">
    
      Room
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text addmedia addroom" id="btnGroupAddon"><i class="fas fa-person-booth"></i></div>
        </div>
        <input type="text" class="form-control" placeholder="Room Url" aria-label="Room Url" aria-describedby="btnGroupAddon">
      </div>
    
      Stage 1
      <div class="action_item_stage">
        <div class="action_item_marker" style="top:80%; left:70%;">1</div>
        <div class="action_item_marker" style="top:20%; left:30%;">2</div>
      </div>
      
      Stage 2
      <div class="action_item_stage">
        <div class="action_item_marker" style="top:80%; left:50%;">3</div>
      </div>
      
    </li>
    <li class="list-group-item">
      Room Options
      <form>
        <div class="form-group">
          <label for="exampleFormControlInput1">Room Name</label>
          <input type="email" class="form-control" id="room_option_form" placeholder="Kitchen">
        </div>
          
        <div class="form-group">
          <label for="exampleFormControlTextarea1">Room Description</label>
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
       ...

CSS

.action_item_stage {
  width: 300px;
  height: 150px;
  border: 1px dotted grey;
  position: relative;
}

.action_item_marker {
  margin: 0;
  padding-top: -2px;
  text-align: center;
  width: 25px;
  height: 25px;
  border-radius: 25px;
  border: 5px solid grey;
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: move;
}

JavaScript

var story = {
  "vrsid": "story2",
  "name": "Vero Beach Centennial",
  "headline_data": {
    "headline": "Vero Beach Centennial",
    "font": "Arial",
    "color": "ff0000",
    "dividercolor": "FFFFFF",
    "fontsize": 2.7,
    "shiftx": 0,
    "shifty": 0,
    "shiftz": 0
  },
  "brief": "Coverage of the year long Vero Beach Centennial celebration",
  "creation_date": 1535048562,
  "publish_date": 1535048562,
  "updated_date": 1535048562,
  "status": "published",
  "category": "Crime",
  "tags": "brandyhall, murderonthespacecoast",
  "image": "",
  "thumbnail": "https://www.tcpalmextras.com/campfire/assets/images/verocent-thumb.jpg",
  "sound_style": "subdued",
  "rooms": [
    {
      "name": "Vero Beach Centennial",
      "description": "Vero Beach is celebrating it's 100th year since it's founding!",
      "asset_name": "verobeachcentennial1",
      "time_of_day": 0,
      "flashlight": false,
      "reverb": 1,
      "music": "https://www.tcpalmextras.com/campfire/assets/audio/bhmt.ogg",
      "tv": false,
      "action_items": [
        {
          "name": "Vero Beach Press Journal",
          "description": "Adam Neal introduces the Vero Beach Centennial VR experience",
          "color": "#ff1e1e",
          "icon": "video",
          "surface": "table",
          "x": 0.4,
          "y": 0.4,
          "asset_name": "theatersign",
          "actions": [
            {
              "action": "video360",
              "url": "https://media.gannett-cdn.com/38321750001/38321750001_6001786488001_6001784874001.mp4",
              "delay": 0
            },
            {
              "action": "image",
              "url": "https://www.tcpalmextras.com/campfire/assets/images/1stoldphoto.png",
              "effect": "kenburns3",
              "horizontal_angle": -45,
              "delay": 9,
              "lifetime": 8
            },
            {
              "action": "object",
              "asset_name": "modelt",
              "delay": 15,
            ...