2022-03-31 08:37:05 +00:00
|
|
|
<!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">
|
2022-03-31 11:32:09 +00:00
|
|
|
<form>
|
2022-03-31 08:37:05 +00:00
|
|
|
<div class="row">
|
|
|
|
|
<div class="input-field col s3">
|
2022-03-31 11:36:01 +00:00
|
|
|
<input id="name" type="text" onkeyup="updateCard()">
|
2022-03-31 08:37:05 +00:00
|
|
|
<label for="name">Rolename</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-field col s9">
|
2022-03-31 11:36:01 +00:00
|
|
|
<input id="description" type="text" onkeyup="updateCard()">
|
2022-03-31 08:37:05 +00:00
|
|
|
<label for="description">Roledescription</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="input-field col s3">
|
2022-03-31 11:37:14 +00:00
|
|
|
<select id="rolecolor" onchange="updateCard()">
|
2022-03-31 08:37:05 +00:00
|
|
|
<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">
|
2022-03-31 11:37:14 +00:00
|
|
|
<select id="modifier" onchange="updateCard()">
|
2022-03-31 08:37:05 +00:00
|
|
|
<option value="" selected>None</option>
|
2022-03-31 10:41:40 +00:00
|
|
|
<option value="lighten">Lighten</option>
|
|
|
|
|
<option value="darken">Darken</option>
|
|
|
|
|
<option value="accent">Accent</option>
|
2022-03-31 08:37:05 +00:00
|
|
|
</select>
|
|
|
|
|
<label>Select Modifier</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-field col s3">
|
2022-03-31 11:37:14 +00:00
|
|
|
<select id="strength" onchange="updateCard()">
|
2022-03-31 10:41:40 +00:00
|
|
|
<option value="" selected>No Strength</option>
|
2022-03-31 08:37:05 +00:00
|
|
|
<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">
|
2022-03-31 11:37:14 +00:00
|
|
|
<select id="tcolor" onchange="updateCard()">
|
2022-03-31 08:37:05 +00:00
|
|
|
<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">
|
2022-03-31 11:36:01 +00:00
|
|
|
<textarea id="howtoplay" onkeyup="updateCard()" class="materialize-textarea"></textarea>
|
2022-03-31 08:37:05 +00:00
|
|
|
<label for="howtoplay">Text to describe how to play</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="input-field col s12">
|
2022-03-31 12:15:08 +00:00
|
|
|
<select id="goodRoles" onchange="updateCard()" multiple>
|
2022-03-31 08:37:05 +00:00
|
|
|
<option value="" disabled> Choose your option </option>
|
|
|
|
|
<?php
|
|
|
|
|
$files = glob("roles/en/*.php");
|
|
|
|
|
$count = 1;
|
|
|
|
|
|
|
|
|
|
foreach ($files as $filename) {
|
|
|
|
|
include $filename;
|
|
|
|
|
|
|
|
|
|
$shortname = substr($filename, 9);
|
|
|
|
|
$shortname = substr($shortname, 0, -4);
|
|
|
|
|
echo "<option value=".$count.">".ucfirst($shortname)."</option>";
|
|
|
|
|
$count++;
|
|
|
|
|
}
|
|
|
|
|
?>
|
|
|
|
|
</select>
|
|
|
|
|
<label>Select good Roles that go with this role</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="input-field col s12">
|
|
|
|
|
<textarea id="credits" class="materialize-textarea"></textarea>
|
|
|
|
|
<label for="credits">Drop your credits here!</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="input-field col s6">
|
|
|
|
|
<textarea id="gconvars" class="materialize-textarea"></textarea>
|
|
|
|
|
<label for="convars">Paste your general convars</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-field col s6">
|
|
|
|
|
<textarea id="cconvars" class="materialize-textarea"></textarea>
|
|
|
|
|
<label for="convars">Paste your role specific convars</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
<button class="btn waves-effect waves-light" type="submit" name="action">Submit <i class="material-icons right">send</i>
|
|
|
|
|
</button>
|
|
|
|
|
</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">
|
2022-03-31 11:01:07 +00:00
|
|
|
<pre>Normal Role Convars (also found in ULX):
|
|
|
|
|
<code id="cvars"></code></pre>
|
|
|
|
|
<pre>Rolespecific Convars:
|
2022-03-31 08:37:05 +00:00
|
|
|
<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="credits"></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" href="">Steam Workshop</a>
|
|
|
|
|
<br>
|
|
|
|
|
<a id="githuburl" href="">Github Source</a>
|
|
|
|
|
</div>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-03-31 08:58:15 +00:00
|
|
|
|
2022-03-31 08:37:05 +00:00
|
|
|
<!-- Updatescript -->
|
|
|
|
|
<script>
|
2022-03-31 11:01:07 +00:00
|
|
|
function updateCard() {
|
|
|
|
|
updateName();
|
|
|
|
|
updateColor();
|
|
|
|
|
updateDescription();
|
|
|
|
|
updateHowToPlay();
|
2022-03-31 12:04:48 +00:00
|
|
|
updateGoodRoles();
|
2022-03-31 11:01:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2022-03-31 08:37:05 +00:00
|
|
|
function updateName() {
|
2022-03-31 11:01:07 +00:00
|
|
|
document.getElementById("cardname").innerHTML = document.getElementById("name").value;
|
2022-03-31 08:37:05 +00:00
|
|
|
}
|
2022-03-31 08:54:42 +00:00
|
|
|
|
2022-03-31 08:37:05 +00:00
|
|
|
function updateHowToPlay() {
|
2022-03-31 11:01:07 +00:00
|
|
|
document.getElementById("thowtoplay").innerHTML = document.getElementById("howtoplay").value;
|
2022-03-31 08:37:05 +00:00
|
|
|
}
|
2022-03-31 11:01:07 +00:00
|
|
|
|
2022-03-31 08:58:15 +00:00
|
|
|
function updateGoodRoles() {
|
2022-03-31 12:15:08 +00:00
|
|
|
let goodRoles = document.getElementById('goodRoles').value;
|
2022-03-31 12:08:28 +00:00
|
|
|
goodRoles.forEach((element) => document.getElementById("tplaysbestwith").appendchild(document.createElement("LI").appendchild(document.createTextNode(element))));
|
2022-03-31 08:58:15 +00:00
|
|
|
}
|
2022-03-31 12:04:48 +00:00
|
|
|
|
2022-03-31 08:37:05 +00:00
|
|
|
function updateDescription() {
|
2022-03-31 11:01:07 +00:00
|
|
|
document.getElementById("carddescription").innerHTML = document.getElementById("description").value;
|
2022-03-31 08:37:05 +00:00
|
|
|
}
|
2022-03-31 11:01:07 +00:00
|
|
|
|
2022-03-31 08:37:05 +00:00
|
|
|
function updateColor() {
|
2022-03-31 09:10:40 +00:00
|
|
|
|
2022-03-31 11:01:07 +00:00
|
|
|
let color = document.getElementById('rolecolor');
|
2022-03-31 11:20:11 +00:00
|
|
|
let strength = document.getElementById("strength");
|
2022-03-31 10:49:28 +00:00
|
|
|
let modifier = document.getElementById("modifier");
|
|
|
|
|
let textcolor = document.getElementById("tcolor");
|
|
|
|
|
|
|
|
|
|
|
2022-03-31 10:38:22 +00:00
|
|
|
strength.removeAttribute('disabled');
|
|
|
|
|
modifier.removeAttribute('disabled');
|
2022-03-31 09:10:40 +00:00
|
|
|
|
2022-03-31 10:49:28 +00:00
|
|
|
if (color.value === "transparent" || color.value === "black" || color.value === "white") {
|
2022-03-31 11:01:07 +00:00
|
|
|
modifier.value = "";
|
2022-03-31 10:38:22 +00:00
|
|
|
strength.value = "";
|
2022-03-31 09:13:48 +00:00
|
|
|
|
2022-03-31 10:49:28 +00:00
|
|
|
} else if (color.value === "brown" || color.value === "grey" || color.value === "blue-grey") {
|
2022-03-31 09:10:40 +00:00
|
|
|
|
2022-03-31 10:49:28 +00:00
|
|
|
if (modifier.value === "accent") {
|
2022-03-31 10:38:22 +00:00
|
|
|
modifier.value = "";
|
|
|
|
|
strength.value = "";
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-03-31 11:26:33 +00:00
|
|
|
document.getElementById("rolecard").className = "card " + color.value + " " + modifier.value + "-" + strength.value + " " + textcolor.value;
|
2022-03-31 08:37:05 +00:00
|
|
|
}
|
2022-03-31 10:49:28 +00:00
|
|
|
|
2022-03-31 08:37:05 +00:00
|
|
|
</script>
|
2022-03-31 11:01:07 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2022-03-31 08:37:05 +00:00
|
|
|
<!-- Start Tab init -->
|
|
|
|
|
<script>
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
$('select').formSelect();
|
|
|
|
|
$('.collapsible').collapsible();
|
|
|
|
|
M.updateTextFields();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<!-- End Tab init -->
|
|
|
|
|
<!--JavaScript at end of body for optimized loading-->
|
|
|
|
|
<script type="text/javascript" src="js/materialize.min.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
