jaml-ui 0.22.5 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DESIGN.md +236 -236
- package/README.md +147 -147
- package/dist/hooks/searchWorkerCode.js +84 -84
- package/dist/hooks/useSearch.js +86 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +0 -1
- package/dist/ui/footer.js +5 -5
- package/dist/ui/hooks.js +55 -55
- package/package.json +145 -145
package/dist/ui/hooks.js
CHANGED
|
@@ -93,62 +93,62 @@ export function useBalatroBackground() {
|
|
|
93
93
|
const gl = canvas.getContext('webgl');
|
|
94
94
|
if (!gl)
|
|
95
95
|
return;
|
|
96
|
-
const vsSource = `
|
|
97
|
-
attribute vec2 position;
|
|
98
|
-
void main() {
|
|
99
|
-
gl_Position = vec4(position, 0.0, 1.0);
|
|
100
|
-
}
|
|
96
|
+
const vsSource = `
|
|
97
|
+
attribute vec2 position;
|
|
98
|
+
void main() {
|
|
99
|
+
gl_Position = vec4(position, 0.0, 1.0);
|
|
100
|
+
}
|
|
101
101
|
`;
|
|
102
|
-
const fsSource = `
|
|
103
|
-
precision mediump float;
|
|
104
|
-
|
|
105
|
-
uniform float u_time;
|
|
106
|
-
uniform vec2 u_resolution;
|
|
107
|
-
|
|
108
|
-
const float SPIN_ROTATION = -2.0;
|
|
109
|
-
const float SPIN_SPEED = 4.5;
|
|
110
|
-
const vec4 COLOUR_1 = vec4(1.0, 0.2, 0.2, 1.0);
|
|
111
|
-
const vec4 COLOUR_2 = vec4(0.0, 0.5, 1.0, 1.0);
|
|
112
|
-
const vec4 COLOUR_3 = vec4(0.05, 0.08, 0.1, 1.0);
|
|
113
|
-
const float CONTRAST = 4.5;
|
|
114
|
-
const float LIGTHING = 0.5;
|
|
115
|
-
const float SPIN_AMOUNT = 0.35;
|
|
116
|
-
const float PIXEL_FILTER = 1024.0;
|
|
117
|
-
const float PI = 3.14159265359;
|
|
118
|
-
|
|
119
|
-
void main() {
|
|
120
|
-
vec2 screenSize = u_resolution;
|
|
121
|
-
float pixel_size = length(screenSize.xy) / PIXEL_FILTER;
|
|
122
|
-
vec2 uv = (floor(gl_FragCoord.xy*(1.0/pixel_size))*pixel_size - 0.5*screenSize.xy)/length(screenSize.xy);
|
|
123
|
-
float uv_len = length(uv);
|
|
124
|
-
|
|
125
|
-
float speed = (SPIN_ROTATION * 0.2) + 302.2;
|
|
126
|
-
float new_pixel_angle = atan(uv.y, uv.x) + speed - 20.0*(1.0*SPIN_AMOUNT*uv_len + (1.0 - 1.0*SPIN_AMOUNT));
|
|
127
|
-
|
|
128
|
-
vec2 mid = (screenSize.xy/length(screenSize.xy))/2.0;
|
|
129
|
-
uv = (vec2((uv_len * cos(new_pixel_angle) + mid.x), (uv_len * sin(new_pixel_angle) + mid.y)) - mid);
|
|
130
|
-
|
|
131
|
-
uv *= 30.0;
|
|
132
|
-
speed = u_time * SPIN_SPEED;
|
|
133
|
-
vec2 uv2 = vec2(uv.x, uv.y);
|
|
134
|
-
|
|
135
|
-
for(int i=0; i < 5; i++) {
|
|
136
|
-
uv2 += sin(max(uv.x, uv.y)) + uv;
|
|
137
|
-
uv += 0.5*vec2(cos(5.1123314 + 0.353*uv2.y + speed*0.131121), sin(uv2.x - 0.113*speed));
|
|
138
|
-
uv -= 1.0*cos(uv.x + uv.y) - 1.0*sin(uv.x*0.711 - uv.y);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
float contrast_mod = (0.25*CONTRAST + 0.5*SPIN_AMOUNT + 1.2);
|
|
142
|
-
float paint_res = min(2.0, max(0.0, length(uv)*(0.035)*contrast_mod));
|
|
143
|
-
float c1p = max(0.0, 1.0 - contrast_mod*abs(1.0 - paint_res));
|
|
144
|
-
float c2p = max(0.0, 1.0 - contrast_mod*abs(paint_res));
|
|
145
|
-
float c3p = 1.0 - min(1.0, c1p + c2p);
|
|
146
|
-
float light = (LIGTHING - 0.2)*max(c1p*5.0 - 4.0, 0.0) + LIGTHING*max(c2p*5.0 - 4.0, 0.0);
|
|
147
|
-
|
|
148
|
-
vec4 finalCol = (0.3/CONTRAST)*COLOUR_1 + (1.0 - 0.3/CONTRAST)*(COLOUR_1*c1p + COLOUR_2*c2p + vec4(c3p*COLOUR_3.rgb, c3p*COLOUR_1.a)) + light;
|
|
149
|
-
|
|
150
|
-
gl_FragColor = finalCol;
|
|
151
|
-
}
|
|
102
|
+
const fsSource = `
|
|
103
|
+
precision mediump float;
|
|
104
|
+
|
|
105
|
+
uniform float u_time;
|
|
106
|
+
uniform vec2 u_resolution;
|
|
107
|
+
|
|
108
|
+
const float SPIN_ROTATION = -2.0;
|
|
109
|
+
const float SPIN_SPEED = 4.5;
|
|
110
|
+
const vec4 COLOUR_1 = vec4(1.0, 0.2, 0.2, 1.0);
|
|
111
|
+
const vec4 COLOUR_2 = vec4(0.0, 0.5, 1.0, 1.0);
|
|
112
|
+
const vec4 COLOUR_3 = vec4(0.05, 0.08, 0.1, 1.0);
|
|
113
|
+
const float CONTRAST = 4.5;
|
|
114
|
+
const float LIGTHING = 0.5;
|
|
115
|
+
const float SPIN_AMOUNT = 0.35;
|
|
116
|
+
const float PIXEL_FILTER = 1024.0;
|
|
117
|
+
const float PI = 3.14159265359;
|
|
118
|
+
|
|
119
|
+
void main() {
|
|
120
|
+
vec2 screenSize = u_resolution;
|
|
121
|
+
float pixel_size = length(screenSize.xy) / PIXEL_FILTER;
|
|
122
|
+
vec2 uv = (floor(gl_FragCoord.xy*(1.0/pixel_size))*pixel_size - 0.5*screenSize.xy)/length(screenSize.xy);
|
|
123
|
+
float uv_len = length(uv);
|
|
124
|
+
|
|
125
|
+
float speed = (SPIN_ROTATION * 0.2) + 302.2;
|
|
126
|
+
float new_pixel_angle = atan(uv.y, uv.x) + speed - 20.0*(1.0*SPIN_AMOUNT*uv_len + (1.0 - 1.0*SPIN_AMOUNT));
|
|
127
|
+
|
|
128
|
+
vec2 mid = (screenSize.xy/length(screenSize.xy))/2.0;
|
|
129
|
+
uv = (vec2((uv_len * cos(new_pixel_angle) + mid.x), (uv_len * sin(new_pixel_angle) + mid.y)) - mid);
|
|
130
|
+
|
|
131
|
+
uv *= 30.0;
|
|
132
|
+
speed = u_time * SPIN_SPEED;
|
|
133
|
+
vec2 uv2 = vec2(uv.x, uv.y);
|
|
134
|
+
|
|
135
|
+
for(int i=0; i < 5; i++) {
|
|
136
|
+
uv2 += sin(max(uv.x, uv.y)) + uv;
|
|
137
|
+
uv += 0.5*vec2(cos(5.1123314 + 0.353*uv2.y + speed*0.131121), sin(uv2.x - 0.113*speed));
|
|
138
|
+
uv -= 1.0*cos(uv.x + uv.y) - 1.0*sin(uv.x*0.711 - uv.y);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
float contrast_mod = (0.25*CONTRAST + 0.5*SPIN_AMOUNT + 1.2);
|
|
142
|
+
float paint_res = min(2.0, max(0.0, length(uv)*(0.035)*contrast_mod));
|
|
143
|
+
float c1p = max(0.0, 1.0 - contrast_mod*abs(1.0 - paint_res));
|
|
144
|
+
float c2p = max(0.0, 1.0 - contrast_mod*abs(paint_res));
|
|
145
|
+
float c3p = 1.0 - min(1.0, c1p + c2p);
|
|
146
|
+
float light = (LIGTHING - 0.2)*max(c1p*5.0 - 4.0, 0.0) + LIGTHING*max(c2p*5.0 - 4.0, 0.0);
|
|
147
|
+
|
|
148
|
+
vec4 finalCol = (0.3/CONTRAST)*COLOUR_1 + (1.0 - 0.3/CONTRAST)*(COLOUR_1*c1p + COLOUR_2*c2p + vec4(c3p*COLOUR_3.rgb, c3p*COLOUR_1.a)) + light;
|
|
149
|
+
|
|
150
|
+
gl_FragColor = finalCol;
|
|
151
|
+
}
|
|
152
152
|
`;
|
|
153
153
|
const createShader = (type, source) => {
|
|
154
154
|
const shader = gl.createShader(type);
|
package/package.json
CHANGED
|
@@ -1,145 +1,145 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "jaml-ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./dist/index.js",
|
|
7
|
-
"types": "./dist/index.d.ts",
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"import": "./dist/index.js",
|
|
11
|
-
"require": "./dist/index.js",
|
|
12
|
-
"types": "./dist/index.d.ts",
|
|
13
|
-
"default": "./dist/index.js"
|
|
14
|
-
},
|
|
15
|
-
"./motely": {
|
|
16
|
-
"import": "./dist/motely.js",
|
|
17
|
-
"require": "./dist/motely.js",
|
|
18
|
-
"types": "./dist/motely.d.ts",
|
|
19
|
-
"default": "./dist/motely.js"
|
|
20
|
-
},
|
|
21
|
-
"./fonts.css": "./fonts.css",
|
|
22
|
-
"./jaml.schema.json": "./jaml.schema.json"
|
|
23
|
-
},
|
|
24
|
-
"sideEffects": [
|
|
25
|
-
"./fonts.css"
|
|
26
|
-
],
|
|
27
|
-
"files": [
|
|
28
|
-
"dist",
|
|
29
|
-
"assets/*.png",
|
|
30
|
-
"assets/fonts",
|
|
31
|
-
"fonts.css",
|
|
32
|
-
"dist/ui/jimbo.css",
|
|
33
|
-
"jaml.schema.json",
|
|
34
|
-
"README.md",
|
|
35
|
-
"DESIGN.md",
|
|
36
|
-
"LICENSE"
|
|
37
|
-
],
|
|
38
|
-
"scripts": {
|
|
39
|
-
"build": "tsc --pretty false && node -e \"const fs=require('fs');fs.mkdirSync('dist/ui',{recursive:true});fs.copyFileSync('src/ui/jimbo.css','dist/ui/jimbo.css');fs.copyFileSync('node_modules/motely-wasm/jaml.schema.json','jaml.schema.json');\"",
|
|
40
|
-
"dev": "tsc --watch",
|
|
41
|
-
"demo": "vite --config demo/vite.config.ts",
|
|
42
|
-
"typecheck": "tsc --noEmit --pretty false",
|
|
43
|
-
"prepack": "npm run build",
|
|
44
|
-
"storybook": "storybook dev -p 6006",
|
|
45
|
-
"build-storybook": "storybook build",
|
|
46
|
-
"lint": "eslint ."
|
|
47
|
-
},
|
|
48
|
-
"engines": {
|
|
49
|
-
"node": ">=18"
|
|
50
|
-
},
|
|
51
|
-
"publishConfig": {
|
|
52
|
-
"access": "public"
|
|
53
|
-
},
|
|
54
|
-
"repository": {
|
|
55
|
-
"type": "git",
|
|
56
|
-
"url": "https://github.com/OptimusPi/jaml-ui"
|
|
57
|
-
},
|
|
58
|
-
"homepage": "https://github.com/OptimusPi/jaml-ui#readme",
|
|
59
|
-
"bugs": {
|
|
60
|
-
"url": "https://github.com/OptimusPi/jaml-ui/issues"
|
|
61
|
-
},
|
|
62
|
-
"keywords": [
|
|
63
|
-
"balatro",
|
|
64
|
-
"jaml",
|
|
65
|
-
"motely",
|
|
66
|
-
"seed",
|
|
67
|
-
"card",
|
|
68
|
-
"sprite",
|
|
69
|
-
"ui"
|
|
70
|
-
],
|
|
71
|
-
"author": "pifreak",
|
|
72
|
-
"license": "MIT",
|
|
73
|
-
"peerDependencies": {
|
|
74
|
-
"@monaco-editor/react": ">=4.0.0",
|
|
75
|
-
"@react-spring/three": ">=9.0.0",
|
|
76
|
-
"@react-three/drei": ">=9.0.0",
|
|
77
|
-
"@react-three/fiber": ">=8.0.0",
|
|
78
|
-
"monaco-editor": ">=0.50.0",
|
|
79
|
-
"motely-wasm": "^14.4.0",
|
|
80
|
-
"react": "^18.2.0 || ^19.0.0",
|
|
81
|
-
"react-dom": "^18.2.0 || ^19.0.0",
|
|
82
|
-
"react-icons": ">=5.0.0",
|
|
83
|
-
"three": ">=0.150.0"
|
|
84
|
-
},
|
|
85
|
-
"peerDependenciesMeta": {
|
|
86
|
-
"@react-spring/three": {
|
|
87
|
-
"optional": true
|
|
88
|
-
},
|
|
89
|
-
"@react-three/fiber": {
|
|
90
|
-
"optional": true
|
|
91
|
-
},
|
|
92
|
-
"motely-wasm": {
|
|
93
|
-
"optional": true
|
|
94
|
-
},
|
|
95
|
-
"react-icons": {
|
|
96
|
-
"optional": true
|
|
97
|
-
},
|
|
98
|
-
"three": {
|
|
99
|
-
"optional": true
|
|
100
|
-
},
|
|
101
|
-
"@react-three/drei": {
|
|
102
|
-
"optional": true
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
"devDependencies": {
|
|
106
|
-
"@chromatic-com/storybook": "^5.1.2",
|
|
107
|
-
"@google/design.md": "^0.1.1",
|
|
108
|
-
"@monaco-editor/react": "^4.7.0",
|
|
109
|
-
"@react-spring/three": "^10.0.3",
|
|
110
|
-
"@react-three/
|
|
111
|
-
"@
|
|
112
|
-
"@storybook/addon-
|
|
113
|
-
"@storybook/addon-
|
|
114
|
-
"@storybook/addon-
|
|
115
|
-
"@storybook/
|
|
116
|
-
"@
|
|
117
|
-
"@types/
|
|
118
|
-
"@types/react
|
|
119
|
-
"@types/
|
|
120
|
-
"@
|
|
121
|
-
"@
|
|
122
|
-
"@vitest/
|
|
123
|
-
"
|
|
124
|
-
"
|
|
125
|
-
"
|
|
126
|
-
"react": "^
|
|
127
|
-
"
|
|
128
|
-
"
|
|
129
|
-
"
|
|
130
|
-
"
|
|
131
|
-
"
|
|
132
|
-
"
|
|
133
|
-
"
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
"
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
"
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
"
|
|
143
|
-
"
|
|
144
|
-
}
|
|
145
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "jaml-ui",
|
|
3
|
+
"version": "0.23.0",
|
|
4
|
+
"description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"require": "./dist/index.js",
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"default": "./dist/index.js"
|
|
14
|
+
},
|
|
15
|
+
"./motely": {
|
|
16
|
+
"import": "./dist/motely.js",
|
|
17
|
+
"require": "./dist/motely.js",
|
|
18
|
+
"types": "./dist/motely.d.ts",
|
|
19
|
+
"default": "./dist/motely.js"
|
|
20
|
+
},
|
|
21
|
+
"./fonts.css": "./fonts.css",
|
|
22
|
+
"./jaml.schema.json": "./jaml.schema.json"
|
|
23
|
+
},
|
|
24
|
+
"sideEffects": [
|
|
25
|
+
"./fonts.css"
|
|
26
|
+
],
|
|
27
|
+
"files": [
|
|
28
|
+
"dist",
|
|
29
|
+
"assets/*.png",
|
|
30
|
+
"assets/fonts",
|
|
31
|
+
"fonts.css",
|
|
32
|
+
"dist/ui/jimbo.css",
|
|
33
|
+
"jaml.schema.json",
|
|
34
|
+
"README.md",
|
|
35
|
+
"DESIGN.md",
|
|
36
|
+
"LICENSE"
|
|
37
|
+
],
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "tsc --pretty false && node -e \"const fs=require('fs');fs.mkdirSync('dist/ui',{recursive:true});fs.copyFileSync('src/ui/jimbo.css','dist/ui/jimbo.css');fs.copyFileSync('node_modules/motely-wasm/jaml.schema.json','jaml.schema.json');\"",
|
|
40
|
+
"dev": "tsc --watch",
|
|
41
|
+
"demo": "vite --config demo/vite.config.ts",
|
|
42
|
+
"typecheck": "tsc --noEmit --pretty false",
|
|
43
|
+
"prepack": "npm run build",
|
|
44
|
+
"storybook": "storybook dev -p 6006",
|
|
45
|
+
"build-storybook": "storybook build",
|
|
46
|
+
"lint": "eslint ."
|
|
47
|
+
},
|
|
48
|
+
"engines": {
|
|
49
|
+
"node": ">=18"
|
|
50
|
+
},
|
|
51
|
+
"publishConfig": {
|
|
52
|
+
"access": "public"
|
|
53
|
+
},
|
|
54
|
+
"repository": {
|
|
55
|
+
"type": "git",
|
|
56
|
+
"url": "https://github.com/OptimusPi/jaml-ui"
|
|
57
|
+
},
|
|
58
|
+
"homepage": "https://github.com/OptimusPi/jaml-ui#readme",
|
|
59
|
+
"bugs": {
|
|
60
|
+
"url": "https://github.com/OptimusPi/jaml-ui/issues"
|
|
61
|
+
},
|
|
62
|
+
"keywords": [
|
|
63
|
+
"balatro",
|
|
64
|
+
"jaml",
|
|
65
|
+
"motely",
|
|
66
|
+
"seed",
|
|
67
|
+
"card",
|
|
68
|
+
"sprite",
|
|
69
|
+
"ui"
|
|
70
|
+
],
|
|
71
|
+
"author": "pifreak",
|
|
72
|
+
"license": "MIT",
|
|
73
|
+
"peerDependencies": {
|
|
74
|
+
"@monaco-editor/react": ">=4.0.0",
|
|
75
|
+
"@react-spring/three": ">=9.0.0",
|
|
76
|
+
"@react-three/drei": ">=9.0.0",
|
|
77
|
+
"@react-three/fiber": ">=8.0.0",
|
|
78
|
+
"monaco-editor": ">=0.50.0",
|
|
79
|
+
"motely-wasm": "^14.4.0",
|
|
80
|
+
"react": "^18.2.0 || ^19.0.0",
|
|
81
|
+
"react-dom": "^18.2.0 || ^19.0.0",
|
|
82
|
+
"react-icons": ">=5.0.0",
|
|
83
|
+
"three": ">=0.150.0"
|
|
84
|
+
},
|
|
85
|
+
"peerDependenciesMeta": {
|
|
86
|
+
"@react-spring/three": {
|
|
87
|
+
"optional": true
|
|
88
|
+
},
|
|
89
|
+
"@react-three/fiber": {
|
|
90
|
+
"optional": true
|
|
91
|
+
},
|
|
92
|
+
"motely-wasm": {
|
|
93
|
+
"optional": true
|
|
94
|
+
},
|
|
95
|
+
"react-icons": {
|
|
96
|
+
"optional": true
|
|
97
|
+
},
|
|
98
|
+
"three": {
|
|
99
|
+
"optional": true
|
|
100
|
+
},
|
|
101
|
+
"@react-three/drei": {
|
|
102
|
+
"optional": true
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
"devDependencies": {
|
|
106
|
+
"@chromatic-com/storybook": "^5.1.2",
|
|
107
|
+
"@google/design.md": "^0.1.1",
|
|
108
|
+
"@monaco-editor/react": "^4.7.0",
|
|
109
|
+
"@react-spring/three": "^10.0.3",
|
|
110
|
+
"@react-three/drei": ">=9.0.0",
|
|
111
|
+
"@react-three/fiber": "^9.6.0",
|
|
112
|
+
"@storybook/addon-a11y": "^10.3.6",
|
|
113
|
+
"@storybook/addon-docs": "^10.3.6",
|
|
114
|
+
"@storybook/addon-onboarding": "^10.3.6",
|
|
115
|
+
"@storybook/addon-vitest": "^10.3.6",
|
|
116
|
+
"@storybook/react-vite": "^10.3.6",
|
|
117
|
+
"@types/node": "^25.6.0",
|
|
118
|
+
"@types/react": "^19.2.14",
|
|
119
|
+
"@types/react-dom": "^19.2.3",
|
|
120
|
+
"@types/three": "^0.184.0",
|
|
121
|
+
"@vitejs/plugin-react": "^5.0.4",
|
|
122
|
+
"@vitest/browser-playwright": "^4.1.5",
|
|
123
|
+
"@vitest/coverage-v8": "^4.1.5",
|
|
124
|
+
"clsx": "^2.1.1",
|
|
125
|
+
"js-yaml": "^4.1.1",
|
|
126
|
+
"lucide-react": "^1.14.0",
|
|
127
|
+
"monaco-editor": "^0.55.1",
|
|
128
|
+
"motely-wasm": "^14.4.0",
|
|
129
|
+
"playwright": "^1.59.1",
|
|
130
|
+
"react": "^19.2.4",
|
|
131
|
+
"react-dom": "^19.2.4",
|
|
132
|
+
"react-icons": "^5.6.0",
|
|
133
|
+
"storybook": "^10.3.6",
|
|
134
|
+
"tailwind-merge": "^2.6.1",
|
|
135
|
+
"three": "^0.184.0",
|
|
136
|
+
"typescript": "^5.9.3",
|
|
137
|
+
"vite": "^8.0.9",
|
|
138
|
+
"vitest": "^4.1.5",
|
|
139
|
+
"zustand": "^5.0.0"
|
|
140
|
+
},
|
|
141
|
+
"dependencies": {
|
|
142
|
+
"@json-render/core": "^0.18.0",
|
|
143
|
+
"@types/js-yaml": "^4.0.9"
|
|
144
|
+
}
|
|
145
|
+
}
|