diff --git a/.gitignore b/.gitignore
index 13e00578..5b7252b8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,9 @@ newman
config.json
uploads/
-.docker/mitmproxy-data
\ No newline at end of file
+.docker/mitmproxy-data
+.DS_Store
+
+# auto generated files
+apps/juxtaposition-ui/src/webfiles/ctr/css/sprites.css
+apps/juxtaposition-ui/src/webfiles/ctr/images/sprites.png
\ No newline at end of file
diff --git a/apps/juxtaposition-ui/nodemon.json b/apps/juxtaposition-ui/nodemon.json
index cabe691d..5b610579 100644
--- a/apps/juxtaposition-ui/nodemon.json
+++ b/apps/juxtaposition-ui/nodemon.json
@@ -3,6 +3,10 @@
"src/"
],
"ext": "js,ts,ejs,tsx,jsx,json,css",
+ "ignore": [
+ "src/webfiles/ctr/css/sprites.css",
+ "src/webfiles/ctr/images/sprites.png"
+ ],
"env": {
"NODE_ENV": "development"
}
diff --git a/apps/juxtaposition-ui/package.json b/apps/juxtaposition-ui/package.json
index a47b0723..87ff34b9 100644
--- a/apps/juxtaposition-ui/package.json
+++ b/apps/juxtaposition-ui/package.json
@@ -13,7 +13,8 @@
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"build": "tsup && tsc --noEmit",
- "start": "node --enable-source-maps dist/server.js"
+ "start": "node --enable-source-maps dist/server.js",
+ "build:sprites": "node scripts/sprites.ts"
},
"dependencies": {
"@aws-sdk/client-s3": "^3.958.0",
@@ -63,6 +64,8 @@
"@types/node": "^22.19.1",
"@types/react": "^19.1.13",
"@types/react-dom": "^19.2.3",
+ "@repo/esbuild-plugin-oxipng": "^0.0.0",
+ "@repo/esbuild-plugin-spritesmith": "^0.0.0",
"browserslist": "^4.28.0",
"browserslist-to-esbuild": "^2.1.1",
"ejs-lint": "^2.0.1",
diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/newPostView.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/newPostView.tsx
index d0791958..9261cd03 100644
--- a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/newPostView.tsx
+++ b/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/newPostView.tsx
@@ -7,38 +7,38 @@ const empathies = [
value: 0,
miiFaceFile: 'normal_face.png',
sound: 'SE_WAVE_MII_FACE_00',
- className: 'feeling-button-normal',
+ className: 'sprite sp-feeling-normal',
isDefault: true
},
{
value: 1,
miiFaceFile: 'smile_open_mouth.png',
sound: 'SE_WAVE_MII_FACE_01',
- className: 'feeling-button-happy'
+ className: 'sprite sp-feeling-happy'
},
{
value: 2,
miiFaceFile: 'wink_left.png',
sound: 'SE_WAVE_MII_FACE_02',
- className: 'feeling-button-like'
+ className: 'sprite sp-feeling-like'
},
{
value: 3,
miiFaceFile: 'surprise_open_mouth.png',
sound: 'SE_WAVE_MII_FACE_03',
- className: 'feeling-button-surprised'
+ className: 'sprite sp-feeling-surprise'
},
{
value: 4,
miiFaceFile: 'frustrated.png',
sound: 'SE_WAVE_MII_FACE_04',
- className: 'feeling-button-frustrated'
+ className: 'sprite sp-feeling-frustrated'
},
{
value: 5,
miiFaceFile: 'sorrow.png',
sound: 'SE_WAVE_MII_FACE_05',
- className: 'feeling-button-puzzled'
+ className: 'sprite sp-feeling-puzzled'
}
];
@@ -83,14 +83,14 @@ export function CtrNewPostView(props: NewPostViewProps): ReactNode {
data-sound="SE_WAVE_BALLOON_OPEN"
evt-click="window.alert('Screenshots are not ready yet. Check back soon!')"
>
- ![]()
+ ![]()