Skip to content

Commit

Permalink
kappagen release
Browse files Browse the repository at this point in the history
  • Loading branch information
@crashmax-dev
crashmax-dev committed Nov 7, 2023
1 parent 35ccd0c commit f786df9
Show file tree
Hide file tree
Showing 28 changed files with 5,893 additions and 265 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@ dist-ssr
*.njsproj
*.sln
*.sw?
.turbo
7 changes: 7 additions & 0 deletions .vscode/extensions.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"recommendations": [
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint"
]
}
206 changes: 6 additions & 200 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<title>Kappagen</title>
<link rel="stylesheet" type="text/css" href="src/style.css" />
<!-- <link rel="stylesheet" type="text/css" href="src/style.css" /> -->
<style>
/* WARNING: formatting this code or moving it to a file breaks some animations */
[data-squash="no"] {
Expand Down Expand Up @@ -42,6 +42,7 @@
<script>
var cfg = {
display: {
hue: 'rave',
styles: [
'Still', // No movement
'StraightLine', // Gentle movement in a random straight line
Expand Down Expand Up @@ -3397,204 +3398,9 @@
};
}();

const startup = function () {
async function $c_startup() {
shared.mspf.init();
if (cfg.display.hasOwnProperty('hue') && cfg.display.hue === 'rave' && !_hasRaveToggle())
document.documentElement.classList.add('rave');
_css();
}

function _css() {
const css = document.getElementsByTagName('STYLE')[0];
let h = css.innerHTML;
if (cfg.display.hasOwnProperty('hue') && cfg.display.hue !== false) {
if (cfg.display.hue === 'rave') {
let r = ' html.rave\n';
r += ' {\n';
r += ' animation: rave 3s linear infinite;\n';
r += ' }\n';
r += ' @keyframes rave\n';
r += ' {\n';
for (let i = 0; i <= 100; i += 10) {
r += ' ' + i + '%\n';
r += ' {\n';
r += ' filter: hue-rotate(' + i * 3.6 + 'deg);\n';
r += ' }\n';
}
r += ' }\n';
r += ' html.rave button, html.rave div#notices\n';
r += ' {\n';
r += ' animation: antirave 3s linear infinite;\n';
r += ' }\n';
r += ' @keyframes antirave\n';
r += ' {\n';
for (let i = 0; i <= 100; i += 10) {
r += ' ' + i + '%\n';
r += ' {\n';
r += ' filter: hue-rotate(' + (360 - i * 3.6) + 'deg);\n';
r += ' }\n';
}
r += ' }\n';
h = r + h;
}
else if (!isNaN(cfg.display.hue)) {
const iHue = parseInt(cfg.display.hue, 10);
if (iHue > 0 && iHue < 360)
h = ' html\n {\n filter: hue-rotate(' + iHue + 'deg);\n }\n button, div#notices\n {\n filter: hue-rotate(' + (360 - iHue) + 'deg);\n }' + h;
}
}
let a = ' [data-squash="vertical"]';
a += ' {\n';
a += ' transform: scale(' + timing.display.Crazy.squash.width + ', ' + timing.display.Crazy.squash.height + ');\n';
a += ' }\n';
a += ' [data-squash="horizontal"]';
a += ' {\n';
a += ' transform: scale(' + timing.display.Crazy.squash.height + ', ' + timing.display.Crazy.squash.width + ');\n';
a += ' }\n';
h = h.replace(' [data-squash="no"]', a + ' [data-squash="no"]');
if (cfg.display.extended.useZWE && cfg.display.extended.hasOwnProperty('fillZWE') && cfg.display.extended.fillZWE) {
h = h.replace('padding: calc((var(--zoom-height) - (var(--zoom-height) * 0.1)) / 2) 0;', 'padding: calc((var(--zoom-height) - (var(--zoom-height) * 0.1)) / 2) calc((var(--zoom-width) - (var(--zoom-width) * 0.1)) / 2);');
h = h.replace('padding: calc((var(--zoom-height) - (var(--zoom-height) * 0.8)) / 2) 0;', 'padding: calc((var(--zoom-height) - (var(--zoom-height) * 0.8)) / 2) calc((var(--zoom-width) - (var(--zoom-width) * 0.8)) / 2);');
h = h.replace('padding: calc((var(--zoom-height) - (var(--zoom-height) * 0.95)) / 2) 0;', 'padding: calc((var(--zoom-height) - (var(--zoom-height) * 0.95)) / 2) calc((var(--zoom-width) - (var(--zoom-width) * 0.95)) / 2);');
h = h.replace('padding: calc((var(--zoom-height) - (var(--zoom-height) * 0.1)) / 2) 0;', 'padding: calc((var(--zoom-height) - (var(--zoom-height) * 0.1)) / 2) calc((var(--zoom-width) - (var(--zoom-width) * 0.1)) / 2);');
let z = ' img.fit,\n';
z += ' .fit img\n';
z += ' {\n';
z += ' object-fit: contain;\n';
z += ' object-position: 50% 50%;\n';
z += ' }\n';
h = h.replace(' img\n {\n', z + ' img\n {\n');
}
else {
let z = ' img\n';
z += ' {\n';
z += ' object-fit: contain;\n';
z += ' object-position: 50% 50%;\n';
h = h.replace(' img\n {\n', z);
}
let t = ' .etStraightLine\n';
t += ' {\n';
t += ' transition: transform linear ' + Math.floor(cfg.emote.time * 1000 * timing.display.StraightLine.time) + 'ms;\n';
t += ' }\n';
t += ' .etThrowTwist\n';
t += ' {\n';
t += ' transition: transform cubic-bezier(0.32, 0, 0.67, 0) ' + Math.floor(cfg.emote.time * 1000 * timing.display.Throw.time * timing.display.Throw.twist) + 'ms;\n';
t += ' }\n';
t += ' .etThrowDrop\n';
t += ' {\n';
t += ' transition: transform cubic-bezier(0.5, 0, 0.75, 0) ' + Math.floor(cfg.emote.time * 1000 * timing.display.Throw.time * timing.display.Throw.drop) + 'ms;\n';
t += ' }\n';
t += ' .etFountain\n';
t += ' {\n';
t += ' transition: transform cubic-bezier(0, 0, 0.58, 1) ' + Math.floor(cfg.emote.time * 1000 * timing.display.Fountain.time) + 'ms;\n';
t += ' }\n';
t += ' div.scene.cube:not(.kappa),\n';
t += ' div.scene.cube:not(.kappa) div.cube\n';
t += ' {\n';
t += ' transition: transform linear ' + Math.floor(cfg.emote.time * 1000 * timing.display.TheCube.time) + 'ms;\n';
t += ' }\n';
t += ' .ktFireworkRocket\n';
t += ' {\n';
t += ' transition: transform linear ' + Math.floor(cfg.emote.time * 1000 * timing.kappa.Fireworks.time * timing.kappa.Fireworks.speed.rocket) + 'ms;\n';
t += ' }\n';
t += ' .ktFireworkSparkler\n';
t += ' {\n';
t += ' transition: transform ease-out ' + Math.floor(cfg.emote.time * 1000 * timing.kappa.Fireworks.time) + 'ms;\n';
t += ' }\n';
t += ' .ktSpiral\n';
t += ' {\n';
t += ' transition: transform ease-out ' + Math.floor(cfg.emote.time * 1000 * timing.kappa.Spiral.time) + 'ms;\n';
t += ' }\n';
t += ' .ktPyramid\n';
t += ' {\n';
let ctP = 0;
const lP = pyramidDist.length;
for (let i = 0; i < lP; i++) {
ctP += pyramidDist[i];
}
const tP = Math.floor(cfg.emote.time * 1000 * timing.kappa.Pyramid.time * timing.kappa.Pyramid.show.total);
const tPerB = Math.max(Math.floor(tP / ctP), timing.kappa.Pyramid.show.min);
t += ' transition: transform ease-in ' + tPerB + 'ms;\n';
t += ' }\n';
t += ' .ktPyramidDrop\n';
t += ' {\n';
t += ' transition: transform ease-in ' + Math.floor(cfg.emote.time * 1000 * timing.kappa.Pyramid.time * timing.kappa.Pyramid.hide) + 'ms;\n';
t += ' }\n';
t += ' .ktSmallPyramid\n';
t += ' {\n';
const tSP = Math.floor(cfg.emote.time * 1000 * timing.kappa.SmallPyramid.time * timing.kappa.SmallPyramid.show.total);
const tPerSB = Math.max(Math.floor(tSP / ctP), timing.kappa.SmallPyramid.show.min);
t += ' transition: transform ease-in ' + tPerSB + 'ms;\n';
t += ' }\n';
t += ' .ktSmallPyramidDrop\n';
t += ' {\n';
t += ' transition: transform ease-in ' + Math.floor(cfg.emote.time * 1000 * timing.kappa.SmallPyramid.time * timing.kappa.SmallPyramid.hide) + 'ms;\n';
t += ' }\n';
t += ' .ktStampede\n';
t += ' {\n';
t += ' transition: transform linear ' + Math.floor(cfg.emote.time * 1000 * timing.kappa.Stampede.time * timing.kappa.Stampede.speed) + 'ms;\n';
t += ' }\n';
const congaShowMS = Math.floor(cfg.emote.time * 1000 * timing.kappa.Conga.time.show);
const congaHideMS = Math.floor(cfg.emote.time * 1000 * timing.kappa.Conga.time.hide);
t += ' .ktCongaIn\n';
t += ' {\n';
t += ' transition: transform linear ' + congaShowMS + 'ms;\n';
t += ' }\n';
t += ' .ktCongaOut\n';
t += ' {\n';
t += ' transition: transform ease-in ' + congaHideMS + 'ms;\n';
t += ' }\n';
t += ' div.scene.cube.kappa,\n';
t += ' div.scene.cube.kappa div.cube\n';
t += ' {\n';
t += ' transition: transform linear ' + Math.floor(cfg.emote.time * 1000 * timing.kappa.TheCube.time) + 'ms;\n';
t += ' }\n';
h = h.replace(' [data-squash="vertical"]', t + '\n [data-squash="vertical"]');
if (cfg.display.hasOwnProperty('statuses') && cfg.display.statuses === false)
h = h.replace('#notices\n {\n', '#notices\n {\n display: none;\n');
if (cfg.hasOwnProperty('twitch') && cfg.twitch.hasOwnProperty('oauth_refresh') && cfg.twitch.oauth_refresh === null)
h = h.replace('button.twitch\n {\n', 'button.twitch\n {\n display: none;\n');
if (cfg.hasOwnProperty('youtube') && cfg.youtube.hasOwnProperty('oauth_refresh') && cfg.youtube.oauth_refresh === null)
h = h.replace('button.youtube\n {\n', 'button.youtube\n {\n display: none;\n');
if (cfg.hasOwnProperty('kick') && cfg.kick.hasOwnProperty('channel') && cfg.kick.channel === null)
h = h.replace('button.kick\n {\n', 'button.kick\n {\n display: none;\n');
if (cfg.emote.size.variation !== false && typeof cfg.emote.size.variation === 'object' && cfg.emote.size.variation.hasOwnProperty('range') && Array.isArray(cfg.emote.size.variation.range)) {
let v = ' .eSize-1_000\n';
v += ' {\n';
v += ' --zoom-height: var(--emote-height);\n';
v += ' --zoom-width: var(--emote-width);\n';
v += ' }\n';
v += ' .eSize-0_500\n';
v += ' {\n';
v += ' --zoom-height: calc(var(--emote-height) / 2);\n';
v += ' --zoom-width: calc(var(--emote-width) / 2);\n';
v += ' }\n';
v += ' .eSize-2_000\n';
v += ' {\n';
v += ' --zoom-height: calc(var(--emote-height) * 2);\n';
v += ' --zoom-width: calc(var(--emote-width) * 2);\n';
v += ' }\n';
let v2 = ' .eSize-1_000\n';
v2 += ' {\n';
v2 += ' --zoom-height: var(--emote-height);\n';
v2 += ' --zoom-width: var(--emote-width);\n';
v2 += ' }\n';
for (let i = 0, l = cfg.emote.size.variation.range.length; i < l; i++) {
const rV = cfg.emote.size.variation.range[i].toFixed(3);
v2 += ' .eSize-' + rV.replace('.', '_') + '\n';
v2 += ' {\n';
v2 += ' --zoom-height: calc(var(--emote-height) * ' + rV + ');\n';
v2 += ' --zoom-width: calc(var(--emote-width) * ' + rV + ');\n';
v2 += ' }\n';
}
h = h.replace(v, v2);
}
css.innerHTML = h;
}

return $c_startup;
}();
function startup() {
shared.mspf.init();
}

window.startup = startup
window.emote = display.emote
Expand All @@ -3606,7 +3412,7 @@
</head>

<body>
<script type="module" src="src/index.ts"></script>
<!-- <script type="module" src="src/index.ts"></script> -->
</body>

</html>
9 changes: 4 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
{
"name": "kappagen",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build"
"dev": "turbo run dev --filter=./packages/*",
"build": "turbo run build --filter=./packages/*",
"playground": "turbo run dev --filter=./playground"
},
"devDependencies": {
"typescript": "5.2.2",
"vite": "4.5.0"
"turbo": "^1.10.16"
}
}
71 changes: 71 additions & 0 deletions packages/kappagen/index.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
export interface Emote {
url: string;
zwe?: Omit<Emote, "zwe">[];
}

export type KappagenAnimations =
| {
style: "TheCube";
prefs: {
/**
* @default 0.2
*/
size: number;
/**
* @default false
*/
center: boolean;
/**
* @default 6
*/
rotations: number;
/**
* @default false
*/
faces: boolean;
};
}
| {
style: "Text";
prefs: {
message: string[];
time: number;
};
}
| { style: "Confetti"; count: number }
| { style: "Spiral"; count: number }
| { style: "Stampede"; count: number }
| { style: "Burst"; count: number }
| { style: "Fountain"; count: number }
| { style: "Fireworks"; count: number }
| { style: "Conga"; prefs: { avoidMiddle: boolean } }
| { style: "Pyramid" }
| { style: "SmallPyramid" };

export type KappagenProps = {};

export type KappagenMethods = {
startup: () => void;
kappagen: {
show: (emotes: Emote[], animation: KappagenAnimations) => Promise<void>;
};
emote: {
addToShowList: (emote: Emote[]) => void;
showEmotes: () => void;
};
rave: {
isEnabled: boolean;
enable: () => void;
disable: () => void;
};
}

declare const _default: import("vue").DefineComponent<
KappagenProps,
{},
{},
{},
KappagenMethods
>;

export default _default;
13 changes: 13 additions & 0 deletions packages/kappagen/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions packages/kappagen/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log('Kappagen')
33 changes: 33 additions & 0 deletions packages/kappagen/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"name": "kappagen",
"version": "0.0.0",
"type": "module",
"files": [
"dist",
"index.d.ts"
],
"main": "./dist/kappagen.umd.cjs",
"module": "./dist/kappagen.js",
"types": "./index.d.ts",
"exports": {
".": {
"types": "./index.d.ts",
"import": "./dist/kappagen.js",
"require": "./dist/kappagen.umd.cjs"
},
"./style": {
"import": "./dist/style.css"
}
},
"scripts": {
"dev": "vite build --watch",
"build": "vite build"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.4.0",
"vite": "^4.4.11"
},
"dependencies": {
"vue": "^3.3.4"
}
}
Loading

0 comments on commit f786df9

Please sign in to comment.