User:SystemPatch/Builder

From 100% Orange Juice Wiki
Jump to: navigation, search
  • Copy and save code below into a blank HTML file
  • See Notes for additional info
<script type="text/javascript">
  function getUnit(){
    var chara = document.getElementById("character").value
    var color = document.getElementById("color").value
    var pose = document.getElementById("pose").value
    var hair = document.getElementById("hair").value
    var hat = document.getElementById("hat").value

    document.getElementById("unitImg").src = "units/" + chara + "_" + color + "_" + pose + ".png"
    document.getElementById("hairImg").src = "hairs/" + chara + "_" + hair + "_" + pose + ".png"
    document.getElementById("hatImg").src = "hats/" + chara + "_" + hat + "_" + pose + ".png"
  }

  function makeCanvas() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 256;
    canvas.height = 256;

    ctx.drawImage(document.getElementById('unitImg'), 0, 0);
    ctx.drawImage(document.getElementById('hairImg'), 0, 0);
    ctx.drawImage(document.getElementById('hatImg'), 0, 0);
  }
</script>


<div style="width:700px; Height:450px; border:4px solid #FFCF8A; margin: auto; -moz-border-radius: .7em; -webkit-border-radius: .7em; border-radius: .7em; background-color:#FFEDDC;">
  <h1 style="text-align:center; margin:auto;">OJ Character Builder pre-α</h1>
  <div style="position:relative; width:10em; height:16em; border:1px solid #FFEDDC;">
    <img id="hairImg" style="position:absolute; left:11em; top:2em; z-index:1;" onload="makeCanvas()" onError="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=';">
    <img id="hatImg" style="position:absolute; left:11em; top:2em; z-index:2;" onload="makeCanvas()" onError="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=';">
    <img id="unitImg" style="position:absolute; left:11em; top:2em;" onload="makeCanvas()" onError="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=';">
    <canvas id="canvas" style="position:absolute; left:-1em; top:2em;"></canvas>
    <select id="character" onchange="getUnit()" style="position:absolute; left:33em; top:6em;">
      <option selected="selected" value="poppo">Pick a character</option>
      <option value="alte">Alte</option>
      <option value="aru">Aru</option>
      <option value="arus">Aru (Scrambled)</option>
      <option value="ball">Robo Ball</option>
      <option value="bpoppo">Big Poppo</option>
      <option value="brobo">Shifu Robot</option>
      <option value="castle">Flying Castle</option>
      <option value="ceor">Ceoreparque</option>
      <option value="chicken">Chicken</option>
      <option value="fernet">Fernet</option>
      <option value="hime_00">Hime</option>
      <option value="hime_01">Hime (Winter)</option>
      <option value="kae">Kae</option>
      <option value="kai">Kai</option>
      <option value="kiriko">Kiriko</option>
      <option value="krila">Krila</option>
      <option value="ksuke">Kyousuke</option>
      <option value="kyoko">Kyoko</option>
      <option value="marc">Marc</option>
      <option value="master">Manager</option>
      <option value="mimyuu">Mimyuu</option>
      <option value="miusaki">Miusaki</option>
      <option value="nanako">Nanako</option>
      <option value="nath">Nath</option>
      <option value="non">NoName</option>
      <option value="npoppo">Poppo (Mixed)</option>
      <option value="peat">Peat</option>
      <option value="poppo">Poppo</option>
      <option value="qp">QP</option>
      <option value="qpd">QP (Dangerous)</option>
      <option value="saki">Saki</option>
      <option value="seagull">Seagull</option>
      <option value="seagullboss">Big the Jonathan</option>
      <option value="sham">Sham</option>
      <option value="sherry">Sherry</option>
      <option value="sora">Sora</option>
      <option value="sorasp">Sora (Military)</option>
      <option value="starb">Star Breaker</option>
      <option value="suguri_00">Suguri</option>
      <option value="suguri_01">Suguri (Winter)</option>
      <option value="sugurib">Suguri (Ver.2)</option>
      <option value="sweetb">Sweet Breaker</option>
      <option value="syura">Syura</option>
      <option value="tequila">Tequila</option>
      <option value="teq_minion">Pirate Crew Member</option>
      <option value="tmsw">Tomomo (Casual)</option>
      <option value="tomato">Tomato</option>
      <option value="tomomo">Tomomo</option>
      <option value="tsih">Tsih</option>
      <option value="yuki">Yuki</option>
      <option value="yukid">Yuki(Dangerous)</option>
    </select>
    <select id="color" onchange="getUnit()" style="position:absolute; left:33em; top:10em;">
      <option value="00">Default</option>
      <option value="01">Orange</option>
      <option value="02">Blue</option>
      <option value="03">Green</option>
      <option value="04">Yellow</option>
      <option value="05">Pink</option>
      <option value="06">Purple</option>
      <option value="07">Teal</option>
      <option value="08">Black</option>
      <option value="09">Rad Poppo</option>
      <option value="10">Halloween</option>
      <option value="11">Silver</option>
      <option value="12">Red/Blue</option>
      <option value="13">Dapper</option>
      <option value="14">Intense</option>
      <option value="15">X-Mas</option>
      <option value="16">Tux</option>
      <option value="17">Chocolate</option>
      <option value="18">School</option>
    </select>
    <select id="hair" onchange="getUnit()" style="position:absolute; left:33em; top:14em;">
      <option value="99">Default</option>
      <option value="00">Hair 01</option>
      <option value="01">Hair 02</option>
      <option value="02">Hair 03</option>
      <option value="03">Hair 04</option>
      <option value="04">Hair 05</option>
      <option value="05">Hair 06</option>
      <option value="06">Hair 07</option>
      <option value="07">Hair 08</option>
      <option value="08">Hair 09</option>
    </select>
    <select id="hat" onchange="getUnit()" style="position:absolute; left:33em; top:18em;">
      <option value="99">No Hat</option>
      <option value="00">X-Mas Hat</option>
      <option value="01">Brown Antlers</option>
      <option value="02">Red Antlers</option>
      <option value="03">Normal Crown</option>
      <option value="04">Extreme Crown</option>
      <option value="05">Pumpkin</option>
      <option value="06">Halloween 2016</option>
      <option value="07">Glasses</option>
      <option value="08">Sunglasses</option>
      <option value="09">Poppo Mask</option>
      <option value="10">Halloween 2017</option>
      <option value="11">Rein Outfit</option>
      <option value="12">QP Chef/Whistle/Summer 2018</option>
      <option value="13">QP Pudding Chef</option>
      <option value="14">QP Sweet God</option>
      <option value="15">QP New Year</option>
    </select>
    <select id="pose" onchange="getUnit()" style="position:absolute; left:33em; top:22em;">
      <option value="00">Pose 01</option>
      <option value="01">Pose 02</option>
      <option value="02">Pose 03</option>
      <option value="03">Pose 04</option>
      <option value="04">Pose 05</option>
      <option value="05">Pose 06</option>
      <option value="06">Pose 07</option>
      <option value="07">Pose 08</option>
      <option value="08">Pose 09</option>
      <option value="09">Pose 10</option>
      <option value="10">Pose 11</option>
      <option value="11">Pose 12</option>
    </select>
  </div>
</div>