index.html

<!DOCTYPE html>
<html lang="">
    <head>
        <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Curly Brace Headpat Simulator</title>
        <!--

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhyyysssssssssyyyyhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhyssyyyyhhhhyyyyyysssyyhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhyysyyhhhhhhhhhhhhhhhyyyssyyhhhhhhhhh
hhhhhhhhhhhhhhhhhhhyyyyssssssssssyyhhhhhhhhhhhhhhhhhhhhhhhhhhhhhysyhhhhhhhhhhhhhhhhhhhhyyysyyhhhhhhh
hhhhhhhhhhhhhyyyssooooooooooooooo++osyyhhhhhhhhhhhhhhhhhhhhhhhhysyhhhhhhhhhhhhhhhhhhhhhhhhyyssyhhhhh
hhhhhhhhhhyysoooo+o+++oooooooooo+::::/+syhhhhhhhyyyyyyssssssssyssyhhhhhhhhhhhhhhhhhhhhhhhhhhyysyyhhh
hhhhhhhyssooooooooooooooosoooooo+//:::::/oyyyso+/::------------/oyhhhhhhhhhhhhhhhhhhhhhhhhhhhhyssyhh
hhhhyysooossyyyyyyyhhhhhhyyyyyyyyyyyso+//:/+:-..................:osyyyhhhhhhhhhhhhhhhhhhhhhhhhhhysyh
hhyysssyyyhhhhhhhhhhhhhhhhhhhhhyyyyso++++++oo/...................---:+osyhhhhhhhhhhhhhhhhhhhhhhhhysy
yyyyyyhhhhhhhhhhhhhyyyyyyyyyyyyysooo+////+++os/........................-/+syhhhhhhhhhhhhhhhhhhhhhhyo
hhhhhhhhhhhhhyyyyssssyyyyyyss+/::::-.......----...........................-/oyhhhhhhhhhhhhhhhhhhhhhy
hhhhhhhhhyyyssyyyyyhyyyssooo+/:::::-........................................-/syyyhhhhhhhhhhhhhhhhhh
hhhhhhhyysyyyhhhhhyysoooo+++/::::::-.....-----.............--................-:+oossyyyhhhhhhhhhhhhh
hhhhyysyyhhhhhhhhysoooooooo+::::::::----.....................-...--...........-:/syysssssyyhhhhhhhhh
hhhysyyhhhhhhhhyysooooooo+o/::::::::-.......................--...:/-...........--/syhhyyysosyyhhhhhh
hyysyhhhhhhhhyyyyo+oooooo++/::::::::-.....................-::.....//..........-:-./syhhhhhyyooyhhhhh
hyyyhhhhhhhyyyyyyo+o++o+++++/::::::::-..................-:+/-.....-+-.......--::-.-/shhhhhhhhyosyhhh
hhhhhhhhhhyyyssyyo++o+++++oo+/::::::::-...............-:++///--....//...---::::::..-+yhhhhhhhhy+shhh
hhhhhhhyyyyysssyyo++++++ooooo++/:::::::--...........-/++//////::-..:+:://+/::::::.../shhhhhhhhhs/yhh
hhhhhhhhyysssssyyo+/+++++ooooooo+/::::::---......-:/++///////////:-:+++ooo+/:::::...:shhhhhhhhhs/yhh
hhhhhhyyyssssssyys/+oooooooooooooo++//::::::--:/+++++oosssyso+o/::::ossssso+/::::...:ohhyhhhhhyosdhy
hhhhhyyyyyyyyyyyys++oooooooooooooooooo++++++++//+ossoo+o+ohddddh/::/yyyysyso+::::...-ohhyhhhhhdhyo/-
hhhyhyyyyyyyyyyyyyo+ooo++oo++ooooooooo++++/////+o+//////+hddddddho/+hyyyyyyyo/::....-shhhhhdhso+//oy
hhhhhyyyyyyyyyyyyysoooooooo++oooooo++////////////::::///ydddddddddhdhyyyyyyyys+:....:yhddhsoosyyhddh
hhhhddhyyyyyyyyyyyyssoss++/+shhhhdy////:::--..```  ```.odddddddddoohyyyyyyyyyo:ss:-/ydys++syhdddhhhh
hhhhhhhddhhyyyyyyyyhdddh+//+dddddds:--.``             -hddddddddh/shyyhhddhyy+`.ohhhyoooyhdddhhhhhhh
.:osyyyhhdddhhyhhhhddddh///sddhyyy:`                 `odyo++oydd/.shyyhdddhyy/`.:oddddhhddhhhhhhhhhh
./+++++::/oyhdddhhhhdddy///sy+///-`                  .so//////oo`-yhssyddddys:`-/+ohddddhhhhhhhhhhhh
/+++++:--:++/:/shhyhddds/:-/////-`                   -+///////:..sdhysyhdddhy+/++++ohdhhhhhhhhhhhhhh
+++++/--:++:---/hyyhddd/.` .:/:-`                    .///////:.`+ddhssyhddhso++ydy+osddhhhhhhhhhhhhh
++++/:-:++:---:syoshddh:   ``.`                      `://///:.`-yddhsssyhhso+++hddyyhdhhhhhhhhhhyyyy
++++:-:++:----shsooyddh/```````   ``                  `----.` `+hddhsyyyyhs++shddhhhdhhhhhhyyyyyyyyy
+++/-:/+/----odso+oshddh+.`````   .:-.```--      `````````    .sdddhsyyyyhhshdddhhddhhhhhhhyyhhhhhhh
+++::/+/----odho+++oyhhhhs/.`      `.----.`     ``````````    .sdddhssssyyhddhhhhdhhhhhhhhhhhhhhhhhh
oo+/+o+:--:oddyo+++osyhhhhhyo:.`                 ````````  `.-/ydddhysysyyhdhhdddhhhhhhhhhhhhhhhhhhh
hhhhhhysoosdhhs+++++oyhhhhhhhyso/:.``                 `.-:/ossyyyyhyyyoooooshddddhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhdddhsoo++osyhhhhhhyyyyssso+/:----.----::/+ossyyyyyssyyyyyyy+:::::://shhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhysooosyhhhhyyyyyyyyyyyyyysssssyyyyyyhhyoyyyssyysyyyyyo::::-....-/oyyhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhyysosyhhhyyyyyyyyyyyyyyyyyysshhyyyyhs/+shyyyyssysyyyo:::-.......-/syhhhhhhhhhhhhh
dddddhhhhhhyyyhhhhhhhhyyyyhhyyyyyyyyyyyyyyyyyh+/ydyyyyhs//+hyyyyssyyyyyyo::-.........-/oyhhhhhhhhhhh
dddddmNNmdhssssssyyyyyhhhhhhyyyyyyyyyyyyyyyyyh++hhyyyhdy///shyyysssssssyys/-...........-/shhhhhhhhhh
ddddmmNMMmhhhyyyyysssyhdddddhyyyyyyyyyyyyyyyyh++hhyyyddy///+hhyssssssssssys+-............-oyyyyyyyyy
ddmmNNNNmhhhhhhhhhhhhhhhhhdddhyyyyyyyyyyyyyyyh++hdyyhddy/::-odyysssssssyysyyo/-............:oyyyyyyy
mmNNNmdhhhhhhhhhhhhhhhhhhhhhhhhhyyyyyyyyyyyyydoydddddddy:`` :dhyyssyyyyyyyyyyso/-...........-oyyyyyy
dmmdhhhhhhhhhhhhhhhhhhhhhhhhyyyyyyyyyyyyyyyyyhhddddddddh:   .ydhyyyyyyyyyyyyhhddho:-.........-+hdddd
-osyyyyyyyhhhhhhhhhhhhhhhhhhyyyyyyyyyyyyyyyyyhdddddddddd:   `+hhhyyyyyyyyyymNNmmmddyo/:-.......odddm
  `.--://+shhhhhhhhhhhhhhhhhyyyyyyyyyyyyyyyyyddddddddddd+    -yhhhyyyyyyyydNNNNmmddddddhyo+/:-.-oddm
      `.:oyhhhhhhhhhhhhhhhhhhyyyyyyyyyyyyyyyhddddddddddds`   .ohhhyyyyyyhhmmmmmmmmmdddmmmmdddhyssddd
  ``-/oyhhhhhhhhhhhhhhyyyyyyyyyyyyyysyyyyyyyyhddddddddddy`   `+ys+:/ooo+/:---//+ymNmmdmmNNds++/::+oo
/+syhhhhhhhhhhhhyysoo++///////+oyyyyyyyyyyyyyyysyhddddddh.    :o/:.          `.:/sNNmmmmNNy..--.:/+o
hhhhhhhhhhhhhhhhyyyssoo+++++://+oyyyyyyyyyyyyys///+yhhddd:    -o/:.            `-/dNNNNNNNy. .+o++sy
I would like to thank Dexterminate(Alex)#4528, CurlyBrace#9024, Kaiphas#1477, and a few others for
inspiring and helping me a ton for creating this awesome simulator. {<3}
        -->
	    	<link rel="shortcut icon" type="image/x-icon" href="curlybraceheart.png">
        <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/cave-story" type="text/css"/>
        <meta name="description" content="curly brace. head pats. wow." />
        <meta name="keywords" content="curly brace, curlybrace, wow, robot, curly, brace, bot, android, pat, pats, head, simulator, funny, drawception, cave, story, cavestory, cave story" />
        <meta name="author" content="Drawynoid" />
        <meta name="copyright" content="Drawynoid" />
        <meta property="og:title" content="head pat curly!" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://dravenoid.github.io/CBHPS.github.io/Curly.png" />
        <meta property="og:url" content="https://dravenoid.github.io/CBHPS.github.io/" />
        <meta property="og:description" content="curlybrace. head pats. wow." />
        <meta name="viewport" content="width=480, initial-scale=0.6, maximum-scale=0.6, minimum-scale=0.6, target-densityDpi=0.6">
        <script src="jquery.min.js"></script>
        <script>
            var curly = (function($){
                'use strict';
                var pat_count = 0;
                var app = {
                    colors: [ "309", "3CC", "6F3", "3C3", "03F", "F0C", "C03", "FA4" ],
                    sizes: [ "64", "48", "36", "30", "28" ],
                    sayings: [
                       "wow",              "such hand",
                        "awesome",         "nice pat",
                        "one more head pat pls",     "so curly",
                        "hi!!",         "many pats",
                        "curly pls",         "such amaze",
                        "such friendly",    "o wow",
                        "much brace",          "so cool",
                        "much reward",      "much loyalty",
                        "good curly",        "therapeutic",
                        "pat pat pat",       "pls pat",
                        "wow",              "more pls",
                        "{<3}",          "confuse"

                    ],
                    chinLevel: 190,
                    init: function(){
                      document.getElementById("patCount").innerHTML = "You've given "+pat_count+" pats!";
                        $(document).on("mousedown touchstart", "#curly", function(e){
                        pat_count += 1;   /// NOTE: here
                        document.getElementById("patCount").innerHTML = "You've given "+pat_count+" pats!";
                          if (pat_count > 99) {
                            $('#curly').css({"background-image": "var(--newCurly)"});
                            console.log('evaluated');
                          } // NOTE: here
                            app.moveHand(e);

                            app.say();
                            if (app.getYpos(e) > app.chinLevel) {
                                $(this).addClass("up");
                                $("#hand").addClass("down");
                            } else {
                                $(this).addClass("down");
                                $("#hand").addClass("up");
                            }
                        }).on("mouseup touchend", "#curly", function(){
                            $(this).removeClass("up down");
                            $("#hand").removeClass("up down");

                        });

                        $(document).on("mousemove touchmove", "#curly", function(e){
                            app.moveHand(e);
                            var ypos = app.getYpos(e);
                            if ($(this).hasClass("down")) {
                                if (ypos > app.chinLevel) {
                                    app.say();
                                    $(this).removeClass("down").addClass("up");
                                    $("#hand").removeClass("up").addClass("down");

                                }
                            } else if ($(this).hasClass("up")) {
                                if (ypos <= app.chinLevel) {
                                    app.say();
                                    $(this).removeClass("up").addClass("down");
                                    $("#hand").removeClass("down").addClass("up");
                                }
                            }
                        });
                        window.addEventListener("touchmove", function(event) {
                            if ($(event.target).attr("id") == "curly") {
                                event.preventDefault();
                            }
                        }, false);
                    },
                    getXpos: function(e){
                        var xpos = e.originalEvent.pageX - $(e.target).offset().left;
                        return xpos;
                    },
                    getYpos: function(e){
                        var ypos = e.originalEvent.pageY - $(e.target).offset().top;
                        if ('ontouchstart' in window || 'onmsgesturechange' in window) {
                            ypos -= 75;
                        }
                        return ypos;
                    },
                    moveHand: function(e){
                        var t, l;
                        t = app.getYpos(e) - ($("#hand").height()/2);
                        l = app.getXpos(e) - ($("#hand").width()/2);
                        $("#hand").css({
                            top: t + "px",
                            left: l + "px"
                        });
                    },
                    say: function(){
                        var num, cnum, snum, d, timestamp, t, l;
                        num = Math.floor( ( Math.random() * app.sayings.length-1 ) + 1 );
                        cnum = Math.floor( ( Math.random() * app.colors.length-1 ) + 1 );
                        snum = Math.floor( ( Math.random() * app.sizes.length-1 ) + 1 );
                        d = new Date();
                        timestamp = d.getTime();
                        t = Math.floor( ( Math.random() * ($(window).height()-100) ) + 1 );
                        l = Math.floor( ( Math.random() * ($(window).width()-100) ) + 1 );
                        $("<p>").addClass("saying " + timestamp).html(app.sayings[num]).appendTo($("body")).css({
                            top: t + "px",
                            left: l + "px",
                            color: "#" + app.colors[cnum],
                            fontSize: app.sizes[snum] + "px"
                        });
                        window.setTimeout(function(){
                            $("p.saying."+timestamp).remove();
                        }, 1000);
                    }
                }
                $(function(){
                    app.init();
                });
                return app;
            }(jQuery));
        </script>

        <style type="text/css">
            @font-face {
                font-family: "Cave-Story";
                src: url(Cave-Story.ttf);
            }
            :root {
              --whichCurly: url('curlybg.jpg');
              --newCurly: url('curlybg2.jpg');

            }
            * {
                font-family: Cave-Story;
                text-align: center;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            body {
                background-color: #26f;
                overflow-x: hidden;
                margin: 10px 0;
            }
            header {
                margin-top: 40px;
                font-size: 64px;
                font-weight: bold;
                color: #F00;
            }
            header p {
                font-size: 34px;
                color: #ffe500;
				        font-weight: normal;
            }
            footer, footer a, footer br {
                font-size: 30px;
				        font-weight: normal;
                -webkit-touch-callout: text;
                -webkit-user-select: text;
                -khtml-user-select: text;
                -moz-user-select: text;
                -ms-user-select: text;
                user-select: text;
                color: #3C3;
            }
            #curly {

                border: 5px solid #ff0000;
                position: relative;
                background: var(--whichCurly);
                background-size: 107%;
                background-position: top left;
                width: 450px;
                height: 480px;
                margin: 20px auto 20px auto;
                cursor: none;
                overflow: hidden;
            }
            #curly.down {
                background-position: bottom left;
            }
            #curly.up {
                background-position: center left;
            }

            #hand {
                position: absolute;
                width: 220px;
                height: 220px;
                background: url("hand.gif");
                background-position: top left;
                pointer-events: none;
            }
            #hand.down {
                background-position: center left;
            }
            #hand.up {
                background-position: bottom left;
            }
            p.saying {
                position: absolute;
                display: block;
                pointer-events: none;
            }
        </style>
    </head>
    <body>
        <header>
            head pat curly pls
            <p>{<3}</p>
            <p id="patCount"></p>
        </header>
      <div id="bgm">
        <audio autoplay loop  id="playAudio">
      <source src="Labyrinth.mp3">
    </audio>
      </div>
        <div id="curly">
            <div id="hand">
            </div>
        </div>
        <footer>
            Check out Curly's drawception profile!<br />
            <a href="https://drawception.com/player/695128/curlybrace/">DRAWCEPTION</a>

       </footer>
    </body>
</html>