s&box Package Code Search

Search C# source code, UI razor templates, shaders, and configs across s&box packages.

link Raw Facepunch API Link: https://public.facepunch.com/sbox/code/search/1/?ident=verarp.science&take=20

Showing code results for query: * (37 total matches found)

verarp.science / ui/controls/switchcontrol.razor.scss

Game game

.switchcontrol
{
    flex-direction: row;
    width: 100px;
    min-height: 24px;
    align-items: center;
    cursor: pointer;

    .switch-frame
    {
        flex-grow: 0;
        flex-shrink: 1;
        width: 48px;
        height: 16px;
        background-color: #fff1;
        margin: 0px 5px;
        align-items: center;
        border-radius: 100px;
        transition: all 0.4s linear;

        .switch-inner
        {
            position: relative;
            flex-grow: 0;
            flex-shrink: 1;
            background-color: #999;
            width: 25px;
            height: 25px;
            border-radius: 100px;
            left: 20%;
            transform: translateX( -50% );
            transition: all 0.3s ease-out;
        }
    }

    &.active
    {
        .switch-frame
        {
            background-color: #fffa;
        }

        .switch-inner
        {
            left: 80%;
            background-color: #fff;
        }
    }
}

verarp.science / styles/form/_dropdown.scss

Game game

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.button.popupbutton.dropdown
{
	cursor: pointer;
	transition: all .1s ease-out;
	position: relative;

	> .dropdown_indicator
	{
		position: absolute;
		right: 8px;
	}

	&.open
	{
		border-bottom-left-radius: 1px;
		border-bottom-right-radius: 1px;
		transition: border-radius 0.2s ease-out;
	}
}

select
{
	min-height: 40px;

	> option
	{
		display: none;
	}
}

verarp.science / styles/form/_coloreditor.scss

Game game

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.coloreditor
{
	flex-direction: column;
	min-width: 250px;
	max-width: 250px;

	> .canvas
	{
		border-top: 1px solid rgba( white, 0.5 );
		flex-grow: 1;
		flex-direction: column;
		padding: 10px 15px;


		> textentry.textentry
		{
			flex-grow: 0;
			flex-shrink: 0;
			width: auto;
		}
	}

	.slider
	{
		padding: 6.5px;
	}

	.slider .track
	{
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;
		transition: all 0.1s ease-out;

		.inner
		{
			display: none;
		}
	}

	.slider:hover, .slider:active
	{
		padding: 7px;

		.track
		{
			height: 20px;
			border-radius: 6px;
		}

		.thumb
		{
			width: 10px;
			height: 16px;
			margin-left: 2px;
		}
	}

	.slider .thumb
	{
		width: 10px;
		height: 10px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		backdrop-filter: invert( 1 );
		margin-left: 1px;
		pointer-events: none;
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}

	.hue .track
	{
		background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

		.inner
		{
			display: none;
		}
	}

	.satval
	{
		background: linear-gradient(to right, white, transparent);
		height: 200px;
		position: relative;

		&:active
		{
			z-index: 10;
			cursor: none;
		}

		.value_gradient
		{
			background: linear-gradient(to bottom, black, white);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
			mix-blend-mode: multiply;
		}

		.thumb
		{
			z-index: 10;
		}
	}

	.presets
	{
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		padding: 15px;
		border-top: 1px solid rgba( white, 0.5 );

		.preset
		{
			background-color: white;
			width: 16px;
			height: 16px;
			margin: 2px;
			border-radius: 20px;
			cursor: pointer;
			
			&:hover
			{
				box-shadow: 0px 0px 1px 2px white;
			}
		}
	}
}


.coloreditorrgba
{
	flex-direction: column;

	.slider
	{
		padding-right: 16px;
	}

	.slider .track
	{
		background-color: transparent;
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;

		.inner
		{
			display: none;
		}
	}

	.slider .thumb
	{
		width: 12px;
		height: 12px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		margin-left: 2px;
		backdrop-filter: invert( 1 );
	}

	.red_slider .track
	{
		background-image: linear-gradient( to right, rgba( #e63439, 0.1 ), rgba( #e63439, 0.9 ) );
	}

	.green_slider .track
	{
		background-image: linear-gradient( to right, rgba( #54be35, 0.1 ), rgba( #54be35, 0.9 ) );
	}

	.blue_slider .track
	{
		background-image: linear-gradient( to right, rgba( #3472e6, 0.1 ), rgba( #3472e6, 0.9 ) );
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}
}


.coloreditorhsva
{
	flex-direction: column;

	.slider
	{
		padding-right: 16px;
	}

	.slider .track
	{
		background-color: transparent;
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;

		.inner
		{
			display: none;
		}
	}

	.slider .thumb
	{
		width: 12px;
		height: 12px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		margin-left: 2px;
		backdrop-filter: invert( 1 );
	}
		
	.hue_slider .track
	{
		background-image: linear-gradient( to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00 );
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}
}

verarp.science / ui/menupanel.razor.scss

Game game

menupanel
{
    position: absolute;
    z-index: 1000;
    pointer-events: all;
    font-size: 12px;
    flex-shrink: 0;

    .background
    {
        position: absolute;
        left: -5000px;
        right: -5000px;
        top: -5000px;
        bottom: -5000px;
    }

    > .inner
    {
        min-width: 200px;
        min-height: 20px;
        flex-direction: column;
        font-family: Poppins;
        font-weight: bold;
        border-radius: 10px;
        box-shadow: 5px 5px 30px #000e;
        background-color: #2a2a2a;
        flex-shrink: 0;

        .spacer
        {
            height: 1px;
            background-color: #0005;
        }

        .option
        {
            color: #fffa;
            padding: 0px 8px;
            cursor: pointer;
            flex-shrink: 0;
            height: 32px;

            &:first-child
            {
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

            &:last-child
            {
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }

            .icon
            {
                padding: 8px;
                font-family: Material Icons;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
            }

            .text
            {
                padding: 8px;
                flex-shrink: 0;
            }

            &:hover
            {
                background-color: #3472e6;
                color: #f5f8fe;
            }
        }
    }
}

verarp.science / styles/form.scss

Game game

$form-control-height: 28px !default;

@import "form/_checkbox.scss";
@import "form/_switch.scss";
@import "form/_dropdown.scss";
@import "form/_coloreditor.scss";
@import "form/_colorproperty.scss";

.form
{
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	overflow: scroll;
}

.field-group
{
	flex-direction: column;
	flex-shrink: 0;
}

.field-header
{
	flex-shrink: 0;
}

.field
{
	color: white;
	font-size: 14px;
	flex-shrink: 0;
	flex-grow: 0;

	> .label
	{
		flex-grow: 0;
		flex-shrink: 0;
		font-weight: 600;
		opacity: 0.4;
		width: 20%;
		font-size: 13px;
	}

	> .control
	{
		flex-shrink: 0;
		flex-grow: 1;
		flex-direction: column;
	}
}

.is-vertical > .field, .field.is-vertical
{
	flex-direction: column;

	> .label
	{
		width: auto;
		height: auto;
	}
}

verarp.science / styles/rootpanel.scss

Game game


RootPanel
{
	font-family: Roboto;
	color: white;
}

IconPanel, i
{
	font-family: Material Icons;
	background-position: center;
	background-size: contain;
}

.tooltip
{
	background-color: rgba( black, 0.8 );
	border: 1px solid rgba( #555, 0.1 );
	padding: 10px;
	border-radius: 4px;
	color: white;
	font-family: Inter;
	font-weight: bold;
	transition: opacity 0.09s ease;
	opacity: 1;
	margin: 0px;

	&:intro, &:outro
	{
		opacity: 0;
	}
}

.textentry
{
	cursor: text;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	flex-direction: row;
	position: relative;
	padding: 10px;

	&.disabled
	{
		cursor: default;
	}

	&.is-multiline
	{
		align-items: flex-start;
		white-space: normal;
	}

	.content-label,
	.placeholder
	{
		flex-grow: 1;
	}

	.placeholder
	{
		opacity: 0.2;
		pointer-events: none;
	}

	.iconpanel
	{
		position: absolute;
		right: 0;
		padding-right: 10px;
		pointer-events: none;

		&.clearbutton
		{
			color: #fff;
			pointer-events: all;
			cursor: pointer;
			opacity: 0.1;

			&:hover
			{
				opacity: 0.5;
			}

			&:active
			{
				opacity: 1;
			}
		}
	}

	&:empty
	{
		.clearbutton
		{
			display: none;
		}
	}

	&.has-icon
	{
		padding-right: 30px;
	}

	.content-label,
	.prefix-label,
	.suffix-label,
	.placeholder
	{
		overflow: hidden;
	}

	.content-label
	{
		order: 1;
	}

	.suffix-label
	{
		order: 2;
	}

	.prefix-label,
	.suffix-label
	{
		flex-shrink: 0;
		opacity: 0.5;
	}

	&.invalid
	{
		box-shadow: 0px 0px 1px 2px #f8356b;
	}
}

.popup-panel
{
	background-color: #1b202c;
	flex-direction: column;
	color: #8e9ec2;
	transition: all 0.1s ease-out;
	position: absolute;
	z-index: 2000;
	min-height: 20px;
	min-width: 10px;
	overflow: scroll;
	pointer-events: all;
	box-shadow: 3px 3px 64px #000;
	border-radius: 4px;

	&.medium
	{
		max-width: 300px;
	}

	&.center-horizontal
	{
		transform-origin: top center;
	}

	&.below-center
	{
		transform: translateX( -50% );
		transform-origin: 0% 0%;
	}

	&.above-left
	{
		transform-origin: 0% 100%;
	}

	&.above-center
	{
		transform: translateX( -50% );
		transform-origin: 0% 100%;
	}

	&.left
	{
		transform-origin: 100% 50%;
		transform: translate( 00% -50% );
	}

	&.right
	{
		transform-origin: 0 50%;
		transform: translate( 0% -50% );
	}

	&:intro
	{
		transform: scale( 0 );
		pointer-events: none;
		opacity: 0;
	}

	&:outro
	{
		opacity: 0;
		transition: all 0.1s ease-in;
		margin-top: 50px;
		pointer-events: none;
	}

	&.below-stretch
	{
		transform-origin: 0% 0%;

		&:intro
		{
			transform: scaleY( 0.1 );
		}
	}

	> .canvas
	{
		flex-direction: column;
	}

	.information
	{
		padding: 16px;
		font-size: 14px;
		opacity: 0.5;
	}

	button
	{
		padding: 2px 8px;
		cursor: pointer;
		font-family: Poppins;
		font-weight: 600;
		flex-shrink: 0;

		&:hover
		{
			background-color: #08f;
			color: #fff;
		}
	}
}

verarp.science / styles/base/_navigator.scss

Game game

.navigator-body
{
	&.hidden
	{
		display: none;
	}
}

verarp.science / ui/controls/color/colorpickercontrol.cs.scss

Game game

ColorPickerControl
{
	flex-direction: column;
	flex-shrink: 0;
	gap: 0.5rem;
	margin: 1rem;
}

verarp.science / ui/components/packagecard.razor.scss

Game game

@import "/styles/_theme.scss";
$background-size: 8px;

PackageCard
{
	flex-shrink: 0;

	&:hover
	{
		sound-in: "ui.button.over";
	}

	&:active
	{
		sound-in: "ui.button.press";
	}

	flex-direction: column;
	position: relative;
	background-color: rgba( $default-950, 0 );
	border-radius: $rounding-default;
	transition: all 150ms ease;
	cursor: pointer;
	z-index: 0;
	height: 200px;

	.image
	{
		flex-grow: 1;
		flex-shrink: 0;
		transition: all 150ms ease;
		border: 1px solid rgba( white, 0.025 );
		aspect-ratio: 16 / 9;
		background-position: center;
		background-size: cover;
		border-radius: $rounding-small;
		position: relative;
	}

	column
	{
		padding: 8px 2px; // Optically aligned
	}

	&.list
	{
		flex-grow: 1;
		height: 64px;
		flex-direction: row;
		gap: 12px;
		padding: 4px;

		.inner column
		{
			flex-grow: 1;
		}

		.image
		{
			height: 100%;
			aspect-ratio: 1;
			flex-grow: 0;
			flex-shrink: 0;
		}

		column
		{
			gap: 3px;
			justify-content: center;
		}

		.package-title
		{
			flex-shrink: 0;
			max-width: 500px;
		}

		.package-users
		{
			top: 1px;
			right: 1px;
		}

		&:hover
		{
			background-color: $default-800;
			transform: none;

			&::after
			{
				display: none;
			}
		}
	}

	&.wide
	{
		height: 250px;

		.package-title
		{
			max-width: 300px;
		}
	}

	&.small
	{
		height: 200px;
		aspect-ratio: 3/4;

		.image
		{
			aspect-ratio: 1;
		}

		.package-title
		{
			max-width: 140px;
		}
	}

	&.tall
	{
		height: 400px;

		.image
		{
			aspect-ratio: 9/16;
		}

		.package-title
		{
			max-width: 200px;
		}
	}

	.package-title
	{
		text-overflow: ellipsis;
		max-height: 24px;
		flex-shrink: 1;
		font-size: 14px;
	}

	.package-users
	{
		position: absolute;
		bottom: 4px;
		right: 4px;
		background-color: rgba( 10, 40, 10, 0.95 );
		padding: 3px 5px;
		border-radius: 2px;
		justify-content: center;
		align-items: center;
		gap: 3px;
		font-size: 11px;
		color: #def;
		border: 1px solid #252;
		color: #2f3;

		&:before
		{
			content: '●';
			font-size: 0.5rem;
		}
	}
	// Hover effect (not for list)
	&:not(.list)
	{
		&::after
		{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba( $default-950, 0 );
			transition: all 150ms ease;
			z-index: -10;
			border-radius: $rounding-large;
			pointer-events: none;
		}

		&:hover
		{
			transform: scale( 1.05 );

			&::after
			{
				background-color: $default-800;
				top: -$background-size;
				left: -$background-size;
				right: -$background-size;
				bottom: -$background-size;
				box-shadow: 0 0 25px rgba( black, 0.3 );
			}

			z-index: 100;
			background-color: $default-900;
		}
	}
}

verarp.science / .obj/__compiler_extra.cs

Game game

global using static Sandbox.Internal.GlobalGameNamespace;
global using Microsoft.AspNetCore.Components;
global using Microsoft.AspNetCore.Components.Rendering;
[assembly: global::System.Reflection.AssemblyMetadata( "AddonTitle", "Science" )]
[assembly: global::System.Reflection.AssemblyMetadata( "AddonIdent", "science" )]
[assembly: global::System.Reflection.AssemblyMetadata( "OrgIdent", "verarp" )]
[assembly: global::System.Reflection.AssemblyMetadata( "Ident", "verarp.science" )]
[assembly: global::System.Reflection.AssemblyMetadata( "EngineVersion", "26" )]
[assembly: global::System.Reflection.AssemblyMetadata( "EngineMinorVersion", "1" )]

[assembly: System.Runtime.Versioning.TargetFramework( ".NETCoreApp,Version=v9.0", FrameworkDisplayName = ".NET 9.0" )]
[assembly: global::System.Reflection.AssemblyMetadata( "CompileTime", "2026-06-21T16:12:55.6104423Z" )]
[assembly: global::System.Reflection.AssemblyVersion("0.0.117.0")]
[assembly: global::System.Reflection.AssemblyFileVersion("0.0.117.0")]

verarp.science / ScienceHud.razor

Game game

@using System
@using Sandbox
@using Sandbox.UI
@namespace Science
@inherits PanelComponent
@attribute [StyleSheet]

<root>
    @if ( Game != null )
    {
        <Image @ref="Canvas" class="canvas" />

        <div class="sidebar">
            <div class="brand">
                <div class="logo">SCIENCE</div>
                <div class="tagline">Falling-sand sandbox</div>
                <div class="rank">@Game.LabRank</div>
            </div>

            <div class="palette">
                @foreach ( var category in Categories )
                {
                    <div class="cat-head">@ScienceGame.CategoryName( category )</div>
                    @foreach ( var element in ElementsIn( category ) )
                    {
                        <button class="@ToolClass( element )" [email protected]( element ) onclick=@(() => Game.SelectTool( element ))>
                            <span class="@SwatchClass( element )"></span>
                            <b>@ScienceGame.ToolName( element )</b>
                        </button>
                    }
                }
            </div>
        </div>

        <div class="objective @(Game.ObjectiveComplete ? "complete" : "")">
            <div class="objective-top">
                <span>@Game.ActiveExperimentName: @Game.ObjectiveText | Tool @Game.CurrentToolName | Score @Game.LabScore.ToString( "N0" )</span>
                <b>@Game.ObjectiveProgress</b>
            </div>
            <div class="progress">
                <div class="progress-fill" style=@($"width: {Game.ObjectivePercent * 100f:0}%")></div>
            </div>
        </div>

        <div class="stats">
            <div class="stat-chip particles">
                <span class="stat-num">@Game.Particles.ToString( "N0" )</span>
                <span class="stat-lbl">Particles</span>
            </div>
            <div class="stat-chip reactions">
                <span class="stat-num">@Game.Reactions.ToString( "N0" )</span>
                <span class="stat-lbl">Reactions</span>
            </div>
            <div class="stat-chip discovered">
                <span class="stat-num">@Game.Discoveries / 24</span>
                <span class="stat-lbl">Found</span>
            </div>
        </div>

        <div class="notebook">
            <div class="nb-head">LAB NOTEBOOK</div>
            @if ( Game.RecentReactions.Count == 0 )
            {
                <div class="nb-empty">Mix materials to discover reactions...</div>
            }
            else
            {
                @foreach ( var entry in Game.RecentReactions )
                {
                    <div class="nb-entry">+ @entry</div>
                }
            }
        </div>

        <div class="milestones">
            <div class="nb-head">MILESTONES</div>
            @if ( Game.Milestones.Count == 0 )
            {
                <div class="nb-empty">Load an experiment or discover reactions.</div>
            }
            else
            {
                @foreach ( var entry in Game.Milestones )
                {
                    <div class="milestone-entry">@entry</div>
                }
            }
        </div>

        <div class="toolbar">
            <div class="group">
                <button class="icon-btn" tooltip="Smaller brush" onclick=@(() => Click( Game.DecreaseBrush ))>-</button>
                <div class="readout">@Game.BrushRadius</div>
                <button class="icon-btn" tooltip="Larger brush" onclick=@(() => Click( Game.IncreaseBrush ))>+</button>
            </div>

            <div class="group">
                <button class="mode-btn @(Game.Paused ? "active" : "")" onclick=@(() => Click( Game.TogglePause ))>@(Game.Paused ? "Run" : "Pause")</button>
                <button class="mode-btn" tooltip="Advance one frame" onclick=@(() => Click( Game.StepOnce ))>Step</button>
                <button class="mode-btn" tooltip="Cycle simulation speed" onclick=@(() => Click( Game.CycleSpeed ))>@Game.SpeedScale.ToString( "0.#" )x</button>
            </div>

            <div class="group experiments">
                <button class="@ExperimentClass( "Mixed Lab" )" tooltip="Starter reaction board" onclick=@(() => { Game.PlayClick(); Game.LoadScenario( 0 ); })>Lab</button>
                <button class="@ExperimentClass( "Volcano" )" tooltip="Heat and pressure chain" onclick=@(() => { Game.PlayClick(); Game.LoadScenario( 1 ); })>Volcano</button>
                <button class="@ExperimentClass( "Garden" )" tooltip="Growth and water system" onclick=@(() => { Game.PlayClick(); Game.LoadScenario( 2 ); })>Garden</button>
                <button class="@ExperimentClass( "Demolition" )" tooltip="Fuse and explosives test" onclick=@(() => { Game.PlayClick(); Game.LoadScenario( 3 ); })>Demo</button>
            </div>

            <div class="group">
                <button class="mode-btn" tooltip="Save sandbox" onclick=@(() => Click( Game.SaveState ))>Save</button>
                <button class="mode-btn" tooltip="Load sandbox" onclick=@(() => Click( Game.LoadState ))>Load</button>
                <button class="mode-btn" tooltip="Toggle grid" onclick=@(() => Click( Game.ToggleGrid ))>Grid</button>
                <button class="mode-btn @(Game.Muted ? "active" : "")" tooltip="Toggle sound" onclick=@(() => Game.ToggleMute())>@(Game.Muted ? "Muted" : "Sound")</button>
                <button class="mode-btn danger" tooltip="Clear canvas" onclick=@(() => Click( Game.ClearWorld ))>Clear</button>
                <button class="mode-btn" tooltip="Help" onclick=@(() => { ToggleHelp(); Game.PlayClick(); })>?</button>
            </div>
        </div>

        @if ( _showHelp )
        {
            <div class="overlay">
                <div class="backdrop" onclick=@(() => ToggleHelp())></div>
                <div class="panel">
                    <div class="panel-title">How to play</div>
                    <div class="help-cols">
                        <div class="help-col">
                            <div class="help-h">Controls</div>
                            <div class="help-row"><b>Left&nbsp;drag</b><span>Paint selected material</span></div>
                            <div class="help-row"><b>Right&nbsp;drag</b><span>Erase</span></div>
                            <div class="help-row"><b>- / +</b><span>Brush size</span></div>
                            <div class="help-row"><b>Pause / Step</b><span>Freeze and advance one frame</span></div>
                            <div class="help-row"><b>Speed</b><span>0.5x to 4x simulation</span></div>
                            <div class="help-row"><b>1-9</b><span>Quick-select common materials</span></div>
                        </div>
                        <div class="help-col">
                            <div class="help-h">Try these reactions</div>
                            <div class="help-row2">Drop <b>Water</b> onto <b>Lava</b> to make Stone &amp; Steam</div>
                            <div class="help-row2">Light <b>Oil</b> with <b>Fire</b> to make it burn</div>
                            <div class="help-row2"><b>Acid</b> eats almost anything it touches</div>
                            <div class="help-row2"><b>Seed</b> + <b>Water</b> grows <b>Plant</b></div>
                            <div class="help-row2"><b>Fuse</b> carries fire to <b>TNT</b></div>
                            <div class="help-row2"><b>Clone</b> copies any material beside it</div>
                        </div>
                    </div>
                    <button class="close-btn" onclick=@(() => ToggleHelp())>Got it</button>
                </div>
            </div>
        }

        @if ( _showIntro )
        {
            <div class="intro" onclick=@(() => DismissIntro())>
                <Image @ref="IntroCanvas" class="intro-canvas" />
                <div class="intro-scrim"></div>
                <div class="intro-inner">
                    <div class="intro-logo">SCIENCE</div>
                    <div class="intro-sub">A reactive falling-sand sandbox</div>
                    <div class="intro-hint">30 materials / live reactions / build, burn, dissolve, grow</div>
                    <button class="intro-btn" onclick=@(() => DismissIntro())>Enter the lab</button>
                    <div class="intro-foot">Click anywhere to begin</div>
                </div>
            </div>
        }
    }
</root>

@code {
    [Property] public ScienceGame Game { get; set; }

    Image Canvas { get; set; }
    Image IntroCanvas { get; set; }
    bool _showHelp;
    bool _showIntro = false;

    // Run the action, then a UI click so every control gives audible feedback.
    void Click( Action action )
    {
        action?.Invoke();
        Game?.PlayClick();
    }

    static readonly ElementCategory[] Categories =
    {
        ElementCategory.Powders, ElementCategory.Liquids, ElementCategory.Gases,
        ElementCategory.Energy, ElementCategory.Life, ElementCategory.Explosives,
        ElementCategory.Solids, ElementCategory.Tools
    };

    int TotalReactions => 24;

    protected override void OnStart()
    {
        base.OnStart();
        Game ??= Scene.GetAllComponents<ScienceGame>().FirstOrDefault();
        if ( !_showIntro ) Game?.SetAttractMode( false );
    }

    protected override void OnUpdate()
    {
        if ( Game == null ) return;

        if ( Game.GridTexture != null )
        {
            if ( Canvas.IsValid() ) Canvas.Texture = Game.GridTexture;
            if ( IntroCanvas.IsValid() ) IntroCanvas.Texture = Game.GridTexture;
        }

        if ( Canvas.IsValid() )
        {
            var rect = Canvas.Box.Rect;
            var mouse = Mouse.Position;
            bool inside = !_showHelp && !_showIntro
                && mouse.x >= rect.Left && mouse.x <= rect.Right
                && mouse.y >= rect.Top && mouse.y <= rect.Bottom;
            Game.SetCanvasRect( rect, inside );
        }
    }

    IEnumerable<Element> ElementsIn( ElementCategory category )
        => Game.ToolPalette.Where( e => ScienceGame.CategoryOf( e ) == category );

    void ToggleHelp() => _showHelp = !_showHelp;
    void DismissIntro()
    {
        if ( !_showIntro ) return;
        _showIntro = false;
        Game?.SetAttractMode( false );
        Game?.PlayClick();
    }

    string ToolClass( Element element ) => Game?.CurrentTool == element ? "tool-btn active" : "tool-btn";
    string SwatchClass( Element element ) => $"swatch {element.ToString().ToLowerInvariant()}";
    string ExperimentClass( string name ) => Game?.ActiveExperimentName == name ? "scenario-btn active" : "scenario-btn";

    protected override int BuildHash() => System.HashCode.Combine(
        System.HashCode.Combine( Game?.CurrentTool, Game?.BrushRadius, Game?.Paused, Game?.SpeedScale ),
        System.HashCode.Combine( Game?.Particles, Game?.Discoveries, Game?.LastReaction, Game?.RecentReactions.Count ),
        System.HashCode.Combine( Game?.ActiveExperimentName, Game?.ObjectiveProgress, Game?.ObjectiveComplete, Game?.LabScore ),
        System.HashCode.Combine( Game?.Milestones.Count, _showHelp, _showIntro, Game?.Muted ),
        System.HashCode.Combine( Game?.Particles, Game?.Reactions ) );
}

verarp.science / ui/controls/color/colorcontrol.cs.scss

Game game

ColorControl
{
	gap: 0.5rem;
	flex-grow: 1;
	pointer-events: all;
	background-color: #000a;
	border-radius: 4px;
	padding: 2px;
	height: 32px;
}

ColorControl TextEntry
{
	flex-grow: 1;
	flex-shrink: 0;
	color: #aaa;
	font-size: 1.2rem;

	&:hover, &:focus
	{
		color: #ddd;

		.icon
		{
			color: #3af;
		}
	}

	&:active
	{
		color: white;
	}
}

ColorControl > .colorswatch
{
	aspect-ratio: 1;
	border-radius: 4px;
	height: 100%;
	flex-shrink: 0;
	cursor: pointer;
	border: 2px solid #000;
}

verarp.science / ui/components/packagelist.razor.scss

Game game

.package-list
{
    flex-shrink: 1;
    flex-wrap: wrap;
    flex-grow: 1;

    h1
    {
        width: 100%;
        margin-top: 50px;
        font-size: 40px;
    }

    PackageCard
    {
        &:hover
        {
            sound-in: "ui.button.over";
        }
    }

    VirtualGrid
    {
        width: 100%;
        height: 100%;

        .cell
        {
            
        }
    }
}

verarp.science / ui/components/packageflairbar.razor.scss

Game game

PackageFlairBar
{
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	flex-direction: row;
	gap: 5px;
	pointer-events: none;

	.flair
	{
		position: relative;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		pointer-events: all;
		border-radius: 4px;
		color: white;
		border: 1px solid rgba( white, 0.1 );
		outline: 1px solid #0006;
		opacity: 0.7;

		&:hover
		{
			opacity: 1;
		}

		icon
		{
			font-size: 15px;
		}
	}
}

verarp.science / styles/form/_switch.scss

Game game

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.checkbox.switch
{
	cursor: pointer;

	> .checkmark
	{
		font-size: 22px;
		border: 0px solid $primary;
		border-radius: 100px;
		text-align: center;
		justify-content: center;
		align-items: center;
		color: $primary-alt;
		padding: $switch-padding;
		padding-right: 32px;
		padding-left: $switch-padding;
		transition: all 0.3s ease;
		background-color: rgba( $primary, 0.1 );

		> .handle
		{
			background-color: $primary-alt;
			width: 20px;
			height: 20px;
			border-radius: 100px;
			box-shadow: 2px 2px 12px black;
		}
	}

	&.checked
	{
		> .checkmark
		{
			background-color: $primary;
			padding-left: 32px;
			padding-right: $switch-padding;
		}
	}

	&:active
	{
		transform: scale( 0.9 );
		transform-origin: 20px 50%;
	}
}

verarp.science / ui/controlsheet/controlsheet.cs.scss

Game game

ControlSheet
{
	flex-direction: column;
	font-family: Poppins;
	font-size: 14px;
}

ControlSheet > .body
{
	flex-direction: column;
	flex-grow: 1;
	overflow: scroll;
	gap: 1px;
}

ControlSheet > .body > * 
{
	flex-shrink: 0;
}

verarp.science / ui/controls/color/colorsaturationvaluecontrol.cs.scss

Game game

ColorSaturationValueControl
{
	width: 240px;
	height: 240px;
	background-color: red;
	position: relative;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid #333;

	&:hover
	{
		border: 1px solid #08f;
	}

	&:active
	{
		border: 1px solid #fff;
	}

	.handle
	{
		width: 16px;
		height: 16px;
		border-radius: 100px;
		border: 2px solid #444;
		position: absolute;
		background-color: white;
		box-shadow: 2px 2px 16px #000a;
		transform: translateX( -50% ) translateY( -50% );
		pointer-events: none;
		z-index: 100;
		z-index: 100;
	}

	.gradient
	{
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 4px;
		background: linear-gradient( to right, white, rgba( 255, 255, 255, 0 ) );

		&:after
		{
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 4px;
			background: linear-gradient( to top, black, rgba( 0, 0, 0, 0 ) );
		}
	}
}

verarp.science / ui/components/packagefilters.razor.scss

Game game

@import "/styles/_theme.scss";

.packagefilter
{
	width: 100%;
	flex-shrink: 0;

	.left
	{
		flex-grow: 1;
		flex-shrink: 0;
		gap: 16px;
	}

	.right
	{
		flex-grow: 1;
		flex-shrink: 0;
		gap: 16px;
	}
}

.packagefilter textentry
{
	flex-grow: 1;
	padding: 8px 12px;
	pointer-events: all;

	Label
	{
		margin-left: 26px;
	}

	iconpanel
	{
		position: absolute;
		left: 12px;
		opacity: 0.3;
		font-size: $text-large;
	}
}

	.packagefilterfacet, .packagefilter textentry
	{
		background-color: rgba($default-950, 0.3);
		color: $default-text;
		outline: 1px solid $default-border;
		transition: all 150ms $easing;
		border-radius: $rounding-default;
		padding: 4px 12px;
		gap: 16px;
		flex-shrink: 0;
		font-size: 14px;
		cursor: pointer;
		align-items: center;

		.clear-button
		{
			height: 100%;
			margin-right: -8px;
			align-items: center;
			padding: 0px 4px;

			&:hover
			{
				color: red;
				border-radius: 100%;
			}
		}

		&.is-active
		{
			background-color: $default-700;
		}

		&:not(.is-active)
		{
			&:hover
			{
				outline: 1px solid $default-50;
			}
		}
	}

verarp.science / styles/form/_colorproperty.scss

Game game


.colorproperty
{
	align-items: center;
	position: relative;

	.colorsquare
	{
		width: 20px;
		height: 20px;
		border-radius: 4px;
		margin-right: 8px;
		position: absolute;
		left: 7px;
		z-index: 1;
		cursor: pointer;
	}

	> .textentry:not( .a.b.c )
	{
		padding-left: 36px;
	}
}

verarp.science / ui/controlsheet/controlsheetgroup.cs.scss

Game game

.controlgroup
{
	border-radius: 8px;
	padding: 0.5rem;
	flex-direction: column;
	flex-shrink: 0;

	&.hidden
	{
		display: none;
	}
}

.controlgroup > .header
{
	font-weight: 550;
	color: #fff;
	flex-shrink: 0;
	padding: 8px 0;
	text-shadow: 1px 1px 1px #0004;
}

.controlgroup > .body
{
	flex-direction: column;
	flex-shrink: 0;
	gap: 2px;
	padding-left: 16px;

	&.hidden
	{
		display: none;
	}
}

Debug: View Raw JSON Response

{
    "TotalCount": 37,
    "Files": [
        {
            "Ident": "verarp.science",
            "Path": "ui/controls/switchcontrol.razor.scss",
            "FileName": "switchcontrol.razor.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "\r\n.switchcontrol\r\n{\r\n    flex-direction: row;\r\n    width: 100px;\r\n    min-height: 24px;\r\n    align-items: center;\r\n    cursor: pointer;\r\n\r\n    .switch-frame\r\n    {\r\n        flex-grow: 0;\r\n        flex-shrink: 1;\r\n        width: 48px;\r\n        height: 16px;\r\n        background-color: #fff1;\r\n        margin: 0px 5px;\r\n        align-items: center;\r\n        border-radius: 100px;\r\n        transition: all 0.4s linear;\r\n\r\n        .switch-inner\r\n        {\r\n            position: relative;\r\n            flex-grow: 0;\r\n            flex-shrink: 1;\r\n            background-color: #999;\r\n            width: 25px;\r\n            height: 25px;\r\n            border-radius: 100px;\r\n            left: 20%;\r\n            transform: translateX( -50% );\r\n            transition: all 0.3s ease-out;\r\n        }\r\n    }\r\n\r\n    &.active\r\n    {\r\n        .switch-frame\r\n        {\r\n            background-color: #fffa;\r\n        }\r\n\r\n        .switch-inner\r\n        {\r\n            left: 80%;\r\n            background-color: #fff;\r\n        }\r\n    }\r\n}\r\n"
        },
        {
            "Ident": "verarp.science",
            "Path": "styles/form/_dropdown.scss",
            "FileName": "_dropdown.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "\r\n$primary: red !default;\r\n$primary-alt: white !default;\r\n\r\n$switch-padding: 6px !default;\r\n\r\n.button.popupbutton.dropdown\r\n{\r\n\tcursor: pointer;\r\n\ttransition: all .1s ease-out;\r\n\tposition: relative;\r\n\r\n\t> .dropdown_indicator\r\n\t{\r\n\t\tposition: absolute;\r\n\t\tright: 8px;\r\n\t}\r\n\r\n\t&.open\r\n\t{\r\n\t\tborder-bottom-left-radius: 1px;\r\n\t\tborder-bottom-right-radius: 1px;\r\n\t\ttransition: border-radius 0.2s ease-out;\r\n\t}\r\n}\r\n\r\nselect\r\n{\r\n\tmin-height: 40px;\r\n\r\n\t> option\r\n\t{\r\n\t\tdisplay: none;\r\n\t}\r\n}"
        },
        {
            "Ident": "verarp.science",
            "Path": "styles/form/_coloreditor.scss",
            "FileName": "_coloreditor.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "\r\n$primary: red !default;\r\n$primary-alt: white !default;\r\n\r\n$switch-padding: 6px !default;\r\n\r\n.coloreditor\r\n{\r\n\tflex-direction: column;\r\n\tmin-width: 250px;\r\n\tmax-width: 250px;\r\n\r\n\t> .canvas\r\n\t{\r\n\t\tborder-top: 1px solid rgba( white, 0.5 );\r\n\t\tflex-grow: 1;\r\n\t\tflex-direction: column;\r\n\t\tpadding: 10px 15px;\r\n\r\n\r\n\t\t> textentry.textentry\r\n\t\t{\r\n\t\t\tflex-grow: 0;\r\n\t\t\tflex-shrink: 0;\r\n\t\t\twidth: auto;\r\n\t\t}\r\n\t}\r\n\r\n\t.slider\r\n\t{\r\n\t\tpadding: 6.5px;\r\n\t}\r\n\r\n\t.slider .track\r\n\t{\r\n\t\theight: 14px;\r\n\t\tborder-radius: 14px;\r\n\t\tleft: 0px;\r\n\t\tright: 0px;\r\n\t\ttransition: all 0.1s ease-out;\r\n\r\n\t\t.inner\r\n\t\t{\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n\r\n\t.slider:hover, .slider:active\r\n\t{\r\n\t\tpadding: 7px;\r\n\r\n\t\t.track\r\n\t\t{\r\n\t\t\theight: 20px;\r\n\t\t\tborder-radius: 6px;\r\n\t\t}\r\n\r\n\t\t.thumb\r\n\t\t{\r\n\t\t\twidth: 10px;\r\n\t\t\theight: 16px;\r\n\t\t\tmargin-left: 2px;\r\n\t\t}\r\n\t}\r\n\r\n\t.slider .thumb\r\n\t{\r\n\t\twidth: 10px;\r\n\t\theight: 10px;\r\n\t\tbox-shadow: 0px 0px 0px transparent;\r\n\t\tbackground-color: white;\r\n\t\tbackdrop-filter: invert( 1 );\r\n\t\tmargin-left: 1px;\r\n\t\tpointer-events: none;\r\n\t}\r\n\r\n\t.alpha_slider .track\r\n\t{\r\n\t\tbackground-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );\r\n\t}\r\n\r\n\t.hue .track\r\n\t{\r\n\t\tbackground: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);\r\n\r\n\t\t.inner\r\n\t\t{\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n\r\n\t.satval\r\n\t{\r\n\t\tbackground: linear-gradient(to right, white, transparent);\r\n\t\theight: 200px;\r\n\t\tposition: relative;\r\n\r\n\t\t&:active\r\n\t\t{\r\n\t\t\tz-index: 10;\r\n\t\t\tcursor: none;\r\n\t\t}\r\n\r\n\t\t.value_gradient\r\n\t\t{\r\n\t\t\tbackground: linear-gradient(to bottom, black, white);\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\t\t\tbottom: 0;\r\n\t\t\tpointer-events: none;\r\n\t\t\tmix-blend-mode: multiply;\r\n\t\t}\r\n\r\n\t\t.thumb\r\n\t\t{\r\n\t\t\tz-index: 10;\r\n\t\t}\r\n\t}\r\n\r\n\t.presets\r\n\t{\r\n\t\tflex-wrap: wrap;\r\n\t\talign-content: center;\r\n\t\tjustify-content: center;\r\n\t\tpadding: 15px;\r\n\t\tborder-top: 1px solid rgba( white, 0.5 );\r\n\r\n\t\t.preset\r\n\t\t{\r\n\t\t\tbackground-color: white;\r\n\t\t\twidth: 16px;\r\n\t\t\theight: 16px;\r\n\t\t\tmargin: 2px;\r\n\t\t\tborder-radius: 20px;\r\n\t\t\tcursor: pointer;\r\n\t\t\t\r\n\t\t\t&:hover\r\n\t\t\t{\r\n\t\t\t\tbox-shadow: 0px 0px 1px 2px white;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n.coloreditorrgba\r\n{\r\n\tflex-direction: column;\r\n\r\n\t.slider\r\n\t{\r\n\t\tpadding-right: 16px;\r\n\t}\r\n\r\n\t.slider .track\r\n\t{\r\n\t\tbackground-color: transparent;\r\n\t\theight: 14px;\r\n\t\tborder-radius: 14px;\r\n\t\tleft: 0px;\r\n\t\tright: 0px;\r\n\r\n\t\t.inner\r\n\t\t{\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n\r\n\t.slider .thumb\r\n\t{\r\n\t\twidth: 12px;\r\n\t\theight: 12px;\r\n\t\tbox-shadow: 0px 0px 0px transparent;\r\n\t\tbackground-color: white;\r\n\t\tmargin-left: 2px;\r\n\t\tbackdrop-filter: invert( 1 );\r\n\t}\r\n\r\n\t.red_slider .track\r\n\t{\r\n\t\tbackground-image: linear-gradient( to right, rgba( #e63439, 0.1 ), rgba( #e63439, 0.9 ) );\r\n\t}\r\n\r\n\t.green_slider .track\r\n\t{\r\n\t\tbackground-image: linear-gradient( to right, rgba( #54be35, 0.1 ), rgba( #54be35, 0.9 ) );\r\n\t}\r\n\r\n\t.blue_slider .track\r\n\t{\r\n\t\tbackground-image: linear-gradient( to right, rgba( #3472e6, 0.1 ), rgba( #3472e6, 0.9 ) );\r\n\t}\r\n\r\n\t.alpha_slider .track\r\n\t{\r\n\t\tbackground-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );\r\n\t}\r\n}\r\n\r\n\r\n.coloreditorhsva\r\n{\r\n\tflex-direction: column;\r\n\r\n\t.slider\r\n\t{\r\n\t\tpadding-right: 16px;\r\n\t}\r\n\r\n\t.slider .track\r\n\t{\r\n\t\tbackground-color: transparent;\r\n\t\theight: 14px;\r\n\t\tborder-radius: 14px;\r\n\t\tleft: 0px;\r\n\t\tright: 0px;\r\n\r\n\t\t.inner\r\n\t\t{\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n\r\n\t.slider .thumb\r\n\t{\r\n\t\twidth: 12px;\r\n\t\theight: 12px;\r\n\t\tbox-shadow: 0px 0px 0px transparent;\r\n\t\tbackground-color: white;\r\n\t\tmargin-left: 2px;\r\n\t\tbackdrop-filter: invert( 1 );\r\n\t}\r\n\t\t\r\n\t.hue_slider .track\r\n\t{\r\n\t\tbackground-image: linear-gradient( to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00 );\r\n\t}\r\n\r\n\t.alpha_slider .track\r\n\t{\r\n\t\tbackground-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );\r\n\t}\r\n}"
        },
        {
            "Ident": "verarp.science",
            "Path": "ui/menupanel.razor.scss",
            "FileName": "menupanel.razor.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "\r\nmenupanel\r\n{\r\n    position: absolute;\r\n    z-index: 1000;\r\n    pointer-events: all;\r\n    font-size: 12px;\r\n    flex-shrink: 0;\r\n\r\n    .background\r\n    {\r\n        position: absolute;\r\n        left: -5000px;\r\n        right: -5000px;\r\n        top: -5000px;\r\n        bottom: -5000px;\r\n    }\r\n\r\n    > .inner\r\n    {\r\n        min-width: 200px;\r\n        min-height: 20px;\r\n        flex-direction: column;\r\n        font-family: Poppins;\r\n        font-weight: bold;\r\n        border-radius: 10px;\r\n        box-shadow: 5px 5px 30px #000e;\r\n        background-color: #2a2a2a;\r\n        flex-shrink: 0;\r\n\r\n        .spacer\r\n        {\r\n            height: 1px;\r\n            background-color: #0005;\r\n        }\r\n\r\n        .option\r\n        {\r\n            color: #fffa;\r\n            padding: 0px 8px;\r\n            cursor: pointer;\r\n            flex-shrink: 0;\r\n            height: 32px;\r\n\r\n            &:first-child\r\n            {\r\n                border-top-left-radius: 10px;\r\n                border-top-right-radius: 10px;\r\n            }\r\n\r\n            &:last-child\r\n            {\r\n                border-bottom-left-radius: 10px;\r\n                border-bottom-right-radius: 10px;\r\n            }\r\n\r\n            .icon\r\n            {\r\n                padding: 8px;\r\n                font-family: Material Icons;\r\n                justify-content: center;\r\n                align-items: center;\r\n                flex-shrink: 0;\r\n            }\r\n\r\n            .text\r\n            {\r\n                padding: 8px;\r\n                flex-shrink: 0;\r\n            }\r\n\r\n            &:hover\r\n            {\r\n                background-color: #3472e6;\r\n                color: #f5f8fe;\r\n            }\r\n        }\r\n    }\r\n}\r\n"
        },
        {
            "Ident": "verarp.science",
            "Path": "styles/form.scss",
            "FileName": "form.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "\r\n$form-control-height: 28px !default;\r\n\r\n@import \"form/_checkbox.scss\";\r\n@import \"form/_switch.scss\";\r\n@import \"form/_dropdown.scss\";\r\n@import \"form/_coloreditor.scss\";\r\n@import \"form/_colorproperty.scss\";\r\n\r\n.form\r\n{\r\n\tflex-direction: column;\r\n\talign-items: stretch;\r\n\tjustify-content: flex-start;\r\n\toverflow: scroll;\r\n}\r\n\r\n.field-group\r\n{\r\n\tflex-direction: column;\r\n\tflex-shrink: 0;\r\n}\r\n\r\n.field-header\r\n{\r\n\tflex-shrink: 0;\r\n}\r\n\r\n.field\r\n{\r\n\tcolor: white;\r\n\tfont-size: 14px;\r\n\tflex-shrink: 0;\r\n\tflex-grow: 0;\r\n\r\n\t> .label\r\n\t{\r\n\t\tflex-grow: 0;\r\n\t\tflex-shrink: 0;\r\n\t\tfont-weight: 600;\r\n\t\topacity: 0.4;\r\n\t\twidth: 20%;\r\n\t\tfont-size: 13px;\r\n\t}\r\n\r\n\t> .control\r\n\t{\r\n\t\tflex-shrink: 0;\r\n\t\tflex-grow: 1;\r\n\t\tflex-direction: column;\r\n\t}\r\n}\r\n\r\n.is-vertical > .field, .field.is-vertical\r\n{\r\n\tflex-direction: column;\r\n\r\n\t> .label\r\n\t{\r\n\t\twidth: auto;\r\n\t\theight: auto;\r\n\t}\r\n}"
        },
        {
            "Ident": "verarp.science",
            "Path": "styles/rootpanel.scss",
            "FileName": "rootpanel.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "\r\n\r\nRootPanel\r\n{\r\n\tfont-family: Roboto;\r\n\tcolor: white;\r\n}\r\n\r\nIconPanel, i\r\n{\r\n\tfont-family: Material Icons;\r\n\tbackground-position: center;\r\n\tbackground-size: contain;\r\n}\r\n\r\n.tooltip\r\n{\r\n\tbackground-color: rgba( black, 0.8 );\r\n\tborder: 1px solid rgba( #555, 0.1 );\r\n\tpadding: 10px;\r\n\tborder-radius: 4px;\r\n\tcolor: white;\r\n\tfont-family: Inter;\r\n\tfont-weight: bold;\r\n\ttransition: opacity 0.09s ease;\r\n\topacity: 1;\r\n\tmargin: 0px;\r\n\r\n\t&:intro, &:outro\r\n\t{\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n\r\n.textentry\r\n{\r\n\tcursor: text;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\twhite-space: nowrap;\r\n\toverflow: hidden;\r\n\tflex-direction: row;\r\n\tposition: relative;\r\n\tpadding: 10px;\r\n\r\n\t&.disabled\r\n\t{\r\n\t\tcursor: default;\r\n\t}\r\n\r\n\t&.is-multiline\r\n\t{\r\n\t\talign-items: flex-start;\r\n\t\twhite-space: normal;\r\n\t}\r\n\r\n\t.content-label,\r\n\t.placeholder\r\n\t{\r\n\t\tflex-grow: 1;\r\n\t}\r\n\r\n\t.placeholder\r\n\t{\r\n\t\topacity: 0.2;\r\n\t\tpointer-events: none;\r\n\t}\r\n\r\n\t.iconpanel\r\n\t{\r\n\t\tposition: absolute;\r\n\t\tright: 0;\r\n\t\tpadding-right: 10px;\r\n\t\tpointer-events: none;\r\n\r\n\t\t&.clearbutton\r\n\t\t{\r\n\t\t\tcolor: #fff;\r\n\t\t\tpointer-events: all;\r\n\t\t\tcursor: pointer;\r\n\t\t\topacity: 0.1;\r\n\r\n\t\t\t&:hover\r\n\t\t\t{\r\n\t\t\t\topacity: 0.5;\r\n\t\t\t}\r\n\r\n\t\t\t&:active\r\n\t\t\t{\r\n\t\t\t\topacity: 1;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&:empty\r\n\t{\r\n\t\t.clearbutton\r\n\t\t{\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n\r\n\t&.has-icon\r\n\t{\r\n\t\tpadding-right: 30px;\r\n\t}\r\n\r\n\t.content-label,\r\n\t.prefix-label,\r\n\t.suffix-label,\r\n\t.placeholder\r\n\t{\r\n\t\toverflow: hidden;\r\n\t}\r\n\r\n\t.content-label\r\n\t{\r\n\t\torder: 1;\r\n\t}\r\n\r\n\t.suffix-label\r\n\t{\r\n\t\torder: 2;\r\n\t}\r\n\r\n\t.prefix-label,\r\n\t.suffix-label\r\n\t{\r\n\t\tflex-shrink: 0;\r\n\t\topacity: 0.5;\r\n\t}\r\n\r\n\t&.invalid\r\n\t{\r\n\t\tbox-shadow: 0px 0px 1px 2px #f8356b;\r\n\t}\r\n}\r\n\r\n.popup-panel\r\n{\r\n\tbackground-color: #1b202c;\r\n\tflex-direction: column;\r\n\tcolor: #8e9ec2;\r\n\ttransition: all 0.1s ease-out;\r\n\tposition: absolute;\r\n\tz-index: 2000;\r\n\tmin-height: 20px;\r\n\tmin-width: 10px;\r\n\toverflow: scroll;\r\n\tpointer-events: all;\r\n\tbox-shadow: 3px 3px 64px #000;\r\n\tborder-radius: 4px;\r\n\r\n\t&.medium\r\n\t{\r\n\t\tmax-width: 300px;\r\n\t}\r\n\r\n\t&.center-horizontal\r\n\t{\r\n\t\ttransform-origin: top center;\r\n\t}\r\n\r\n\t&.below-center\r\n\t{\r\n\t\ttransform: translateX( -50% );\r\n\t\ttransform-origin: 0% 0%;\r\n\t}\r\n\r\n\t&.above-left\r\n\t{\r\n\t\ttransform-origin: 0% 100%;\r\n\t}\r\n\r\n\t&.above-center\r\n\t{\r\n\t\ttransform: translateX( -50% );\r\n\t\ttransform-origin: 0% 100%;\r\n\t}\r\n\r\n\t&.left\r\n\t{\r\n\t\ttransform-origin: 100% 50%;\r\n\t\ttransform: translate( 00% -50% );\r\n\t}\r\n\r\n\t&.right\r\n\t{\r\n\t\ttransform-origin: 0 50%;\r\n\t\ttransform: translate( 0% -50% );\r\n\t}\r\n\r\n\t&:intro\r\n\t{\r\n\t\ttransform: scale( 0 );\r\n\t\tpointer-events: none;\r\n\t\topacity: 0;\r\n\t}\r\n\r\n\t&:outro\r\n\t{\r\n\t\topacity: 0;\r\n\t\ttransition: all 0.1s ease-in;\r\n\t\tmargin-top: 50px;\r\n\t\tpointer-events: none;\r\n\t}\r\n\r\n\t&.below-stretch\r\n\t{\r\n\t\ttransform-origin: 0% 0%;\r\n\r\n\t\t&:intro\r\n\t\t{\r\n\t\t\ttransform: scaleY( 0.1 );\r\n\t\t}\r\n\t}\r\n\r\n\t> .canvas\r\n\t{\r\n\t\tflex-direction: column;\r\n\t}\r\n\r\n\t.information\r\n\t{\r\n\t\tpadding: 16px;\r\n\t\tfont-size: 14px;\r\n\t\topacity: 0.5;\r\n\t}\r\n\r\n\tbutton\r\n\t{\r\n\t\tpadding: 2px 8px;\r\n\t\tcursor: pointer;\r\n\t\tfont-family: Poppins;\r\n\t\tfont-weight: 600;\r\n\t\tflex-shrink: 0;\r\n\r\n\t\t&:hover\r\n\t\t{\r\n\t\t\tbackground-color: #08f;\r\n\t\t\tcolor: #fff;\r\n\t\t}\r\n\t}\r\n}\r\n"
        },
        {
            "Ident": "verarp.science",
            "Path": "styles/base/_navigator.scss",
            "FileName": "_navigator.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": ".navigator-body\r\n{\r\n\t&.hidden\r\n\t{\r\n\t\tdisplay: none;\r\n\t}\r\n}\r\n"
        },
        {
            "Ident": "verarp.science",
            "Path": "ui/controls/color/colorpickercontrol.cs.scss",
            "FileName": "colorpickercontrol.cs.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "ColorPickerControl\r\n{\r\n\tflex-direction: column;\r\n\tflex-shrink: 0;\r\n\tgap: 0.5rem;\r\n\tmargin: 1rem;\r\n}"
        },
        {
            "Ident": "verarp.science",
            "Path": "ui/components/packagecard.razor.scss",
            "FileName": "packagecard.razor.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "@import \"/styles/_theme.scss\";\r\n$background-size: 8px;\r\n\r\nPackageCard\r\n{\r\n\tflex-shrink: 0;\r\n\r\n\t&:hover\r\n\t{\r\n\t\tsound-in: \"ui.button.over\";\r\n\t}\r\n\r\n\t&:active\r\n\t{\r\n\t\tsound-in: \"ui.button.press\";\r\n\t}\r\n\r\n\tflex-direction: column;\r\n\tposition: relative;\r\n\tbackground-color: rgba( $default-950, 0 );\r\n\tborder-radius: $rounding-default;\r\n\ttransition: all 150ms ease;\r\n\tcursor: pointer;\r\n\tz-index: 0;\r\n\theight: 200px;\r\n\r\n\t.image\r\n\t{\r\n\t\tflex-grow: 1;\r\n\t\tflex-shrink: 0;\r\n\t\ttransition: all 150ms ease;\r\n\t\tborder: 1px solid rgba( white, 0.025 );\r\n\t\taspect-ratio: 16 / 9;\r\n\t\tbackground-position: center;\r\n\t\tbackground-size: cover;\r\n\t\tborder-radius: $rounding-small;\r\n\t\tposition: relative;\r\n\t}\r\n\r\n\tcolumn\r\n\t{\r\n\t\tpadding: 8px 2px; // Optically aligned\r\n\t}\r\n\r\n\t&.list\r\n\t{\r\n\t\tflex-grow: 1;\r\n\t\theight: 64px;\r\n\t\tflex-direction: row;\r\n\t\tgap: 12px;\r\n\t\tpadding: 4px;\r\n\r\n\t\t.inner column\r\n\t\t{\r\n\t\t\tflex-grow: 1;\r\n\t\t}\r\n\r\n\t\t.image\r\n\t\t{\r\n\t\t\theight: 100%;\r\n\t\t\taspect-ratio: 1;\r\n\t\t\tflex-grow: 0;\r\n\t\t\tflex-shrink: 0;\r\n\t\t}\r\n\r\n\t\tcolumn\r\n\t\t{\r\n\t\t\tgap: 3px;\r\n\t\t\tjustify-content: center;\r\n\t\t}\r\n\r\n\t\t.package-title\r\n\t\t{\r\n\t\t\tflex-shrink: 0;\r\n\t\t\tmax-width: 500px;\r\n\t\t}\r\n\r\n\t\t.package-users\r\n\t\t{\r\n\t\t\ttop: 1px;\r\n\t\t\tright: 1px;\r\n\t\t}\r\n\r\n\t\t&:hover\r\n\t\t{\r\n\t\t\tbackground-color: $default-800;\r\n\t\t\ttransform: none;\r\n\r\n\t\t\t&::after\r\n\t\t\t{\r\n\t\t\t\tdisplay: none;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&.wide\r\n\t{\r\n\t\theight: 250px;\r\n\r\n\t\t.package-title\r\n\t\t{\r\n\t\t\tmax-width: 300px;\r\n\t\t}\r\n\t}\r\n\r\n\t&.small\r\n\t{\r\n\t\theight: 200px;\r\n\t\taspect-ratio: 3/4;\r\n\r\n\t\t.image\r\n\t\t{\r\n\t\t\taspect-ratio: 1;\r\n\t\t}\r\n\r\n\t\t.package-title\r\n\t\t{\r\n\t\t\tmax-width: 140px;\r\n\t\t}\r\n\t}\r\n\r\n\t&.tall\r\n\t{\r\n\t\theight: 400px;\r\n\r\n\t\t.image\r\n\t\t{\r\n\t\t\taspect-ratio: 9/16;\r\n\t\t}\r\n\r\n\t\t.package-title\r\n\t\t{\r\n\t\t\tmax-width: 200px;\r\n\t\t}\r\n\t}\r\n\r\n\t.package-title\r\n\t{\r\n\t\ttext-overflow: ellipsis;\r\n\t\tmax-height: 24px;\r\n\t\tflex-shrink: 1;\r\n\t\tfont-size: 14px;\r\n\t}\r\n\r\n\t.package-users\r\n\t{\r\n\t\tposition: absolute;\r\n\t\tbottom: 4px;\r\n\t\tright: 4px;\r\n\t\tbackground-color: rgba( 10, 40, 10, 0.95 );\r\n\t\tpadding: 3px 5px;\r\n\t\tborder-radius: 2px;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t\tgap: 3px;\r\n\t\tfont-size: 11px;\r\n\t\tcolor: #def;\r\n\t\tborder: 1px solid #252;\r\n\t\tcolor: #2f3;\r\n\r\n\t\t&:before\r\n\t\t{\r\n\t\t\tcontent: '\u25cf';\r\n\t\t\tfont-size: 0.5rem;\r\n\t\t}\r\n\t}\r\n\t// Hover effect (not for list)\r\n\t&:not(.list)\r\n\t{\r\n\t\t&::after\r\n\t\t{\r\n\t\t\tcontent: \"\";\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tbottom: 0;\r\n\t\t\tright: 0;\r\n\t\t\tbackground-color: rgba( $default-950, 0 );\r\n\t\t\ttransition: all 150ms ease;\r\n\t\t\tz-index: -10;\r\n\t\t\tborder-radius: $rounding-large;\r\n\t\t\tpointer-events: none;\r\n\t\t}\r\n\r\n\t\t&:hover\r\n\t\t{\r\n\t\t\ttransform: scale( 1.05 );\r\n\r\n\t\t\t&::after\r\n\t\t\t{\r\n\t\t\t\tbackground-color: $default-800;\r\n\t\t\t\ttop: -$background-size;\r\n\t\t\t\tleft: -$background-size;\r\n\t\t\t\tright: -$background-size;\r\n\t\t\t\tbottom: -$background-size;\r\n\t\t\t\tbox-shadow: 0 0 25px rgba( black, 0.3 );\r\n\t\t\t}\r\n\r\n\t\t\tz-index: 100;\r\n\t\t\tbackground-color: $default-900;\r\n\t\t}\r\n\t}\r\n}\r\n"
        },
        {
            "Ident": "verarp.science",
            "Path": ".obj/__compiler_extra.cs",
            "FileName": "__compiler_extra.cs",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "global using static Sandbox.Internal.GlobalGameNamespace;\r\nglobal using Microsoft.AspNetCore.Components;\r\nglobal using Microsoft.AspNetCore.Components.Rendering;\r\n[assembly: global::System.Reflection.AssemblyMetadata( \"AddonTitle\", \"Science\" )]\r\n[assembly: global::System.Reflection.AssemblyMetadata( \"AddonIdent\", \"science\" )]\r\n[assembly: global::System.Reflection.AssemblyMetadata( \"OrgIdent\", \"verarp\" )]\r\n[assembly: global::System.Reflection.AssemblyMetadata( \"Ident\", \"verarp.science\" )]\r\n[assembly: global::System.Reflection.AssemblyMetadata( \"EngineVersion\", \"26\" )]\r\n[assembly: global::System.Reflection.AssemblyMetadata( \"EngineMinorVersion\", \"1\" )]\r\n\r\n[assembly: System.Runtime.Versioning.TargetFramework( \".NETCoreApp,Version=v9.0\", FrameworkDisplayName = \".NET 9.0\" )]\r\n[assembly: global::System.Reflection.AssemblyMetadata( \"CompileTime\", \"2026-06-21T16:12:55.6104423Z\" )]\r\n[assembly: global::System.Reflection.AssemblyVersion(\"0.0.117.0\")]\r\n[assembly: global::System.Reflection.AssemblyFileVersion(\"0.0.117.0\")]"
        },
        {
            "Ident": "verarp.science",
            "Path": "ScienceHud.razor",
            "FileName": "ScienceHud.razor",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "@using System\n@using Sandbox\n@using Sandbox.UI\n@namespace Science\n@inherits PanelComponent\n@attribute [StyleSheet]\n\n<root>\n    @if ( Game != null )\n    {\n        <Image @ref=\"Canvas\" class=\"canvas\" />\n\n        <div class=\"sidebar\">\n            <div class=\"brand\">\n                <div class=\"logo\">SCIENCE</div>\n                <div class=\"tagline\">Falling-sand sandbox</div>\n                <div class=\"rank\">@Game.LabRank</div>\n            </div>\n\n            <div class=\"palette\">\n                @foreach ( var category in Categories )\n                {\n                    <div class=\"cat-head\">@ScienceGame.CategoryName( category )</div>\n                    @foreach ( var element in ElementsIn( category ) )\n                    {\n                        <button class=\"@ToolClass( element )\" [email protected]( element ) onclick=@(() => Game.SelectTool( element ))>\n                            <span class=\"@SwatchClass( element )\"></span>\n                            <b>@ScienceGame.ToolName( element )</b>\n                        </button>\n                    }\n                }\n            </div>\n        </div>\n\n        <div class=\"objective @(Game.ObjectiveComplete ? \"complete\" : \"\")\">\n            <div class=\"objective-top\">\n                <span>@Game.ActiveExperimentName: @Game.ObjectiveText | Tool @Game.CurrentToolName | Score @Game.LabScore.ToString( \"N0\" )</span>\n                <b>@Game.ObjectiveProgress</b>\n            </div>\n            <div class=\"progress\">\n                <div class=\"progress-fill\" style=@($\"width: {Game.ObjectivePercent * 100f:0}%\")></div>\n            </div>\n        </div>\n\n        <div class=\"stats\">\n            <div class=\"stat-chip particles\">\n                <span class=\"stat-num\">@Game.Particles.ToString( \"N0\" )</span>\n                <span class=\"stat-lbl\">Particles</span>\n            </div>\n            <div class=\"stat-chip reactions\">\n                <span class=\"stat-num\">@Game.Reactions.ToString( \"N0\" )</span>\n                <span class=\"stat-lbl\">Reactions</span>\n            </div>\n            <div class=\"stat-chip discovered\">\n                <span class=\"stat-num\">@Game.Discoveries / 24</span>\n                <span class=\"stat-lbl\">Found</span>\n            </div>\n        </div>\n\n        <div class=\"notebook\">\n            <div class=\"nb-head\">LAB NOTEBOOK</div>\n            @if ( Game.RecentReactions.Count == 0 )\n            {\n                <div class=\"nb-empty\">Mix materials to discover reactions...</div>\n            }\n            else\n            {\n                @foreach ( var entry in Game.RecentReactions )\n                {\n                    <div class=\"nb-entry\">+ @entry</div>\n                }\n            }\n        </div>\n\n        <div class=\"milestones\">\n            <div class=\"nb-head\">MILESTONES</div>\n            @if ( Game.Milestones.Count == 0 )\n            {\n                <div class=\"nb-empty\">Load an experiment or discover reactions.</div>\n            }\n            else\n            {\n                @foreach ( var entry in Game.Milestones )\n                {\n                    <div class=\"milestone-entry\">@entry</div>\n                }\n            }\n        </div>\n\n        <div class=\"toolbar\">\n            <div class=\"group\">\n                <button class=\"icon-btn\" tooltip=\"Smaller brush\" onclick=@(() => Click( Game.DecreaseBrush ))>-</button>\n                <div class=\"readout\">@Game.BrushRadius</div>\n                <button class=\"icon-btn\" tooltip=\"Larger brush\" onclick=@(() => Click( Game.IncreaseBrush ))>+</button>\n            </div>\n\n            <div class=\"group\">\n                <button class=\"mode-btn @(Game.Paused ? \"active\" : \"\")\" onclick=@(() => Click( Game.TogglePause ))>@(Game.Paused ? \"Run\" : \"Pause\")</button>\n                <button class=\"mode-btn\" tooltip=\"Advance one frame\" onclick=@(() => Click( Game.StepOnce ))>Step</button>\n                <button class=\"mode-btn\" tooltip=\"Cycle simulation speed\" onclick=@(() => Click( Game.CycleSpeed ))>@Game.SpeedScale.ToString( \"0.#\" )x</button>\n            </div>\n\n            <div class=\"group experiments\">\n                <button class=\"@ExperimentClass( \"Mixed Lab\" )\" tooltip=\"Starter reaction board\" onclick=@(() => { Game.PlayClick(); Game.LoadScenario( 0 ); })>Lab</button>\n                <button class=\"@ExperimentClass( \"Volcano\" )\" tooltip=\"Heat and pressure chain\" onclick=@(() => { Game.PlayClick(); Game.LoadScenario( 1 ); })>Volcano</button>\n                <button class=\"@ExperimentClass( \"Garden\" )\" tooltip=\"Growth and water system\" onclick=@(() => { Game.PlayClick(); Game.LoadScenario( 2 ); })>Garden</button>\n                <button class=\"@ExperimentClass( \"Demolition\" )\" tooltip=\"Fuse and explosives test\" onclick=@(() => { Game.PlayClick(); Game.LoadScenario( 3 ); })>Demo</button>\n            </div>\n\n            <div class=\"group\">\n                <button class=\"mode-btn\" tooltip=\"Save sandbox\" onclick=@(() => Click( Game.SaveState ))>Save</button>\n                <button class=\"mode-btn\" tooltip=\"Load sandbox\" onclick=@(() => Click( Game.LoadState ))>Load</button>\n                <button class=\"mode-btn\" tooltip=\"Toggle grid\" onclick=@(() => Click( Game.ToggleGrid ))>Grid</button>\n                <button class=\"mode-btn @(Game.Muted ? \"active\" : \"\")\" tooltip=\"Toggle sound\" onclick=@(() => Game.ToggleMute())>@(Game.Muted ? \"Muted\" : \"Sound\")</button>\n                <button class=\"mode-btn danger\" tooltip=\"Clear canvas\" onclick=@(() => Click( Game.ClearWorld ))>Clear</button>\n                <button class=\"mode-btn\" tooltip=\"Help\" onclick=@(() => { ToggleHelp(); Game.PlayClick(); })>?</button>\n            </div>\n        </div>\n\n        @if ( _showHelp )\n        {\n            <div class=\"overlay\">\n                <div class=\"backdrop\" onclick=@(() => ToggleHelp())></div>\n                <div class=\"panel\">\n                    <div class=\"panel-title\">How to play</div>\n                    <div class=\"help-cols\">\n                        <div class=\"help-col\">\n                            <div class=\"help-h\">Controls</div>\n                            <div class=\"help-row\"><b>Left&nbsp;drag</b><span>Paint selected material</span></div>\n                            <div class=\"help-row\"><b>Right&nbsp;drag</b><span>Erase</span></div>\n                            <div class=\"help-row\"><b>- / +</b><span>Brush size</span></div>\n                            <div class=\"help-row\"><b>Pause / Step</b><span>Freeze and advance one frame</span></div>\n                            <div class=\"help-row\"><b>Speed</b><span>0.5x to 4x simulation</span></div>\n                            <div class=\"help-row\"><b>1-9</b><span>Quick-select common materials</span></div>\n                        </div>\n                        <div class=\"help-col\">\n                            <div class=\"help-h\">Try these reactions</div>\n                            <div class=\"help-row2\">Drop <b>Water</b> onto <b>Lava</b> to make Stone &amp; Steam</div>\n                            <div class=\"help-row2\">Light <b>Oil</b> with <b>Fire</b> to make it burn</div>\n                            <div class=\"help-row2\"><b>Acid</b> eats almost anything it touches</div>\n                            <div class=\"help-row2\"><b>Seed</b> + <b>Water</b> grows <b>Plant</b></div>\n                            <div class=\"help-row2\"><b>Fuse</b> carries fire to <b>TNT</b></div>\n                            <div class=\"help-row2\"><b>Clone</b> copies any material beside it</div>\n                        </div>\n                    </div>\n                    <button class=\"close-btn\" onclick=@(() => ToggleHelp())>Got it</button>\n                </div>\n            </div>\n        }\n\n        @if ( _showIntro )\n        {\n            <div class=\"intro\" onclick=@(() => DismissIntro())>\n                <Image @ref=\"IntroCanvas\" class=\"intro-canvas\" />\n                <div class=\"intro-scrim\"></div>\n                <div class=\"intro-inner\">\n                    <div class=\"intro-logo\">SCIENCE</div>\n                    <div class=\"intro-sub\">A reactive falling-sand sandbox</div>\n                    <div class=\"intro-hint\">30 materials / live reactions / build, burn, dissolve, grow</div>\n                    <button class=\"intro-btn\" onclick=@(() => DismissIntro())>Enter the lab</button>\n                    <div class=\"intro-foot\">Click anywhere to begin</div>\n                </div>\n            </div>\n        }\n    }\n</root>\n\n@code {\n    [Property] public ScienceGame Game { get; set; }\n\n    Image Canvas { get; set; }\n    Image IntroCanvas { get; set; }\n    bool _showHelp;\n    bool _showIntro = false;\n\n    // Run the action, then a UI click so every control gives audible feedback.\n    void Click( Action action )\n    {\n        action?.Invoke();\n        Game?.PlayClick();\n    }\n\n    static readonly ElementCategory[] Categories =\n    {\n        ElementCategory.Powders, ElementCategory.Liquids, ElementCategory.Gases,\n        ElementCategory.Energy, ElementCategory.Life, ElementCategory.Explosives,\n        ElementCategory.Solids, ElementCategory.Tools\n    };\n\n    int TotalReactions => 24;\n\n    protected override void OnStart()\n    {\n        base.OnStart();\n        Game ??= Scene.GetAllComponents<ScienceGame>().FirstOrDefault();\n        if ( !_showIntro ) Game?.SetAttractMode( false );\n    }\n\n    protected override void OnUpdate()\n    {\n        if ( Game == null ) return;\n\n        if ( Game.GridTexture != null )\n        {\n            if ( Canvas.IsValid() ) Canvas.Texture = Game.GridTexture;\n            if ( IntroCanvas.IsValid() ) IntroCanvas.Texture = Game.GridTexture;\n        }\n\n        if ( Canvas.IsValid() )\n        {\n            var rect = Canvas.Box.Rect;\n            var mouse = Mouse.Position;\n            bool inside = !_showHelp && !_showIntro\n                && mouse.x >= rect.Left && mouse.x <= rect.Right\n                && mouse.y >= rect.Top && mouse.y <= rect.Bottom;\n            Game.SetCanvasRect( rect, inside );\n        }\n    }\n\n    IEnumerable<Element> ElementsIn( ElementCategory category )\n        => Game.ToolPalette.Where( e => ScienceGame.CategoryOf( e ) == category );\n\n    void ToggleHelp() => _showHelp = !_showHelp;\n    void DismissIntro()\n    {\n        if ( !_showIntro ) return;\n        _showIntro = false;\n        Game?.SetAttractMode( false );\n        Game?.PlayClick();\n    }\n\n    string ToolClass( Element element ) => Game?.CurrentTool == element ? \"tool-btn active\" : \"tool-btn\";\n    string SwatchClass( Element element ) => $\"swatch {element.ToString().ToLowerInvariant()}\";\n    string ExperimentClass( string name ) => Game?.ActiveExperimentName == name ? \"scenario-btn active\" : \"scenario-btn\";\n\n    protected override int BuildHash() => System.HashCode.Combine(\n        System.HashCode.Combine( Game?.CurrentTool, Game?.BrushRadius, Game?.Paused, Game?.SpeedScale ),\n        System.HashCode.Combine( Game?.Particles, Game?.Discoveries, Game?.LastReaction, Game?.RecentReactions.Count ),\n        System.HashCode.Combine( Game?.ActiveExperimentName, Game?.ObjectiveProgress, Game?.ObjectiveComplete, Game?.LabScore ),\n        System.HashCode.Combine( Game?.Milestones.Count, _showHelp, _showIntro, Game?.Muted ),\n        System.HashCode.Combine( Game?.Particles, Game?.Reactions ) );\n}\n"
        },
        {
            "Ident": "verarp.science",
            "Path": "ui/controls/color/colorcontrol.cs.scss",
            "FileName": "colorcontrol.cs.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "ColorControl\r\n{\r\n\tgap: 0.5rem;\r\n\tflex-grow: 1;\r\n\tpointer-events: all;\r\n\tbackground-color: #000a;\r\n\tborder-radius: 4px;\r\n\tpadding: 2px;\r\n\theight: 32px;\r\n}\r\n\r\nColorControl TextEntry\r\n{\r\n\tflex-grow: 1;\r\n\tflex-shrink: 0;\r\n\tcolor: #aaa;\r\n\tfont-size: 1.2rem;\r\n\r\n\t&:hover, &:focus\r\n\t{\r\n\t\tcolor: #ddd;\r\n\r\n\t\t.icon\r\n\t\t{\r\n\t\t\tcolor: #3af;\r\n\t\t}\r\n\t}\r\n\r\n\t&:active\r\n\t{\r\n\t\tcolor: white;\r\n\t}\r\n}\r\n\r\nColorControl > .colorswatch\r\n{\r\n\taspect-ratio: 1;\r\n\tborder-radius: 4px;\r\n\theight: 100%;\r\n\tflex-shrink: 0;\r\n\tcursor: pointer;\r\n\tborder: 2px solid #000;\r\n}"
        },
        {
            "Ident": "verarp.science",
            "Path": "ui/components/packagelist.razor.scss",
            "FileName": "packagelist.razor.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": ".package-list\r\n{\r\n    flex-shrink: 1;\r\n    flex-wrap: wrap;\r\n    flex-grow: 1;\r\n\r\n    h1\r\n    {\r\n        width: 100%;\r\n        margin-top: 50px;\r\n        font-size: 40px;\r\n    }\r\n\r\n    PackageCard\r\n    {\r\n        &:hover\r\n        {\r\n            sound-in: \"ui.button.over\";\r\n        }\r\n    }\r\n\r\n    VirtualGrid\r\n    {\r\n        width: 100%;\r\n        height: 100%;\r\n\r\n        .cell\r\n        {\r\n            \r\n        }\r\n    }\r\n}"
        },
        {
            "Ident": "verarp.science",
            "Path": "ui/components/packageflairbar.razor.scss",
            "FileName": "packageflairbar.razor.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "PackageFlairBar\r\n{\r\n\tposition: absolute;\r\n\ttop: 6px;\r\n\tleft: 6px;\r\n\tz-index: 2;\r\n\tflex-direction: row;\r\n\tgap: 5px;\r\n\tpointer-events: none;\r\n\r\n\t.flair\r\n\t{\r\n\t\tposition: relative;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t\twidth: 22px;\r\n\t\theight: 22px;\r\n\t\tpointer-events: all;\r\n\t\tborder-radius: 4px;\r\n\t\tcolor: white;\r\n\t\tborder: 1px solid rgba( white, 0.1 );\r\n\t\toutline: 1px solid #0006;\r\n\t\topacity: 0.7;\r\n\r\n\t\t&:hover\r\n\t\t{\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\r\n\t\ticon\r\n\t\t{\r\n\t\t\tfont-size: 15px;\r\n\t\t}\r\n\t}\r\n}\r\n"
        },
        {
            "Ident": "verarp.science",
            "Path": "styles/form/_switch.scss",
            "FileName": "_switch.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "\r\n$primary: red !default;\r\n$primary-alt: white !default;\r\n\r\n$switch-padding: 6px !default;\r\n\r\n.checkbox.switch\r\n{\r\n\tcursor: pointer;\r\n\r\n\t> .checkmark\r\n\t{\r\n\t\tfont-size: 22px;\r\n\t\tborder: 0px solid $primary;\r\n\t\tborder-radius: 100px;\r\n\t\ttext-align: center;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t\tcolor: $primary-alt;\r\n\t\tpadding: $switch-padding;\r\n\t\tpadding-right: 32px;\r\n\t\tpadding-left: $switch-padding;\r\n\t\ttransition: all 0.3s ease;\r\n\t\tbackground-color: rgba( $primary, 0.1 );\r\n\r\n\t\t> .handle\r\n\t\t{\r\n\t\t\tbackground-color: $primary-alt;\r\n\t\t\twidth: 20px;\r\n\t\t\theight: 20px;\r\n\t\t\tborder-radius: 100px;\r\n\t\t\tbox-shadow: 2px 2px 12px black;\r\n\t\t}\r\n\t}\r\n\r\n\t&.checked\r\n\t{\r\n\t\t> .checkmark\r\n\t\t{\r\n\t\t\tbackground-color: $primary;\r\n\t\t\tpadding-left: 32px;\r\n\t\t\tpadding-right: $switch-padding;\r\n\t\t}\r\n\t}\r\n\r\n\t&:active\r\n\t{\r\n\t\ttransform: scale( 0.9 );\r\n\t\ttransform-origin: 20px 50%;\r\n\t}\r\n}\r\n"
        },
        {
            "Ident": "verarp.science",
            "Path": "ui/controlsheet/controlsheet.cs.scss",
            "FileName": "controlsheet.cs.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "ControlSheet\r\n{\r\n\tflex-direction: column;\r\n\tfont-family: Poppins;\r\n\tfont-size: 14px;\r\n}\r\n\r\nControlSheet > .body\r\n{\r\n\tflex-direction: column;\r\n\tflex-grow: 1;\r\n\toverflow: scroll;\r\n\tgap: 1px;\r\n}\r\n\r\nControlSheet > .body > * \r\n{\r\n\tflex-shrink: 0;\r\n}\r\n"
        },
        {
            "Ident": "verarp.science",
            "Path": "ui/controls/color/colorsaturationvaluecontrol.cs.scss",
            "FileName": "colorsaturationvaluecontrol.cs.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "ColorSaturationValueControl\r\n{\r\n\twidth: 240px;\r\n\theight: 240px;\r\n\tbackground-color: red;\r\n\tposition: relative;\r\n\tborder-radius: 4px;\r\n\tcursor: pointer;\r\n\tborder: 1px solid #333;\r\n\r\n\t&:hover\r\n\t{\r\n\t\tborder: 1px solid #08f;\r\n\t}\r\n\r\n\t&:active\r\n\t{\r\n\t\tborder: 1px solid #fff;\r\n\t}\r\n\r\n\t.handle\r\n\t{\r\n\t\twidth: 16px;\r\n\t\theight: 16px;\r\n\t\tborder-radius: 100px;\r\n\t\tborder: 2px solid #444;\r\n\t\tposition: absolute;\r\n\t\tbackground-color: white;\r\n\t\tbox-shadow: 2px 2px 16px #000a;\r\n\t\ttransform: translateX( -50% ) translateY( -50% );\r\n\t\tpointer-events: none;\r\n\t\tz-index: 100;\r\n\t\tz-index: 100;\r\n\t}\r\n\r\n\t.gradient\r\n\t{\r\n\t\tposition: absolute;\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t\tborder-radius: 4px;\r\n\t\tbackground: linear-gradient( to right, white, rgba( 255, 255, 255, 0 ) );\r\n\r\n\t\t&:after\r\n\t\t{\r\n\t\t\tcontent: \"\";\r\n\t\t\tposition: absolute;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 100%;\r\n\t\t\tborder-radius: 4px;\r\n\t\t\tbackground: linear-gradient( to top, black, rgba( 0, 0, 0, 0 ) );\r\n\t\t}\r\n\t}\r\n}\r\n"
        },
        {
            "Ident": "verarp.science",
            "Path": "ui/components/packagefilters.razor.scss",
            "FileName": "packagefilters.razor.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "\r\n@import \"/styles/_theme.scss\";\r\n\r\n.packagefilter\r\n{\r\n\twidth: 100%;\r\n\tflex-shrink: 0;\r\n\r\n\t.left\r\n\t{\r\n\t\tflex-grow: 1;\r\n\t\tflex-shrink: 0;\r\n\t\tgap: 16px;\r\n\t}\r\n\r\n\t.right\r\n\t{\r\n\t\tflex-grow: 1;\r\n\t\tflex-shrink: 0;\r\n\t\tgap: 16px;\r\n\t}\r\n}\r\n\r\n.packagefilter textentry\r\n{\r\n\tflex-grow: 1;\r\n\tpadding: 8px 12px;\r\n\tpointer-events: all;\r\n\r\n\tLabel\r\n\t{\r\n\t\tmargin-left: 26px;\r\n\t}\r\n\r\n\ticonpanel\r\n\t{\r\n\t\tposition: absolute;\r\n\t\tleft: 12px;\r\n\t\topacity: 0.3;\r\n\t\tfont-size: $text-large;\r\n\t}\r\n}\r\n\r\n\t.packagefilterfacet, .packagefilter textentry\r\n\t{\r\n\t\tbackground-color: rgba($default-950, 0.3);\r\n\t\tcolor: $default-text;\r\n\t\toutline: 1px solid $default-border;\r\n\t\ttransition: all 150ms $easing;\r\n\t\tborder-radius: $rounding-default;\r\n\t\tpadding: 4px 12px;\r\n\t\tgap: 16px;\r\n\t\tflex-shrink: 0;\r\n\t\tfont-size: 14px;\r\n\t\tcursor: pointer;\r\n\t\talign-items: center;\r\n\r\n\t\t.clear-button\r\n\t\t{\r\n\t\t\theight: 100%;\r\n\t\t\tmargin-right: -8px;\r\n\t\t\talign-items: center;\r\n\t\t\tpadding: 0px 4px;\r\n\r\n\t\t\t&:hover\r\n\t\t\t{\r\n\t\t\t\tcolor: red;\r\n\t\t\t\tborder-radius: 100%;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.is-active\r\n\t\t{\r\n\t\t\tbackground-color: $default-700;\r\n\t\t}\r\n\r\n\t\t&:not(.is-active)\r\n\t\t{\r\n\t\t\t&:hover\r\n\t\t\t{\r\n\t\t\t\toutline: 1px solid $default-50;\r\n\t\t\t}\r\n\t\t}\r\n\t}"
        },
        {
            "Ident": "verarp.science",
            "Path": "styles/form/_colorproperty.scss",
            "FileName": "_colorproperty.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": "\r\n\r\n.colorproperty\r\n{\r\n\talign-items: center;\r\n\tposition: relative;\r\n\r\n\t.colorsquare\r\n\t{\r\n\t\twidth: 20px;\r\n\t\theight: 20px;\r\n\t\tborder-radius: 4px;\r\n\t\tmargin-right: 8px;\r\n\t\tposition: absolute;\r\n\t\tleft: 7px;\r\n\t\tz-index: 1;\r\n\t\tcursor: pointer;\r\n\t}\r\n\r\n\t> .textentry:not( .a.b.c )\r\n\t{\r\n\t\tpadding-left: 36px;\r\n\t}\r\n}"
        },
        {
            "Ident": "verarp.science",
            "Path": "ui/controlsheet/controlsheetgroup.cs.scss",
            "FileName": "controlsheetgroup.cs.scss",
            "PackageType": "game",
            "CodeKind": "Game",
            "AssetVersionId": 292714,
            "IsPrivate": false,
            "Code": ".controlgroup\r\n{\r\n\tborder-radius: 8px;\r\n\tpadding: 0.5rem;\r\n\tflex-direction: column;\r\n\tflex-shrink: 0;\r\n\r\n\t&.hidden\r\n\t{\r\n\t\tdisplay: none;\r\n\t}\r\n}\r\n\r\n.controlgroup > .header\r\n{\r\n\tfont-weight: 550;\r\n\tcolor: #fff;\r\n\tflex-shrink: 0;\r\n\tpadding: 8px 0;\r\n\ttext-shadow: 1px 1px 1px #0004;\r\n}\r\n\r\n.controlgroup > .body\r\n{\r\n\tflex-direction: column;\r\n\tflex-shrink: 0;\r\n\tgap: 2px;\r\n\tpadding-left: 16px;\r\n\r\n\t&.hidden\r\n\t{\r\n\t\tdisplay: none;\r\n\t}\r\n}"
        }
    ]
}