Showcase Themes Configured

Taiizor · Nov 4, 2024 · b99605d · b99605d
1 parent 2ca241c
commit b99605d
Show file tree

Hide file tree

Showing 7 changed files with 403 additions and 184 deletions.
diff --git a/src/Bundle/Sucrose.Bundle/Showcase/Fluid Simulation-1/Fluid.html b/src/Bundle/Sucrose.Bundle/Showcase/Fluid Simulation-1/Fluid.html
@@ -1,19 +1,19 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
-        <meta http-equiv="Cache-Control" content="no-cache">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-        <meta name="apple-mobile-web-app-capable" content="yes">
-        <meta name="mobile-web-app-capable" content="yes">
-        <link rel="apple-touch-icon" href="./img/logo.png">
+        <meta charset="utf-8" />
         <link rel="icon" href="./img/logo.png">
+        <link rel="apple-touch-icon" href="./img/logo.png">
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta http-equiv="Cache-Control" content="no-cache" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
         <title>WebGL Fluid Simulation</title>
-        <meta name="description" content="A WebGL fluid simulation that works in mobile browsers.">
-        <meta property="og:type" content="website">
-        <meta property="og:title" content="Webgl Fluid Simulation">
-        <meta property="og:description" content="A WebGL fluid simulation that works in mobile browsers.">
+        <meta name="description" content="A WebGL fluid simulation that works in mobile browsers." />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="Webgl Fluid Simulation" />
+        <meta property="og:description" content="A WebGL fluid simulation that works in mobile browsers." />
         <script type="text/javascript" src="./js/dat.gui.min.js"></script>
         <style>
             * {
@@ -31,73 +31,45 @@
                 position: fixed;
                 width: 100%;
                 height: 100%;
+                background-repeat: no-repeat;
                 background-size: 100% 100%;
+                background-position: center;
             }
 
             canvas {
                 width: 100%;
                 height: 100%;
             }
 
-            .dg {
-                opacity: 0.9;
-            }
-
-            .dg .property-name {
-                overflow: visible;
-            }
-
-            @font-face {
-                font-family: 'iconfont';
-                src: url('iconfont.ttf') format('truetype');
-            }
-
-            .bigFont {
-                font-size: 150%;
-                color: #8C8C8C;
-            }
-
-            .cr.function.appBigFont {
-                font-size: 150%;
-                line-height: 27px;
-                color: #A5F8D3;
-                background-color: #023C40;
-            }
-
-            .cr.function.appBigFont .property-name {
-                float: none;
-            }
-
-            .cr.function.appBigFont .icon {
-                position: sticky;
-                bottom: 27px;
-            }
-
-            .icon {
-                font-family: 'iconfont';
-                font-size: 130%;
-                float: right;
-            }
-
-            .twitter:before {
-                content: 'a';
-            }
-
-            .github:before {
-                content: 'b';
-            }
-
-            .app:before {
-                content: 'c';
+            #videoBackground {
+                position: absolute;
+                z-index: -1;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                object-fit: fill;
             }
 
-            .discord:before {
-                content: 'd';
+            #overlay {
+                pointer-events: none;
+                position: fixed;
+                width: 25%;
+                height: 25%;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background-size: contain;
+                background-position: center;
+                background-repeat: no-repeat;
             }
         </style>
     </head>
     <body>
         <canvas></canvas>
-        <script src="./js/script.js"></script>
+        <video id="videoBackground" muted loop></video>
+        <div id="overlay"></div>
     </body>
+    <script src="./js/script.js"></script>
 </html>
diff --git a/src/Bundle/Sucrose.Bundle/Showcase/Fluid Simulation-1/SucroseInfo.json b/src/Bundle/Sucrose.Bundle/Showcase/Fluid Simulation-1/SucroseInfo.json
@@ -1,6 +1,6 @@
 {
   "AppVersion": "24.7.1.0",
-  "Version": "1.0.0.3",
+  "Version": "1.0.0.4",
   "Title": "Fluid Simulation",
   "Thumbnail": "thumbnail.jpg",
   "Preview": "preview.gif",

diff --git a/src/Bundle/Sucrose.Bundle/Showcase/Fluid Simulation-1/SucroseProperties.json b/src/Bundle/Sucrose.Bundle/Showcase/Fluid Simulation-1/SucroseProperties.json
@@ -1,15 +1,41 @@
 {
   "PropertyListener": "SucrosePropertyListener('{0}', {1});",
   "PropertyList": {
+    "audioLabel": {
+      "type": "label",
+      "value": "Audio"
+    },
     "audioReact": {
       "type": "checkbox",
       "value": true,
-      "text": "Audio Visualiser"
+      "text": "Visualiser"
+    },
+    "randomLabel": {
+      "type": "label",
+      "value": "Random"
     },
     "randomSplats": {
       "type": "checkbox",
       "value": false,
-      "text": "Random Splats"
+      "text": "Splats"
+    },
+    "interactionLabel": {
+      "type": "label",
+      "value": "Interaction"
+    },
+    "useMouse": {
+      "type": "dropdown",
+      "value": 2,
+      "text": "Mouse Behavior",
+      "items": [
+        "Never",
+        "On Press",
+        "Always"
+      ]
+    },
+    "performanceLabel": {
+      "type": "label",
+      "value": "Performance"
     },
     "quality": {
       "type": "dropdown",
@@ -35,6 +61,29 @@
         "512"
       ]
     },
+    "colorLabel": {
+      "type": "label",
+      "value": "Color"
+    },
+    "colorLeft": {
+      "text": "Color Left",
+      "type": "colorpicker",
+      "value": "#FFFF0000"
+    },
+    "colorRight": {
+      "text": "Color Right",
+      "type": "colorpicker",
+      "value": "#FFFFFF00"
+    },
+    "customColor": {
+      "type": "checkbox",
+      "value": false,
+      "text": "Enable"
+    },
+    "simulationLabel": {
+      "type": "label",
+      "value": "Simulation"
+    },
     "densityDiffusion": {
       "max": 40,
       "min": 0,
@@ -163,24 +212,65 @@
       "type": "slider",
       "value": 100
     },
-    "bgColor": {
-      "text": "BG Color",
+    "backgroundLabel": {
+      "type": "label",
+      "value": "Background"
+    },
+    "backgroundColor": {
+      "text": "Color",
       "type": "colorpicker",
       "value": "#FF000000"
     },
-    "imgSelect": {
+    "backgroundSrc": {
       "title": "Select Image",
       "type": "filedropdown",
       "value": "pexels-neosiam-601798.jpg",
+      "text": "Image or WebM Video",
+      "desc": "Image/WebM Video",
+      "filter": "*.jpg|*.jpeg|*.webp|*.png|*.webm",
+      "folder": "wallpapers"
+    },
+    "backgroundFit": {
+      "type": "dropdown",
+      "value": 2,
+      "text": "Choose a Fit",
+      "items": [
+        "Contain",
+        "Cover",
+        "Fill",
+        "None"
+      ]
+    },
+    "backgroundEnabled": {
+      "type": "checkbox",
+      "value": false,
+      "text": "Enable"
+    },
+    "overlayLabel": {
+      "type": "label",
+      "value": "Overlay"
+    },
+    "overlaySrc": {
+      "title": "Select Image",
+      "type": "filedropdown",
+      "value": "icon-sucrose-300.png",
       "text": "Image",
       "desc": "Image Files",
-      "filter": "*.jpeg|*.jpg|*.png",
-      "folder": "wallpapers"
+      "filter": "*.jpg|*.jpeg|*.webp|*.png|*.svg",
+      "folder": "overlays"
+    },
+    "overlaySize": {
+      "max": 100,
+      "min": 5,
+      "step": 1,
+      "text": "Size",
+      "type": "slider",
+      "value": 25
     },
-    "bgImgChk": {
+    "overlayEnabled": {
       "type": "checkbox",
       "value": false,
-      "text": "Background"
+      "text": "Enable"
     }
   }
 }