what the fuck dude

.github/workflows/action.yml

@@ -1,7 +1,7 @@
 name: Minify Workflow - P5CC
 on:
   push:
-    branches: [ main ]
+    branches: [ prod ]
 
 jobs:
   build:
@@ -20,4 +20,4 @@ jobs:
       - uses: stefanzweifel/git-auto-commit-action@v4
         with:
           commit_message: Minify source code
-          branch: ${{ github.ref }}
+          branch: ${{ github.ref }}

app.js

@@ -1 +1,20 @@
-const express=require("express"),favicon=require("serve-favicon"),app=express(),port=4200;app.use(express.static(".")),app.use(favicon("./favicon.ico")),app.get("/",((e,s)=>{s.send("try /index.html")})),app.listen(4200,(()=>{console.info("p5cc launched"),console.log("localhost:4200")}));
+// Persona 5 Calling Card - Express Static Page (@skyventuree)
+// While it's possible to open the webpage in your browser through the `file://` protocol,
+// due to security issues, downloading image and some feature won't be available without using localhost.
+const express = require('express');
+const favicon = require('serve-favicon');
+const app = express();
+
+const port = 4200; // make sure the port you are using is not in use by other apps
+
+app.use(express.static('.'));
+app.use(favicon('./favicon.ico'));
+
+app.get('/', (req, res) => {
+    res.send("try /index.html");
+})
+
+app.listen(port, () => {
+    console.info("p5cc launched");
+    console.log('localhost:' + port);
+})

scripts/card.js

@@ -1 +1,104 @@
-var canvas=document.getElementById("canvas-card"),card=canvas.getContext("2d");card.font="34px KoreanKRSM";var baseCard=new Image;baseCard.src="assets/base.png",baseCard.onload=redrawBg;var logo=new Image;function redrawBg(){const e=document.querySelector("#logo-size-option").value,t=document.querySelector("#logo-offset").value;card.clearRect(0,0,canvas.width,canvas.height),card.drawImage(baseCard,0,0),showLogo&&card.drawImage(logo,canvas.width-250*e-t,canvas.height-291*e-t,250*e,291*e),showWtm&&(card.fillStyle="rgba(255, 255, 255, 0.65)",card.textAlign="left",card.fillText("skyventuree.github.io/p5cc",30,canvas.height-30))}logo.src="assets/logo.png",logo.onload=redrawBg;const textInput=document.querySelector("#content > textarea"),fontSizeInput=document.querySelector("#font-size"),fontFamilyInput=document.querySelector("#font-family"),lineCanvas=document.createElement("canvas"),canvasText=document.getElementById("canvas-text"),textCtx=canvasText.getContext("2d");let box;function redrawText(){const e=Number(document.querySelector('#delay-rate > input[type="number"]').value),t=Math.min(Math.abs(+fontSizeInput.value||120)),a=fontFamilyInput.value||"sans-serif";lineCanvas.width=canvasText.width,lineCanvas.height=2.2*t,textCtx.clearRect(0,0,canvasText.width,canvasText.height);const n=(textInput.value||"TAKE YOUR HEART").trim(),o=n.split("\n");let c=0,r=0,l=0,s=Number(document.querySelector("#text-top").value),u=0;o.forEach((d=>{setTimeout((()=>{box=new BoxText(d,{fontSize:t,fontFamily:a}),isMiddle&&(s=0,r=(canvasText.height-t*o.length)/2.5-t/5*o.length),l+=Number(box.draw(lineCanvas)-40),textCtx.drawImage(lineCanvas,0,c+r+s),c=Math.floor(l)||c,console.log(n,c,r,l)}),u),u+=e}))}const checkText=setInterval((()=>{textInput.value!==textInput.lastValue&&(textInput.lastValue=textInput.value,redrawText())}),1e3);
+// P5CC core functions
+var canvas = document.getElementById("canvas-card");
+var card = canvas.getContext("2d");
+
+card.font = '34px KoreanKRSM';
+
+// load base card first
+var baseCard = new Image();
+baseCard.src = "assets/base.png";
+baseCard.onload = redrawBg;
+
+// logo initial size: 250 × 291
+var logo = new Image();
+logo.src = "assets/logo.png";
+logo.onload = redrawBg;
+
+// for the card canvas
+function redrawBg() {
+    // asset calculations
+    const logoScale = document.querySelector('#logo-size-option').value;
+    const logoOffset = document.querySelector('#logo-offset').value;
+
+    let logoWidth = 250;
+    let logoHeight = 291;
+
+    card.clearRect(0, 0, canvas.width, canvas.height);
+    card.drawImage(baseCard, 0, 0);
+
+    if (showLogo) {
+        card.drawImage(logo, 
+            canvas.width - (logoWidth * logoScale) - logoOffset, 
+            canvas.height - (logoHeight * logoScale) - logoOffset,
+            logoWidth * logoScale,
+            logoHeight * logoScale);
+    }
+
+    if (showWtm) {
+        card.fillStyle = 'rgba(255, 255, 255, 0.65)';
+        card.textAlign = 'left';
+        card.fillText('skyventuree.github.io/p5cc', 30, canvas.height - 30);
+    }
+}
+
+// for the text canvas
+const textInput = document.querySelector('#content > textarea');
+const fontSizeInput = document.querySelector('#font-size');
+const fontFamilyInput = document.querySelector('#font-family');
+
+const lineCanvas = document.createElement('canvas');
+
+const canvasText = document.getElementById("canvas-text");
+const textCtx = canvasText.getContext('2d');
+let box;
+
+function redrawText() {
+    const delay = Number(document.querySelector('#delay-rate > input[type="number"]').value);
+    const fontSize = Math.min(Math.abs(+fontSizeInput.value || 120));
+    const fontFamily = fontFamilyInput.value || 'sans-serif';
+
+    // another canvas so making multiline text is easier
+    lineCanvas.width = canvasText.width;
+    lineCanvas.height = fontSize * 2.2;
+
+    textCtx.clearRect(0, 0, canvasText.width, canvasText.height);
+
+    const value = (textInput.value || 'TAKE YOUR HEART').trim();
+    const splitValue = value.split('\n');
+
+    // they are all offset, just a different name and purpose
+    let lineHeight = 0, middleOffset = 0, heightOffset = 0;
+    let topOffset = Number(document.querySelector('#text-top').value);
+    let timer = 0;
+
+    splitValue.forEach(line => {
+        setTimeout(() => {
+            box = new BoxText(line, {
+                fontSize,
+                fontFamily
+            });
+
+            if (isMiddle) {
+                topOffset = 0;
+                middleOffset = ((canvasText.height - fontSize * splitValue.length) / 2.5) - (fontSize / 5 * (splitValue.length));
+            }
+
+            heightOffset += Number(box.draw(lineCanvas) - 40);
+
+            textCtx.drawImage(lineCanvas, 0, lineHeight + middleOffset + topOffset);
+
+            lineHeight = Math.floor(heightOffset) || lineHeight;
+            console.log(value, lineHeight, middleOffset, heightOffset);
+        }, timer);
+        timer += delay;
+    });
+
+}
+
+// check textarea to see if anything changes every 1s to avoid lag
+const checkText = setInterval(() => {
+    if (textInput.value !== textInput.lastValue) {
+        textInput.lastValue = textInput.value;
+        redrawText();
+    }
+}, 1000);

scripts/editor.js

@@ -1 +1,63 @@
-var showLogo=!0,showWtm=!0,isMiddle=!0,textStroke=!1,textStrokeWidth=6;let defaults='<i class="fa fa-times-circle-o"></i>Clear',confirm='<i class="fa fa-times-circle-o"></i>Are you sure?';var confirming=!1;function clearCard(e){if(confirming)return document.querySelector("#content > textarea").value="",e.innerHTML=defaults,confirming=!1,void redrawText();e.innerHTML=confirm,confirming=!0,setTimeout((function(){e.innerHTML=defaults,confirming=!1}),1500)}function saveDelay(){let e=Number(document.querySelector('#delay-rate > input[type="number"]').value),t=new Date;t.setTime(t.getTime()+31536e6);let n="expires="+t.toUTCString();document.cookie=`delay=${e};${n};path=/`}window.onload=function(){console.info("Getting cookie value...");let e=document.cookie.replace(/(?:(?:^|.*;\s*)delay\s*\=\s*([^;]*).*$)|^.*$/,"$1");e&&(document.querySelector('#delay-rate > input[type="number"]').value=e),document.querySelector("#option-default").click()},document.getElementById("tab-handler").addEventListener("click",(function(e){if(e.target){var t=e.target.closest("button").dataset.textOption;Array.from(document.getElementsByClassName("options-tab")).forEach((function(e){e.style.display="none"}));var n=document.getElementsByClassName("tab-btn")[0].children;Array.from(n).forEach((function(e){e.classList.remove("active")})),document.getElementById(t).style.display="block",e.target.closest("button").classList.add("active")}}));
+// editor related switches and option
+var showLogo = true, 
+    showWtm = true, 
+    isMiddle = true, 
+    textStroke = false,
+    textStrokeWidth = 6;
+
+// clearing the input field
+let defaults = '<i class="fa fa-times-circle-o"></i>Clear';
+let confirm = '<i class="fa fa-times-circle-o"></i>Are you sure?';
+var confirming = false;
+function clearCard(element) {
+
+    if (confirming) {
+        document.querySelector('#content > textarea').value = '';
+        element.innerHTML = defaults;
+        confirming = false;
+        redrawText();
+        return;
+    }
+
+    element.innerHTML = confirm;
+    confirming = true;
+
+    setTimeout(function() {
+        element.innerHTML = defaults;
+        confirming = false;
+    }, 1500);
+}
+
+// delay function
+function saveDelay() {
+    let delay = Number(document.querySelector('#delay-rate > input[type="number"]').value);
+    let date = new Date();
+    date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
+    let expires = "expires=" + date.toUTCString();
+    document.cookie = `delay=${delay};${expires};path=/`;
+}
+
+window.onload = function() {
+    console.info("Getting cookie value...")
+    let delay = document.cookie.replace(/(?:(?:^|.*;\s*)delay\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+    if (delay) {
+        document.querySelector('#delay-rate > input[type="number"]').value = delay;
+    }
+    document.querySelector('#option-default').click();
+}
+
+// tab handler for text options
+document.getElementById('tab-handler').addEventListener('click', function(e) {
+    if(e.target) {
+        var option = e.target.closest('button').dataset.textOption;
+
+        // disable all elements
+        Array.from(document.getElementsByClassName('options-tab')).forEach(function(e){e.style.display = 'none'})
+        var tabButton = document.getElementsByClassName('tab-btn')[0].children
+        Array.from(tabButton).forEach(function(e){e.classList.remove('active')})
+
+        // enable the selected element
+        document.getElementById(option).style.display = 'block';
+        e.target.closest('button').classList.add('active');
+	}
+});

scripts/exporter.js

@@ -1 +1,18 @@
-function exportCard(){let e=document.querySelector("#canvas-card"),a=document.querySelector("#canvas-text");redrawBg();let t=e.getContext("2d");t.save(),t.drawImage(a,0,0);const r=canvas.toDataURL("image/png").replace("image/png","image/octet-stream"),c=document.createElement("a");c.href=r,c.download=`p5cc_${Math.floor(1e6*Math.random())}.png`,c.target="blank",c.click(),t.restore()}
+function exportCard() {
+    let card = document.querySelector('#canvas-card');
+    let text = document.querySelector('#canvas-text');
+    redrawBg();
+    let cardCtx = card.getContext('2d');
+
+    cardCtx.save()
+    cardCtx.drawImage(text, 0, 0);
+
+    const imageURL = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
+    const a = document.createElement('a');
+    a.href = imageURL;
+    a.download = `p5cc_${Math.floor(Math.random() * 1000000)}.png`;
+    a.target = 'blank';
+    a.click();
+
+    cardCtx.restore();
+}

scripts/textgen/char.js

@@ -1 +1,94 @@
-const COLORS={RED:"#E5191C",WHITE:"#FDFDFD",BLACK:"#0F0F0F"},CHAR_MODE={FIRST:1,WHITE:2,RED:3,SPACE:4},MAX_ANGLE=10;class BoxChar{static BorderScale=1.4;static BackgroundScale=1.2;char="";fontFamily="";fontSize=0;width=0;height=0;left=0;top=0;angle=0;scale=0;mode=CHAR_MODE.WHITE;color=COLORS.WHITE;constructor(t,h,i=60,e="sans-serif"){if(this.char=t,this.mode=h,this.fontFamily=e,h==CHAR_MODE.SPACE)return;const a=-Math.round(10*Math.random())%10;h==CHAR_MODE.FIRST?(this.scale=1.1,this.angle=a):(this.scale=1-Math.floor(10*Math.random())%3/10,this.angle=a*randomOper()),this.fontSize=i*this.scale,h==CHAR_MODE.RED&&(this.color=COLORS.RED);const{width:s,height:o,top:r,left:n}=getCharSize(t,this.fontSize,this.fontFamily,"bold");this.width=s,this.height=o,this.top=r,this.left=n}get font(){return`bold ${this.fontSize}px ${this.fontFamily}`}get rotateSize(){const t=this.angle*Math.PI/180,h=Math.abs(Math.sin(t)),i=Math.abs(Math.cos(t));return{width:Math.ceil(this.width*i)+Math.ceil(this.height*h),height:Math.ceil(this.height*i)+Math.ceil(this.width*h)}}get outterSize(){const{width:t,height:h}=this.rotateSize,i=this.mode==CHAR_MODE.FIRST?BoxChar.BorderScale:BoxChar.BackgroundScale;return{width:t*i,height:h*i}}}
+const COLORS = {
+    RED: '#E5191C',
+    WHITE: '#FDFDFD',
+    BLACK: '#0F0F0F',
+}
+const CHAR_MODE = {
+    FIRST: 1,
+    WHITE: 2,
+    RED: 3,
+    SPACE: 4,
+};
+const MAX_ANGLE = 10;
+
+// handling individual box of characters
+class BoxChar {
+    static BorderScale = 1.4;
+    static BackgroundScale = 1.2;
+
+    char = '';
+    fontFamily = '';
+    fontSize = 0;
+    width = 0;
+    height = 0;
+    left = 0;
+    top = 0;
+    angle = 0;
+    scale = 0;
+    mode = CHAR_MODE.WHITE;
+    color = COLORS.WHITE;
+
+    constructor(char, mode, fontSize = 60, fontFamily = 'sans-serif') {
+        this.char = char;
+        this.mode = mode;
+        this.fontFamily = fontFamily;
+
+        if (mode == CHAR_MODE.SPACE) {
+            return;
+        }
+
+        const angle = -(Math.round(Math.random() * 10) % MAX_ANGLE);
+        if (mode == CHAR_MODE.FIRST) {
+            this.scale = 1.1;
+            this.angle = angle;
+        } else {
+            this.scale = 1 - Math.floor(Math.random() * 10) % 3 / 10;
+            this.angle = angle * randomOper();
+        }
+        this.fontSize = fontSize * this.scale;
+
+        if (mode == CHAR_MODE.RED) {
+            this.color = COLORS.RED;
+        }
+
+        const {
+            width,
+            height,
+            top,
+            left
+        } = getCharSize(char, this.fontSize, this.fontFamily, 'bold');
+        this.width = width;
+        this.height = height;
+        this.top = top;
+        this.left = left;
+    }
+
+    get font() {
+        return `bold ${this.fontSize}px ${this.fontFamily}`;
+    }
+
+    get rotateSize() {
+        const angle = this.angle * Math.PI / 180;
+        const sin = Math.abs(Math.sin(angle)),
+            cos = Math.abs(Math.cos(angle));
+        const width = Math.ceil(this.width * cos) + Math.ceil(this.height * sin);
+        const height = Math.ceil(this.height * cos) + Math.ceil(this.width * sin);
+        return {
+            width,
+            height
+        };
+    }
+
+    get outterSize() {
+        const {
+            width,
+            height
+        } = this.rotateSize;
+        const scale = this.mode == CHAR_MODE.FIRST ? BoxChar.BorderScale : BoxChar.BackgroundScale;
+        return {
+            width: width * scale,
+            height: height * scale
+        };
+    }
+
+}