Jump to content
MakeWebGames

Generator Request


Clemintine

Recommended Posts

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:

 spacer.png

 

 

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. ☺️

 

Link to comment
Share on other sites

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 by SRB
Removed #3
Link to comment
Share on other sites

 

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)

image.thumb.png.b3e880ad4a58a4b3fddfc946603d8cea.png

Edited by SRB
Fixed Links.
  • Like 1
  • Confused 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

image.thumb.png.b3e880ad4a58a4b3fddfc946603d8cea.png

I'm interested to see what you come up with. Never worked with tailwind or AlpineJS.

Link to comment
Share on other sites

  • 2 weeks later...
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.

Link to comment
Share on other sites

  • 2 weeks later...
  • 3 weeks later...

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)

image.thumb.png.712c6a817a153a5d87cc5c3168606e9d.png

 

<!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];
}

 

Link to comment
Share on other sites

  • 1 year later...

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 by Clemintine
Link to comment
Share on other sites

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

 

 

  • Like 2
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...