badger added and working

index.html

@@ -9,9 +9,10 @@
     <link data-trunk rel="sass" href="src/assets/style/style.scss" />
     <link data-trunk rel="copy-dir" href="src/assets/images" />
     <link data-trunk rel="copy-dir" href="src/assets/font-awesome" />
-
+    <link data-trunk rel="copy-dir" href="src/assets/animations" />
     <link href="font-awesome/css/all.min.css" rel="stylesheet">
 
+    <script src="https://unpkg.com/@rive-app/canvas@2.17.3"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js" 
       integrity="sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A==" 
       crossorigin="anonymous" referrerpolicy="no-referrer"></script>

src/assets/js/badger.js

@@ -0,0 +1,62 @@
+let riveInstance
+
+export function load_badger(){
+  riveInstance = new rive.Rive({
+      src: "/animations/badger.riv",
+      canvas: document.getElementById("badger-canvas"),
+      autoplay: true,
+      artboard: "Artboard",
+      stateMachines: "State Machine 1",
+  });
+  pass_mousemove_events()
+
+}
+
+export function lazer_eyes(){
+  const inputs = riveInstance.stateMachineInputs('State Machine 1');
+  const lazerTrigger = inputs.find(i => i.name === 'anim_change');
+  lazerTrigger.fire()
+}
+
+export async function hide_badger(val){
+  await new Promise(res => setTimeout(res, 500));
+
+  const inputs = riveInstance.stateMachineInputs('State Machine 1');
+  if (inputs){
+    const hideInput = inputs.find(i => i.name === 'Hide');
+    hideInput.value = val
+  }
+}
+
+export async function hide_badger_timed(){
+  await new Promise(res => setTimeout(res, 500));
+
+  const inputs = riveInstance.stateMachineInputs('State Machine 1');
+  if (inputs){
+    const hideInput = inputs.find(i => i.name === 'Hide');
+    hideInput.value = true
+
+    await new Promise(res => setTimeout(res, 2000));
+    hideInput.value = false
+  }
+}
+
+// the input field captures mouse events so a new event 
+// needs to be created for the badgers eyes to follow the pointer.
+function pass_mousemove_events(){
+  const inputElement = document.querySelector('.program-input-field');
+  const badgerCanvas = document.querySelector('#badger-canvas');
+
+  inputElement.addEventListener('mousemove', function(event) {
+      const newEvent = new MouseEvent('mousemove', {
+          clientX: event.clientX,
+          clientY: event.clientY,
+          screenX: event.screenX,
+          screenY: event.screenY,
+          bubbles: true,
+          cancelable: true,
+          view: window
+      });
+      badgerCanvas.dispatchEvent(newEvent);
+  });
+}

src/assets/style/components/program_input.scss

@@ -90,9 +90,10 @@
 
     .run-button { 
         position: absolute;
-        bottom: 0;
+        top: 34px;
         right: 0;
         max-width: 100%;
+        z-index: 4;
 
         button {
             display: flex;
@@ -122,6 +123,7 @@
         position: absolute;
         bottom: 0;
         right: 0;
+        z-index: 4;
         max-width: 100%;
         display: inline-block;
         width: fit-content;
@@ -198,6 +200,7 @@
 
     .program-input-field-container{
         position: relative;
+        z-index: 4;
 
         .copy-button{
             position: absolute;
@@ -217,4 +220,11 @@
             opacity: 1 !important;
         }
     }
-}
+
+    #badger-canvas{
+        position: absolute;
+        top: -686px;
+        left: -420px;
+        z-index: 2;
+    }
+}

src/assets/style/style.scss

@@ -55,6 +55,8 @@ p {
 }
 
 .intro{
+    margin-bottom: 80px;
+
     .intro-title {
         font-size: 32px;
         font-size: 48px;
@@ -86,13 +88,23 @@ p {
 }
 
 .parsing-error-box {
+    box-sizing: border-box;
+    position: relative;
+    z-index: 3;
     color: white;
     padding: 10px;
     background-color: #770000;
     font-weight: 200;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
 
     overflow-x: auto;
     scrollbar-color: #770000 #aa6600;
     scrollbar-width: thin;
+
+    animation: grow .2s;
+}
+
+@keyframes grow {
+    0% {max-height: 0px; padding-top: 0px; padding-bottom: 0px}
+    100% {max-height: 91px;}
 }

src/components/app.rs

@@ -20,8 +20,20 @@ extern "C" {
     fn copy_program(text: &str);
 }
 
+#[wasm_bindgen(module = "/src/assets/js/badger.js")]
+extern "C" {
+    fn load_badger();
+    fn lazer_eyes();
+    fn hide_badger(val: bool);
+    fn hide_badger_timed();
+}
+
 #[component]
 pub fn App() -> impl IntoView {
+    create_effect(move |_| {
+        load_badger();
+    });
+
     let (program_str, set_program_str) = create_signal("".to_string());
     let (run_result, set_run_result) = create_signal::<Option<Result<String, String>>>(None);
     let (is_running, set_is_running) = create_signal(false);
@@ -32,6 +44,11 @@ pub fn App() -> impl IntoView {
     let program = Signal::derive(move || program_result.get().ok());
     let parse_error = Signal::derive(move || program_result.get().err());
 
+    create_effect(move |_| match parse_error.get() {
+        Some(_) => hide_badger(true),
+        None => hide_badger(false),
+    });
+
     let update_program_str = move |s: String| {
         set_program_str.set(s);
         set_run_result.set(None);
@@ -46,11 +63,13 @@ pub fn App() -> impl IntoView {
         match runner.run() {
             Ok(_) => {
                 set_run_result.set(Some(Ok("Program success".to_string())));
+                lazer_eyes();
                 button_success_animation();
                 merkle::reload_graph(program);
                 set_is_running.set(false);
             }
             Err(error) => {
+                hide_badger_timed();
                 set_run_result.set(Some(Err(error.to_string())));
                 button_fail_animation();
                 set_is_running.set(false);
@@ -84,6 +103,7 @@ pub fn App() -> impl IntoView {
 
                 <div class="program-input">
                     <div class="program-input-header">
+                        <canvas id="badger-canvas" width="1600" height="1600"></canvas>
                         <div class="program-input-intro">
                             <h2>Program</h2>
                             <p>Select an example program or enter your own program below.</p>