rebuilt using alpinejs and removed unneccesary code to keep app smaller

michaelsboost · Jul 12, 2024 · 6dd42e9 · 6dd42e9
1 parent 172e787
commit 6dd42e9
Show file tree

Hide file tree

Showing 114 changed files with 42,039 additions and 18,080 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/App.js b/App.js
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Michael Schwartz
+Copyright (c) 2019-2024 Michael Schwartz
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -8,12 +8,12 @@ This app is capable of generating not just millions but billions of different co
 Screenshot:
 -------------
 
-![](https://raw.githubusercontent.com/michaelsboost/Character-Party/gh-pages/screenshot.png)
+![](https://raw.githubusercontent.com/michaelsboost/Character-Party/gh-pages/imgs/screenshot.png)
 
 Version
 -------------
 
-0.0.1
+0.0.2
 
 License
 -------------
@@ -25,30 +25,22 @@ Tech
 
 Character Party uses a number of open source projects to work properly:
 
-* [Polyrise](https://github.com/michaelsboost/Polyrise) - Web layout generated with Polyrise
-* [jQuery](http://jquery.com/) - included with [Polyrise](https://github.com/michaelsboost/Polyrise) export
-* [Animate.css](https://github.com/daneden/animate.css) - included with [Polyrise](https://github.com/michaelsboost/Polyrise) export
-* [Normalize](https://github.com/necolas/normalize.css) - CSS reset library
-* [Poly UI Kit](https://github.com/Guilh/Poly) - Beautiful and customizable responsive interface library
-* [html2canvas](https://html2canvas.hertzen.com) - Turn viewable canvas into a downloadable image
-* [FileSaver.js](https://github.com/eligrey/FileSaver.js/) - Client-side solution for saving files
-* [Background Music](https://youtu.be/uIYBnfsB37k) - Created by Mattia Cupelli
+* [Alpine.js](https://alpinejs.dev/) - Your new, lightweight, JavaScript framework.
+* [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.
 
 This app was inspired by [Jazza's Arty Party](https://jazzastudios.com/product/arty-games/) and [Protobot](http://protobot.org/).
 
-[![Get it on Google Play!](https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png)](https://play.google.com/store/apps/details?id=com.webdgap.characterparty)
-
 Development
 -------------
 
 Want to contribute? Great!  
 
-You can submit a pull request or simply share the project :)
+You can submit a pull request or simply share the project ☺
 
-*As of October 11th, 2019 Character Party is no longer an active project.
+*As of July 12th, 2024 Character Party is no longer an active project.
 All updates as of that date and on are solely contributor based implementations.*
 
-Of course, Character Party is free and open source (I even ported it to [Codepen](https://codepen.io/michaelsboost/pen/bGbZJKj?editors=0100)), so you can always fork the project and have fun :)
+Of course, Character Party is free and open source (I even ported it to [Codepen](https://codepen.io/michaelsboost/pen/bGbZJKj?editors=0100)), so you can always fork the project and have fun ☺
 
 [![ko-fi](https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0)](https://ko-fi.com/michaelsboost)
 

diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
diff --git a/css/polyrise.css b/css/polyrise.css
diff --git a/css/style.css b/css/style.css
diff --git a/demo.mp4 b/demo.mp4
diff --git a/js/.DS_Store → dist/.DS_Store b/js/.DS_Store → dist/.DS_Store
diff --git a/dist/style.css b/dist/style.css
diff --git a/favicon-16x16.png b/favicon-16x16.png
diff --git a/favicon-32x32.png b/favicon-32x32.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/imgs/german-shepherd-4614457_1280.jpg b/imgs/german-shepherd-4614457_1280.jpg
diff --git a/imgs/logo-192x192.png b/imgs/logo-192x192.png
diff --git a/imgs/logo-256x256.png b/imgs/logo-256x256.png
diff --git a/imgs/logo-384x384.png b/imgs/logo-384x384.png
diff --git a/imgs/logo-512x512.png b/imgs/logo-512x512.png
diff --git a/logo.svg → imgs/logo.svg b/logo.svg → imgs/logo.svg
diff --git a/imgs/screenshot.png b/imgs/screenshot.png
diff --git a/index.html b/index.html
@@ -1,91 +1,60 @@
-<!--
-Version: 0.0.1
-Character Party, copyright (c) by Michael Schwartz and others
-Distributed under an MIT license: https://github.com/michaelsboost/Character-Party/blob/gh-pages/LICENSE
-
-This is Character Party (https://michaelsboost.github.io/Character-Party/), Created for those that need an idea for a character to make
--->
-
 <!DOCTYPE html>
 <html>
   <head>
     <title>Character Party</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="initial-scale=1.0">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
     <meta name="description" content="Character Party was created for those that need an idea for a character to make.">
     <meta name="author" content="Michael Schwartz">
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
-    <link rel="manifest" href="site.webmanifest">
-    <link rel="stylesheet" href="libraries/polyui/polyui.css">
-    <link rel="stylesheet" href="libraries/font-awesome/font-awesome.css">
-    <link rel="stylesheet" href="libraries/animateCSS/animate.min.css">
-    <link rel="stylesheet" href="css/polyrise.css">
-    <link rel="stylesheet" href="css/style.css">
-    <meta property="og:url"         content="https://michaelsboost.com/characterparty" />
-    <meta property="og:type"        content="website" />
-    <meta property="og:title"       content="Character Party" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="Character Party">
+    <meta name="theme-color" content="#13171f">
+    <meta name="apple-mobile-web-app-title" content="Character Party">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="msapplication-starturl" content="./index.html">
+    <meta name="msapplication-navbutton-color" content="#13171f">
+    <meta property="og:url" content="https://michaelsboost.com/Character-Party" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Character Party" />
     <meta property="og:description" content="Character Party was created for those that need an idea for a character to make." />
-    <meta property="og:image"       content="https://raw.githubusercontent.com/michaelsboost/Character-Party/gh-pages/screenshot.png" />
+    <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/style.css">
   </head>
-  <body>
-    <!-- backgrounds -->
-    <div class="whitefill" style="display: none;"></div>
-    <div class="bg-image"></div>
-
-    <!-- play music -->
-    <a id="music" class="animated slideInDown delay-2s whitetxt fr">
-      <i id="musicIcon" class="fa fa-volume-off"></i>
-      <audio id="bgMusic" class="hide" src="https://michaelsboost.com/Character-Party/media/music.mp3" controls preload loop></audio>
-    </a>
-
-    <!-- display area -->
-    <div id="grablog" class="header table bg-overlay3">
-      <div class="cell tc">
-        <div class="grid">
-          <div class="grid__col--12 nomar">
-            <div class="panel--centered centered grid__col--12">
-              <h1 id="character">Character Party Generator</h1><br>
-              <h2 id="scenario">
-                <div class="tc">
-                  Sorry for the error. <a class="whitetxt" href="javascript:location.reload(true)"><u>Please refresh</u></a>.
-                </div>
-              </h2>
-
-              <div id="btnArea" style="margin-bottom: 4em;" data-html2canvas-ignore="true">
-                <a id="generate" class="btn--success bounceInUp bounceInUp3s">
-                  <i class="fa fa-refresh" style="transform: scale(2);"></i>
-                </a>
-                <a class="btn--borderwhite bounceInUp bounceInUp3s" href="https://github.com/michaelsboost/Character-Party" target="_blank">
-                  CONTRIBUTE
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div class="grid__col--12 tc whitetxt">
-            <div id="author">
-              Made with <span class="fa fa-heart" style="color: #f66;"></span> and <span class="fa fa-coffee" style="color: #D0C4A7;"></span> by <a class="whitetxt" href="http://michaelsboost.github.io/" target="_blank"><u>Michael</u></a> &amp; others.
-            </div>
-          </div>
+  <body class="absolute inset-0">
+    <main x-data="App()" x-init="generate()" class="h-full text-white text-center grid grid-cols-1 gap-2 items-center font-thin">
+      <div class="absolute inset-0 bg-gradient-to-r from-emerald-700 to-cyan-700"></div>
+      <div class="relative m-auto container">
+        <header>
+          <hgroup class="m-4 capitalize">
+            <h1 class="text-4xl mb-4" x-html="output.name"></h1>
+            <h2 class="text-xl">
+              <div class="mb-2">Category: <span x-html="output.category"></span></div>
+              <div><span x-html="output.profession"></span></div>
+            </h2>
+          </hgroup>
+        </header>
+        <div class="mb-4">
+          <button 
+            class="rounded-md border border-solid border-green-500 bg-green-500 py-[.85rem] px-12 mr-4"
+            @click="generate()">
+            <span x-html="icons.share"></span>
+          </button>
+          <a class="uppercase rounded-md border border-solid border-blue-500 bg-blue-500 p-[1rem]" href="https://github.com/michaelsboost/Character-Party" target="_blank">
+            contribute
+          </a>
         </div>
+        <footer>
+          Made with <i x-html="icons.heart" class="mx-1 relative -top-[.1rem] text-red-400"></i> by <a href="https://michaelsboost.com/" target="_blank" class="border-0 border-b border-solid pb-1">Michael Schwartz</a>
+        </footer>
       </div>
     </div>
-
-    <!-- download result -->
-    <a id="download" class="animated slideInUp delay-2s whitetxt">
-      <i class="fa fa-camera"></i>
-    </a>
-
-    <script src="libraries/filesaver/Blob.js"></script>
-    <script src="libraries/filesaver/FileSaver.js"></script>
-    <script src="libraries/html2canvas/html2canvas.js"></script>
-    <script src="libraries/jquery/jquery.js"></script>
-    <script src="js/polyrise.js"></script>
-    <script src="js/detecthttp.js"></script>
-    <script src="js/script.js"></script>
+
+    <script src="libraries/alpinejs/alpinejs.js" defer></script>
+    <script src="App.js"></script>
   </body>
 </html>
diff --git a/js/detecthttp.js b/js/detecthttp.js
diff --git a/js/polyrise.js b/js/polyrise.js