<?php if( empty( $runningFileName ) ) die("Cannot access this page directly"); ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TTT2 Role Adder</title> <meta name="description" content="Add a new TTT2 Role"> <meta name="author" content="James"> <meta property="og:title" content="TTT2 Role Adder"> <meta property="og:type" content="website"> <meta property="og:url" content="https://ttt.james-things.com"> <meta property="og:description" content="All TTT2 Roles documented halfheartedly"> <meta property="og:image" content="https://e7.pngegg.com/pngimages/710/403/png-clipart-the-embodiment-of-scarlet-devil-team-shanghai-alice-video-game-banjo-tooie-mario-luigi-partners-in-time-marisa-logo-computer-wallpaper.png"> <link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!--MATERIALIZE--> <!--Import jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" /> <!--My Custom Stylesheet--> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="row"> <div class="col s6"> <div class="card-panel white"> <form method="post" action="/confirm.php"> <div class="row"> <div class="input-field col s3"> <input id="name" type="text" name="rolename" onkeyup="updateCard()"> <label for="name">Rolename</label> </div> <div class="input-field col s9"> <input id="description" type="text" name="roledesc" onkeyup="updateCard()"> <label for="description">Roledescription</label> </div> </div> <div class="row"> <div class="input-field col s3"> <select id="rolecolor" name="rolecolor" onchange="updateCard()"> <option value="" disabled selected>Color</option> <option value="red">Red</option> <option value="pink">Pink</option> <option value="purple">Purple</option> <option value="deep-purple">Deep-purple</option> <option value="indigo">Indigo</option> <option value="blue">Blue</option> <option value="light-blue">Light-blue</option> <option value="cyan">Cyan</option> <option value="teal">Teal</option> <option value="green">Green</option> <option value="light-green">Light-green</option> <option value="lime">Lime</option> <option value="yellow">Yellow</option> <option value="amber">Amber</option> <option value="orange">Orange</option> <option value="deep-orange">Deep-orange</option> <option value="brown">Brown</option> <option value="grey">Grey</option> <option value="blue-grey">Blue-grey</option> <option value="black">Black</option> <option value="white">White</option> <option value="transparent">Transparent</option> </select> <label>Select color</label> </div> <div class="input-field col s3"> <select id="modifier" name="rolemod" onchange="updateCard()"> <option value="" selected>None</option> <option value="lighten">Lighten</option> <option value="darken">Darken</option> <option value="accent">Accent</option> </select> <label>Select Modifier</label> </div> <div class="input-field col s3"> <select id="strength" name="rolestrength" onchange="updateCard()"> <option value="" selected>No Strength</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <label>Select Strength</label> </div> <div class="input-field col s3"> <select id="tcolor" name="tcolor" onchange="updateCard()"> <option value="" disabled selected>Textcolor</option> <option value="black-text">Black</option> <option value="white-text">White</option> </select> <label>Select Textcolor</label> </div> </div> <div class="row"> <div class="input-field col s12"> <textarea id="howtoplay" name="howtoplay" onkeyup="updateCard()" class="materialize-textarea"></textarea> <label for="howtoplay">Text to describe how to play</label> </div> </div> <div class="row"> <div class="input-field col s12"> <select id="goodRoles" name="goodRoles[]" onchange="updateCard()" multiple="multiple"> <option value="" disabled> Choose your option </option> <?php $files = glob("roles/en/*.php"); foreach ($files as $filename) { include $filename; $shortname = substr($filename, 9); $shortname = substr($shortname, 0, -4); echo "<option value=".ucfirst($shortname).">".ucfirst($shortname)."</option>"; } ?> </select> <label>Select good Roles that go with this role</label> </div> </div> <div class="row"> <div class="input-field col s6"> <textarea id="gconvars" name="gconvars" onkeyup="updateCard()" class="materialize-textarea"></textarea> <label for="convars">Paste your general convars</label> </div> <div class="input-field col s6"> <textarea id="cconvars" name="cconvars" onkeyup="updateCard()" class="materialize-textarea"></textarea> <label for="convars">Paste your role specific convars</label> </div> </div> <div class="row"> <div class="input-field col s6"> <input name="creator" id="creator" type="text" onkeyup="updateCard()"> <label for="creator">Steam Creator</label> </div> <div class="input-field col s6"> <input name="creatorurl" id="creatorurl" type="text" onkeyup="updateCard()"> <label for="creatorurl">Steeam Creator Link</label> </div> </div> <div class="row"> <div class="input-field col s12"> <textarea id="credits" name="credits" onkeyup="updateCard()" class="materialize-textarea"></textarea> <label for="credits">Drop your credits here!</label> </div> </div> <div class="row"> <div class="input-field col s6"> <input name="steam" id="steam" type="text" onkeyup="updateCard()"> <label for="steam">Steamlink</label> </div> <div class="input-field col s6"> <input name="source" id="source" type="text" onkeyup="updateCard()"> <label for="source">Sourcelink</label> </div> </div> <div class="row"> <div class="input-field col s9"> <select id="language" name="language"> <option value="en" selected>English</option> <option value="ch">Schwiizerdütsch</option> <option value="de">Deutsch</option> </select> </div> <button class="btn waves-effect waves-light col s3" type="submit" value="Submit" name="action">Submit <i class="material-icons right">send</i> </button> </div> </form> </div> </div> <!-- Cardpreview --> <div class="col s6"> <div class="blurry"> <div id="rolecard" class="card"> <div class="card-content"> <span class="card-title" id="cardname"></span> <p id="carddescription"></p> </div> <ul class="collapsible black-text white"> <li class="active"> <div class="collapsible-header"> <i class="material-icons">help_outline</i>How to Play </div> <div class="collapsible-body"> <pre id="thowtoplay">Soup</pre> </div> </li> <li> <div class="collapsible-header"> <i class="material-icons">check</i>Plays best with </div> <div class="collapsible-body"> <span> <ul id="tplaysbestwith"> </ul> </span> </div> </li> <li> <div class="collapsible-header"> <i class="material-icons">code</i>Convars </div> <div class="collapsible-body"> <pre>Normal Role Convars (also found in ULX): <code id="cvars"></code></pre> <pre>Rolespecific Convars: <code id="rcvars"></code></pre> </div> </li> <li> <div class="collapsible-header"> <i class="material-icons">whatshot</i>Credits </div> <div class="collapsible-body"> <span>Main Creator: <a id="authorurl" href="{AUTHORURL}">{AUTHORNAME}</a> <br> <pre id="tcredits"></pre> </span> </div> </li> <li> <div class="collapsible-header"> <i class="material-icons">link</i>Links </div> <div class="center collapsible-body"> <span> <a id="steamurl">Steam Workshop</a> <br> <a id="githuburl">Github Source</a> </div> </span> </li> </ul> </div> </div> </div> <!-- Updatescript --> <script> function updateCard() { updateName(); updateColor(); updateDescription(); updateGoodRoles(); updateHowToPlay(); updateCredits(); updateGCvars(); updateCCvars(); updateSteam(); updateSource(); } function updateName() { document.getElementById("cardname").innerHTML = document.getElementById("name").value; } function updateColor() { let color = document.getElementById('rolecolor'); let strength = document.getElementById("strength"); let modifier = document.getElementById("modifier"); let textcolor = document.getElementById("tcolor"); strength.removeAttribute('disabled'); modifier.removeAttribute('disabled'); if (color.value === "transparent" || color.value === "black" || color.value === "white") { modifier.value = ""; strength.value = ""; } else if (color.value === "brown" || color.value === "grey" || color.value === "blue-grey") { if (modifier.value === "accent") { modifier.value = ""; strength.value = ""; } } document.getElementById("rolecard").className = "card " + color.value + " " + modifier.value + "-" + strength.value + " " + textcolor.value; } function updateDescription() { document.getElementById("carddescription").innerHTML = document.getElementById("description").value; } function updateGoodRoles() { document.getElementById("tplaysbestwith").innerHTML = ""; var values = $('#goodRoles').val(); for (let index = 0; index < values.length; ++index) { const element = values[index]; var ul = document.getElementById("tplaysbestwith"); var li = document.createElement("li"); li.appendChild(document.createTextNode(element)); ul.appendChild(li); } } function updateHowToPlay() { document.getElementById("thowtoplay").innerHTML = document.getElementById("howtoplay").value; } function updateCredits() { document.getElementById("tcredits").innerHTML = document.getElementById("credits").value; } function updateGCvars() { document.getElementById("cvars").innerHTML = document.getElementById("gconvars").value; } function updateCCvars() { document.getElementById("rcvars").innerHTML = document.getElementById("cconvars").value; } function updateSteam() { document.getElementById("steamurl").setAttribute("href", document.getElementById("steam").value); } function updateSource() { document.getElementById("githuburl").setAttribute("href", document.getElementById("source").value); } </script> <script> $(document).ready(function() { $('select').formSelect(); $('.collapsible').collapsible(); M.updateTextFields(); }); </script> <!--JavaScript at end of body for optimized loading--> <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html>