feat(ctr): Dynamically generate spritesheets

.gitignore

@@ -6,4 +6,9 @@ newman
 config.json
 uploads/
 
-.docker/mitmproxy-data
+.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

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"
   }

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",

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!')"
 						>
-							<img className="preview-image sprite" src="" />
+							<img className="sprite sp-screenshot" src="" />
 						</button>
 						<input id="screenshot-value" type="hidden" name="screenshot" value="" />
 					</div>
 					<div className="textarea-container textarea-with-menu active-text">
 						<menu className="textarea-menu">
 							<li className="textarea-menu-text">
-								<span className="sprite text-input selected" id="text-sprite"></span>
+								<span className="sprite sp-text-input selected" id="text-sprite"></span>
 								<input
 									type="radio"
 									name="_post_type"
@@ -110,7 +110,7 @@ export function CtrNewPostView(props: NewPostViewProps): ReactNode {
 								</textarea>
 							</li>
 							<li className="textarea-menu-memo">
-								<span className="sprite memo" id="memo-sprite"></span>
+								<span className="sprite sp-memo-input" id="memo-sprite"></span>
 								<input
 									type="radio"
 									name="_post_type"

apps/juxtaposition-ui/src/services/juxt-web/views/ctr/post.tsx

@@ -38,7 +38,7 @@ export function CtrPostView(props: PostViewProps): ReactNode {
 							? (
 									<a href={utils.url('/topics', { topic_tag: post.topic_tag })} data-pjax="#body">
 										<span>
-											<span className="sprite tag"></span>
+											<span className="sprite sp-tag inline-sprite"></span>
 											<span className="tags">{post.topic_tag}</span>
 										</span>
 									</a>
@@ -92,14 +92,18 @@ export function CtrPostView(props: PostViewProps): ReactNode {
 							})}
 							data-post={post.id}
 						>
-							<span className="sprite yeah"></span>
+							<span className="sprite sp-yeah inline-sprite"></span>
 						</button>
 						<a href={`/posts/${post.id}`} className="to-permalink-button" data-pjax="#body">
-							<span className="sprite feeling" id={`count-${post.id}`}>{post.empathy_count}</span>
+							<span className="sprite sp-yeah-small inline-sprite"></span>
+							<span className="yeah-count" id={`count-${post.id}`}>{post.empathy_count}</span>
 							{' '}
 							{!props.isReply
 								? (
-										<span className="sprite reply">{post.reply_count}</span>
+										<>
+											<span className="sprite sp-reply inline-sprite"></span>
+											<span className="reply-count">{post.reply_count}</span>
+										</>
 									)
 								: null}
 						</a>

apps/juxtaposition-ui/src/webfiles/ctr/community.ejs

@@ -20,11 +20,11 @@
                 </span>
                 <span class="text">
                     <span>
-                        <span class="sprite posts"></span>
-                        <%= bundle.numPosts %>
+                        <span class="sprite sp-post-count inline-sprite"></span>
+                        <span id="post-count"><%= bundle.numPosts %></span>
                     </span>
                     <span>|
-                        <span class="sprite followers"></span>
+                        <span class="sprite sp-follower-count inline-sprite"></span>
                         <span id="followers"><%= community.followers %></span>
                     </span>
                 </span>
@@ -45,7 +45,7 @@
         <%}%>
         <%if(community.permissions.open){%>
         <button type="button" class="submit follow yeah-button <%if(children) {%>suggested<%}%> <%if(userContent.followed_communities.indexOf(community.olive_community_id) !== -1){ %>selected<%}%>" onclick="follow(this)" data-sound="SE_WAVE_CHECKBOX_UNCHECK" data-url="/titles/follow"  data-community-id="<%= community.olive_community_id %>">
-            <span class="sprite yeah"></span>
+            <span class="sprite sp-yeah inline-sprite"></span>
         </button>
         <%}%>
     </header>

apps/juxtaposition-ui/src/webfiles/ctr/js/juxt.js

@@ -129,20 +129,23 @@ function initYeah() {
 	}
 	function yeah(e) {
 		var el = e.currentTarget;
+		var sprite = el.querySelector('.sprite.sp-yeah');
 		var id = el.getAttribute('data-post');
 		var parent = document.getElementById(id);
 		var count = document.getElementById('count-' + id);
 		el.disabled = true;
 		var params = 'postID=' + id;
 		if (classList.contains(el, 'selected')) {
 			classList.remove(el, 'selected');
+			classList.remove(sprite, 'selected');
 			classList.remove(parent, 'yeah');
 			if (count) {
 				count.innerText -= 1;
 			}
 			cave.snd_playSe('SE_OLV_CANCEL');
 		} else {
 			classList.add(el, 'selected');
+			classList.add(sprite, 'selected');
 			classList.add(parent, 'yeah');
 			if (count) {
 				count.innerText = ++count.innerText;

apps/juxtaposition-ui/src/webfiles/ctr/partials/new_post.ejs

@@ -9,55 +9,55 @@
             <div class="feeling-selector expression">
                 <img src="<%= cdnURL %>/mii/<%= pid %>/normal_face.png" id="mii-face" class="icon">
                 <ul class="buttons">
-                    <li><input type="radio" name="feeling_id" value="0" class="feeling-button-normal"
+                    <li><input type="radio" name="feeling_id" value="0" class="sprite sp-feeling-normal"
                                data-mii-face-url="<%= cdnURL %>/mii/<%= pid %>/normal_face.png" checked
-                               data-sound="SE_WAVE_MII_FACE_00">
+                               data-sound="SE_WAVE_MII_FACE_00"/>
                     </li>
                     <li>
-                        <input type="radio" name="feeling_id" value="1" class="feeling-button-happy"
+                        <input type="radio" name="feeling_id" value="1" class="sprite sp-feeling-happy"
                                data-mii-face-url="<%= cdnURL %>/mii/<%= pid %>/smile_open_mouth.png"
-                               data-sound="SE_WAVE_MII_FACE_01">
+                               data-sound="SE_WAVE_MII_FACE_01"/>
                     </li>
                     <li>
-                        <input type="radio" name="feeling_id" value="2" class="feeling-button-like"
+                        <input type="radio" name="feeling_id" value="2" class="sprite sp-feeling-like"
                                data-mii-face-url="<%= cdnURL %>/mii/<%= pid %>/wink_left.png"
-                               data-sound="SE_WAVE_MII_FACE_02">
+                               data-sound="SE_WAVE_MII_FACE_02"/>
                     </li>
                     <li>
-                        <input type="radio" name="feeling_id" value="3" class="feeling-button-surprised"
+                        <input type="radio" name="feeling_id" value="3" class="sprite sp-feeling-surprise"
                                data-mii-face-url="<%= cdnURL %>/mii/<%= pid %>/surprise_open_mouth.png"
-                               data-sound="SE_WAVE_MII_FACE_03">
+                               data-sound="SE_WAVE_MII_FACE_03"/>
                     </li>
                     <li>
-                        <input type="radio" name="feeling_id" value="4" class="feeling-button-frustrated"
+                        <input type="radio" name="feeling_id" value="4" class="sprite sp-feeling-frustrated"
                                data-mii-face-url="<%= cdnURL %>/mii/<%= pid %>/frustrated.png"
-                               data-sound="SE_WAVE_MII_FACE_04">
+                               data-sound="SE_WAVE_MII_FACE_04"/>
                     </li>
                     <li>
-                        <input type="radio" name="feeling_id" value="5" class="feeling-button-puzzled"
+                        <input type="radio" name="feeling_id" value="5" class="sprite sp-feeling-puzzled"
                                data-mii-face-url="<%= cdnURL %>/mii/<%= pid %>/sorrow.png"
-                               data-sound="SE_WAVE_MII_FACE_05">
+                               data-sound="SE_WAVE_MII_FACE_05"/>
                     </li>
                 </ul>
             </div>
             <div class="image-selector dropdown">
                 <button id="screenshot-button" type="button" data-toggle="dropdown" class="dropdown-toggle" data-sound="SE_WAVE_BALLOON_OPEN"
                         onclick="window.alert('Screenshots are not ready yet. Check back soon!')">
-                    <img class="preview-image sprite" src="">
+                    <img class="sprite sp-screenshot">
                 </button>
                 <input id="screenshot-value" type="hidden" name="screenshot" value="">
             </div>
             <div class="textarea-container textarea-with-menu active-text">
                 <menu class="textarea-menu">
                     <li class="textarea-menu-text">
-                        <span class="sprite text-input selected" id="text-sprite"></span>
+                        <span class="sprite sp-text-input selected" id="text-sprite"></span>
                         <input type="radio" name="_post_type" value="body" checked data-sound=""
                                 onclick="newText()">
                         <textarea name="body" id="post-text" class="textarea-text selected" value="" maxlength="280"
                                   placeholder="Share your thoughts in a post to a community or to your followers."></textarea>
                     </li>
                     <li class="textarea-menu-memo">
-                        <span class="sprite memo" id="memo-sprite"></span>
+                        <span class="sprite sp-memo-input" id="memo-sprite"></span>
                         <input type="radio" name="_post_type" value="painting" data-sound=""
                                onclick="newPainting(false)">
                         <div class="textarea-memo" id="post-memo" data-sound="" onclick="newPainting(false)">

apps/juxtaposition-ui/src/webfiles/ctr/partials/post_template.ejs

@@ -10,7 +10,7 @@
                 <%if(post.topic_tag) {%>
                 <a href="/topics?topic_tag=<%=post.topic_tag%>" data-pjax="#body">
                     <span>
-                        <span class="sprite tag"></span>
+                        <span class="sprite sp-tag inline-sprite"></span>
                         <span class="tags"><%=post.topic_tag%></span>
                     </span>
                 </a>
@@ -48,13 +48,15 @@
             </div>
             <div class="post-buttons">
                 <button type="button" class="submit yeah-button <%if(post.yeahs && post.yeahs.indexOf(userContent.pid) !== -1){ %> selected <%}%>" data-post="<%= post.id %>">
-                    <span class="sprite yeah"></span>
+                    <span class="sprite sp-yeah inline-sprite"></span>
                 </button>
                 <a <%if(!locals.yeah) {%>href="/posts/<%= post.id %>"<%}%> class="to-permalink-button" data-pjax="#body">
                     <%if(!locals.yeah) {%>
-                        <span class="sprite feeling" id="count-<%= post.id %>"><%=post.empathy_count %></span>
+                        <span class="sprite sp-yeah-small inline-sprite" ></span>
+                        <span class="yeah-count" id="count-<%= post.id %>"><%=post.empathy_count %></span>
                         <%if(!reply) {%>
-                        <span class="sprite reply"><%=post.reply_count %></span>
+                        <span class="sprite sp-reply inline-sprite"></span>
+                        <span class="reply-count"><%=post.reply_count %></span>
                         <%}%>
                     <%}%>
                 </a>

apps/juxtaposition-ui/src/webfiles/ctr/user_page.ejs

@@ -21,11 +21,11 @@
 				<%if(!pnid.deleted && !banned) {%>
                 <span class="text">
                     <span>
-                        <span class="sprite posts"></span>
-                        <%=numPosts%>
+                        <span class="sprite sp-post-count inline-sprite"></span>
+                        <span id="post-count"><%=numPosts%></span>
                     </span>
                     <span>|
-                        <span class="sprite followers"></span>
+                        <span class="sprite sp-follower-count inline-sprite"></span>
                         <span id="followers"><%= userContent.following_users.length - 1 %></span>
                     </span>
                 </span>
@@ -38,7 +38,7 @@
         <%}%>
         <%if(pnid.pid !== pid && !pnid.deleted && !banned) {%>
         <button type="button" class="submit follow yeah-button <%if(parentUserContent.followed_users.indexOf(userContent.pid) !== -1){ %>selected<%}%>" onclick="follow(this)" data-sound="SE_WAVE_CHECKBOX_UNCHECK" data-url="/users/follow" data-community-id="<%=pnid.pid%>">
-            <span class="sprite yeah"></span>
+            <span class="sprite sp-yeah inline-sprite"></span>
         </button>
         <%}%>
     </header>

apps/juxtaposition-ui/tsup.config.ts

@@ -2,6 +2,8 @@ import { defineConfig } from 'tsup';
 import { copy } from 'esbuild-plugin-copy';
 import { raw } from 'esbuild-raw-plugin';
 import { fixImportsPlugin } from 'esbuild-fix-imports-plugin';
+import { oxipng } from '@repo/esbuild-plugin-oxipng';
+import { spritesmith } from '@repo/esbuild-plugin-spritesmith';
 import browserslist from 'browserslist-to-esbuild';
 
 export default defineConfig([
@@ -53,9 +55,16 @@ export default defineConfig([
 		format: 'iife',
 
 		esbuildOptions(options): void {
-			options.external = ['/images/*', '/fonts/*'];
+			options.external = ['/fonts/*'];
 		},
 		esbuildPlugins: [
+			oxipng({ loader: 'dataurl' }),
+			spritesmith({
+				input_folder: './src/webfiles/ctr/images/sprites/',
+				output_css: './src/webfiles/ctr/css/sprites.css',
+				output_image: './src/webfiles/ctr/images/sprites.png',
+				output_image_url: '@/webfiles/ctr/images/sprites.png'
+			}),
 			copy({
 				resolveFrom: 'cwd',
 				assets: [