James/TTT_Role_Overview
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: James:c159ed0f650f7581afff111b84e904e3191528b8
Branches Tags
James:main
...
compare: James:4a7b238a1bea6d4234749cff6d890f4ad302e928
Branches Tags
James:main

4 Commits
c159ed0f65 ... 4a7b238a1b

Author SHA1 Message Date
James
4a7b238a1b Update create.php 2022-04-01 00:06:29 +02:00
James
77cc6f6d8d made the class selector work 2022-03-31 22:10:19 +02:00
James
6baec85d3e added style for Cookies 2022-03-31 22:10:05 +02:00
James
3dfaecca41 Coookiiiiieeeesss 
added a cookie that saves, if you have seen the menu animation before
 2022-03-31 22:09:49 +02:00
4 changed files with 179 additions and 30 deletions
Show Stats Expand all files Collapse all files

71
cookies.php Normal file
View File

@ -0,0 +1,71 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TTT2 Role Overview</title>
<meta name="description" content="All TTT2 Roles halfheartedly documented">
<meta name="author" content="James">
<meta property="og:title" content="TTT2 Role Overview">
<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="container center_all_things">
<div class="row">
<div class="col s12">
<div class="blurry">
<div class="card red darken-5 white-text">
<div class="card-content">
<span class="card-title" id="accomplice">Cookie Information</span>
<p>The legal stuff I need to write.</p>
</div>
<ul class="collapsible black-text white">
<li class="active">
<div class="collapsible-header" tabindex="0"><i class="material-icons">help_outline</i>Cooookieeees....</div>
<div class="collapsible-body" style="display: block;">
<pre>
Look dude. I have to warn you that we use cookies.
Like we use one.
Literally the only cookie on this page (not even this, but the one before) is "loaded" and it has the value "true"
Also we already saved it on your device and deleted it as you clicked the button to get to this page... soooo... yeah..
Youre warned about cookies now.
Also if you are reading this on mobile and get triggered that this box is not "100% responsive", then... I dunno, just ignore it.
If you want to you can send me a ticket.
</pre>
</div>
</li>
</div>
</div>
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

85
create.php
View File

@ -108,36 +108,44 @@
<option value="" disabled> Choose your option </option> <option value="" disabled> Choose your option </option>
<?php <?php
$files = glob("roles/en/*.php"); $files = glob("roles/en/*.php");
$count = 1;
foreach ($files as $filename) { foreach ($files as $filename) {
include $filename; include $filename;
$shortname = substr($filename, 9); $shortname = substr($filename, 9);
$shortname = substr($shortname, 0, -4); $shortname = substr($shortname, 0, -4);
echo "<option value=".$count.">".ucfirst($shortname)."</option>"; echo "<option value=".ucfirst($shortname).">".ucfirst($shortname)."</option>";
$count++;
} }
?> ?>
</select> </select>
<label>Select good Roles that go with this role</label> <label>Select good Roles that go with this role</label>
</div> </div>
</div> </div>
<div class="row">
<div class="input-field col s6">
<textarea id="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" onkeyup="updateCard()" class="materialize-textarea"></textarea>
<label for="convars">Paste your role specific convars</label>
</div>
</div>
<div class="row"> <div class="row">
<div class="input-field col s12"> <div class="input-field col s12">
<textarea id="credits" class="materialize-textarea"></textarea> <textarea id="credits" onkeyup="updateCard()" class="materialize-textarea"></textarea>
<label for="credits">Drop your credits here!</label> <label for="credits">Drop your credits here!</label>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="input-field col s6"> <div class="input-field col s6">
<textarea id="gconvars" class="materialize-textarea"></textarea> <input id="steam" type="text" onkeyup="updateCard()">
<label for="convars">Paste your general convars</label> <label for="steam">Steamlink</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>
<div class="input-field col s6">
<input id="source" type="text" onkeyup="updateCard()">
<label for="source">Sourcelink</label>
</div>
</div> </div>
</form> </form>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit <i class="material-icons right">send</i> <button class="btn waves-effect waves-light" type="submit" name="action">Submit <i class="material-icons right">send</i>
@ -190,7 +198,7 @@
<div class="collapsible-body"> <div class="collapsible-body">
<span>Main Creator: <a id="authorurl" href="{AUTHORURL}">{AUTHORNAME}</a> <span>Main Creator: <a id="authorurl" href="{AUTHORURL}">{AUTHORNAME}</a>
<br> <br>
<pre id="credits"></pre> <pre id="tcredits"></pre>
</span> </span>
</div> </div>
</li> </li>
@ -217,30 +225,19 @@
updateName(); updateName();
updateColor(); updateColor();
updateDescription(); updateDescription();
updateHowToPlay();
updateGoodRoles(); updateGoodRoles();
updateHowToPlay();
updateCredits();
updateGCvars();
updateCCvars();
updateSteam();
updateSource();
} }
function updateName() { function updateName() {
document.getElementById("cardname").innerHTML = document.getElementById("name").value; document.getElementById("cardname").innerHTML = document.getElementById("name").value;
} }
function updateHowToPlay() {
document.getElementById("thowtoplay").innerHTML = document.getElementById("howtoplay").value;
}
function updateGoodRoles() {
let selected = document.querySelectorAll('#tplaysbestwith option:checked');
let goodRoles = Array.from(selected).map(el => el.value);
goodroles.forEach(element => console.log(element));
// goodRoles.forEach((element) => document.getElementById("tplaysbestwith").appendchild(document.createElement("LI").appendchild(document.createTextNode(element))));
}
function updateDescription() {
document.getElementById("carddescription").innerHTML = document.getElementById("description").value;
}
function updateColor() { function updateColor() {
let color = document.getElementById('rolecolor'); let color = document.getElementById('rolecolor');
@ -265,7 +262,39 @@
} }
document.getElementById("rolecard").className = "card " + color.value + " " + modifier.value + "-" + strength.value + " " + textcolor.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>

11
css/styles.css
View File

@ -32,7 +32,8 @@ body::-webkit-scrollbar-thumb {
} }
.blurry { .blurry {
backdrop-filter: blur(7px) !important; border-top-right-radius: 42px;
backdrop-filter: blur(7px) !important;
} }
.sidenav-overlay { .sidenav-overlay {
@ -66,3 +67,11 @@ pre code {
.background img { .background img {
width: 100%; width: 100%;
} }
.center_all_things {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

42
index.php
View File

@ -212,12 +212,52 @@
<!-- Start Tab init --> <!-- Start Tab init -->
<script> <script>
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function closeToasts() {
setCookie('loading','true', 1);
M.Toast.dismissAll()
}
function openCookies() {
location.href = "https://ttt.james-things.com/cookies.php";
}
$(document).ready(function(){ $(document).ready(function(){
$('.collapsible').collapsible(); $('.collapsible').collapsible();
// $('.tabs').tabs(); // $('.tabs').tabs();
$('.sidenav').sidenav(); $('.sidenav').sidenav();
$('.tap-target').tapTarget(); $('.tap-target').tapTarget();
$('.tap-target').tapTarget('open');
// Only show the Menu informer once
var x = getCookie('loading');
if (x) {} else {
$('.tap-target').tapTarget('open');
// Cookie warn
M.toast({html: "By using my page you accept our cookies! <button class='btn-flat waves-effect waves-light toast-action' onclick='closeToasts()'>I don't care</button> <button onclick='openCookies()' class='btn-flat waves-effect waves-light toast-action''>What cookies?</button>", displayLength: "9999999999999999999999999999999"})
}
}); });
</script> </script>
<!-- End Tab init --> <!-- End Tab init -->