1111 import {Tab , TabGroup } from " @skeletonlabs/skeleton" ;
1212 import {currentLayerConfig , currentLayerName , getLayerConfig } from " $lib/stores/configStores" ;
1313 import {layerNames } from " $lib/utils/layers" ;
14+ import {layerNameToBgStyle } from " $lib/graphics" ;
1415
1516 let colors = [
1617 " border-[#BCA77F]" ,
2526 let sizeActive = " w-[150px] h-[150px]" ;
2627 let sizeInactive = " w-[80px] h-[80px]" ;
2728
29+ let bgStyle = layerNameToBgStyle ();
30+
2831 tabSet .subscribe (value => {
2932 let layerName = layerNames [value ];
3033 currentLayerName .set (layerName );
3134 let config = getLayerConfig (layerName );
3235 currentLayerConfig .set (config );
36+
37+ bgStyle = layerNameToBgStyle ();
3338 });
3439 </script >
3540
36- <TabGroup justify =" justify-center" >
37- <div class =" w-auto h-[150px] flex items-center justify-center" >
38- <Tab bind:group ={$tabSet } name ="Aspirational Layer" value ={0 } active =" " >
39- <div class =" flex flex-row items-center justify-center space-x-3" >
40- <img class ={` ${$tabSet === 0 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
41- src ={AspirationImage } alt =" " />
42- </div >
43- </Tab >
44- <Tab bind:group ={$tabSet } name ="Global Strategy Layer" value ={1 } active =" " >
45- <div class =" flex flex-row items-center justify-center space-x-3" >
46- <img class ={` ${$tabSet === 1 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
47- src ={GlobalStrategyImage } alt =" " />
48- </div >
49- </Tab >
50- <Tab bind:group ={$tabSet } name ="Agent Model Layer" value ={2 } active =" " >
51- <div class =" flex flex-row items-center justify-center space-x-3" >
52- <img class ={` ${$tabSet === 2 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
53- src ={AgentModelImage } alt =" " />
54- </div >
55- </Tab >
56- <Tab bind:group ={$tabSet } name ="Executive Layer" value ={3 } active =" " >
57- <div class =" flex flex-row items-center justify-center space-x-3" >
58- <img class ={` ${$tabSet === 3 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
59- src ={ExecutiveFunctionImage } alt =" " />
60- </div >
61- </Tab >
62- <Tab bind:group ={$tabSet } name ="Cognitive Control Layer" value ={4 } active =" " >
63- <div class =" flex flex-row items-center justify-center space-x-3" >
64- <img class ={` ${$tabSet === 4 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
65- src ={CognitiveControlImage } alt =" " />
66- </div >
67- </Tab >
68- <Tab bind:group ={$tabSet } name ="Task Prosecution Layer" value ={5 } active =" " >
69- <div class =" flex flex-row items-center justify-center space-x-3" >
70- <img class ={` ${$tabSet === 5 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
71- src ={TaskProsecutionImage } alt =" " />
72- </div >
73- </Tab >
74- </div >
75-
76- <svelte:fragment slot =" panel" >
77- {#if $tabSet === 0 }
78- <LayerSettings layerName ="Aspirational Layer" layerBorderColor =" {colors [0 ]}" />
79- {:else if $tabSet === 1 }
80- <LayerSettings layerName ="Global Strategy Layer" layerBorderColor =" {colors [1 ]}" />
81- {:else if $tabSet === 2 }
82- <LayerSettings layerName ="Agent Model Layer" layerBorderColor =" {colors [2 ]}" />
83- {:else if $tabSet === 3 }
84- <LayerSettings layerName ="Executive Layer" layerBorderColor =" {colors [3 ]}" />
85- {:else if $tabSet === 4 }
86- <LayerSettings layerName ="Cognitive Control Layer" layerBorderColor =" {colors [4 ]}" />
87- {:else if $tabSet === 5 }
88- <LayerSettings layerName ="Task Prosecution Layer" layerBorderColor =" {colors [5 ]}" />
89- {/if }
90- </svelte:fragment >
91- </TabGroup >
41+ <div class ="h-auto w-auto" style =" {bgStyle }" >
42+ <TabGroup justify =" justify-center" >
43+ <div class =" w-auto h-[150px] flex items-center justify-center" >
44+ <Tab bind:group ={$tabSet } name ="Aspirational Layer" value ={0 } active =" " >
45+ <div class =" flex flex-row items-center justify-center space-x-3" >
46+ <img class ={` ${$tabSet === 0 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
47+ src ={AspirationImage } alt =" " />
48+ </div >
49+ </Tab >
50+ <Tab bind:group ={$tabSet } name ="Global Strategy Layer" value ={1 } active =" " >
51+ <div class =" flex flex-row items-center justify-center space-x-3" >
52+ <img class ={` ${$tabSet === 1 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
53+ src ={GlobalStrategyImage } alt =" " />
54+ </div >
55+ </Tab >
56+ <Tab bind:group ={$tabSet } name ="Agent Model Layer" value ={2 } active =" " >
57+ <div class =" flex flex-row items-center justify-center space-x-3" >
58+ <img class ={` ${$tabSet === 2 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
59+ src ={AgentModelImage } alt =" " />
60+ </div >
61+ </Tab >
62+ <Tab bind:group ={$tabSet } name ="Executive Layer" value ={3 } active =" " >
63+ <div class =" flex flex-row items-center justify-center space-x-3" >
64+ <img class ={` ${$tabSet === 3 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
65+ src ={ExecutiveFunctionImage } alt =" " />
66+ </div >
67+ </Tab >
68+ <Tab bind:group ={$tabSet } name ="Cognitive Control Layer" value ={4 } active =" " >
69+ <div class =" flex flex-row items-center justify-center space-x-3" >
70+ <img class ={` ${$tabSet === 4 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
71+ src ={CognitiveControlImage } alt =" " />
72+ </div >
73+ </Tab >
74+ <Tab bind:group ={$tabSet } name ="Task Prosecution Layer" value ={5 } active =" " >
75+ <div class =" flex flex-row items-center justify-center space-x-3" >
76+ <img class ={` ${$tabSet === 5 ? sizeActive : sizeInactive } rounded-xl transition-size ` }
77+ src ={TaskProsecutionImage } alt =" " />
78+ </div >
79+ </Tab >
80+ </div >
81+
82+ <svelte:fragment slot =" panel" >
83+ {#if $tabSet === 0 }
84+ <LayerSettings layerName ="Aspirational Layer" layerBorderColor =" {colors [0 ]}" />
85+ {:else if $tabSet === 1 }
86+ <LayerSettings layerName ="Global Strategy Layer" layerBorderColor =" {colors [1 ]}" />
87+ {:else if $tabSet === 2 }
88+ <LayerSettings layerName ="Agent Model Layer" layerBorderColor =" {colors [2 ]}" />
89+ {:else if $tabSet === 3 }
90+ <LayerSettings layerName ="Executive Layer" layerBorderColor =" {colors [3 ]}" />
91+ {:else if $tabSet === 4 }
92+ <LayerSettings layerName ="Cognitive Control Layer" layerBorderColor =" {colors [4 ]}" />
93+ {:else if $tabSet === 5 }
94+ <LayerSettings layerName ="Task Prosecution Layer" layerBorderColor =" {colors [5 ]}" />
95+ {/if }
96+ </svelte:fragment >
97+ </TabGroup >
98+
99+ </div >
92100
93101<style >
94102 .transition-size {
95103 transition : width 0.3s ease-in-out , height 0.3s ease-in-out ;
96104 }
105+
106+ .bgLayer {
107+
108+
109+
110+
111+ /* background-image: linear-gradient(*/
112+ /* 45deg,*/
113+ /* rgba(176, 142, 102, 0.5),*/
114+ /* rgba(214, 176, 126, 0.5),*/
115+ /* rgba(95, 95, 94, 0.5),*/
116+ /* rgba(145, 110, 80, 0.5),*/
117+ /* rgba(240, 210, 152, 0.5)*/
118+ /* );*/
119+ /* height: 1600px; !* 9:16 ratio, you can adjust as needed *!*/
120+ /* width: 900px;*/
121+ }
122+
123+ :global(.aspirational-layer-bg ) {
124+ background : radial-gradient (123.16% 171.6% at 131.71% -14.68% , #C9A86D 0% , #FDD182 10.96% , rgba (254 , 226 , 175 , 0.25 ) 35.04% , rgba (254 , 235 , 200 , 0.06 ) 48.17% , rgba (255 , 255 , 255 , 0.00 ) 91.67% , rgba (255 , 255 , 255 , 0.00 ) 100% );
125+ background-size : cover ;
126+ }
127+
128+ :global(.global-strategy-layer-bg ) {
129+ background : radial-gradient (123.16% 171.6% at 131.71% -14.68% , #58A19A 0% , #7CB3B5 10.96% , rgba (88 , 161 , 154 , 0.3 ) 35.04% , rgba (88 , 161 , 154 , 0.1 ) 48.17% , rgba (255 , 255 , 255 , 0.00 ) 91.67% , rgba (255 , 255 , 255 , 0.00 ) 100% );
130+ background-size : cover ;
131+ }
132+
133+ :global(.agent-model-layer-bg ) {
134+ background : radial-gradient (123.16% 171.6% at 131.71% -14.68% , #E3A2E3 0% , #E9B2E9 10.96% , rgba (227 , 162 , 227 , 0.3 ) 35.04% , rgba (227 , 162 , 227 , 0.1 ) 48.17% , rgba (255 , 255 , 255 , 0.00 ) 91.67% , rgba (255 , 255 , 255 , 0.00 ) 100% );
135+ background-size : cover ;
136+ }
137+
138+ :global(.executive-layer-bg ) {
139+ background : radial-gradient (123.16% 171.6% at 131.71% -14.68% , #A8E0E8 0% , #B2E5ED 10.96% , rgba (168 , 224 , 232 , 0.3 ) 35.04% , rgba (168 , 224 , 232 , 0.1 ) 48.17% , rgba (255 , 255 , 255 , 0.00 ) 91.67% , rgba (255 , 255 , 255 , 0.00 ) 100% );
140+ background-size : cover ;
141+ }
142+
143+ :global(.cognitive-control-layer-bg ) {
144+ background : radial-gradient (123.16% 171.6% at 131.71% -14.68% , #4AB0B9 0% , #5FBCC5 10.96% , rgba (74 , 176 , 185 , 0.3 ) 35.04% , rgba (74 , 176 , 185 , 0.1 ) 48.17% , rgba (255 , 255 , 255 , 0.00 ) 91.67% , rgba (255 , 255 , 255 , 0.00 ) 100% );
145+ background-size : cover ;
146+ }
147+
148+ :global(.task-prosecution-layer-bg ) {
149+ background : radial-gradient (123.16% 171.6% at 131.71% -14.68% , #A45534 0% , #B06642 10.96% , rgba (164 , 85 , 52 , 0.3 ) 35.04% , rgba (164 , 85 , 52 , 0.1 ) 48.17% , rgba (255 , 255 , 255 , 0.00 ) 91.67% , rgba (255 , 255 , 255 , 0.00 ) 100% );
150+ background-size : cover ;
151+ }
152+
97153 </style >
0 commit comments