6 Commits 3df8248664 ... f8ba1feeb3

Author SHA1 Message Date
  Stephan Fuchs f8ba1feeb3 add imageMain to `:: pav_residential` 2 months ago
  Stephan Fuchs ca66d1f9b0 add scrollbar, background and padding to sidebar 2 months ago
  Stephan Fuchs 5dabe354c6 change css `#connections` to be better readable 2 months ago
  Stephan Fuchs e57ff422c9 add `<<imageDayNightMain>>` 2 months ago
  Stephan Fuchs 97f8c7d4aa add `<<imageMain>>` 2 months ago
  Stephan Fuchs a7973a2ed7 Overhaul the UI 2 months ago

+ 3 - 6
sugarcube/src/PassageDone.tw

@@ -2,15 +2,12 @@
 <<include 'PassageDoneCommands'>>
 
 :: PassageDoneCommands
+	<!--
 	<<run $connectedLocations.sort((a,b) => ((b.priority ?? 0) - (a.priority ?? 0)) || (a.label ?? '').localeCompare(b.label ?? ''))>>
 	<<run console.log("connectedLocations",$connectedLocations)>>
-	<<append "#connectedLocations">><<for _connectedLocation range $connectedLocations>><<if _connectedLocation.forPassage == passage()>><<ConnectedLocationDom _connectedLocation>><</if>><</for>><</append>>
+	<<append "#connections">><<for _connectedLocation range $connectedLocations>><<if _connectedLocation.forPassage == passage()>><<ConnectedLocationDom _connectedLocation>><</if>><</for>><</append>>
+	-->
 	
-	<<for _npcId, _npcAction range _presentNPCs ?? {}>>
-		<<if _npcAction.trim()>>
-			<<act $npc(_npcId).usedname undefined `{image:$npc(_npcId).image,capture:['_npcAction']}`>>_npcAction<</act>>
-		<</if>>
-	<</for>>
 	
 	<<actionsRefresh>>
 

+ 11 - 0
sugarcube/src/StoryInterface.tw

@@ -0,0 +1,11 @@
+:: StoryInterface
+<div id="interface">
+	<div id="sidebar" data-passage="Sidebar">Sidebar</div>
+	<div id="passages">passages</div>
+	<div id="connectionsAndNPCs">
+		<div id="connections" data-passage="ConnectedLocationSidebar">connections</div>
+		<div id="npcs" data-passage="NPCsSidebar">npcs</div>
+	</div>
+	<div id="actions">Actions</div>
+	<div id="topbar" data-passage="Topbar">topbar</div>
+</div>

+ 3 - 47
sugarcube/src/actions/act.tw

@@ -1,52 +1,8 @@
 :: MacroAct[widget]
 
 <<widget 'actionsRefresh'>>
-	<<if $('#actions').length > 0>>
-		<<remove '#actions'>>
-	<</if>>
-
-	<<if _actions>><<run _actions.sortByPriority()>><</if>>
-	<<run console.log('Actions:',_actions)>>
-	<<append "#story">>
-		<<set _actionsClass= $settings.ui?.actionsAtBottom ? "atTheBottom" : ''>>
-		<div id="actions" @class="_actionsClass">
-			<<if _actions>>
-			<<for _action range _actions>>
-				<<if _action.passage == passage()>>
-
-					<<set $tooltipCounter ??= 0>>
-					<<set $tooltipCounter = $tooltipCounter % 1000000>>
-					<<set $tooltipCounter += 1>>
-					<<set _tooltip_id = 'tooltip_'+$tooltipCounter>>
-					<<set _tooltip_id_hidden = 'tooltip_'+$tooltipCounter+'_hidden'>>
-
-					<div @class="_action.styleClass" @id="_tooltip_id" title="">
-						<<if _action.image>>
-							<<image _action.image>>
-						<</if>>
-						<<capture _action>>
-							<<link _action.label>>
-								<<run _action.execute()>>
-							<</link>>
-						<</capture>>
-					</div>
-
-					<<if _action.tooltip>>
-						<a @id=_tooltip_id_hidden style="display:none">
-							_action.tooltip
-						</a>
-
-						<<capture _tooltip_id, _tooltip_id_hidden>>
-							<<done>>
-								<<run setup.tooltip("#"+_tooltip_id, '#'+_tooltip_id_hidden)>>
-							<</done>>
-						<</capture>>
-					<</if>>
-
-				<</if>>
-			<</for>>
-			<</if>>
-		</div>
-	<</append>>
+	<<replace '#actions'>>
+		<<include 'Actions'>>
+	<</replace>>
 
 <</widget>>

+ 11 - 18
sugarcube/src/actions/actions.css

@@ -3,28 +3,21 @@
 }
 
 #actions{
-	position: fixed;
-	bottom: 0px;
-	height: 5em;
-
-	width: inherit;
-	right: 2.5em;
-	display: block;
-	max-width: inherit;
-	left: 20em;
-	overflow: auto;
-	transition: left .2s ease-in
+	height: 100%;
+	font-size: 0.8em;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
-#actions.atTheBottom{
-    position: inherit;
-    width: 100%;
-}
 
 #ui-bar.stowed ~ #story #actions{
     left: 4.5em;
 }
 
+#actions a{
+	height: calc(100% - 0.8em - 4px);
+}
+
 #actions a,
 #npcActions a,
 .button a,
@@ -32,7 +25,7 @@
 .linksAsDefaultButtons a{
 	display: block;
 	color: black;
-	padding: 1em;
+	padding: 0.3em;
 	border: 2px black solid;
 	margin: 0.1em;
 	border-radius: 0.4em;
@@ -114,7 +107,7 @@
 
 
 
-
+/*
 @media(max-width: 1699px){
     #actions .action{
         display: inline-block;
@@ -144,4 +137,4 @@
         height: 100%;
         width: 14em;
     }
-}
+}*/

+ 38 - 0
sugarcube/src/actions/actions.tw

@@ -0,0 +1,38 @@
+:: Actions[include]
+<<if _actions>>
+	<<run _actions.sortByPriority()>>
+	<<for _action range _actions>>
+		<<if _action.passage == passage()>>
+
+			<<set $tooltipCounter ??= 0>>
+			<<set $tooltipCounter = $tooltipCounter % 1000000>>
+			<<set $tooltipCounter += 1>>
+			<<set _tooltip_id = 'tooltip_'+$tooltipCounter>>
+			<<set _tooltip_id_hidden = 'tooltip_'+$tooltipCounter+'_hidden'>>
+
+			<div @class="_action.styleClass" @id="_tooltip_id" title="">
+				<<if _action.image>>
+					<<image _action.image>>
+				<</if>>
+				<<capture _action>>
+					<<link _action.label>>
+						<<run _action.execute()>>
+					<</link>>
+				<</capture>>
+			</div>
+
+			<<if _action.tooltip>>
+				<a @id=_tooltip_id_hidden style="display:none">
+					_action.tooltip
+				</a>
+
+				<<capture _tooltip_id, _tooltip_id_hidden>>
+					<<done>>
+						<<run setup.tooltip("#"+_tooltip_id, '#'+_tooltip_id_hidden)>>
+					<</done>>
+				<</capture>>
+			<</if>>
+
+		<</if>>
+	<</for>>
+<</if>>

+ 2 - 2
sugarcube/src/locations/pavlov/residential/pav_residential.tw

@@ -1,9 +1,9 @@
 :: pav_residential[hasEvents outdoors residential public street region_pav]
 <h2>Pavlovsk</h2>
 <<if $time.isWinter>>
-	<<imageDayNight "locations/pavlovsk/pavreswinter#.jpg" "" "n">>
+	<<imageDayNightMain "locations/pavlovsk/pavreswinter#.jpg" "" "n">>
 <<else>>
-	<<imageDayNight "locations/pavlovsk/pavres#.jpg" "" `"n_"+rand(1,2)`>>
+	<<imageDayNightMain "locations/pavlovsk/pavres#.jpg" "" `"n_"+rand(1,2)`>>
 <</if>>
 
 <p>

+ 8 - 0
sugarcube/src/macros/location/ConnectedLocationSidebar.tw

@@ -0,0 +1,8 @@
+:: ConnectedLocationSidebar[include]
+<<run $connectedLocations.sort((a,b) => ((b.priority ?? 0) - (a.priority ?? 0)) || (a.label ?? '').localeCompare(b.label ?? ''))>>
+<<for _connectedLocation range $connectedLocations>>
+	<<if _connectedLocation.forPassage == passage()>>
+		<<ConnectedLocationDom _connectedLocation>>
+	<</if>>
+<</for>>
+	

+ 14 - 0
sugarcube/src/macros/media/image.tw

@@ -39,6 +39,20 @@
     <<image _pathDayNight>>
 <</widget>>
 
+<<widget 'imageDayNightMain'>>
+    <<imageDayNight _args[0] _args[1] _args[2]>>
+    <<id 'imageMain'>>
+        <<imageDayNight _args[0] _args[1] _args[2]>>
+    <</id>>
+<</widget>>
+
+<<widget 'imageMain'>>
+    <<image _args[0] _args[1] _args[2] _args[3]>>
+    <<id 'imageMain'>>
+        <<image _args[0] _args[1] _args[2] _args[3]>>
+    <</id>>
+<</widget>>
+
 <<widget 'imageWithTooltip' container>>
     <<if !$tooltipCounter>><<set $tooltipCounter = 0>><</if>>
     <<set $tooltipCounter = $tooltipCounter % 1000000>>

+ 75 - 0
sugarcube/src/npcs/NPCsSidebar.css

@@ -0,0 +1,75 @@
+/*#npcs .linkedImage{
+	height: unset;
+}
+
+#npcs .linkedImage .caption{
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	text-align: center;
+	font-size: 2em;
+	background: rgba(20, 20, 20, 0.8);
+	display: none;
+}
+
+*/
+#connections .connectedLocation{
+	position: relative;
+	height: 8em;
+}
+
+#connections>.connectedLocation>a {
+	position: absolute;
+	display: block;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	z-index: 1000;
+}
+
+#connections .connectedLocation img{
+	width: 100%;
+	filter: grayscale(80%);
+	object-fit: cover;
+	height: 100%;
+}
+
+#connections>.connectedLocation>.duration_label {
+	position: absolute;
+	top: 0px;
+	width: 100%;
+	text-align: center;
+	background: rgba(10, 10, 10, 0.8);
+	opacity: 0;
+}
+
+#connections>.connectedLocation:hover>.duration_label {
+	opacity: 1;
+	transition-delay: 0.5s;
+}
+
+#npcs .linkedImage {
+	height: unset;
+}
+
+#connections .connectedLocation .label,
+#npcs .linkedImage .caption {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	text-align: center;
+	font-size: 1em;
+	background: rgba(20, 20, 20, 0.8);
+}
+
+#connections .connectedLocation img,
+#npcs .linkedImage img {
+	filter: grayscale(80%);
+}
+
+#connections .connectedLocation:hover img,
+#npcs .linkedImage:hover img {
+	filter: unset;
+}
+
+

+ 9 - 0
sugarcube/src/npcs/NPCsSidebar.tw

@@ -0,0 +1,9 @@
+:: NPCsSidebar[include]
+<<for _npcId, _npcAction range _presentNPCs ?? {}>>
+	<<if _npcAction.trim()>>
+		/*<<act $npc(_npcId).usedname undefined `{image:$npc(_npcId).image,capture:['_npcAction']}`>>_npcAction<</act>>*/
+		<<linkedImage $npc(_npcId).image $npc(_npcId).usedname>>
+			_npcAction
+		<</linkedImage>>
+	<</if>>
+<</for>>

+ 1 - 1
sugarcube/src/npcs/_system/npc.tw

@@ -73,7 +73,7 @@
 		<<set _npcId = _args[0] ?? _autoCapture.loadedNPCIds.last()>>
 	<</if>>
 	<!-- Present NPCs -->
-	<<if !_presentNPCs>><<set _presentNPCs = {}>><</if>>
+	<<set _presentNPCs ??= {}>>
 	<<set _presentNPCs[_npcId] ||= _contents>>
 
 	<<if _args[2]>>

+ 29 - 304
sugarcube/src/sidebar/Sidebar.tw

@@ -18,7 +18,7 @@
 			<<run console.log("Debug Command executed:",_debugCommand)>>
 		<<else>>
 			<<set _debugvar = State.getVar(_debugCommand)>>
-			<<append "#passages">>
+			<<append "#passages .passage">>
 				<<debug>>
 					<pre>
 						<<=JSON.stringify(_debugvar,null,'\t')>>
@@ -775,314 +775,39 @@
 	<</if>>
 <</widget>>
 
-:: Sidebar_deprecated[deprecated]
-
-<!-- !!Row 3: Pregnancy, cum, lactation, STD...-->
-
-
-	<<if $mesec > 0 and $isprok == 0 and $isprokp == 0>>
-		<<set $stat_bleed_msg = 'You need to use your feminine hygiene products'+iif($wardrobe.pantyworntype = 'none', ' and you need to also wear panties if you want to use a sanitary pad.', '.')>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_bleed_msg"><img title="$stat_bleed_msg" height = set_siconht src="images/system/icons/status/vperiod_bleeding.png"></a></td>'>>
-	<<elseif $mesec > 0 and ($isprok > 0 or $isprokp > 0)>>
-		<<set $stat_bleed_msg = 'You`re using feminine hygiene products.'>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_bleed_msg"><img title="$stat_bleed_msg" height = set_siconht src="images/system/icons/status/vperiod_sanitaries.png"></a></td>'>>
-	<<elseif $placebopart > 0 and $LutH > 0 and $pc.knowpreg == 0>>
-		<<set $stat_bleed_msg = 'Your period is due to start soon.'>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_bleed_msg"><img title="$stat_bleed_msg" height = set_siconht src="images/system/icons/status/vunknown.png"></a></td>'>>
-		<!-- !!TMI				elseif implant_day > 0 and ((daystart - implant_day) * 24 + hour - implant_hour) < 5:-->
-		<!-- !!pregnancy spoiler		$stat_bleed_msg = 'You feel a slight twinge in your abdomen.'-->
-		<!-- !!				$statusIconBarTab += '<td><a href="exec:msg $stat_bleed_msg"><img title="<<$stat_bleed_msg>>" height = <<set_siconht>> src="images/system/icons/status/vunknown.png"></a></td>'-->
-	<<elseif $pc.thinkpreg == 0 and $pc.knowpreg == 0 and $cycle != 6 and $pillcon2 <= 30000 and $succubusflag != 1 and $cheatSlut == 0 and $mesec == 0>>
-		<<if $abortionbirthdate == 0 and $time.daystart - $time.daylastperiod > 28>>
-			<<if $time.daystart - $time.daylastperiod > 28 and $time.daystart - $time.daylastperiod <= 35>>
-				<<set $stat_bleed_msg = 'Your period is late by daystart - daylastperiod - 28 days.'>>
-			<<elseif $time.daystart - $time.daylastperiod > 35 and $time.daystart - $time.daylastperiod <= 42>>
-				<<set $stat_bleed_msg = 'Your period is late by more than a week!'>>
-			<<elseif $time.daystart - $time.daylastperiod > 42 and $time.daystart - $time.daylastperiod <= 56>>
-				<<set $stat_bleed_msg = 'Your period is late by more than two weeks! Maybe you should see a doctor?'>>
-			<<elseif $time.daystart - $time.daylastperiod > 56 and $time.daystart - $time.daylastperiod <= 84>>
-				<<set $stat_bleed_msg = 'Your period is late by more than a month! You really should see a doctor about it.'>>
-			<<elseif $time.daystart - $time.daylastperiod > 84>>
-				<<set $stat_bleed_msg = 'You should consider the possibility of a pregnancy, since apparently you no longer have periods.'>>
-			<</if>>
-			<<set $statusIconBarTab += '<td><a href="exec:msg $stat_bleed_msg"><img title="$stat_bleed_msg" height = set_siconht src="images/system/icons/status/vunknown.png"></a></td>'>>
-		<<elseif $abortionbirthdate != 0 and $time.daystart - $abortionbirthdate <= 26>>
-			<<if $time.daystart - $abortionbirthdate <= 13>>
-				<<set $stat_bleed_msg = 'You are still in your recovery period. Nothing to worry about.'>>
-			<<elseif $time.daystart - $abortionbirthdate > 13 and $time.daystart - $abortionbirthdate <= 16>>
-				<<set $stat_bleed_msg = 'You are maybe still in your recovery period, but there could be a risk.'>>
-			<<elseif $time.daystart - $abortionbirthdate > 16 and $time.daystart - $abortionbirthdate <= 21>>
-				<<set $stat_bleed_msg = 'You should have recovered from you abortion by know... Right?'>>
-			<<elseif $time.daystart - $abortionbirthdate > 21 and $time.daystart - $abortionbirthdate <= 26>>
-				<<set $stat_bleed_msg = 'You should have definitely recovered from your abortion by now.'>>
-			<</if>>
-			<<set $statusIconBarTab += '<td><a href="exec:msg $stat_bleed_msg"><img title="$stat_bleed_msg" height = set_siconht src="images/system/icons/status/vunknown.png"></a></td>'>>
-		<<elseif $pc.pregbirthdate != 0 and $time.daystart - $pc.pregbirthdate <= 80>>
-			<<if $time.daystart - $pc.pregbirthdate <= 41>>
-				<<set $stat_bleed_msg = 'You are still in your recovery period. Nothing to worry about.'>>
-			<<elseif $time.daystart - $pc.pregbirthdate > 41 and $time.daystart - $pc.pregbirthdate <= 48>>
-				<<set $stat_bleed_msg = 'You are probably still in your recovery period.'>>
-			<<elseif $time.daystart - $pc.pregbirthdate > 48 and $time.daystart - $pc.pregbirthdate <= 55>>
-				<<set $stat_bleed_msg = 'You are maybe still in your recovery period, but there could be a risk.'>>
-			<<elseif $time.daystart - $pc.pregbirthdate > 55 and $time.daystart - $pc.pregbirthdate <= 70>>
-				<<set $stat_bleed_msg = 'You should have recovered by know... Right?'>>
-			<<elseif $time.daystart - $pc.pregbirthdate > 70 and $time.daystart - $pc.pregbirthdate <= 80>>
-				<<set $stat_bleed_msg = 'You should have definitely recovered from giving birth by now.'>>
-			<</if>>
-			<<set $statusIconBarTab += '<td><a href="exec:msg $stat_bleed_msg"><img title="$stat_bleed_msg" height = set_siconht src="images/system/icons/status/vunknown.png"></a></td>'>>
-		<</if>>
-	<<elseif $pc.preg == 1>>
-		<<if $pc.thinkpreg == 1 and $pc.knowpreg == 0>>
-			<<set $stat_preg_msg = 'You think you`re pregnant, but aren`t sure.'>>
-			<<set $stat_preg_tooltip = 'I think I`m pregnant.'>>
-		<<elseif $pc.knowpreg == 1>>
-			<<set $stat_preg_tooltip = 'I`m pregnant.'>>
-			<<set $stat_preg_msg = 'You are pregnant. Your due date is around $pc.pregduedate.'>>
-			<<set $statusIconBarTab += '<td><a href="exec:msg $stat_preg_msg"><img title="$stat_preg_tooltip" height = set_siconht src="images/system/icons/status/vpregnant.png"></a></td>'>>
-		<</if>>
-	<<elseif $pc.preg == 2>>
-		<<set $stat_preg_msg = 'Broken water and contractions, it`s pretty clear what is going on. You need to get to a hospital ASAP.'>>
-		<<set $stat_preg_tooltip = 'Go to the hospital, ASAP! You`re in labour!'>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_preg_msg"><img title="$stat_preg_tooltip" height = set_siconht src="images/system/icons/status/labour.png"></a></td>'>>
-	<</if>>
-	<<gs 'lact_lib' 'breast_stat_icons'>>
-	
-	<<if $stat_cumloc_check == 1 and $pc.trait('cumeater') == 1 and $cumeater_cheat == 0 and $menu_off == 0>>
-<!-- 		<<set $statusIconBarTab += '<td><a href="exec: gs 'cum_manage', 'cumeater_icon'>> <<set ERROR: FAILED TO CONVERT LITERAL: """gs ''stat''"><img title""" = ERROR: FAILED TO CONVERT LITERAL: """"Click to lick up all that delicious cum." height = <<set_siconht>> src="images""" / $system / $icons / $status / ERROR: FAILED TO CONVERT LITERAL: """cum_eater.png"><""" / ERROR: FAILED TO CONVERT LITERAL: """a><""" / ERROR: FAILED TO CONVERT LITERAL: """td>'""">> -->
-<<warn 'FTCL: 		<<set $statusIconBarTab += "<td><a href="exec: gs "cum_manage", "cumeater_icon">> <<set ERROR: FAILED TO CONVERT LITERAL: """gs ""stat"""><img title""" = ERROR: FAILED TO CONVERT LITERAL: """"Click to lick up all that delicious cum." height = <<set_siconht>> src="images""" / $system / $icons / $status / ERROR: FAILED TO CONVERT LITERAL: """cum_eater.png"><""" / ERROR: FAILED TO CONVERT LITERAL: """a><""" / ERROR: FAILED TO CONVERT LITERAL: """td>"""">>'>>
-	<<elseif $stat_cumloc_check == 1 and $pc.trait('cumeater') == 1 and $cumeater_cheat == 0 and $menu_off == 1>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_disable_msg"><img title="$stat_disable_msg" height = set_siconht src="images/system/icons/status/cum_eater.png"></a></td>'>>
-	<</if>>
-	<<if $stat_cumloc_check == 1 and $inventory.get("wipe") > 0 and $menu_off == 0>>
-		<<set $statusIconBarTab += '<td><a href="exec:dynamic $d_salf"><img title="Click to use your wipes." height = set_siconht src="images/system/icons/status/wipes.png"></a></td>'>>
-	<<elseif $stat_cumloc_check == 1 and $inventory.get("wipe") > 0 and $menu_off == 1>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_disable_msg"><img title="$stat_disable_msg" height = set_siconht src="images/system/icons/status/wipes.png"></a></td>'>>
-	<</if>>
-	<<set $stat_STD_count = 0>>
-	<<set $stat_STD_msg = ''>>
-	<<if $Gerpes >= 10 and $GenHerpes == 1>>
-		<<set $stat_STD_count += 1>>
-		<<set $stat_STD_msg += 'Sores have appeared on your vagina. You have genital herpes.'>>
-	<<elseif $Gerpes >= 5 and $GenHerpes == 1>>
-		<<set $stat_STD_count += 1>>
-		<<set $stat_STD_msg += 'Your vagina is red and very itchy. You have genital herpes.'>>
-	<<elseif $Gerpes >= 3 and $Orerpes == 1>>
-		<<set $stat_STD_count += 1>>
-		<<set $stat_STD_msg += 'You have cold sores on your lips. You have oral herpes.'>>
-	<</if>>
-	<<if $Gerpes >= 20 and $GenHerpes == 1>>
-		<<set $stat_STD_count += 1>>
-		<<if $stat_STD_count > 1>>
-			<<set $stat_STD_msg += '<br>'>>
-		<</if>>
-		<<set $stat_STD_msg += 'The herpes sores also cover your ass.'>>
-	<</if>>
-	<<if $Sifilis >= 50>>
-		<<set $stat_STD_count += 1>>
-		<<if $stat_STD_count > 1>>
-			<<set $stat_STD_msg += '<br>'>>
-		<</if>>
-		<<set $stat_STD_msg += 'Syphilitic rashes cover your whole body.'>>
-	<<elseif $Sifilis >= 21>>
-		<<set $stat_STD_count += 1>>
-		<<if $stat_STD_count > 1>>
-			<<set $stat_STD_msg += '<br>'>>
-		<</if>>
-		<<set $stat_STD_msg += 'You have a single large, hard sore on the lip. You have syphilis.'>>
-	<</if>>
-	<<if $Triper > 2>>
-		<<set $stat_STD_count += 1>>
-		<<if $stat_STD_count > 1>>
-			<<set $stat_STD_msg += '<br>'>>
-		<</if>>
-		<<set $stat_STD_msg += 'It stings when you`re urinating. You have gonorrhea.'>>
-	<</if>>
-	<<if $Kandidoz > 30>>
-		<<set $stat_STD_count += 1>>
-		<<if $stat_STD_count > 1>>
-			<<set $stat_STD_msg += '<br>'>>
-		<</if>>
-		<<set $stat_STD_msg += 'There`s a white discharge coming from your vagina. You have yeast infection.'>>
-	<</if>>
-	<<if $stat_STD_count > 0>>
-		<<set $stat_STD_tooltip = 'You have '+iif(stat_STD_count = 1, 'a', 'stat_STD_count')+' STD'+iif(stat_STD_count = 1, '.', 's.')+' Click to find out more.'>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_STD_msg"><img title="$stat_STD_tooltip" height = set_siconht src="images/system/icons/status/std.png"></a></td>'>>
-	<</if>>
-	<<if $stat_lack_of_sleep_msg != ''>>
-		<<if $pcs_condition['lack_of_sleep'] >= 20>>
-			<<set $statusIconBarTab += '<td><a href="exec:msg $stat_lack_of_sleep_msg"><img title="$stat_lack_of_sleep_tooltip" height = set_siconht src="images/system/icons/status/lack_of_sleep_4.png"></a></td>'>>
-		<<elseif $pcs_condition['lack_of_sleep'] >= 10>>
-			<<set $statusIconBarTab += '<td><a href="exec:msg $stat_lack_of_sleep_msg"><img title="$stat_lack_of_sleep_tooltip" height = set_siconht src="images/system/icons/status/lack_of_sleep_3.png"></a></td>'>>
-		<<elseif $pcs_condition['lack_of_sleep'] >= 5>>
-			<<set $statusIconBarTab += '<td><a href="exec:msg $stat_lack_of_sleep_msg"><img title="$stat_lack_of_sleep_tooltip" height = set_siconht src="images/system/icons/status/lack_of_sleep_2.png"></a></td>'>>
-		<<elseif $pcs_condition['lack_of_sleep'] >= 2>>
-			<<set $statusIconBarTab += '<td><a href="exec:msg $stat_lack_of_sleep_msg"><img title="$stat_lack_of_sleep_tooltip" height = set_siconht src="images/system/icons/status/lack_of_sleep_1.png"></a></td>'>>
-		<</if>>
-	<</if>>
-	<<set $statusIconBarTab += '</tr><tr>'>>
-
-
-
-
-<!-- !!-----------------Status Icons (Start)-------------------->
-<<if $cheatStatusIcons == 0>>
-
-
 
-	<!-- !!Row 4: Status, Jobs, School-->
-	<<if $bimbolevel > 0>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $bimbostatus"><img title="$bimbo_tooltip" height = set_siconht src="images/system/icons/status/bimbo.png"></a></td>'>>
-	<</if>>
-	<<if $stat_hypno_msg != ''>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_hypno_msg"><img title="$stat_hypno_tooltip" height = set_siconht src="images/system/icons/status/hypno_addict.png"></a></td>'>>
-	<</if>>
-	<<if $succubusflag == 1 and $succhungry > 0>>
-		<<set $stat_succ_msg = 'You have needed to feed for <<succhungry>> day'+iif(succhungry > 1, 's.', '.')>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_succ_msg"><img title="You need to feed." height = set_siconht src="images/system/icons/status/need_succubus_feeding.png"></a></td>'>>
-	<</if>>
-	<<if $stat_court_msg != ''>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_court_msg"><img title="$stat_court_tooltip" height = set_siconht src="images/system/icons/status/court.png"></a></td>'>>
-	<</if>>
-	<<if $stat_musiclesson_msg != ''>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_musiclesson_msg "><img title="$stat_musiclesson_tip" height = set_siconht src="images/system/icons/status/musiclesson.png"></a></td>'>>
-	<</if>>
-	<<if $stat_school_icon_msg != '' and $SchoolBlock == 0>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_school_icon_msg"><img title="$stat_school_tooltip" height = set_siconht src="images/system/icons/status/school.png"></a></td>'>>
-	<</if>>
-	<<if $stat_uni_icon_msg != '' and ($university['semester_week'] ==  - 1 or ($university['semester_passed'] == $university['enrolled_in_semester'] and $university['diploma'] == 0))>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_uni_icon_msg"><img title="$stat_uni_tooltip" height = set_siconht src="images/system/icons/status/uni_class_3.png"></a></td>'>>
-	<</if>>
-	<<if $stat_uni_icon_msg != '' and $university['semester_week'] > 0>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_uni_icon_msg"><img title="$stat_uni_tooltip" height = set_siconht src="images/system/icons/status/uni_class_1.png"></a></td>'>>
-	<</if>>
-	<<if $stat_uni_icon_msg != '' and $university['exam_week'] > 0>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_uni_icon_msg"><img title="$stat_uni_tooltip" height = set_siconht src="images/system/icons/status/uni_class_2.png"></a></td>'>>
-	<</if>>
-	<<if $stat_game_night_msg != ''>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_game_night_msg"><img title="$stat_game_night_tooltip" height = set_siconht src="images/system/icons/status/game_night.png"></a></td>'>>
-	<</if>>
-	<!-- !!maybe we should remove this one, and create specialized icons for all the jobs? This one is not informative-->
-	<<if $work > 0>>
-		<<set $statusIconBarTab += '<td><a href="exec: gt 'journal', 'records'"><img title="You have a job. Click to find out more." height = set_siconht src="images/system/icons/status/work.png"></a></td>'>>
-	<</if>>
-	<<if $masseuse['jobtype'] > 0>>
-		<<if ($masseuse[$time.weekday + '_shift_1'] == 1 and $time.hour <= 9) or ($masseuse[$time.weekday + '_shift_2'] == 1 and $time.hour <= 13) or ($masseuse[$time.weekday + '_shift_3'] == 1 and $time.hour <= 17)>>
-			<<set $stat_masseuse_msg = 'You work at the beauty salon today, at '>>
-			<<if $masseuse[$time.weekday + '_shift_1'] == 1 and $time.hour <= 9>>
-				<<set $stat_masseuse_msg += '9:00, '>>
-			<</if>>
-			<<if $masseuse[$time.weekday + '_shift_2'] == 1 and $time.hour <= 13>>
-				<<set $stat_masseuse_msg += '13:00, '>>
-			<</if>>
-			<<if $masseuse[$time.weekday + '_shift_3'] == 1 and $time.hour < 17>>
-				<<set $stat_masseuse_msg += '17:00, '>>
-			<</if>>
-			<<set $stat_masseuse_msg += 'and you have worked masseuse['shifts_worked'] of the required masseuse['shifts_required'] shifts.'>>
-			<<set $statusIconBarTab += '<td><a href="exec: msg $stat_masseuse_msg"><img title="$stat_masseuse_msg" height = set_siconht src="images/system/icons/status/masseuse.png"></a></td>'>>
-		<</if>>
-	<</if>>
-	<<if $model['icon'] == 1>>
-		<<if $model['status'] > 0 and $model_week < (daystart - week) / 7 and $model_job_week == 1>>
-			<<set $stat_model_msg = 'You can get paid for 1 more modeling job this week.'>>
-		<<elseif $model['status'] > 0 and $model_week < (daystart - week) / 7 and $model_job_week < 1>>
-			<<set $stat_model_msg = 'You can get paid for 2 modeling jobs this week.'>>
-		<</if>>
-		<<set $statusIconBarTab += '<td><a href="exec: msg $stat_model_msg"><img title="$stat_model_msg" height = set_siconht src="images/system/icons/status/model_'+iif(night_mode ! 3 and (($location_type = 'public_outdoors' and daystage = 5) or night_mode = 1 or night_mode = 2), 'white', 'black')+'.png"></a></td>'>>
-	<</if>>
-	<<if $AlbinaQW['StarletsJoined'] > 0 and $AlbinaQW['StarletsShutDown'] == 0 and $npc('A23').pregtalk == 0 and $starlets_on == 1>>
-		<<if $time.hour > 16 and $starlets_practice > 0>>
-			<<set $stat_starlet_msg = 'You missed practice with the Starlets today!'>>
-		<<else>>
-			<<set $stat_starlet_msg = 'You must be at Starlets practice between 15:00 and 16:00 today.'>>
-		<</if>>
-		<<if ($time.hour < 16 or $starlets_missed > 0) and $starlets['late_message'] == 0>>
-			<<if $starlets_missed == 0>>
-				<<set $statusIconBarTab += '<td><a href="exec:msg $stat_starlet_msg"><img title="$stat_starlet_msg" height = set_siconht src="images/system/icons/status/starlets_'+iif(night_mode ! 3 and (($location_type = 'public_outdoors' and daystage = 5) or night_mode = 1 or night_mode = 2), 'white', 'black')+'.png"></a></td>'>>
-			<<else>>
-<!-- 				<<set $statusIconBarTab += ERROR: FAILED TO CONVERT LITERAL: """'<td><a href="exec: starlets[''late_message''] = 1""">> <<set ERROR: FAILED TO CONVERT LITERAL: """msg $stat_starlet_msg"><img title""" = ERROR: FAILED TO CONVERT LITERAL: """"<<$stat_starlet_msg>>" height = <<set_siconht>> src="images""" / $system / $icons / $status / ERROR: FAILED TO CONVERT LITERAL: """starlets_'""" + iif(night_mode ! 3 and (($location_type = 'public_outdoors' and daystage = 5) or night_mode = 1 or night_mode = 2), 'white', 'black') + ERROR: FAILED TO CONVERT LITERAL: """'.png"><""" / ERROR: FAILED TO CONVERT LITERAL: """a><""" / ERROR: FAILED TO CONVERT LITERAL: """td>'""">> -->
-<<warn 'FTCL: 				<<set $statusIconBarTab += ERROR: FAILED TO CONVERT LITERAL: """"<td><a href="exec: starlets[""late_message""] = 1""">> <<set ERROR: FAILED TO CONVERT LITERAL: """msg $stat_starlet_msg"><img title""" = ERROR: FAILED TO CONVERT LITERAL: """"<<$stat_starlet_msg>>" height = <<set_siconht>> src="images""" / $system / $icons / $status / ERROR: FAILED TO CONVERT LITERAL: """starlets_"""" + iif(night_mode ! 3 and (($location_type = "public_outdoors" and daystage = 5) or night_mode = 1 or night_mode = 2), "white", "black") + ERROR: FAILED TO CONVERT LITERAL: """".png"><""" / ERROR: FAILED TO CONVERT LITERAL: """a><""" / ERROR: FAILED TO CONVERT LITERAL: """td>"""">>'>>
-			<</if>>
-		<</if>>
-	<</if>>
-	<<if $volleysostav > 0 and $time.weekday == 6 and $sorevday != $time.daystart and $time.hour <= 18>>
-		<<set $stat_volleyball_msg = 'There is volleyball tournament today at 18:00.'>>
-		<<set $statusIconBarTab += '<td><a href="exec: msg $stat_volleyball_msg"><img title="$stat_volleyball_msg" height = set_siconht src="images/system/icons/status/volleball.png"></a></td>'>>
-	<</if>>
-	<<if $pfilmNO != 1>>
-		<<if $pornstar['icon'] == 1 and $pornstar['icon_disable'] != $time.daystart>>
-			<<if $time.hour < 11>>
-				<<set $stat_porn_msg = 'You are starring in a porno today at 10:00.'>>
-				<<set $statusIconBarTab += '<td><a href="exec: msg $stat_porn_msg"><img title="$stat_porn_msg" height = set_siconht src="images/system/icons/status/porn_'+iif(night_mode ! 3 and (($location_type = 'public_outdoors' and daystage = 5) or night_mode = 1 or night_mode = 2), 'white', 'black')+'.png"></a></td>'>>
-			<<elseif $time.hour >= 11 and $time.hour < 13>>
-				<<set $stat_porn_msg = 'You`re late for your shoot at the porn studio!'>>
-				<<set $statusIconBarTab += '<td><a href="exec: msg $stat_porn_msg"><img title="$stat_porn_msg" height = set_siconht src="images/system/icons/status/porn_red.png"></a></td>'>>
-			<<else>>
-				<<set $stat_porn_msg = 'You missed a scheduled porn shoot!'>>
-<!-- 				<<set $statusIconBarTab += ERROR: FAILED TO CONVERT LITERAL: """'<td><a href="exec: pornstar[''icon_disable''] = daystart""">> <<set ERROR: FAILED TO CONVERT LITERAL: """msg $stat_porn_msg"><img title""" = ERROR: FAILED TO CONVERT LITERAL: """"<<$stat_porn_msg>>" height = <<set_siconht>> src="images""" / $system / $icons / $status / ERROR: FAILED TO CONVERT LITERAL: """porn_red.png"><""" / ERROR: FAILED TO CONVERT LITERAL: """a><""" / ERROR: FAILED TO CONVERT LITERAL: """td>'""">> -->
-<<warn 'FTCL: 				<<set $statusIconBarTab += ERROR: FAILED TO CONVERT LITERAL: """"<td><a href="exec: pornstar[""icon_disable""] = daystart""">> <<set ERROR: FAILED TO CONVERT LITERAL: """msg $stat_porn_msg"><img title""" = ERROR: FAILED TO CONVERT LITERAL: """"<<$stat_porn_msg>>" height = <<set_siconht>> src="images""" / $system / $icons / $status / ERROR: FAILED TO CONVERT LITERAL: """porn_red.png"><""" / ERROR: FAILED TO CONVERT LITERAL: """a><""" / ERROR: FAILED TO CONVERT LITERAL: """td>"""">>'>>
-			<</if>>
-		<</if>>
-	<</if>>
-	<<set $statusIconBarTab += '</tr><tr>'>>
+:: Topbar[include]
+<div class="buttons">
 
-	<!-- !!Row 5: Drugs and other short term stuff-->
-	<<if $siga > 0>>
-		<<set $stat_smoker_msg = 'You have <<siga>> cigarette'+iif(siga = 1, '', 's')+iif(smokerNeed > 0 and NarkImmune = 0, ' and you want to smoke.' , '.')>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_smoker_msg"><img title="$stat_smoker_msg" height = set_siconht src="images/system/icons/status/cigarettes.png"></a></td>'>>
-	<</if>>
-	<<if $smoker >= 20 and $NarkImmune == 0 and $smokerNeed > 20 and $siga > 0>>
-<!-- 		<<set $statusIconBarTab += '<td><a href="exec: gs 'drugs','smoke'>> <<set ERROR: FAILED TO CONVERT LITERAL: """''You are smoking a cigarette.''"><img title""" = ERROR: FAILED TO CONVERT LITERAL: """"You really need to smoke""" , ERROR: FAILED TO CONVERT LITERAL: """click to smoke a cigarette." height = <<set_siconht>> src="images""" / $system / $icons / $status / ERROR: FAILED TO CONVERT LITERAL: """craving_nicotine.png"><""" / ERROR: FAILED TO CONVERT LITERAL: """a><""" / ERROR: FAILED TO CONVERT LITERAL: """td>'""">> -->
-<<warn 'FTCL: 		<<set $statusIconBarTab += "<td><a href="exec: gs "drugs","smoke">> <<set ERROR: FAILED TO CONVERT LITERAL: """""You are smoking a cigarette."""><img title""" = ERROR: FAILED TO CONVERT LITERAL: """"You really need to smoke""" , ERROR: FAILED TO CONVERT LITERAL: """click to smoke a cigarette." height = <<set_siconht>> src="images""" / $system / $icons / $status / ERROR: FAILED TO CONVERT LITERAL: """craving_nicotine.png"><""" / ERROR: FAILED TO CONVERT LITERAL: """a><""" / ERROR: FAILED TO CONVERT LITERAL: """td>"""">>'>>
-	<<elseif $smoker >= 20 and $NarkImmune == 0 and $smokerNeed > 20 and $siga <= 0>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg 'You really need to smoke, but you have no cigarettes.'"><img title="You really need to smoke, but you have no cigarettes." height = set_siconht src="images/system/icons/status/craving_nicotine.png"></a></td>'>>
-	<<elseif $siga > 0>>
-<!-- 		<<set $statusIconBarTab += '<td><a href="exec: gs 'drugs','smoke'>> <<set ERROR: FAILED TO CONVERT LITERAL: """''You are smoking a cigarette.''"><img title""" = ERROR: FAILED TO CONVERT LITERAL: """"Click to smoke a cigarette." height = <<set_siconht>> src="images""" / $system / $icons / $status / ERROR: FAILED TO CONVERT LITERAL: """smoke_cigarette.png"><""" / ERROR: FAILED TO CONVERT LITERAL: """a><""" / ERROR: FAILED TO CONVERT LITERAL: """td>'""">> -->
-<<warn 'FTCL: 		<<set $statusIconBarTab += "<td><a href="exec: gs "drugs","smoke">> <<set ERROR: FAILED TO CONVERT LITERAL: """""You are smoking a cigarette."""><img title""" = ERROR: FAILED TO CONVERT LITERAL: """"Click to smoke a cigarette." height = <<set_siconht>> src="images""" / $system / $icons / $status / ERROR: FAILED TO CONVERT LITERAL: """smoke_cigarette.png"><""" / ERROR: FAILED TO CONVERT LITERAL: """a><""" / ERROR: FAILED TO CONVERT LITERAL: """td>"""">>'>>
-	<</if>>
-	<<if $pc.narkday != $time.daystart and $pc.narkoman == 1 and $Slomka > 0>>
-		<<set $stat_drug_msg += 'You need heroin and cocaine.'>>
-	<<elseif $pc.narkday != $time.daystart and $pc.narkoman == 1 and $Slomka <= 0>>
-		<<set $stat_drug_msg += 'You need cocaine.'>>
-	<<elseif $SLomka > 0>>
-		<<set $stat_drug_msg += 'You need heroin.'>>
+	<<if State.length >= 2>>
+		<<button '🡄'>>
+			<<run Engine.backward()>>
+		<</button>>
 	<<else>>
-		<<set $stat_drug_msg = ''>>
-	<</if>>
-	<<if $stat_drug_msg != ''>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_drug_msg"><img title="$stat_drug_msg" height = set_siconht src="images/system/icons/status/craving_drugs.png"></a></td>'>>
+		<<class 'disabled'>>
+			<<button '🡄'>><</button>>
+		<</class>>
+	<</if>>
+	<<if State.length !== State.size>>
+		<<button '🡆'>>
+			<<run Engine.forward()>>
+		<</button>>
+	<<else>>
+		<<class 'disabled'>>
+			<<button '🡆'>><</button>>
+		<</class>>
 	<</if>>
 
-	<<if $mentats_dose >= 1>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg 'You feel sharp and focused.'"><img title="You feel sharp and focused." height = set_siconht src="images/system/icons/status/drugs.png"></a></td>'>>
-	<</if>>
-	<<if $aphrodisiac_timer > 0>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg 'You are feeling hot, and every move causes your groin to tingle.'"><img title="You are feeling hot." height = set_siconht src="images/system/icons/status/aphro_gum.png"></a></td>'>>
-	<</if>>
-	<<if $stat_frost_msg != ''>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_frost_msg"><img title="$stat_frost_msg" height = set_siconht src="images/system/icons/status/hypothermia.png"></a></td>'>>
-	<</if>>
-	<<if $sick > 0>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_sick_msg"><img title="$stat_sick_tooltip" height = set_siconht src="images/system/icons/status/health.png"></a></td>'>>
-	<</if>>
-	<<if $recuperation == 1>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg 'You are still recovering from major surgery.'"><img title="You are recovering from major surgery." height = set_siconht src="images/system/icons/status/health.png"></a></td>'>>
-	<</if>>
-	<<if $bcream_used == 1>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg 'Your breasts feel hot and tingly.'"><img title="Your breasts feel hot and tingly." height = set_siconht src="images/system/icons/status/breast_cream.png"></a></td>'>>
-	<</if>>
-	<<if $cumcondslip > 0>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg 'You feel sick, and you are wondering about the used condom you never found. Maybe those two things are related?'"><img title="You feel sick. Click to find out more." height = set_siconht src="images/system/icons/status/stuck_condom.png"></a></td>'>>
-	<</if>>
-	<<if $stat_writing_msg != ''>>
-		<<set $statusIconBarTab += '<td><a href="exec:msg $stat_writing_msg"><img title="$stat_writing_msg" height = set_siconht src="images/system/icons/status/body_writing.png"></a></td>'>>
-	<</if>>
-	<<set $statusIconBarTab += '</tr></table>'>>
-	<<set $stat_msg += setup.func('cleanHTML',$statusIconBarTab)>>
-	<<set $statusIconBarTab to null>>
-<<else>>
-	<<set $stat_msg += '<br>'>>
-<</if>>
-<!-- !!-----------------Status Icons (End)-------------------->
 
+	<<button '🖫'>>
+		<<run UI.saves();>>
+	<</button>>
+
+	<<button '🖹'>>
 
+	<</button>>
 
+	<<button '⭯'>>
+		<<run UI.restart();>>
+	<</button>>
+</div>

+ 1 - 1
sugarcube/src/start/startingCharacters/StartingCharacters.ts

@@ -118,7 +118,7 @@ setup.startingCharacterApply = function(characterId){
 				variables.npcs.setBulkByFilter(_filters,_fieldKey,_fieldValue);
 			}
 		}
-		//<!-- IDs: Need to come bulk so they don't get overwritten -->
+		//<!-- IDs: Need to come after bulk so they don't get overwritten -->
 		for(const [_key,_value] of Object.entries(startCharacterData.npcs?.ids ?? {})){
 			for(const [_fieldKey,_fieldValue] of Object.entries(_value)){
 				variables.npcs.set(_key,_fieldKey,_fieldValue);

+ 16 - 23
sugarcube/src/style/connectedLocations.css

@@ -1,35 +1,27 @@
-body.lightMode #connectedLocations{
+body.lightMode #connections{
 	background: #111;
 	padding: 1em;
 }
 
-#connectedLocations{
-	margin-top: 0px;
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-	grid-auto-rows: 7.5em;
-	margin-top: -2em;
-	grid-gap: 0.2em;
-	color:white;
 
-}
-
-#connectedLocations:empty {
+#connections:empty {
 	display: none;
 }
 
-#connectedLocations > .connectedLocation{
+/*
+#connections > .connectedLocation{
 	display: block;
 	position: relative;
+	border: rgba(10, 10, 10, 0) 0.2em solid; 
 }
 
-#connectedLocations>.connectedLocation:hover {
-	outline: white 0.2em dotted;
+#connections>.connectedLocation:hover {
+	border: rgb(165, 165, 165) 0.2em dotted;
 }
 
 
 
-#connectedLocations>.connectedLocation>a {
+#connections>.connectedLocation>a {
 	position: absolute;
 	display: block;
 	left: 0px;
@@ -38,22 +30,22 @@ body.lightMode #connectedLocations{
 	z-index: 1000;
 }
 
-#connectedLocations>.connectedLocation>img {
+#connections>.connectedLocation>img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 	filter: grayscale(80%);
 }
 
-#connectedLocations>.connectedLocation.fitContain>img {
+#connections>.connectedLocation.fitContain>img {
 	object-fit: contain;
 }
 
-#connectedLocations>.connectedLocation:hover>img {
+#connections>.connectedLocation:hover>img {
 	filter: unset;
 }
 
-#connectedLocations>.connectedLocation>.label {
+#connections>.connectedLocation>.label {
 	position: absolute;
 	bottom: 0px;
 	width: 100%;
@@ -61,7 +53,7 @@ body.lightMode #connectedLocations{
 	background: rgba(10, 10, 10, 0.8);
 }
 
-#connectedLocations>.connectedLocation>.duration_label{
+#connections>.connectedLocation>.duration_label{
 	position: absolute;
 	top: 0px;
 	width: 100%;
@@ -70,12 +62,12 @@ body.lightMode #connectedLocations{
 	opacity: 0;
 }
 
-#connectedLocations>.connectedLocation:hover>.duration_label {
+#connections>.connectedLocation:hover>.duration_label {
 	opacity: 1;
 	transition-delay: 0.5s;
 }
 
-#connectedLocations>.connectedLocation .indecentBlock {
+#connections>.connectedLocation .indecentBlock {
 	position: absolute;
 	left: 0px;
 	width: 100%;
@@ -89,3 +81,4 @@ body.lightMode #connectedLocations{
 	font-weight: bold;
 	cursor: not-allowed;
 }
+*/

+ 12 - 0
sugarcube/src/style/images.css

@@ -13,3 +13,15 @@ img, video{
     margin: 0 auto;
     max-width: 100%;
 }
+
+img#imageMain {
+    filter: blur(8px);
+    position: absolute;
+    left: 0;
+    width: 100%;
+    max-height: calc(100vh - 2em);
+    opacity: 0.3;
+    top: 2em;
+    z-index: -1000000;
+    max-width: unset;
+}

+ 114 - 0
sugarcube/src/style/interface.css

@@ -0,0 +1,114 @@
+#interface{
+	height: 100vh;
+	overflow: clip;
+	display: grid;
+	/*grid-template-areas: "top top top" "sidebar story connections" "sidebar story npcs" "sidebar actions npcs";*/
+	grid-template-areas: "top top top" "sidebar story connectionsAndNPCs" "sidebar actions npcs";
+	grid-template-columns: 15em 1fr 15em;
+	grid-template-rows: 2em 1fr auto;
+}
+
+#actions{
+	grid-area:actions;
+}
+
+#connectionsAndNPCs{
+	grid-area: connectionsAndNPCs;
+	overflow: auto;
+}
+
+#passages{
+	grid-area: story;
+	overflow: clip auto;
+	display: grid;
+	grid-template-columns: auto minmax(30em, 54em) auto;
+	grid-template-areas:
+		". story .";
+}
+
+#passages .passage{
+	grid-area: story;
+	background: rgba(20, 20, 20, 0.5);
+		padding: 0.3em 1em;
+}
+
+#sidebar{
+	grid-area: sidebar;
+	overflow: auto;
+	background: rgba(20, 20, 20, 0.5);
+	padding: 0em 0.3em;
+}
+
+#topbar{
+	grid-area: top;
+}
+
+button{
+	background: #111;
+	border: solid 1px #333;
+}
+
+button:hover {
+	background: #333;
+	border: solid 1px #555;
+}
+
+button.disabled{
+	background: #999;
+	border: solid 1px #333;
+	cursor:not-allowed;
+}
+
+button.disabled:hover {
+	background: #f99;
+	border: solid 1px #933;
+}
+
+#topbar{
+	display: grid;
+	grid-template-areas: "characterStats buttons";
+	grid-template-columns: 1fr auto;
+}
+
+#topbar .buttons{
+	grid-area: buttons;
+	display: grid;
+	grid-template-columns: repeat(10, max-content);
+}
+
+#topbar .buttons button{
+	width: 2em;
+	height: 2em;
+	padding: 0;
+}
+
+@media(max-width: 1279px) {
+
+
+	#interface{
+		height: initial;
+		grid-template-columns: auto;
+		grid-template-areas: "story" "actions" "connectionsAndNPCs" "sidebar";
+		margin-left: 2em;
+		grid-template-rows: unset;
+	}
+
+	#passages{
+		display: block;
+		height: unset;
+		overflow: unset;
+	}
+
+	#topbar{
+		grid-template-areas:
+				"characterStats"
+				"buttons";
+		grid-template-rows: 1fr auto;
+		position: fixed;
+		left:0;
+	}
+
+	#topbar .buttons{
+		grid-template-columns: auto;
+	}
+}