Clemintine Posted August 5, 2021 Posted August 5, 2021 Looking for someone to make a generator for me, I own a site where we roll for litters and see what each one would look like, it would be amazing to have one auto roll everything for us. You would need to be able to list the mothers looks and the fathers looks, then roll to randomly determine how many pups are in the litter, their gender, looks, size..etc. Here is an example of what I am talking about just with different slots: I would like to have text fields that you can fill in and then it randomly picks instead of drop downs. These are the categories I want Body Size Build Ears Eye Color Nose/Pawpads Pelt Length Pelt Color Pelt markings Mutation I'll go into detail more if needed if someone is willing to take this on, I'm open to paying hourly but would prefer to just have a set payment for this job. ☺️ Quote
SRB Posted August 5, 2021 Posted August 5, 2021 (edited) The post doesn't state much detail with regards to what happens with the data; 1. Does the list save anywhere, or is this just so people can copy and paste the results for whatever reason this is needed? 2. From that picture, it makes me feel like it randomly (for each kitten) just picks between the options from the mothers and fathers details - is that correct? Or can random options be a result? 3. Does this have an admin panel for adding/removing options for each drop down, or do you have a pre-defined list? Re-read and saw text fields. Think that covers the questions that'll be needed to realistically build a picture of work needed 🙂 Edited August 5, 2021 by SRB Removed #3 Quote
PHPStudent Posted August 5, 2021 Posted August 5, 2021 doesn't even state which engine youre using Quote
SRB Posted August 5, 2021 Posted August 5, 2021 (edited) 13 minutes ago, PHPStudent said: doesn't even state which engine youre using I don't think it's needed - sounds pretty much standalone, unless the answers to my previous questions say otherwise. I'm in the process of building something (for free), just so I have an excuse to play around with TailwindCSS and AlpineJS just... because I wanna play with them. (All random results are currently static, obviously) Edited August 5, 2021 by SRB Fixed Links. 1 1 Quote
Clemintine Posted August 6, 2021 Author Posted August 6, 2021 1. It does not save its just for people to copy and paste, it is going to be a stand alone. 2. It just randomly picks between the mother and father That picture looks like basically what I'm asking for. Also would like for it to randomly pick if they are male or female and if its possible to list multiple pelt markings and randomly pick between all of the pelt markings that is listed. Quote
Veramys Posted August 9, 2021 Posted August 9, 2021 On 8/5/2021 at 5:12 PM, SRB said: I don't think it's needed - sounds pretty much standalone, unless the answers to my previous questions say otherwise. I'm in the process of building something (for free), just so I have an excuse to play around with TailwindCSS and AlpineJS just... because I wanna play with them. (All random results are currently static, obviously) I'm interested to see what you come up with. Never worked with tailwind or AlpineJS. Quote
Clemintine Posted August 18, 2021 Author Posted August 18, 2021 Just a little bump on this, haven't heard anything back wondering if its still being worked on or if anyone is interested. ☺️ 1 Quote
Sim Posted August 19, 2021 Posted August 19, 2021 Messaged me. I'll do for $20 and have for you within a day. I thought someone else was already working on it so I did not reply Quote
SRB Posted August 19, 2021 Posted August 19, 2021 The AlpineJS is where my confusion is. I'm so used to using jQuery, which will eventually die off as more JS front ends come along, and work is kicking my ass. The form is already done (using TailwindCSS): https://codepen.io/MrMarlow/pen/zYwyRRx If someone wants to wrap it up, the base is there - just needs to generate the list when clicking Randomize Quote
SwiftGameR Posted August 20, 2021 Posted August 20, 2021 On 8/5/2021 at 10:01 PM, PHPStudent said: doesn't even state which engine your using Might not be on a engine could be a pet website just because forum says gamemakers a lot of people come here for various work i think he wants a randomize the searches click random <?php // insert some sort of header / connection file // include_once __DIR__.'./filename.ext /* Guess all this information (the words are being stored in a database not an array you could do something like this below. BEWARE I HAVE ONLY SECURED ONE PART OF HIS CODE THE REST IS ABLE TO BE ABBUSEABUSED BY VULNERABLE CODE IF NOT DONE PROPERLY.. */ if (array_key_exists('random', $_POST)) { $_POST['mother-body-size'] = array_key_exists('mother-body-size', $_POST) && is_string($_POST['mother-body-size']) ? strip_tags(stripslashes($_POST['mother-body-size'])) : null; // Check if input is empty or not. if (empty($_POST['mother-body-size'])) { // kill code } // not sure on how your sql quries are coded in. $check = $db->query('SELECT * FROM pets ORDER BY RAND() ASC LIMIT 10'); if (!$db->num_rows($check)) { // kill script } $r = $db->fetch_row($check); echo "Mothers body size is ".htmlentities(htmlspecialchars($r['mothersbodysize'])); } If anyone wanna contribute or make it into array and then query it via the array i just couldnt be bothered using array functions and array key checks etc. something to start with. Quote
SwiftGameR Posted August 30, 2021 Posted August 30, 2021 On 8/19/2021 at 7:44 AM, Sim said: Messaged me. I'll do for $20 and have for you within a day. I thought someone else was already working on it so I did not reply Someone has started the HTML AND CSS AND JAVASCRIPT this i have written a little php should get u started 🙂 Quote
Clemintine Posted September 15, 2021 Author Posted September 15, 2021 Still looking for someone to do this. Quote
SRB Posted September 15, 2021 Posted September 15, 2021 You know, I gave up trying to use AlpineJS on this and just wrote some quick PHP. This means it's not going to generate without a page load, but it's a finished, working copy. Example output (For markings, use comma-separated to extend list) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Kitten Generator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css"> </head> <body> <div class="antialiased w-screen min-h-screen bg-gray-900 pb-12"> <form action="" method="post"> <div> <div class="max-w-6xl mx-auto flex pt-12"> <div class="w-1/2 p-4"> <h1 class="text-white text-3xl">Mother</h1> </div> <div class="w-1/2 p-4"> <h1 class="text-white text-3xl">Father</h1> </div> </div> <div class="max-w-6xl mx-auto flex"> <div class="w-1/2 p-4 border-r border-gray-500"> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Body Size</span> <input type="text" name="mother-body-size" id="mother-body-size" value="<?=requestValueByKey($_POST, 'mother-body-size') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded px-2" tabindex="1" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Build</span> <input type="text" name="mother-build" id="mother-build" value="<?=requestValueByKey($_POST, 'mother-build') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="3" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Ears</span> <input type="text" name="mother-ears" id="mother-ears" value="<?=requestValueByKey($_POST, 'mother-ears') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="5" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Eye Color</span> <input type="text" name="mother-eye-color" id="mother-eye-color" value="<?=requestValueByKey($_POST, 'mother-eye-color') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="7" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Nose / Paw Pads</span> <input type="text" name="mother-nose-paw-pads" id="mother-nose-paw-pads" value="<?=requestValueByKey($_POST, 'mother-nose-paw-pads') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="9" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Length</span> <input type="text" name="mother-pelt-length" id="mother-pelt-length" value="<?=requestValueByKey($_POST, 'mother-pelt-length') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="11" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Color</span> <input type="text" name="mother-pelt-color" id="mother-pelt-color" value="<?=requestValueByKey($_POST, 'mother-pelt-color') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="13" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Markings</span> <input type="text" name="mother-pelt-markings" id="mother-pelt-markings" value="<?=requestValueByKey($_POST, 'mother-pelt-markings') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="15" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Mutation</span> <input type="text" name="mother-mutation" id="mother-mutation" value="<?=requestValueByKey($_POST, 'mother-mutation') ?>"class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="17" /> </label> </div> </div> <div class="w-1/2 p-4"> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Body Size</span> <input type="text" name="father-body-size" id="father-body-size" value="<?=requestValueByKey($_POST, 'father-body-size') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="2" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Build</span> <input type="text" name="father-build" id="father-build" value="<?=requestValueByKey($_POST, 'father-build') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="4" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Ears</span> <input type="text" name="father-ears" id="father-ears" value="<?=requestValueByKey($_POST, 'father-ears') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="6" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Eye Color</span> <input type="text" name="father-eye-color" id="father-eye-color" value="<?=requestValueByKey($_POST, 'father-eye-color') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="8" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Nose / Paw Pads</span> <input type="text" name="father-nose-paw-pads" id="father-nose-paw-pads" value="<?=requestValueByKey($_POST, 'father-nose-paw-pads') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="10" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Length</span> <input type="text" name="father-pelt-length" id="father-pelt-length" value="<?=requestValueByKey($_POST, 'father-pelt-length') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="12" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Color</span> <input type="text" name="father-pelt-color" id="father-pelt-color" value="<?=requestValueByKey($_POST, 'father-pelt-color') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="14" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Markings</span> <input type="text" name="father-pelt-markings" id="father-pelt-markings" value="<?=requestValueByKey($_POST, 'father-pelt-markings') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="16" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Mutation</span> <input type="text" name="father-mutation" id="father-mutation" value="<?=requestValueByKey($_POST, 'father-mutation') ?>" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="18" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Randomize Amount</span> <select name="amount" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2 pl-2"> <?php foreach (array_reverse(range(1, 10)) as $number) { $selected = array_key_exists('amount', $_POST) && (int)$_POST['amount'] === $number ? 'selected="selected"' : ($number === 5 ? 'selected="selected"' : ''); echo "<option value=\"$number\" $selected>$number</option>"; } ?> </select> </label> </div> </div> </div> <div class="max-w-4xl mx-auto flex justify-center mt-8"> <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Randomize</button> </div> </div> </form> <div class="max-w-6xl mx-auto flex justify-center flex-wrap mt-6 border-t pt-6"> <?php $amount = array_key_exists('amount', $_POST) ? (int)$_POST['amount'] : false; if ($amount) { for ($i = 1; $i <= $amount; $i++) { $body_size = randomizeAttribute([$_POST['mother-body-size'], $_POST['father-body-size']]); $build = randomizeAttribute([$_POST['mother-build'], $_POST['father-build']]); $ears = randomizeAttribute([$_POST['mother-ears'], $_POST['father-ears']]); $eye_color = randomizeAttribute([$_POST['mother-eye-color'], $_POST['father-eye-color']]); $nose_paw_pads = randomizeAttribute([$_POST['mother-nose-paw-pads'], $_POST['father-nose-paw-pads']]); $pelt_length = randomizeAttribute([$_POST['mother-pelt-length'], $_POST['father-pelt-length']]); $pelt_color = randomizeAttribute([$_POST['mother-pelt-color'], $_POST['father-pelt-color']]); $pelt_markings = randomizeAttribute(array_merge( array_map(static function($arg) { return trim($arg); }, explode(',', $_POST['mother-pelt-markings'])), array_map(static function($arg) { return trim($arg); }, explode(',', $_POST['father-pelt-markings'])), )); $mutation = randomizeAttribute([$_POST['mother-mutation'], $_POST['father-mutation']]); echo <<<KITTEN <div class="inline text-left box-border p-3 w-1/4"> <div class="border box-border p-2"> <h3 class="text-gray-300 font-bold border-b pb-1 mb-1"> Random Kitten #$i </h3> <div class="text-gray-300 body-size"> <span class="font-semibold">Body Size : </span> <span class="float-right">$body_size</span> </div> <div class="text-gray-300 build"> <span class="font-semibold">Build : </span> <span class="float-right">$build</span> </div> <div class="text-gray-300 ears"> <span class="font-semibold">Ears : </span> <span class="float-right">$ears</span> </div> <div class="text-gray-300 eye-color"> <span class="font-semibold">Eye Color : </span> <span class="float-right">$eye_color</span> </div> <div class="text-gray-300 nose-paw-color"> <span class="font-semibold">Nose / Paw Color : </span> <span class="float-right">$nose_paw_pads</span> </div> <div class="text-gray-300 pelt-length"> <span class="font-semibold">Pelt Length : </span> <span class="float-right">$pelt_length</span> </div> <div class="text-gray-300 pelt-color"> <span class="font-semibold">Pelt Color : </span> <span class="float-right">$pelt_color</span> </div> <div class="text-gray-300 pelt-markings"> <span class="font-semibold">Pelt Markings : </span> <span class="float-right">$pelt_markings</span> </div> <div class="text-gray-300 mutation"> <span class="font-semibold">Mutation : </span> <span class="float-right">$mutation</span> </div> </div> </div> KITTEN; } } ?> </div> </div> </body> </html> <?php function randomizeAttribute(array $array = []): string { if (!count($array)) { return 'N/A'; } return ucwords($array[rand(0, count($array) - 1)]); } function requestValueByKey(array $array, string $key) { if (!is_array($array) || !array_key_exists($key, $array)) { return ''; } return $array[$key]; } Quote
Clemintine Posted August 21, 2023 Author Posted August 21, 2023 (edited) Hello, I know this thread is a few years old haha and thank you for making this, I was curious is there anyway to make this HTML and CSS instead of JS? I'm going to be using this on proboards which uses HTML and CSS. Thanks! Edited August 21, 2023 by Clemintine Quote
Veramys Posted August 21, 2023 Posted August 21, 2023 HTML and CSS are just used for design stuff. They're like the face of what you're doing. PHP which was what SRB used, is the brains behind it. So it won't work without the brains. Quote
Magictallguy Posted August 23, 2023 Posted August 23, 2023 Here's SRB's PHP-flavoured generator as pure HTML/CSS/JS. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Kitten Generator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css"> </head> <body> <div class="antialiased w-screen min-h-screen bg-gray-900 pb-12"> <form action="" method="post" id="kitten-form"> <div> <div class="max-w-6xl mx-auto flex pt-12"> <div class="w-1/2 p-4"> <h1 class="text-white text-3xl">Mother</h1> </div> <div class="w-1/2 p-4"> <h1 class="text-white text-3xl">Father</h1> </div> </div> <div class="max-w-6xl mx-auto flex"> <div class="w-1/2 p-4 border-r border-gray-500"> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Body Size</span> <input type="text" name="mother-body-size" id="mother-body-size" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded px-2" tabindex="1" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Build</span> <input type="text" name="mother-build" id="mother-build" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="3" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Ears</span> <input type="text" name="mother-ears" id="mother-ears" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="5" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Eye Color</span> <input type="text" name="mother-eye-color" id="mother-eye-color" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="7" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Nose / Paw Pads</span> <input type="text" name="mother-nose-paw-pads" id="mother-nose-paw-pads" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="9" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Length</span> <input type="text" name="mother-pelt-length" id="mother-pelt-length" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="11" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Color</span> <input type="text" name="mother-pelt-color" id="mother-pelt-color" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="13" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Markings</span> <input type="text" name="mother-pelt-markings" id="mother-pelt-markings" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="15" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Mutation</span> <input type="text" name="mother-mutation" id="mother-mutation" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="17" /> </label> </div> </div> <div class="w-1/2 p-4"> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Body Size</span> <input type="text" name="father-body-size" id="father-body-size" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="2" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Build</span> <input type="text" name="father-build" id="father-build" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="4" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Ears</span> <input type="text" name="father-ears" id="father-ears" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="6" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Eye Color</span> <input type="text" name="father-eye-color" id="father-eye-color" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="8" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Nose / Paw Pads</span> <input type="text" name="father-nose-paw-pads" id="father-nose-paw-pads" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="10" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Length</span> <input type="text" name="father-pelt-length" id="father-pelt-length" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="12" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Color</span> <input type="text" name="father-pelt-color" id="father-pelt-color" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="14" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Pelt Markings</span> <input type="text" name="father-pelt-markings" id="father-pelt-markings" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="16" /> </label> </div> <div class="block mb-4"> <label> <span class="block text-gray-300 text-sm">Mutation</span> <input type="text" name="father-mutation" id="father-mutation" value="" class="mt-1 block w-full shadow-sm sm:text-lg border-gray-300 rounded-md px-2" tabindex="18" /> </label> </div> </div> </div> <div class="max-w-4xl mx-auto flex justify-center mt-8"> <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Randomize</button> </div> </div> </form> <div class="max-w-6xl mx-auto flex justify-center flex-wrap mt-6 border-t pt-6" id="kitten-result"></div> </div> <script> let kittenCount = 0; const getOpts = () => { return ['body-size', 'build', 'ears', 'eye-color', 'nose-paw-pads', 'pelt-length', 'pelt-color', 'pelt-markings', 'mutation']; }; const generateKittens = () => { const opts = getOpts(); let output = []; for (let opt of opts) { const fatherOpt = `father-${opt}`; const motherOpt = `mother-${opt}`; let motherInput = document.getElementById(motherOpt).value ?? ''; let fatherInput = document.getElementById(fatherOpt).value ?? ''; console.log(`${opt}: ${motherInput} :: ${fatherInput}`); const items = [motherInput, fatherInput]; let selectedOpt = items[Math.floor(Math.random() * 2)]; let color = "#838383"; if (selectedOpt === '') { selectedOpt = (motherInput ?? fatherInput) ?? 'none'; } if (motherInput === fatherInput) { color = "#5bf132"; } else if (selectedOpt === motherInput) { color = "#ee6acb"; } else if (selectedOpt === fatherInput) { color = "#32aef1"; } output[opt] = `<span style="color: ${color};">${selectedOpt}</span>`; } const kittenCard = ` <div class="inline text-left box-border p-3 w-1/4"> <div class="border box-border p-2"> <h3 class="text-gray-300 font-bold border-b pb-1 mb-1"> Random Kitten #${++kittenCount} </h3> <div class="text-gray-300 body-size"> <span class="font-semibold">Body Size : </span> <span class="float-right">${output['body-size']}</span> </div> <div class="text-gray-300 build"> <span class="font-semibold">Build : </span> <span class="float-right">${output['build']}</span> </div> <div class="text-gray-300 ears"> <span class="font-semibold">Ears : </span> <span class="float-right">${output['ears']}</span> </div> <div class="text-gray-300 eye-color"> <span class="font-semibold">Eye Color : </span> <span class="float-right">${output['eye-color']}</span> </div> <div class="text-gray-300 nose-paw-color"> <span class="font-semibold">Nose / Paw Color : </span> <span class="float-right">${output['nose-paw-pads']}</span> </div> <div class="text-gray-300 pelt-length"> <span class="font-semibold">Pelt Length : </span> <span class="float-right">${output['pelt-length']}</span> </div> <div class="text-gray-300 pelt-color"> <span class="font-semibold">Pelt Color : </span> <span class="float-right">${output['pelt-color']}</span> </div> <div class="text-gray-300 pelt-markings"> <span class="font-semibold">Pelt Markings : </span> <span class="float-right">${output['pelt-markings']}</span> </div> <div class="text-gray-300 mutation"> <span class="font-semibold">Mutation : </span> <span class="float-right">${output['mutation']}</span> </div> </div> </div>`; document.getElementById('kitten-result').innerHTML += kittenCard; }; let formElem = document.getElementById('kitten-form'); formElem.addEventListener("submit", (e) => { e.preventDefault(); e.stopPropagation(); generateKittens(); }); </script> </body> </html> Fair note that this has never heard of "security". Blue: trait from father Pink: trait from mother Green: trait from both (matching trait) Grey: no trait 2023-08-23 15-44-43.mp4 3 Quote
PixelSlots.com Posted February 25 Posted February 25 On 8/23/2023 at 10:25 AM, Magictallguy said: Here's SRB's PHP-flavoured generator as pure HTML/CSS/JS. Very cool that you did it for free! Had to like your post 🙂 1 Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.