add new feature, messages, and other changes

- added ability to pick up Arona and drag her around the screen.
- added new messages for Arona.
  - 10 new messages when picking up and putting down Arona.
  - "Show me the Arisu dance."
- updated triggers for some of Arona's messages to be more specific.
  - "Mutsuki dance" --> "Show me the Mutsuki dance"
- changed "Alice" --> "Arisu" in various files.
- enhanced prompt flexibility to handle different variations of existing phrases.
  - example: "Arona is cunny." OR "You're cunny, Arona."
- fixed message randomizer hanging up if a different message couldn't be found.

404.html

@@ -32,8 +32,8 @@ <h1><a href="https://sethclydesdale.github.io/cunny-code/" id="logo"><img src="h
           <div class="menu-inner center">
             <h2 class="title" id="not-found" style="font-size:36px;">404 Cunny Not Found</h2>
             <p style="font-size:20px;">Sorry, but the cute and funny that you're looking for cannot be found.</p>
-            <div class="center"><img id="alice_dance" src="https://sethclydesdale.github.io/cunny-code/resources/images/alice.gif" alt="alice" style="display:none; cursor:pointer;"><img id="alice_idle" src="https://sethclydesdale.github.io/cunny-code/resources/images/alice.png" alt="alice" style="cursor:pointer;"><audio id="audio" loop><source src="https://sethclydesdale.github.io/cunny-code/resources/audio/Usagi Flap.mp3" type="audio/mpeg"></audio></div>
-            <div class="dialogue alice-dialogue" style="margin-top:-20px;margin-bottom:-20px;">Click Alice, Sensei!</div>
+            <div class="center"><img id="arisu_dance" src="https://sethclydesdale.github.io/cunny-code/resources/images/arisu.gif" alt="arisu" style="display:none; cursor:pointer;"><img id="arisu_idle" src="https://sethclydesdale.github.io/cunny-code/resources/images/arisu.png" alt="arisu" style="cursor:pointer;"><audio id="audio" loop><source src="https://sethclydesdale.github.io/cunny-code/resources/audio/Usagi Flap.mp3" type="audio/mpeg"></audio></div>
+            <div class="dialogue arisu-dialogue" style="margin-top:-20px;margin-bottom:-20px;">Click Arisu, Sensei!</div>
             <p><a href="https://sethclydesdale.github.io/cunny-code/" id="404-home" class="button"><i>Return to the Homepage</i></a></p>
           </div>
         </div>
@@ -42,6 +42,7 @@ <h2 class="title" id="not-found" style="font-size:36px;">404 Cunny Not Found</h2
           <div id="arona_inner">
             <div id="arona_body">
               <img id="holo" src="https://sethclydesdale.github.io/cunny-code/resources/images/arona/30.png" alt="Arona">
+              <div id="arona_halo" class="arona_action"></div>
               <div id="arona_face" class="arona_action" onclick="Arona.touch('face');"></div>
               <div id="arona_head" class="arona_action" onclick="Arona.touch('head');"></div>
               <div id="arona_chest" class="arona_action" onclick="Arona.touch('chest');"></div>
@@ -75,18 +76,18 @@ <h2 class="title" id="not-found" style="font-size:36px;">404 Cunny Not Found</h2
     <script>(function (window, document) {
       document.getElementById('audio').volume = 0.4; // normalize audio volume
 
-      // alice dance start
-      document.getElementById('alice_idle').onclick = function () {
+      // arisu dance start
+      document.getElementById('arisu_idle').onclick = function () {
         this.style.display = 'none';
-        document.getElementById('alice_dance').style.display = '';
+        document.getElementById('arisu_dance').style.display = '';
         document.getElementById('audio').play();
-        document.querySelector('.alice-dialogue').style.display = 'none'
+        document.querySelector('.arisu-dialogue').style.display = 'none'
       };
 
-      // alice dance stop
-      document.getElementById('alice_dance').onclick = function () {
+      // arisu dance stop
+      document.getElementById('arisu_dance').onclick = function () {
         this.style.display = 'none';
-        document.getElementById('alice_idle').style.display = '';
+        document.getElementById('arisu_idle').style.display = '';
         document.getElementById('audio').pause();
       };
 

README.md

@@ -97,7 +97,7 @@ Cunny Code was made possible thanks to...
 - [morsecode.world](https://morsecode.world/international/morse2.html) for their comprehensive Morse Code resources.
 - [nulla2011](https://github.com/nulla2011) for the [Blue Archive Logo Generator](https://github.com/nulla2011/bluearchive-logo).
 - [Blue Archive Wiki](https://bluearchive.fandom.com/wiki/Arona/Gallery) and Blue Archive itself for the imagery and audio used in this project.
-- [BlueSechi](https://www.youtube.com/watch?v=T9F1Wk8DQdg) for the dancing Alice.
+- [BlueSechi](https://www.youtube.com/watch?v=T9F1Wk8DQdg) for the dancing Arisu.
 - Google for [Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans) and [DAJI](https://x.com/daji_nhnyk/status/1840259471819280870) for letting me know the font that Blue Archive uses.
 - [FontAwesome](https://github.com/FortAwesome/Font-Awesome) for the awesome icons.
 - [13rac1](https://github.com/13rac1) for the [Twemoji](https://github.com/13rac1/twemoji-color-font?tab=readme-ov-file) font so we could achieve that iconic U😭H.
@@ -111,5 +111,5 @@ If you found this project cute or funny, please see the [Donate page](https://se
 
 -----
 
-<div align="center"><a href="https://sethclydesdale.github.io/cunny-code/404"><img src="resources/images/alice.png" align="center" height="100"></a></div>
+<div align="center"><a href="https://sethclydesdale.github.io/cunny-code/404"><img src="resources/images/arisu.png" align="center" height="100"></a></div>
 <div align="center">Built with Cunny and Love</div>

arona/index.html

@@ -101,8 +101,9 @@ <h3 id="responses">Responses</h3>
               <li>correction</li>
               <li>seggs</li>
               <li>kms</li>
+              <li>Show me the Arisu dance. (Alice/Aris also supported)</li>
+              <li>Show me the Mutsuki dance.</li>
               <li>Never gonna give you up</li>
-              <li>Mutsuki dance</li>
               <li>69</li>
               <li>😭</li>
               <li>💢</li>
@@ -156,6 +157,7 @@ <h3 id="getting-upset">Getting Upset</h3>
             <h3 id="poking">Poking</h3>
             <p>Aside from encoding and decoding, you can also interact with Arona by clicking or "poking" her. The following parts of Arona can be clicked for different reactions:</p>
             <ul>
+              <li>Halo (Press and hold)</li>
               <li>Head</li>
               <li>Face</li>
               <li>Chest</li>
@@ -171,7 +173,7 @@ <h3 id="speaking">Speaking</h3>
               <div style="width:80%;margin-bottom:5px;"><code class="block">Arona.speak("sensei");</code></div>
               <div style="width:20%;margin-bottom:5px;"><button onclick="Arona.say('Sensei!', 31, 2000); Arona.speak('sensei'); document.getElementById('arona_inner').focus();"><i>Run</i></button></div>
             </div>
-            <p>Currently, her voice module only has four files: <code>sensei</code>, <code>ah</code>, <code>huh</code>, <code>heeheehee</code>.</p>
+            <p>Currently, her voice module only has <strong>5</strong> files: <code>ah</code>, <code>fue</code>, <code>huh</code>, <code>heeheehee</code>, <code>sensei</code>.</p>
 
             <h3 id="helping">Helping</h3>
             <p>You may have noticed a "<i class="fa">&#xf059;</i>" in the top right of the encoder on the <a href="../">homepage</a>. Clicking this will initiate a tutorial where Arona will help teach you how to use Cunny Code.</p>
@@ -215,6 +217,7 @@ <h3 id="writing">Writing</h3>
           <div id="arona_inner" tabindex="0" style="outline:none;">
             <div id="arona_body">
               <img id="holo" src="../resources/images/arona/11.png" alt="Arona">
+              <div id="arona_halo" class="arona_action"></div>
               <div id="arona_face" class="arona_action" onclick="Arona.touch('face');"></div>
               <div id="arona_head" class="arona_action" onclick="Arona.touch('head');"></div>
               <div id="arona_chest" class="arona_action" onclick="Arona.touch('chest');"></div>

code/index.html

@@ -544,6 +544,7 @@ <h3 id="special">Special</h3>
           <div id="arona_inner">
             <div id="arona_body">
               <img id="holo" src="../resources/images/arona/12.png" alt="Arona">
+              <div id="arona_halo" class="arona_action"></div>
               <div id="arona_face" class="arona_action" onclick="Arona.touch('face');"></div>
               <div id="arona_head" class="arona_action" onclick="Arona.touch('head');"></div>
               <div id="arona_chest" class="arona_action" onclick="Arona.touch('chest');"></div>

donate/index.html

@@ -69,6 +69,7 @@ <h2>Donate</h2>
           <div id="arona_inner">
             <div id="arona_body">
               <img id="holo" src="../resources/images/arona/23.png" alt="Arona">
+              <div id="arona_halo" class="arona_action"></div>
               <div id="arona_face" class="arona_action" onclick="Arona.touch('face');"></div>
               <div id="arona_head" class="arona_action" onclick="Arona.touch('head');"></div>
               <div id="arona_chest" class="arona_action" onclick="Arona.touch('chest');"></div>

download/index.html

@@ -64,6 +64,7 @@ <h3 id="help-and-bugs">Help and Bugs</h3>
           <div id="arona_inner">
             <div id="arona_body">
               <img id="holo" src="../resources/images/arona/31.png" alt="Arona">
+              <div id="arona_halo" class="arona_action"></div>
               <div id="arona_face" class="arona_action" onclick="Arona.touch('face');"></div>
               <div id="arona_head" class="arona_action" onclick="Arona.touch('head');"></div>
               <div id="arona_chest" class="arona_action" onclick="Arona.touch('chest');"></div>

index.html

@@ -68,14 +68,15 @@ <h3>Output</h3>
               <audio id="bgm_player" ontimeupdate="if (this.currentTime >= 114.5) this.currentTime = 0;" loop><source src="resources/audio/Shooting%20Stars.mp3" type="audio/mpeg"></audio>
             </div>
 
-            <div id="version">v1.2.0</div>
+            <div id="version">v1.3.0</div>
           </div>
         </div>
 
         <div id="arona">
           <div id="arona_inner">
             <div id="arona_body">
               <img id="holo" src="resources/images/arona/1.png" alt="Arona">
+              <div id="arona_halo" class="arona_action"></div>
               <div id="arona_face" class="arona_action" onclick="Arona.touch('face');"></div>
               <div id="arona_head" class="arona_action" onclick="Arona.touch('head');"></div>
               <div id="arona_chest" class="arona_action" onclick="Arona.touch('chest');"></div>

privacy/index.html

@@ -85,6 +85,7 @@ <h2 class="section-title" id="privacy-contact">Contacting Us</h2>
           <div id="arona_inner">
             <div id="arona_body">
               <img id="holo" src="../resources/images/arona/8.png" alt="Arona">
+              <div id="arona_halo" class="arona_action"></div>
               <div id="arona_face" class="arona_action" onclick="Arona.touch('face');"></div>
               <div id="arona_head" class="arona_action" onclick="Arona.touch('head');"></div>
               <div id="arona_chest" class="arona_action" onclick="Arona.touch('chest');"></div>

report/index.html

@@ -70,6 +70,7 @@ <h3 id="contact-method-tech">Contact Methods</h3>
           <div id="arona_inner">
             <div id="arona_body">
               <img id="holo" src="../resources/images/arona/28.png" alt="Arona">
+              <div id="arona_halo" class="arona_action"></div>
               <div id="arona_face" class="arona_action" onclick="Arona.touch('face');"></div>
               <div id="arona_head" class="arona_action" onclick="Arona.touch('head');"></div>
               <div id="arona_chest" class="arona_action" onclick="Arona.touch('chest');"></div>

resources/css/stylesheet.css

@@ -135,6 +135,24 @@
   }
 }
 
+@keyframes swing {
+  0% {
+    transform:scale(0.5) rotate(-5deg);
+    margin-left:10px;
+    margin-top:5px;
+  }
+  50% {
+    transform:scale(0.51) rotate(5deg);
+    margin-left:0px;
+    margin-top:0px;
+  }
+  100% {
+    transform:scale(0.5) rotate(-5deg);
+    margin-left:10px;
+    margin-top:5px;
+  }
+}
+
 .fade-in {
   animation:fade-in 1000ms;
   opacity:1;
@@ -233,6 +251,7 @@ header {
   position:relative;
   z-index:1;
   overflow:hidden;
+  pointer-events:none;
 }
 
 /* fork me link */
@@ -254,6 +273,7 @@ a#fork-me {
   transition-property:color, background;
   transition-duration:300ms;
   user-select:none;
+  pointer-events:all;
 }
 
 a#fork-me:hover, a#fork-me:focus {
@@ -263,6 +283,7 @@ a#fork-me:hover, a#fork-me:focus {
 
 h1 { margin:0; }
 
+#logo { pointer-events:all; }
 #logo:hover, #logo:focus { opacity:0.7; }
 #logo img {
   height:150px;
@@ -563,6 +584,7 @@ button:active, .button:active {
 #arona #holo {
   width:400px;
   position:absolute;
+  pointer-events:none;
 }
 
 .arona_action {
@@ -572,6 +594,15 @@ button:active, .button:active {
 }
 .tutorial .arona_action { display:none; }
 
+#arona_halo, #arona.dragging #arona_halo {
+  top:35px;
+  left:212px;
+  height:25px;
+  width:80px;
+  transform:rotate(28deg);
+  border-radius:100%;
+}
+
 #arona_head {
   top:73px;
   left:155px;
@@ -693,6 +724,33 @@ button:active, .button:active {
   opacity:0;
 }
 
+/* styles for when dragging arona */
+#arona.dragging {
+  height:400px;
+  width:400px;
+  margin-bottom:200px !important;
+  margin-left:0;
+  position:fixed;
+  transform:scale(0.5);
+  animation:swing 3s infinite ease-in-out;
+  z-index:2;
+}
+
+#arona.dragging #arona_inner {
+  width:400px;
+  height:400px;
+  position:static;
+  bottom:auto;
+}
+
+#arona.dragging #holo {
+  width:400px;
+}
+
+#arona.dragging #dialogue {
+  transform:scale(1.5);
+}
+
 /* menus */
 .menu {
   margin:15px;
@@ -879,6 +937,13 @@ footer li:first-child:before { display:none; }
     width:600px;
     position:absolute;
   }
+
+  #arona_halo {
+    top:56px;
+    left:318px;
+    height:32px;
+    width:120px;
+  }
 
   #arona_head {
     top:106px;
@@ -969,6 +1034,13 @@ footer li:first-child:before { display:none; }
     width:500px;
     position:absolute;
   }
+
+  #arona_halo {
+    top:45px;
+    left:265px;
+    height:30px;
+    width:100px;
+  }
 
   #arona_head {
     top:89px;