bug fixes

README.md

@@ -11,7 +11,7 @@ Screenshot:
 Version
 -------------
 
-0.0.3
+0.0.4
 
 License
 -------------
@@ -24,6 +24,7 @@ Tech
 Character Party leverages several open-source technologies:
 
 * [TailwindCSS](https://tailwindcss.com/) - A utility-first CSS framework packed with classes like ``flex, pt-4, text-center and rotate-90`` that can be composed to build any design, directly in your markup.
+* [Mithril.js](https://mithril.js.org/) - A modern client-side JavaScript framework for building single-page applications, known for its minimalistic API and performance.
 
 This app was inspired by [Jazza's Arty Party](https://jazzastudios.com/product/arty-games/) and [Protobot](http://protobot.org/).
 

dist/script.js

@@ -1,4 +1,6 @@
-// Define the data object here
+import htm from 'https://unpkg.com/htm?module'
+const html = htm.bind(m)
+
 const data = {
   moods: [
     "accomplished",
@@ -3534,26 +3536,20 @@ const data = {
   ]
 };
 
-const connect = () => {
-  this.categories = data.categories;
-  this.characters = data.characters;
-  this.moods = data.moods;
-  this.jobs = data.jobs;
-  this.generate();
-};
 const randomNum = n => {
-  return Math.floor(Math.random() * n);
-};
-const startsWithVowel = str => {
-  return /^[aeiou]/i.test(str);
-};
+  return Math.floor( Math.random() * n );
+}
 const searchWeb = val => {
   return `<a class="border-0 border-b border-solid border-black pb-1" href="https://duckduckgo.com/?q=${val.toLowerCase().replace(/ /, '+')}%3F&t=h_&ia=web" target="_blank">${val}</a>`;
-};
+}
 const searchPics = val => {
   return `<a class="border-0 border-b border-solid border-black pb-1" href="https://duckduckgo.com/?q=${val.toLowerCase().replace(/ /, '+')}&t=h_&iax=images&ia=images" target="_blank">${val}</a>`;
-};
-window.generate = () => {
+}
+const startsWithVowel = str => {
+  // Regular expression to match any vowel at the beginning of the string
+  return /^[aeiou]/i.test(str);
+}
+const generate = state => {
   const CharactersCategory = randomNum(data.categories.length);
   const category = data.categories[CharactersCategory];
   const CharacterCategoryArray = randomNum(data.characters[category].length);
@@ -3565,8 +3561,61 @@ window.generate = () => {
   let profession = data.jobs[randomNum(data.jobs.length)];
   profession = startsWithVowel(profession) ? `Who is an ${searchWeb(profession)}` : `Who is a ${searchWeb(profession)}`;
 
-  document.getElementById('nameTarget').innerHTML = `${mood} ${searchPics(CharacterCategoryArrayItem)}`;
-  document.getElementById('categoryTarget').innerHTML = searchWeb(category);
-  document.getElementById('professionTarget').innerHTML = profession;
+  return {
+    ...state,
+    name: `${mood} ${searchPics(CharacterCategoryArrayItem)}`,
+    category: searchWeb(category),
+    profession: profession
+  };
 };
-generate();
+
+const App = {
+  oninit: vnode => {
+    vnode.state.character = generate();
+  },
+  view: vnode => html`
+    <main class="absolute inset-0 text-black text-center grid grid-cols-1 gap-2 items-center font-thin">
+      <div class="background">
+        ${Array.from({ length: 20 }, (_, i) => html`<span key=${i}></span>`)}
+      </div>
+      <div class="relative m-auto container">
+        <header>
+          <hgroup class="m-4 capitalize">
+            <h1 class="text-5xl mb-4" innerHTML=${vnode.state.character.name}></h1>
+            <h2 class="text-xl">
+              <div class="my-3">Category: <span innerHTML=${vnode.state.character.category}></span></div>
+              <div innerHTML=${vnode.state.character.profession}></div>
+            </h2>
+          </hgroup>
+        </header>
+        <div class="flex mb-4">
+          <div class="flex items-center gap-4 m-auto">
+            <button 
+              aria-label="generate a character idea"
+              name="generate a character idea"
+              class="rounded-md text-white border border-solid border-[#27b159] bg-[#27b159] py-[1.15rem] px-12"
+              onclick=${() => vnode.state.character = generate()}>
+              <span>
+                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13.5A7.5 7.5 0 1 1 11.5 6H20m0 0l-3-3m3 3l-3 3"></path>
+                </svg>
+              </span>
+            </button>
+            <a class="uppercase rounded-md text-white border border-solid border-[#306ed3] bg-[#306ed3] p-[1rem]" href="https://github.com/michaelsboost/Character-Party" target="_blank">
+              contribute
+            </a>
+          </div>
+        </div>
+        <footer>
+          Made with 
+          <svg class="inline-block h-5 mx-1 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037.033l.034-.03a6 6 0 0 1 4.733-1.44l.246.036a6 6 0 0 1 3.364 10.008l-.18.185l-.048.041l-7.45 7.379a1 1 0 0 1-1.313.082l-.094-.082l-7.493-7.422A6 6 0 0 1 6.979 3.074"/>
+          </svg> 
+          by <a href="https://michaelsboost.com/" target="_blank" class="border-0 border-b border-solid border-black pb-1">Michael Schwartz</a>
+        </footer>
+      </div>
+    </main>
+  `
+};
+
+m.mount(document.getElementById('root'), App);

index.html

@@ -18,20 +18,19 @@
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Character Party" />
     <meta property="og:description" content="Character Party is a tool for generating unique character ideas by combining various moods, job titles, and categories. Explore endless combinations and discover inspiration for your next creative project!" />
-    <meta property="og:image"       content="https://raw.githubusercontent.com/michaelsboost/Character-Party/gh-pages/imgs/screenshot.png" />
     <link rel="manifest" href="manifest.json">
     <link rel="shortcut icon" type="image/x-icon" href="imgs/logo.svg">
     <link rel="icon" type="image/svg+xml" href="imgs/logo.svg" />
     <link rel="apple-touch-icon" href="imgs/logo.svg">
+    <link rel="stylesheet" href="dist/bundle.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="dist/bundle.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/mithril.min.js"></script>
   </head>
   <body>
     <div id="root"></div>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/mithril.min.js"></script>
     <script src="dist/script.js" type="module"></script>
     <script src="https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js"></script>
     <script>

manifest.json

@@ -4,8 +4,8 @@
   "display": "standalone",
   "start_url": "./index.html",
   "lang": "en-US",
-  "name": "Character Party",
-  "short_name": "Character Party",
+  "name": "characterparty",
+  "short_name": "characterparty",
   "description": "Character Party is a tool for generating unique character ideas by combining various moods, job titles, and categories. Explore endless combinations and discover inspiration for your next creative project!",
   "icons": [
     {

package.json

@@ -1,9 +1,9 @@
 {
   "name": "characterparty",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
-    "build:css": "postcss src/style.css -o dist/style.css",
+    "build:css": "postcss src/bundle.css -o dist/bundle.css",
     "build:js": "rollup -c",
     "build": "npm run build:css && npm run build:js",
     "serve": "http-server -c-1 -p 8081"
@@ -17,7 +17,6 @@
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
     "terser": "^5.10.0",
-    "http-server": "^14.1.1",
-    "esbuild": "^0.23.0"
+    "http-server": "^14.1.1"
   }
 }

postcss.config.cjs

@@ -1,12 +1,12 @@
 module.exports = {
   plugins: [
     require('postcss-import'),
-    require('tailwindcss'),
     require('autoprefixer'),
+    require('tailwindcss'),
     require('cssnano')({
       preset: ['default', {
         discardComments: { removeAll: true }, // Remove all comments
       }],
     }),
   ],
-};
+};

rollup.config.js

@@ -8,6 +8,8 @@ export default {
     name: 'characterparty'
   },
   plugins: [
+
+
     terser() // minifies the JavaScript
   ]
 };

src/script.js

@@ -1,4 +1,6 @@
-// Define the data object here
+import htm from 'https://unpkg.com/htm?module'
+const html = htm.bind(m)
+
 const data = {
   moods: [
     "accomplished",
@@ -3534,26 +3536,20 @@ const data = {
   ]
 };
 
-const connect = () => {
-  this.categories = data.categories;
-  this.characters = data.characters;
-  this.moods = data.moods;
-  this.jobs = data.jobs;
-  this.generate();
-};
 const randomNum = n => {
-  return Math.floor(Math.random() * n);
-};
-const startsWithVowel = str => {
-  return /^[aeiou]/i.test(str);
-};
+  return Math.floor( Math.random() * n );
+}
 const searchWeb = val => {
   return `<a class="border-0 border-b border-solid border-black pb-1" href="https://duckduckgo.com/?q=${val.toLowerCase().replace(/ /, '+')}%3F&t=h_&ia=web" target="_blank">${val}</a>`;
-};
+}
 const searchPics = val => {
   return `<a class="border-0 border-b border-solid border-black pb-1" href="https://duckduckgo.com/?q=${val.toLowerCase().replace(/ /, '+')}&t=h_&iax=images&ia=images" target="_blank">${val}</a>`;
-};
-window.generate = () => {
+}
+const startsWithVowel = str => {
+  // Regular expression to match any vowel at the beginning of the string
+  return /^[aeiou]/i.test(str);
+}
+const generate = state => {
   const CharactersCategory = randomNum(data.categories.length);
   const category = data.categories[CharactersCategory];
   const CharacterCategoryArray = randomNum(data.characters[category].length);
@@ -3565,8 +3561,61 @@ window.generate = () => {
   let profession = data.jobs[randomNum(data.jobs.length)];
   profession = startsWithVowel(profession) ? `Who is an ${searchWeb(profession)}` : `Who is a ${searchWeb(profession)}`;
 
-  document.getElementById('nameTarget').innerHTML = `${mood} ${searchPics(CharacterCategoryArrayItem)}`;
-  document.getElementById('categoryTarget').innerHTML = searchWeb(category);
-  document.getElementById('professionTarget').innerHTML = profession;
+  return {
+    ...state,
+    name: `${mood} ${searchPics(CharacterCategoryArrayItem)}`,
+    category: searchWeb(category),
+    profession: profession
+  };
 };
-generate();
+
+const App = {
+  oninit: vnode => {
+    vnode.state.character = generate();
+  },
+  view: vnode => html`
+    <main class="absolute inset-0 text-black text-center grid grid-cols-1 gap-2 items-center font-thin">
+      <div class="background">
+        ${Array.from({ length: 20 }, (_, i) => html`<span key=${i}></span>`)}
+      </div>
+      <div class="relative m-auto container">
+        <header>
+          <hgroup class="m-4 capitalize">
+            <h1 class="text-5xl mb-4" innerHTML=${vnode.state.character.name}></h1>
+            <h2 class="text-xl">
+              <div class="my-3">Category: <span innerHTML=${vnode.state.character.category}></span></div>
+              <div innerHTML=${vnode.state.character.profession}></div>
+            </h2>
+          </hgroup>
+        </header>
+        <div class="flex mb-4">
+          <div class="flex items-center gap-4 m-auto">
+            <button 
+              aria-label="generate a character idea"
+              name="generate a character idea"
+              class="rounded-md text-white border border-solid border-[#27b159] bg-[#27b159] py-[1.15rem] px-12"
+              onclick=${() => vnode.state.character = generate()}>
+              <span>
+                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13.5A7.5 7.5 0 1 1 11.5 6H20m0 0l-3-3m3 3l-3 3"></path>
+                </svg>
+              </span>
+            </button>
+            <a class="uppercase rounded-md text-white border border-solid border-[#306ed3] bg-[#306ed3] p-[1rem]" href="https://github.com/michaelsboost/Character-Party" target="_blank">
+              contribute
+            </a>
+          </div>
+        </div>
+        <footer>
+          Made with 
+          <svg class="inline-block h-5 mx-1 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037.033l.034-.03a6 6 0 0 1 4.733-1.44l.246.036a6 6 0 0 1 3.364 10.008l-.18.185l-.048.041l-7.45 7.379a1 1 0 0 1-1.313.082l-.094-.082l-7.493-7.422A6 6 0 0 1 6.979 3.074"/>
+          </svg> 
+          by <a href="https://michaelsboost.com/" target="_blank" class="border-0 border-b border-solid border-black pb-1">Michael Schwartz</a>
+        </footer>
+      </div>
+    </main>
+  `
+};
+
+m.mount(document.getElementById('root'), App);

src/source.html

@@ -1,59 +1 @@
-<main class="absolute inset-0 text-black text-center grid grid-cols-1 gap-2 items-center font-thin">
-    <div class="background">
-      <!-- Background Elements -->
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-    <div class="relative m-auto container">
-      <header>
-        <hgroup class="m-4 capitalize">
-          <h1 class="text-5xl mb-4" id="nameTarget"></h1>
-          <h2 class="text-xl">
-            <div class="my-3">Category: <span id="categoryTarget"></span></div>
-            <div id="professionTarget"></div>
-          </h2>
-        </hgroup>
-      </header>
-      <div class="flex mb-4">
-        <div class="flex items-center gap-4 m-auto">
-          <button 
-            aria-label="generate a character idea"
-            name="generate a character idea"
-            class="rounded-md text-white border border-solid border-[#27b159] bg-[#27b159] py-[1.15rem] px-12"
-            onclick="generate()">
-            <svg class="h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13.5A7.5 7.5 0 1 1 11.5 6H20m0 0l-3-3m3 3l-3 3"></path>
-            </svg>
-          </button>
-          <a class="uppercase rounded-md text-white border border-solid border-[#306ed3] bg-[#306ed3] p-[1rem]" href="https://github.com/michaelsboost/Character-Party" target="_blank">
-            Contribute
-          </a>
-        </div>
-      </div>
-      <footer>
-        Made with 
-        <svg class="inline-block h-5 mx-1 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037.033l.034-.03a6 6 0 0 1 4.733-1.44l.246.036a6 6 0 0 1 3.364 10.008l-.18.185l-.048.041l-7.45 7.379a1 1 0 0 1-1.313.082l-.094-.082l-7.493-7.422A6 6 0 0 1 6.979 3.074"/>
-        </svg> 
-        by <a href="https://michaelsboost.com/" target="_blank" class="border-0 border-b border-solid border-black pb-1">Michael Schwartz</a>
-      </footer>
-    </div>
-  </main>
+<div id="root"></div>

sw.js

@@ -4,7 +4,7 @@ importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox
 const { registerRoute } = workbox.routing;
 const { CacheFirst } = workbox.strategies;
 
-const cacheName = 'CharacterParty-cache';
+const cacheName = 'characterparty-cache';
 
 workbox.routing.registerRoute(
 ({ request }) => request.destination === 'script' ||