experimental penguinmod feature

.gitpod.yml

@@ -6,6 +6,7 @@
 
 tasks:
   - init: npm install --force && npm run build
-    command: npm run dev
-
 
+vscode:
+  extensions:
+    - svelte.svelte-vscode

package.json

@@ -5,7 +5,8 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
-		"preview": "vite preview"
+		"preview": "vite preview",
+		"bnp": "npm run build && npm run preview"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",

src/lib/MenuModals/ExtensionColors.svelte

@@ -9,6 +9,7 @@
     export let color3 = "#0000ff";
 
     let color3Included = false;
+    export let tbShow = true;
 
     const dispatch = createEventDispatcher();
 
@@ -24,6 +25,7 @@
             color1,
             color2,
             color3,
+            tbShow
         });
     }
     function cancel() {
@@ -89,6 +91,14 @@
                         <input type="checkbox" bind:checked={color3Included} />
                     </label>
                 </div>
+                <div
+                    style="display:flex;flex-direction:row;align-items:center;"
+                >
+                    <label>
+                        TurboBuilder Indicator (PenguinMod Experimental Feature)
+                        <input type="checkbox" bind:checked={tbShow} />
+                    </label>
+                </div>
                 <div
                     style="display:flex;flex-direction:row;align-items:center;"
                 >
@@ -97,7 +107,15 @@
                             <div
                                 class="extensionBubbleIcon"
                                 style={`background: ${color1}; border-color: ${color2}`}
-                            />
+                            >
+                                {#if tbShow}
+                                    <img
+                                        class="tbBubbleIcon"
+                                        src="favicon.png"
+                                        alt="TurboBuilder"
+                                    />
+                                {/if}
+                            </div>
                             <div class="extensionBubbleName">Extension</div>
                         </div>
                     </div>
@@ -247,8 +265,8 @@
 
     .extensionMenuPreview {
         width: 60px;
+        position: relative;
         cursor: pointer;
-        overflow: hidden;
         color: #575e75;
         user-select: none;
     }
@@ -259,6 +277,18 @@
     .extensionMenuPreview:active {
         background-color: #e9eef2;
     }
+
+    .tbBubbleIcon {
+        width: 16px;
+        height: 16px;
+        background: #0006;
+        backdrop-filter: blur(2px);
+        border-radius: 8px;
+        position: absolute;
+        top: -3px;
+        right: -3px;
+    }
+
     :global(body.dark) .extensionMenuPreview {
         color: #ccc;
     }
@@ -273,6 +303,7 @@
         border-radius: 100%;
         margin: 0 auto 0.125rem;
         border: 1px rgba(0, 0, 0, 0.2) solid;
+        position: relative;
     }
     .extensionBubbleName {
         font-size: 0.65rem;

src/resources/compiler/index.js

@@ -186,6 +186,9 @@ class Compiler {
             if (extensionMetadata.color3) {
                 classRegistry.extensionInfo.color3 = extensionMetadata.color3;
             }
+            if (extensionMetadata.tbShow) {
+                classRegistry.extensionInfo.tbShow = extensionMetadata.tbShow;
+            }
         }
 
         return [].concat(headerCode, classRegistry.top, [

src/routes/+page.svelte

@@ -153,6 +153,7 @@
         color1: "#0088ff",
         color2: "#0063ba",
         color3: "",
+        tbShow: true
     };
 
     function updateGeneratedCode() {
@@ -363,11 +364,13 @@
         color1={extensionMetadata.color1}
         color2={extensionMetadata.color2}
         color3={extensionMetadata.color3}
+        tbShow={extensionMetadata.tbShow}
         on:completed={(colors) => {
             ModalState.extensionColors = false;
             extensionMetadata.color1 = colors.detail.color1;
             extensionMetadata.color2 = colors.detail.color2;
             extensionMetadata.color3 = colors.detail.color3;
+            extensionMetadata.tbShow = colors.detail.tbShow;
             updateGeneratedCode();
         }}
         on:cancel={() => {