commit cae09d450ddbfc8eab73b07dd29e062e77d7a8a2 Author: Benjamin Kraft Date: Mon Mar 27 18:43:53 2023 +0200 Init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c6ef218 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea + diff --git a/project.json b/project.json new file mode 100644 index 0000000..ea51a50 --- /dev/null +++ b/project.json @@ -0,0 +1,6 @@ +{ + "display_name": "Valentine Present ♥", + "info_text": "For Selina", + "visible": true, + "tags": ["Tool", "Game"] +} \ No newline at end of file diff --git a/public/data/images/favicon.ico b/public/data/images/favicon.ico new file mode 100644 index 0000000..3172667 Binary files /dev/null and b/public/data/images/favicon.ico differ diff --git a/public/data/scripts/events.js b/public/data/scripts/events.js new file mode 100644 index 0000000..d55ef3d --- /dev/null +++ b/public/data/scripts/events.js @@ -0,0 +1,30 @@ +'use strict'; + +function keyPressed(){ + +} + +function keyReleased(){ + +} + +function mouseMoved(){ + +} + +function mouseDragged(){ + +} + +function mousePressed(){ + if (ranBool()){ + flowers.push(new Flower(mouseX, mouseY)); + } else { + hearts.push(new Heart(mouseX, mouseY)); + } + +} + +function mouseReleased(){ + +} \ No newline at end of file diff --git a/public/data/scripts/flower.js b/public/data/scripts/flower.js new file mode 100644 index 0000000..fa6c490 --- /dev/null +++ b/public/data/scripts/flower.js @@ -0,0 +1,70 @@ +class Flower{ + + constructor(x, y){ + this.pos = createVector(x, y); + this.rotation = 0; + this.rotateSpeed = random(PI / 1024, PI / 512) * random([-1, 1]); + this.leafCount = 16; + this.leafs = []; + this.radius = random(20, 200); + } + + update(){ + + this.rotation += this.rotateSpeed; + this.newLeaf = frameCount % 5 == 0; + if (this.leafs.length < this.leafCount && this.newLeaf){ + this.leafs.push(new Leaf(this.radius)); + this.newLeaf = false; + } + for (let l of this.leafs){ + l.update(); + } + } + + show(){ + + push(); + translate(this.pos.x, this.pos.y); + rotate(this.rotation); + for (let i = 0; i < this.leafs.length; i++){ + let l = this.leafs[i]; + + let angle = i / this.leafCount * TWO_PI; + l.show(angle); + } + pop(); + } + +} + +class Leaf{ + + constructor(radius){ + this.width = radius; + this.alpha = 0; + } + + update(){ + if (this.alpha < 0.6) this.alpha += 0.01; + } + + show(angle){ + push(); + noStroke(); + rotate(angle); + let hue = int(angle / TWO_PI * 360); + let c = color('hsba(' + hue + ', 100%, 100%, ' + this.alpha + ')'); + fill(c); + beginShape(); + for (let x = 0; x < this.width; x++){ + vertex(x, sin(x * TWO_PI / (this.width * 2)) * this.width / 5); + } + for (let x = this.width; x >= 0; x--){ + vertex(x, sin(x * TWO_PI / (this.width * 2)) * -this.width / 5); + } + endShape(); + pop(); + } + +} \ No newline at end of file diff --git a/public/data/scripts/heart.js b/public/data/scripts/heart.js new file mode 100644 index 0000000..c5ecdb4 --- /dev/null +++ b/public/data/scripts/heart.js @@ -0,0 +1,42 @@ +class Heart{ + + constructor(x, y){ + this.pos = createVector(x, y); + this.pulse = 0; + this.size = random(50, 200); + } + + update(){ + this.pulse += 0.1; + this.pulseValue = 1 + 0.03 * sin(this.pulse); + } + + show(){ + + function heart(x, size){ + return size * sqrt(1 - abs(x) / size); + } + + push(); + translate(this.pos.x, this.pos.y); + scale(this.pulseValue); + fill(255, 0, 0, 80); + noStroke(); + + arc(this.size / 4, 0, this.size / 2, this.size / 2, PI, TWO_PI); + arc(-this.size / 4, 0, this.size / 2, this.size / 2, PI, TWO_PI); + + beginShape(); + vertex(-this.size / 2, 0); + + for (let x = -this.size / 2; x < this.size / 2; x++){ + vertex(x, heart(x, this.size / 2)); + } + + vertex(this.size / 2, 0); + endShape(); + + pop(); + } + +} \ No newline at end of file diff --git a/public/data/scripts/init.js b/public/data/scripts/init.js new file mode 100644 index 0000000..b2dc1f1 --- /dev/null +++ b/public/data/scripts/init.js @@ -0,0 +1,71 @@ +'use strict'; + +let projectName = "project_pattern"; + +let debug = false, + viewPort = {x: 0, y: 0}, + font, + settings, + loader; + +//Only for online games +let socket; + +let flowers = [], + hearts = []; + +function preload(){ + loadJSON('data/settings/libraries.json', json => loadScripts(json)); + loadJSON('data/settings/settings.json', json => settings = json); + loadFont('data/styles/font.ttf', f => font = f); +} + +function setup(){ + canvasSetup(); + interfaceSetup(); +} + +function draw(){ + + background(10); + + for (let flower of flowers){ + flower.update(); + flower.show(); + } + + for (let heart of hearts){ + heart.update(); + heart.show(); + } + + if (loader){ + loader.update(); + loader.display(); + } + + if (debug) debugInformation(); +} + +function canvasSetup(){ + setFrameRate(60); + let w = window.innerWidth, + h = window.innerHeight; + let canvas = createCanvas(w, h); + canvas.parent('canvas-holder'); + textFont(font); +} + +function interfaceSetup(){ + +} + +function loadScripts(libs){ + for (let script in libs){ + if (libs[script]){ + let url = location.protocol + '//' + location.host + '/lib/benjocraeft/' + script + '.js'; + console.log(url); + $.getScript(url); + } + } +} \ No newline at end of file diff --git a/public/data/scripts/online.js b/public/data/scripts/online.js new file mode 100644 index 0000000..581e750 --- /dev/null +++ b/public/data/scripts/online.js @@ -0,0 +1,48 @@ +'use strict'; + +function socketConnect(){ + socket = io("https://" + window.location.hostname + "?game=" + projectName); +} + +function createLobby(dom){ + if (inputIsValid('create')){ + onlineRequestFrontend(dom); + //TODO + } +} + +function joinLobby(dom){ + if (inputIsValid('join')){ + onlineRequestFrontend(dom); + //TODO + } +} + +function onlineRequestFrontend(dom){ + $(dom).blur(); + $(dom).attr('disabled', 'disabled'); + if (loader) loader.destroy(); + loader = new Loader($('#loader').get(0)); +} + +function inputIsValid(type){ + let valid = true; + $('.error-label').html(''); + if (type === 'create'){ + if ($('#player-name > input').val() === ''){ + valid = false; + $('#player-name > .error-label').html('Please enter a name!'); + } + } + if (type === 'join'){ + if ($('#player-name > input').val() === ''){ + valid = false; + $('#player-name > .error-label').html('Please enter a name!'); + } + if ($('#lobby-code > input').val() === ''){ + valid = false; + $('#lobby-code > .error-label').html('Please enter your code!'); + } + } + return valid; +} \ No newline at end of file diff --git a/public/data/settings/libraries.json b/public/data/settings/libraries.json new file mode 100644 index 0000000..1264577 --- /dev/null +++ b/public/data/settings/libraries.json @@ -0,0 +1,8 @@ +{ + "collision": false, + "colorPicker": false, + "cookie": true, + "loader": true, + "prototypes": true, + "technical": true +} \ No newline at end of file diff --git a/public/data/settings/settings.json b/public/data/settings/settings.json new file mode 100644 index 0000000..544b7b4 --- /dev/null +++ b/public/data/settings/settings.json @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file diff --git a/public/data/styles/color_picker.css b/public/data/styles/color_picker.css new file mode 100644 index 0000000..a5b510e --- /dev/null +++ b/public/data/styles/color_picker.css @@ -0,0 +1,88 @@ +#color_picker{ + width: 300px; + height: 25%; + margin: 20px; + margin-top: 50px; + border: 5px solid #000; + background-color: #000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + position: relative; +} +#color_picker_numeric{ + width: 80%; + padding: 5%; + margin: 5%; + background-color: #888; + border-radius: 10px; + overflow: hidden; +} +.color_picker_rgb{ + float: left; + width: 22%; + height: 35px; + font-size: 25px; + color: #000; +} +.color_picker_rgb:nth-child(1){ + margin-right: 10%; + margin-left: 3%; + background-color: #F00; + +} +.color_picker_rgb:nth-child(2){ + background-color: #0F0; +} +.color_picker_rgb:nth-child(3){ + margin-left: 10%; + background-color: #00F; + color: #FFF; +} +#color_picker_hex{ + width: 50%; + height: 30px; + font-size: 25px; + margin: 10% 25% 0 25%; +} +#saturation{ + position: relative; + width: calc(100% - 33px); + height: 100%; + background: linear-gradient(to right, #FFF 0%, #F00 100%); + float: left; + margin-right: 6px; +} +#value { + width: 100%; + height: 100%; + background: linear-gradient(to top, #000 0%, rgba(255,255,255,0) 100%); +} +#sb_picker{ + border: 2px solid; + border-color: #FFF; + position: absolute; + width: 14px; + height: 14px; + border-radius: 10px; + bottom: 50px; + left: 50px; + box-sizing: border-box; + z-index: 10; +} +#hue { + width: 27px; + height: 100%; + position: relative; + float: left; + background: linear-gradient(to bottom, #F00 0%, #F0F 17%, #00F 34%, #0FF 50%, #0F0 67%, #FF0 84%, #F00 100%); +} +#hue_picker { + position: absolute; + background: #000; + border-bottom: 1px solid #000; + top: 0; + width: 27px; + height: 2px; +} \ No newline at end of file diff --git a/public/data/styles/font.ttf b/public/data/styles/font.ttf new file mode 100644 index 0000000..199cf40 Binary files /dev/null and b/public/data/styles/font.ttf differ diff --git a/public/data/styles/range_input.css b/public/data/styles/range_input.css new file mode 100644 index 0000000..1d7369c --- /dev/null +++ b/public/data/styles/range_input.css @@ -0,0 +1,88 @@ +input[type=range] { + -webkit-appearance: none; + margin: 18px 0; + width: 100%; +} +input[type=range]:focus { + outline: none; +} +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 8.4px; + cursor: pointer; + animate: 0.2s; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border-radius: 1.3px; + border: 0.2px solid #010101; +} +input[type=range]::-webkit-slider-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 36px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; + -webkit-appearance: none; + margin-top: -14px; +} +input[type=range]:focus::-webkit-slider-runnable-track { + background: #367ebd; +} +input[type=range]::-moz-range-track { + width: 100%; + height: 8.4px; + cursor: pointer; + animate: 0.2s; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border-radius: 1.3px; + border: 0.2px solid #010101; +} +input[type=range]::-moz-range-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 36px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; +} +input[type=range]::-ms-track { + width: 100%; + height: 8.4px; + cursor: pointer; + animate: 0.2s; + background: transparent; + border-color: transparent; + border-width: 16px 0; + color: transparent; +} +input[type=range]::-ms-fill-lower { + background: #2a6495; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]::-ms-fill-upper { + background: #3071a9; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]::-ms-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 36px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; +} +input[type=range]:focus::-ms-fill-lower { + background: #3071a9; +} +input[type=range]:focus::-ms-fill-upper { + background: #367ebd; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..b46bb03 --- /dev/null +++ b/public/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + I love you ♥ + + +
+
+
+
+ + \ No newline at end of file diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..8308fb6 --- /dev/null +++ b/public/styles.css @@ -0,0 +1,49 @@ +a:link, a:hover, a:active, a:visited{color: #000;} + +html, body{margin: 0; padding: 0; height: 100%; width: 100%;} + +canvas{margin: 0; padding: 0; border: none; display: block;} + +button:hover{cursor: pointer;} + +@font-face{ + font-family: "Rametto"; + src: url("data/styles/font.ttf"); +} + +*{ + font-family: "Rametto"; + color: #000; + font-size: 17px; +} + +:root{ + --width: 100vw; + --height: 100vh; +} + +body{ + overflow: hidden; +} + +/** + * Standard styles + */ + +#canvas-holder{ + position: relative; + width: var(--width); + height: var(--height); +} +#canvas-holder canvas{ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: inherit; +} +#p5_loading{ + display: none; +} + diff --git a/public/thumbnail.png b/public/thumbnail.png new file mode 100644 index 0000000..a24ae66 Binary files /dev/null and b/public/thumbnail.png differ