-
+
diff --git a/src/app/app-sidebar/app-sidebar.component.scss b/src/app/app-sidebar/app-sidebar.component.scss
index a5349030..dcacf1d8 100644
--- a/src/app/app-sidebar/app-sidebar.component.scss
+++ b/src/app/app-sidebar/app-sidebar.component.scss
@@ -204,6 +204,10 @@ $sidebar_width: 500px;
top: $padding * 0.5;
}
+ padding: {
+ bottom: 10px;
+ }
+
.type {
cursor: pointer;
position: relative;
@@ -260,6 +264,7 @@ $sidebar_width: 500px;
&.color_type {
flex: 1;
+
.label {
font-size: 0.6rem;
}
@@ -284,96 +289,6 @@ $sidebar_width: 500px;
flex-grow: 1;
}
}
-
- .toggle_filters_btn {
- cursor: pointer;
- display: flex;
- justify-content: center;
- align-items: center;
-
- color: color_variable("interface_faded");
-
- padding: {
- top: $padding * 0.5;
- bottom: $padding * 0.5;
- }
-
- &:hover {
- color: color_variable("button_hover");
- }
-
- &.expanded {
- svg {
- @include rotate(-90deg);
- }
- }
-
- svg {
- @include rotate(90deg);
- }
- }
-
- .extra_filters {
- overflow: hidden;
-
- .container {
- padding: {
- top: $padding;
- }
- }
-
- .tags {
- .tag {
- cursor: pointer;
- display: flex;
- align-items: center;
- gap: $padding * 0.2;
-
- background: none;
- border: 1px solid color_variable("tag_background");
-
- svg {
- .star {
- fill: color_variable("primary");
- stroke-width: 0px;
- }
- }
-
- &.selected {
- color: color_variable("background");
- background: {
- color: color_variable("interface_selected");
- }
-
- border: {
- color: color_variable("interface_selected");
- }
-
- svg {
- .star {
- fill: color_variable("background");
- }
- }
-
- &:hover {
- background: {
- color: color_variable("button_hover");
- }
-
- border: {
- color: color_variable("button_hover");
- }
- }
- }
-
- &:hover {
- background: {
- color: color_variable("interface_hover");
- }
- }
- }
- }
- }
}
.search {
@@ -494,43 +409,6 @@ $sidebar_width: 500px;
}
}
- .toggle_button {
- user-select: none;
- margin-right: 10px;
- width: 100px;
- text-align: center;
- text-transform: uppercase;
- font-size: 12px;
-
- min: {
- width: 36px;
- height: 36px;
- }
-
- background: {
- color: color_variable("button_background");
- }
-
- padding: ($padding * 0.5);
-
- border: 1px solid color_variable("interface_border");
-
- @include box-sizing(border-box);
- @include border-radius($border_radius);
- @include transition(#{background-color 0.2s easing($ease-in)});
-
- cursor: pointer;
-
- &:hover {
- color: color_variable("background");
- background: {
- color: color_variable("button_hover");
- }
-
- @include transition(none);
- }
- }
-
.block_list {
flex-grow: 1;
@@ -608,6 +486,7 @@ $sidebar_width: 500px;
&.dragging {
cursor: grabbing;
}
+
/*
&.dragging {
::ng-deep .block_container {
@@ -701,6 +580,7 @@ $sidebar_width: 500px;
}
}
}
+
/*
.info {
@@ -891,6 +771,7 @@ $sidebar_width: 500px;
.prototype-range-filter {
width: 100%;
padding: 0 16px;
+
h5 {
margin: 8px 0;
}
diff --git a/src/app/app-sidebar/app-sidebar.component.spec.ts b/src/app/app-sidebar/app-sidebar.component.spec.ts
index b4b14cda..ac84c7d4 100644
--- a/src/app/app-sidebar/app-sidebar.component.spec.ts
+++ b/src/app/app-sidebar/app-sidebar.component.spec.ts
@@ -4,6 +4,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppSidebarComponent } from './app-sidebar.component';
import { BlockComponent } from '../block/block.component';
import { DroppableDirective } from '../drag-drop-utilities/droppable/droppable.directive';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+import * as colorWheelBlockSet from '../../assets/blocks/10x10x10palette/data.json';
+import { BlockSet } from '../models';
+import {ChemicalPropertyPipe} from "../pipes/chemical-property.pipe";
describe('AppSidebarComponent', () => {
let component: AppSidebarComponent;
@@ -11,15 +16,15 @@ describe('AppSidebarComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [BrowserAnimationsModule],
- declarations: [AppSidebarComponent, BlockComponent, DroppableDirective],
+ imports: [BrowserAnimationsModule, HttpClientTestingModule],
+ declarations: [AppSidebarComponent, BlockComponent, DroppableDirective, ChemicalPropertyPipe],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AppSidebarComponent);
component = fixture.componentInstance;
- component.blockSetId = '10x10x10palette';
+ component.blockSet = colorWheelBlockSet as unknown as BlockSet;
fixture.detectChanges();
});
diff --git a/src/app/app-sidebar/app-sidebar.component.ts b/src/app/app-sidebar/app-sidebar.component.ts
index 6ef89b19..c21c2cb6 100644
--- a/src/app/app-sidebar/app-sidebar.component.ts
+++ b/src/app/app-sidebar/app-sidebar.component.ts
@@ -1,5 +1,4 @@
import { Component, HostBinding, Input, OnInit } from '@angular/core';
-import { BlockSize } from '../block/block.component';
import {
Block,
BlockSet,
@@ -8,32 +7,16 @@ import {
Molecule,
} from '../models';
import Fuse from 'fuse.js';
-import {
- animate,
- state,
- style,
- transition,
- trigger,
-} from '@angular/animations';
import { WorkspaceService } from '../services/workspace.service';
import { ColorKeyT, LambdaMaxRangeForColor } from '../utils/colors';
import { applyTargetFilter, lookupProperty } from '../lookup';
import { BlockSetId } from '../services/block.service';
+import { combineLatest } from 'rxjs';
@Component({
selector: 'app-sidebar',
templateUrl: './app-sidebar.component.html',
styleUrls: ['./app-sidebar.component.scss'],
- animations: [
- trigger('filtersExpand', [
- state('collapsed', style({ height: '0px' })),
- state('expanded', style({ height: '*' })),
- transition(
- 'expanded <=> collapsed',
- animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'),
- ),
- ]),
- ],
})
export class AppSidebarComponent implements OnInit {
labelList: string[] = [];
@@ -70,7 +53,6 @@ export class AppSidebarComponent implements OnInit {
}
currentToggle = 'build';
- BlockSize = BlockSize; // for use in template
blockLevelScale = 1;
filteredBlocks: string[] = [];
@@ -138,24 +120,32 @@ export class AppSidebarComponent implements OnInit {
}
isSidebarExpanded = true;
- isShowingFilters = false;
- moleculeList: Molecule[] = [];
+ molecule: Molecule | null = null;
functionModeEnabled = true;
+ currentTab: 'blocks' | 'details' = 'blocks';
+
constructor(private workspaceService: WorkspaceService) {
+ combineLatest([
+ this.workspaceService.selectedMolecule$,
+ this.workspaceService.selectedBlock$,
+ ]).subscribe(([molecule]) => {
+ this.currentTab = molecule ? 'details' : 'blocks';
+ });
+ }
+
+ //********************************************
+ ngOnInit(): void {
this.workspaceService.functionMode$.subscribe((enabled) => {
this.functionModeEnabled = enabled;
this.applyFilters();
});
- this.workspaceService.moleculeList$.subscribe((moleculeList) => {
- this.moleculeList = moleculeList;
+ this.workspaceService.molecule$.subscribe((molecule) => {
+ this.molecule = molecule;
this.applyFilters();
});
- }
- //********************************************
- ngOnInit(): void {
this.xAxis = this.blockSet.functionalProperties[0]!;
this.yAxis = this.blockSet.functionalProperties[1]!;
this._xRange = [this.xAxis.min, this.xAxis.max];
@@ -163,11 +153,6 @@ export class AppSidebarComponent implements OnInit {
this.applyFilters();
}
- //********************************************
- onChangeToggle(newToggle: string) {
- this.currentToggle = newToggle;
- }
-
//********************************************
getSearchPlaceholder(): string {
return this.moleculeSearch.length == 0 ? this.searchPlaceholder : '';
@@ -180,12 +165,6 @@ export class AppSidebarComponent implements OnInit {
this.sidebarClasses = this.isSidebarExpanded ? 'expanded' : 'collapsed';
}
- //********************************************
- toggleFilters(override?: boolean) {
- this.isShowingFilters =
- typeof override != 'undefined' ? override : !this.isShowingFilters;
- }
-
//********************************************
onClickType(type: string) {
if (type == 'all') {
@@ -215,10 +194,6 @@ export class AppSidebarComponent implements OnInit {
}
}
- toggle() {
- this.workspaceService.toggle();
- }
-
private applyFilters() {
if (this.functionModeEnabled) {
if (this.blockSet?.id === BlockSetId.ColorWheel) {
@@ -281,7 +256,7 @@ export class AppSidebarComponent implements OnInit {
);
},
},
- this.moleculeList[0]?.blockList ?? [],
+ this.molecule?.blockList ?? [],
this.blockSet,
);
}
@@ -302,7 +277,7 @@ export class AppSidebarComponent implements OnInit {
);
},
},
- this.moleculeList[0]?.blockList ?? [],
+ this.molecule?.blockList ?? [],
this.blockSet,
);
}
@@ -335,5 +310,18 @@ export class AppSidebarComponent implements OnInit {
}
}
+ selectMolecule() {
+ const molecule = this.workspaceService.molecule$.value;
+ if (molecule) {
+ this.workspaceService.selectedMolecule$.next(molecule);
+ this.workspaceService.selectedBlock$.next(null);
+ }
+ }
+
+ resetSelection() {
+ this.workspaceService.selectedMolecule$.next(null);
+ this.workspaceService.selectedBlock$.next(null);
+ }
+
lookupProperty = lookupProperty;
}
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e492a87b..db716968 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -28,4 +28,5 @@ app-header {
.content {
position: relative;
flex-grow: 1;
+ min-height: 0;
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c448deda..74ae7c85 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,6 @@
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -21,7 +21,6 @@ import { SplashComponent } from './splash/splash.component';
import { TutorialComponent } from './tutorial/tutorial.component';
import { OverlayModule } from '@angular/cdk/overlay';
-import { OverlayComponent } from './overlay/overlay.component';
import { DraggableDirective } from './drag-drop-utilities/draggable/draggable.directive';
import { DraggableHelperDirective } from './drag-drop-utilities/draggable/draggable-helper.directive';
@@ -33,10 +32,30 @@ import { MoleculeSvgComponent } from './molecule-svg/molecule-svg.component';
import { ScatterPlotComponent } from './scatterplot/scatter-plot.component';
import { SliderModule } from 'primeng/slider';
+import { InputTextModule } from 'primeng/inputtext';
+import { ButtonModule } from 'primeng/button';
+import { PasswordModule } from 'primeng/password';
+import { DialogModule } from 'primeng/dialog';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { MessagesModule } from 'primeng/messages';
+import { DropdownModule } from 'primeng/dropdown';
+import { TableModule } from 'primeng/table';
import { TrackingService } from './services/tracking.service';
import { EnvironmentService } from './services/environment.service';
import { ChemicalPropertyPipe } from './pipes/chemical-property.pipe';
+import { LoginComponent } from './login/login.component';
+import { GroupsComponent } from './groups/groups.component';
+import { GroupCartComponent } from './group-cart/group-cart.component';
+import { MoleculeSummaryComponent } from './molecule-summary/molecule-summary.component';
+import { BlockLibraryComponent } from './block-library/block-library.component';
+import { DetailPanelComponent } from './detail-panel/detail-panel.component';
+import { MoleculeDetailComponent } from './molecule-detail/molecule-detail.component';
+import { NgOptimizedImage } from '@angular/common';
+import { SafeUrlPipe } from './pipes/safe-url.pipe';
+import { AdminComponent } from './admin/admin.component';
+import { AuthInterceptor } from './interceptors/auth.interceptor';
+import { MiniGameComponent } from './mini-game/mini-game.component';
// The arguments to this function are injected based on the `deps` field next to `useFactory`
function initializeAppFactory(
@@ -68,9 +87,18 @@ function initializeAppFactory(
SplashComponent,
TutorialComponent,
BlockSvgComponent,
- OverlayComponent,
MoleculeSvgComponent,
ScatterPlotComponent,
+ LoginComponent,
+ GroupsComponent,
+ GroupCartComponent,
+ MoleculeSummaryComponent,
+ BlockLibraryComponent,
+ DetailPanelComponent,
+ MoleculeDetailComponent,
+ SafeUrlPipe,
+ AdminComponent,
+ MiniGameComponent,
],
imports: [
BrowserModule,
@@ -85,6 +113,15 @@ function initializeAppFactory(
DragDropModule,
OverlayModule,
SliderModule,
+ InputTextModule,
+ ButtonModule,
+ PasswordModule,
+ DialogModule,
+ RadioButtonModule,
+ MessagesModule,
+ DropdownModule,
+ TableModule,
+ NgOptimizedImage,
],
providers: [
{
@@ -95,6 +132,11 @@ function initializeAppFactory(
deps: [TrackingService, EnvironmentService],
multi: true,
},
+ {
+ provide: HTTP_INTERCEPTORS,
+ useClass: AuthInterceptor,
+ multi: true,
+ },
],
bootstrap: [AppComponent],
})
diff --git a/src/app/block-library/block-library.component.html b/src/app/block-library/block-library.component.html
new file mode 100644
index 00000000..976482e8
--- /dev/null
+++ b/src/app/block-library/block-library.component.html
@@ -0,0 +1,58 @@
+
-
-
+
+
+
-
- Choose a block set
+
+
+
+
+ ![Color Wheel]()
+
+
+
+ OPV Set
+
+ The OPV (Organic Photovoltaic) block set is designed to harness the
+ power of sunlight in a sustainable and efficient manner. The molecules
+ created with these blocks can be integrated in thin and flexible solar
+ cells, providing a renewable energy source for various applications not
+ possible with traditional silicon cells.
+
+
+
+ ![Color Wheel]()
+
+
+
+ Color Wheel Set
+
+ The Color Wheel Block Set is a unique and innovative tool that combines
+ the principles of color theory with the concept of lambda max, the
+ wavelength at which a substance absorbs light most strongly. Each block
+ in the set is designed to represent a different lambda max value,
+ allowing users to explore how different wavelengths of light interact
+ with colors.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ property.label }}
+
+
+ {{ property.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+ Group Molecule Cart
+
+
+
+
+
+
+
+
+ The cart is empty
+
+
+
+ Compare Molecule Details
+
+
+
+
+
+
+
+
+
+Select up to 3 molecules
+
+
+
+
+
+
+
+
+ Active Group Workspaces ({{ groups.length }})
+
+
+
+
+
+ {{ group.name }}
+
+
+ Join Code
+ {{ group.join_code.code }}
+
+
+ Block Set ID
+ {{ group.block_set_id }}
+
+
+ Number of Members
+ {{ group.members.length }}
+
+
+
+
+
+ Add a Group
+
+
+
+
+
+
+
+
+
+ {{ joinCode[i] || '' }}
+
+ Group Name
+
+ Join Code
+
+
+
+
+ {{ joinCode }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
++ Have an account? +
+
+
+
+
+
+
+
+
+
+
+
+
+ Don’t have an account? Sign up
+
+ + Sign Up +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Already have an account? Log in
+
+
+
+
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
new file mode 100644
index 00000000..6034f8cf
--- /dev/null
+++ b/src/app/login/login.component.scss
@@ -0,0 +1,1219 @@
+@import "../styles/core";
+
+:host {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: 'Inter';
+
+ .main {
+ z-index: get_index("splash") + 1;
+
+ width: 1080px;
+ padding-right: 626px;
+
+ h1 {
+ font-weight: 500;
+ font-size: 30px;
+ }
+
+ .input {
+ margin: 24px 0;
+
+ label, input {
+ display: block;
+ width: 100%;
+ }
+
+ label {
+ margin: 8px 0;
+ }
+
+
+ ::ng-deep p-password div {
+ width: 100%;
+ }
+
+ ::ng-deep input {
+ width: 100%;
+ background: #F8F8F8;
+ border: 1px solid #DEDEDE;
+ border-radius: 16px;
+ font-weight: 700;
+ font-size: 14px;
+ color: black;
+
+ ::placeholder {
+ color: #959595;
+ }
+ }
+
+ }
+
+ .buttons {
+ display: flex;
+ justify-content: space-between;
+ gap: 12px;
+
+ p-button {
+ flex: auto;
+
+ ::ng-deep button {
+ width: 100%;
+ }
+ }
+ }
+ }
+
+ .button {
+ cursor: pointer;
+ display: inline-block;
+
+ min: {
+ width: 110px;
+ }
+
+ border: none;
+
+ color: get_color("text"); //background
+ background: {
+ color: get_color("splash_button");
+ }
+
+ margin: {
+ top: $padding;
+ right: 10px;
+ }
+ padding: $padding ($padding * 1.5);
+
+ font: {
+ weight: bold;
+ }
+ text: {
+ align: center;
+ }
+
+ @include border-radius(2000px); //$border_radius);
+
+ &:hover {
+ color: get_color("background"); //background
+ background: {
+ color: get_color("splash_button_hover");
+ }
+ }
+ }
+
+ a {
+ color: black;
+ }
+}
+
+.error-message {
+ z-index: get_index('splash') + 1;
+ position: fixed;
+ right: 32px;
+ bottom: 32px;
+}
+
+// copied from `SplashComponent`
+
+/**************** splash css ******************/
+
+$splash_padding: 20px; //padding around screen
+$splash_position: 60%; //pivot position from top of screen (where title and footer meet)
+$splash_footer_height: 175px;
+
+$splash_form_field_width: 240px;
+
+//**************** custom mixins ******************
+
+//inspired by https://codepen.io/P1N2O/pen/pyBNzX
+@mixin gradient_background($name, $color, $speed: 10s) {
+ .background_#{$name} {
+ position: absolute;
+ z-index: -10;
+
+ background-image: radial-gradient(
+ rgba($color, 0.5) 20%,
+ rgba($color, 0) 60%
+ );
+
+ @include animation(gradient $speed ease infinite);
+ @include translate(-50%, -50%);
+
+ @content;
+ }
+}
+
+//**************** animations ******************
+
+@include keyframes(gradient) {
+ 0% {
+ @include opacity(100);
+ }
+ 50% {
+ @include opacity(0);
+ }
+ 100% {
+ @include opacity(100);
+ }
+}
+
+@include keyframes(fade_in) {
+ 0% {
+ @include opacity(0);
+ }
+ 100% {
+ @include opacity(100);
+ }
+}
+
+@include keyframes(slide_down) {
+ 0% {
+ @include translate(0%, -40%);
+ @include opacity(0);
+ }
+ 100% {
+ @include translate(0%, 0%);
+ @include opacity(100);
+ }
+}
+
+@include keyframes(slide_right) {
+ 0% {
+ @include translate(-30px, 0%);
+ @include opacity(0);
+ }
+ 100% {
+ @include translate(0px, 0%);
+ @include opacity(100);
+ }
+}
+
+@include keyframes(rotate) {
+ 0% {
+ @include rotate(0deg);
+ }
+ 100% {
+ @include rotate(360deg);
+ }
+}
+
+@include keyframes(yellow_drop_in) {
+ 0% {
+ @include translate(0px, 0px);
+ @include rotate(0deg);
+ }
+ 20% {
+ @include translate(0px, 0px);
+ @include rotate(45deg);
+ }
+ 28% {
+ @include translate(0px, 100px);
+ }
+ 90% {
+ @include translate(0px, 100px);
+ }
+ 100% {
+ @include translate(0px, 0px);
+ @include rotate(25deg);
+ }
+}
+
+@include keyframes(arms_dangle) {
+ 0% {
+ @include rotate(0deg);
+ }
+ 20% {
+ @include rotate(-2deg);
+ }
+ 23% {
+ @include rotate(-20deg);
+ }
+ 28% {
+ @include rotate(-6deg);
+ }
+
+ //extra wave
+ 40% {
+ @include rotate(4deg);
+ }
+ 46% {
+ @include rotate(-12deg);
+ }
+ 52% {
+ @include rotate(4deg);
+ }
+ 58% {
+ @include rotate(-12deg);
+ }
+ 64% {
+ @include rotate(-6deg);
+ }
+
+ 90% {
+ @include rotate(-6deg);
+ }
+ 100% {
+ @include rotate(-60deg);
+ }
+}
+
+@include keyframes(arms_dangle_opposite) {
+ 0% {
+ @include rotate(0deg);
+ }
+ 20% {
+ @include rotate(-1deg);
+ }
+ 23% {
+ @include rotate(20deg);
+ }
+ 28% {
+ @include rotate(6deg);
+ }
+ 90% {
+ @include rotate(6deg);
+ }
+ 100% {
+ @include rotate(60deg);
+ }
+}
+
+@include keyframes(floating) {
+ 0% {
+ @include rotate(0deg);
+ }
+ 30% {
+ @include rotate(2deg);
+ }
+ 50% {
+ @include rotate(-2.5deg);
+ }
+ 100% {
+ @include rotate(0deg);
+ }
+}
+
+@include keyframes(floating_opposite) {
+ 0% {
+ @include rotate(0deg);
+ }
+ 30% {
+ @include rotate(-5deg);
+ }
+ 50% {
+ @include rotate(5.5deg);
+ }
+ 100% {
+ @include rotate(0deg);
+ }
+}
+
+@include keyframes(blink) {
+ 0% {
+ @include translate(0px, -6px);
+ }
+ 94% {
+ @include translate(0px, -6px);
+ }
+ 97% {
+ @include translate(0px, 0px);
+ }
+ 100% {
+ @include translate(0px, -6px);
+ }
+}
+
+@include keyframes(moustache) {
+ 0% {
+ @include rotate(0deg);
+ }
+ 80% {
+ @include rotate(0deg);
+ }
+ 90% {
+ @include rotate(20deg);
+ }
+ 100% {
+ @include rotate(0deg);
+ }
+}
+
+@include keyframes(cape_flapping) {
+ 0% {
+ transform: skew(0deg, 0deg);
+ }
+ 12% {
+ transform: skew(5deg, -5deg); //15
+ }
+ 22% {
+ transform: skew(0deg, -3deg);
+ }
+ 35% {
+ transform: skew(1deg, -5deg); //15
+ }
+ 70% {
+ transform: skew(-1deg, 1deg);
+ }
+ 80% {
+ transform: skew(0deg, -1deg);
+ }
+ 85% {
+ transform: skew(2deg, 2deg); //15
+ }
+ 100% {
+ transform: skew(0deg, 0deg);
+ }
+}
+
+@include keyframes(raise_arms) {
+ 0% {
+ transform: scale(1, -1);
+ }
+ 40% {
+ transform: scale(1, -1);
+ }
+ 45% {
+ transform: scale(1, 1);
+ }
+ 95% {
+ transform: scale(1, 1);
+ }
+ 100% {
+ transform: scale(1, -1);
+ }
+}
+
+@include keyframes(high_five) {
+ 0% {
+ transform: scale(1, -1);
+ }
+ 35% {
+ transform: scale(1, -1);
+ }
+ 40% {
+ transform: scale(1, 1);
+ }
+ 95% {
+ transform: scale(1, 1);
+ }
+ 100% {
+ transform: scale(1, -1);
+ }
+}
+
+@include keyframes(molecule_red_animation) {
+ 0% {
+ right: -190px;
+ top: 30%;
+ @include rotate(0deg);
+ }
+ 20% {
+ right: 5%;
+ top: 30%;
+ @include rotate(45deg);
+ }
+ 46% {
+ right: 2%;
+ top: 30%;
+ @include rotate(20deg);
+ }
+ 52% {
+ right: 1%;
+ top: 30%;
+ @include rotate(30deg);
+ // filter: none;
+ }
+ 58% {
+ right: 18%;
+ top: -160px;
+ @include rotate(20deg);
+ // filter: blur(10px);
+ }
+ 100% {
+ right: 18%;
+ top: -160px;
+ @include rotate(20deg);
+ // filter: none;
+ }
+}
+
+@include keyframes(goggle_shift) {
+ 0% {
+ @include rotate(0deg);
+ @include translate(0px, 0px);
+ }
+ 12% {
+ @include translate(4px, -1px);
+ }
+ 17% {
+ @include translate(-2px, 0px);
+ }
+ 20% {
+ @include translate(0px, 0px);
+ }
+ 40% {
+ @include rotate(8deg);
+ }
+ 50% {
+ @include rotate(-10deg);
+ }
+ 52% {
+ @include rotate(12deg);
+ }
+ 54% {
+ @include rotate(-12deg);
+ }
+ 56% {
+ @include rotate(0deg);
+ }
+ 100% {
+ @include rotate(0deg);
+ }
+}
+
+@include keyframes(red_swing) {
+ 0% {
+ @include rotate(0deg);
+ }
+ 14% {
+ @include rotate(-10deg);
+ }
+ 20% {
+ @include rotate(6deg);
+ }
+ 24% {
+ @include rotate(-10deg);
+ }
+ 28% {
+ @include rotate(0deg);
+ }
+
+ 38% {
+ @include rotate(6deg);
+ }
+ 45% {
+ @include rotate(0deg);
+ }
+ 48% {
+ @include rotate(-16deg);
+ }
+
+ 100% {
+ @include rotate(0deg);
+ }
+}
+
+@include keyframes(up_up_and_away) {
+ 0% {
+ @include translate(0px, 0px);
+ @include rotate(0deg);
+ }
+ 20% {
+ @include rotate(18deg);
+ }
+ 24% {
+ @include rotate(-12deg);
+ }
+ 40% {
+ @include rotate(2deg);
+ }
+ 44% {
+ @include rotate(18deg);
+ }
+
+ 50% {
+ @include translate(0px, 0px);
+ }
+ 54% {
+ @include translate(-5px, -9px);
+ }
+ 100% {
+ @include translate(-5px, -9px);
+ }
+}
+
+@include keyframes(motion_line_animation) {
+ 0% {
+ @include scale(0);
+ @include opacity(0);
+ }
+ 52% {
+ @include scale(0);
+ @include opacity(0);
+ }
+ 55% {
+ @include scale(1);
+ @include opacity(100);
+ }
+ 100% {
+ @include scale(1);
+ @include opacity(100);
+ }
+}
+
+@include keyframes(green_tilt) {
+ 0% {
+ transform: skew(0deg, 0deg);
+ }
+ 30% {
+ transform: skew(0deg, 0deg);
+ }
+ 33% {
+ transform: skew(-4deg, 0deg);
+ }
+ 36% {
+ transform: skew(0deg, 0deg);
+ }
+ 100% {
+ transform: skew(0deg, 0deg);
+ }
+}
+
+@include keyframes(open_mouth) {
+ 0% {
+ transform: scale(1, 1);
+ }
+ 70% {
+ transform: scale(1, 1);
+ }
+
+ 74% {
+ transform: scale(1, 0.3);
+ }
+ 97% {
+ transform: scale(1, 0.3);
+ }
+
+ 100% {
+ transform: scale(1, 1);
+ }
+}
+
+@include keyframes(jump) {
+ 0% {
+ @include translate(0px, 0px);
+ @include rotate(0deg);
+ }
+ 35% {
+ @include translate(0px, 0px);
+ }
+ 38% {
+ @include translate(0px, 4px);
+ }
+ 41% {
+ @include translate(0px, 0px);
+ @include rotate(5deg);
+ }
+
+ //wiggle
+ 43% {
+ @include rotate(5deg);
+ }
+ 45% {
+ @include rotate(-5deg);
+ }
+ 47% {
+ @include rotate(3deg);
+ }
+ 49% {
+ @include rotate(0deg);
+ }
+
+ 100% {
+ @include translate(0px, 0px);
+ @include rotate(0deg);
+ }
+}
+
+@include keyframes(jump_legs) {
+ 0% {
+ @include translate(0px, 0px);
+ }
+ 30% {
+ @include translate(0px, 0px);
+ }
+ 33% {
+ @include translate(0px, -2px);
+ }
+ 36% {
+ @include translate(0px, 0px);
+ }
+ 100% {
+ @include translate(0px, 0px);
+ }
+}
+
+@include keyframes(form_animation) {
+ 0% {
+ max: {
+ height: 0px;
+ }
+ }
+ 100% {
+ max: {
+ height: 120px;
+ }
+ }
+}
+
+@include keyframes(form_field_animation) {
+ 0% {
+ max: {
+ width: 0px;
+ }
+ }
+ 100% {
+ max: {
+ width: $splash_form_field_width;
+ }
+ }
+}
+
+//**************** css ******************
+
+.splash {
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ top: 0px;
+ bottom: 0px;
+ z-index: get_index("splash");
+
+ background: {
+ color: color_variable("background");
+ }
+
+ .splash_background {
+ // filter: blur(60px); //not needed and it really slows performance down on some browsers
+
+ //NOTE: change the animation speed slightly for each set to provide a bit more randomness. try and use prime numbers (or ones that one line up with each other very often)
+ @include gradient_background("green", #8cdcac, 10s) {
+ left: 15vw;
+ top: 30vh;
+
+ width: 150vw; //circle based on width of browser
+ height: 150vw;
+
+ @include animation-delay(0s); //offset start of animation
+
+ &.green_2 {
+ left: 85vw;
+ top: 60vh;
+
+ width: 120vw; //circle based on width of browser
+ height: 120vw;
+
+ @include animation-delay(-5s);
+ }
+ }
+
+ @include gradient_background("purple", #c8b2f7, 13s) {
+ left: 60vw;
+ top: 85vh;
+
+ width: 130vw; //circle based on width of browser
+ height: 130vw;
+
+ @include animation-delay(-2s); //offset start of animation
+
+ &.purple_2 {
+ left: 40vw;
+ top: -10vh;
+
+ width: 140vw; //circle based on width of browser
+ height: 140vw;
+
+ @include animation-delay(-7s);
+ }
+ }
+
+ @include gradient_background("blue", #549cde, 17s) {
+ left: 110vw;
+ top: 45vh;
+
+ width: 120vw; //circle based on width of browser
+ height: 120vw;
+
+ @include animation-delay(-4s); //offset start of animation
+
+ &.blue_2 {
+ left: 20vw;
+ top: 80vh;
+
+ width: 120vw; //circle based on width of browser
+ height: 120vw;
+
+ @include animation-delay(-10s);
+ }
+ }
+ }
+
+ .title_container {
+ position: absolute;
+ left: 20%;
+ right: 20%;
+ bottom: (
+ 100% - $splash_position
+ ); //$splash_footer_height + $splash_padding;
+ z-index: 200; //above footer
+
+ @include not_desktop() {
+ left: $padding * 2;
+ right: $padding * 2;
+ }
+
+ .title_welcome {
+ font: {
+ size: 140%;
+ }
+ line: {
+ height: 120%;
+ }
+
+ @include animation(slide_down 1s easing($ease-in-out-cubic) 0.15s both);
+ }
+
+ .title_logo {
+ margin: {
+ top: $padding * 0.5;
+ }
+
+ font: {
+ size: 350%;
+ weight: 900;
+ }
+ text: {
+ transform: uppercase;
+ }
+ line: {
+ height: 110%;
+ }
+
+ @include animation(slide_right 1s easing($ease-in-out-cubic) 0.15s both);
+ }
+
+ .title_tagline {
+ margin: {
+ top: $padding * 0.2;
+ bottom: $padding * 0.5;
+ }
+
+ line: {
+ height: 140%;
+ }
+
+ @include animation(fade_in 1s easing($ease-in-out-cubic) 0.75s both);
+ }
+
+ .form {
+ overflow: hidden;
+
+ max: {
+ height: 0px;
+ }
+
+ &.active {
+ //todo: change to angular animtion to get proper height instead of guessing
+ @include animation(
+ form_animation 0.65s easing($ease-in-out-cubic) both
+ );
+
+ input {
+ @include animation(
+ form_field_animation 0.35s easing($ease-in-out-cubic) both
+ );
+ }
+ }
+
+ input {
+ display: block;
+ overflow: hidden;
+
+ width: $splash_form_field_width;
+
+ margin: {
+ top: $padding;
+ left: 3px; //offset to provide room for focus
+ }
+ padding: ($padding * 0.5) ($padding * 0.5);
+
+ border: 0px;
+
+ @include border-radius($border_radius);
+
+ &:nth-child(1) {
+ @include animation-delay(0.35s);
+ }
+
+ &:nth-child(2) {
+ @include animation-delay(0.65s);
+ }
+ }
+ }
+
+ .button {
+ cursor: pointer;
+ display: inline-block;
+
+ min: {
+ width: 110px;
+ }
+
+ color: get_color("text"); //background
+ background: {
+ color: get_color("splash_button");
+ }
+
+ margin: {
+ top: $padding;
+ left: -(26px);
+ }
+ padding: $padding ($padding * 1.5);
+
+ font: {
+ weight: bold;
+ }
+ text: {
+ align: center;
+ }
+
+ @include border-radius(2000px); //$border_radius);
+ @include animation(
+ floating 6s easing($ease-in-out-back) 0s both infinite
+ );
+
+ &:hover {
+ color: get_color("background"); //background
+ background: {
+ color: get_color("splash_button_hover");
+ }
+ }
+ }
+ }
+
+ .molecule_red {
+ position: absolute;
+ right: 0%;
+ top: 30%;
+ z-index: 1000; //above everything
+
+ pointer-events: none;
+
+ @include transform-origin(25px 40px);
+ @include animation(
+ molecule_red_animation 9s easing($ease-in-out-cubic) 1s both infinite
+ );
+
+ svg {
+ @include scale(1.8);
+ }
+
+ .blink {
+ ellipse {
+ @include animation-duration(4.5s);
+ @include animation-delay(-2s);
+ }
+ }
+
+ .goggles {
+ @include transform-origin(16.5px 14px);
+ transform-box: fill-box;
+ @include animation(goggle_shift 9s easing($ease-in-out) 1s both infinite);
+ }
+
+ .arms {
+ @include transform-origin(40px 35px);
+ transform-box: fill-box;
+ @include animation(
+ up_up_and_away 9s easing($ease-in-out) 1s both infinite
+ );
+ }
+
+ .legs {
+ @include transform-origin(12px 10px);
+ transform-box: fill-box;
+ @include animation(red_swing 9s easing($ease-in-out) 1s both infinite);
+ }
+
+ .motion_lines {
+ @include transform-origin(0px 0px);
+ transform-box: fill-box;
+ @include animation(
+ motion_line_animation 9s easing($ease-in-out) 1s both infinite
+ );
+ }
+
+ //animation delay, placed here to see all the parts that need to be set the same
+ @include animation-delay(1s);
+ .goggles,
+ .arms,
+ .legs,
+ .motion_lines {
+ @include animation-delay(1s);
+ }
+
+ @include not_desktop() {
+ svg {
+ @include scale(1.4);
+ }
+ }
+ }
+
+ .molecule_yellow {
+ position: absolute;
+ left: 40%;
+ top: -100px;
+ z-index: 100;
+
+ @include animation(
+ yellow_drop_in 12s easing($ease-in-out-back) 4s both infinite
+ );
+
+ svg {
+ @include scale(1.8);
+ }
+
+ .left_arm {
+ @include transform-origin(15px 0px);
+ transform-box: fill-box;
+ @include animation(
+ arms_dangle 12s easing($ease-in-out-back) 4s both infinite
+ );
+ }
+
+ .right_arm {
+ @include transform-origin(0px 0px);
+ transform-box: fill-box;
+ @include animation(
+ arms_dangle_opposite 12s easing($ease-in-out) 4s both infinite
+ );
+ }
+
+ .blink {
+ ellipse {
+ @include animation-duration(9s);
+ @include animation-delay(-4s);
+ }
+ }
+ }
+
+ .molecule_blue {
+ svg {
+ @include scale(1.3);
+ }
+
+ .blink {
+ ellipse {
+ // @include animation-duration(6s);
+ @include animation-delay(-2s);
+ }
+ }
+
+ .molecule {
+ @include transform-origin(center -5px);
+ transform-box: fill-box;
+ @include animation(
+ floating 6s easing($ease-in-out-back) 0s both infinite
+ );
+ }
+
+ .legs {
+ @include transform-origin(center 0px);
+ transform-box: fill-box;
+ @include animation(
+ floating_opposite 6s easing($ease-in-out-back) 0s both infinite
+ );
+ // @include animation-delay(-0.25s);
+ }
+
+ .cape {
+ @include transform-origin(0px 0px);
+ transform-box: fill-box;
+ @include animation(
+ cape_flapping 4s easing($ease-in-out-sine) 0s both infinite
+ );
+ }
+ }
+
+ .eye {
+ @include translate(2px, 1.5px);
+
+ .sclera {
+ @include translate(-2px, -1.5px);
+ }
+
+ .pupil {
+ transform-box: fill-box;
+ transform: rotate(var(--deg));
+ }
+ }
+
+ .blink {
+ ellipse {
+ @include transform-origin(0px 0px);
+ transform-box: fill-box;
+ @include animation(blink 7s easing($ease-out-sine) 0s both infinite);
+ }
+ }
+
+ .moustache_left {
+ @include transform-origin(11px 2.5px);
+ transform-box: fill-box;
+ @include animation(moustache 4s easing($ease-in-out-back) 0s both infinite);
+ }
+
+ .moustache_right {
+ @include transform-origin(3px 2.5px);
+ transform-box: fill-box;
+ @include animation(
+ moustache 4s easing($ease-in-out-back) 0s both infinite alternate-reverse
+ );
+ }
+
+ .shadow {
+ fill: rgba(#888, 0.1);
+ }
+
+ .footer_container {
+ position: absolute;
+ //left: 20%;
+ right: 20%;
+ top: calc(#{$splash_position} + #{$padding});
+ z-index: 100;
+
+ display: flex;
+ align-items: flex-end;
+ gap: $padding * 0.5;
+
+ // height: $splash_footer_height;
+
+ @include not_desktop() {
+ left: $padding * 2;
+ right: $padding * 2;
+ }
+
+ .molecule_green {
+ flex-grow: 1;
+
+ margin: {
+ left: $padding * 2;
+ bottom: -2px; //offset because of svg shadow not lining up perfectly with orange shadows
+ }
+
+ @include transform-origin(25px 55px);
+ @include animation(green_tilt 9s easing($ease-in-out) 0s both infinite);
+
+ @include not_desktop() {
+ margin: {
+ left: 0px;
+ }
+ }
+
+ svg {
+ @include scale(1.3);
+ }
+
+ .blink {
+ ellipse {
+ @include animation-duration(6s);
+ @include animation-delay(-5s);
+ }
+ }
+
+ .molecule_body {
+ @include transform-origin(32px 15px);
+ transform-box: fill-box;
+ @include animation(jump 9s easing($ease-in-out) 0s both infinite);
+ }
+
+ .left_leg {
+ @include transform-origin(0px 0px);
+ transform-box: fill-box;
+ @include animation(
+ jump_legs 9s easing($ease-in-out-cubic) 0s both infinite
+ );
+ }
+
+ .right_leg {
+ @include transform-origin(0px 0px);
+ transform-box: fill-box;
+ @include animation(
+ jump_legs 9s easing($ease-in-out-cubic) 0.3s both infinite
+ );
+ }
+
+ .mouth {
+ @include transform-origin(2.5px 3px);
+ transform-box: fill-box;
+ @include animation(
+ open_mouth 9s easing($ease-in-out-cubic) -5s both infinite
+ );
+ }
+ }
+
+ .molecule_orange_light {
+ margin: {
+ right: 0px; //have hands overlap
+ }
+
+ svg {
+ @include scale(1.3);
+ }
+
+ .arms {
+ @include transform-origin(center 40%);
+ @include animation(raise_arms 6s easing($ease-in-out) 0s both infinite);
+ }
+
+ .arms_right {
+ @include transform-origin(center 40%);
+ @include animation(high_five 6s easing($ease-in-out) 0s both infinite);
+ }
+
+ .mouth {
+ @include transform-origin(2.5px 3px);
+ transform-box: fill-box;
+ @include animation(
+ open_mouth 6s easing($ease-in-out-cubic) -4s both infinite
+ );
+ }
+ }
+
+ .molecule_orange {
+ // @include animation(high_five 6s easing($ease-in-out) 0s both infinite);
+
+ svg {
+ @include scale(1.3);
+ }
+
+ .arms {
+ @include transform-origin(center 40%);
+ @include animation(high_five 6s easing($ease-in-out) 0s both infinite);
+ }
+
+ .mouth {
+ @include transform-origin(2.5px 3px);
+ transform-box: fill-box;
+ @include animation(
+ open_mouth 6s easing($ease-in-out-cubic) -4.4s both infinite
+ );
+ }
+
+ .blink {
+ ellipse {
+ @include animation-duration(9s);
+ @include animation-delay(-3s);
+ }
+ }
+ }
+ }
+}
+
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
new file mode 100644
index 00000000..b76daf47
--- /dev/null
+++ b/src/app/login/login.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('LoginComponent', () => {
+ let component: LoginComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/mini-game/mini-game.component.scss b/src/app/mini-game/mini-game.component.scss
new file mode 100644
index 00000000..ea67b1d2
--- /dev/null
+++ b/src/app/mini-game/mini-game.component.scss
@@ -0,0 +1,37 @@
+.color-playground {
+ margin: 100px;
+ display: flex;
+ justify-content: center;
+ gap: 100px;
+}
+
+.rainbow {
+ flex: none;
+ width: 500px;
+ $height: 200px;
+ position: relative;
+
+ .layer {
+ display: flex;
+ height: $height;
+
+ .step {
+ width: 1px;
+ }
+ }
+
+ .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+}
+
+.slider {
+ margin: 20px 0;
+}
+
+.result {
+ width: 200px;
+ height: 200px;
+}
diff --git a/src/app/mini-game/mini-game.component.spec.ts b/src/app/mini-game/mini-game.component.spec.ts
new file mode 100644
index 00000000..a7a0f044
--- /dev/null
+++ b/src/app/mini-game/mini-game.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MiniGameComponent } from './mini-game.component';
+
+describe('MiniGameComponent', () => {
+ let component: MiniGameComponent;
+ let fixture: ComponentFixture
+
+ Absorption Spectrum
+
+
+
+
+
+
+
+
+
+
+ Absorbed
+ +
+
+Perceived
+ +
+
diff --git a/src/app/molecule-detail/molecule-detail.component.scss b/src/app/molecule-detail/molecule-detail.component.scss
new file mode 100644
index 00000000..407c8df9
--- /dev/null
+++ b/src/app/molecule-detail/molecule-detail.component.scss
@@ -0,0 +1,72 @@
+:host {
+ .carousel {
+ position: relative;
+ width: 100%;
+ height: 244px;
+ overflow: hidden;
+
+ .carousel-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ transition: all 0.2s;
+
+ .carousel-item {
+ flex: none;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ background: white;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .blocks-view {
+ background: #f8f8f8;
+ }
+
+ .mol-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+ }
+
+ #left-button,
+ #right-button {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ cursor: pointer;
+ }
+
+ #left-button {
+ left: 6px;
+ }
+
+ #right-button {
+ right: 6px;
+ }
+ }
+
+ .tag {
+ margin: 8px 0;
+
+ .label {
+ font-family: "Inter", sans-serif;
+ font-weight: 600;
+ font-size: 12px;
+ color: #8e8e8e;
+ }
+
+ .value {
+ margin-top: 6px;
+ font-family: "Inter", sans-serif;
+ font-weight: 600;
+ font-size: 16px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+}
diff --git a/src/app/molecule-detail/molecule-detail.component.spec.ts b/src/app/molecule-detail/molecule-detail.component.spec.ts
new file mode 100644
index 00000000..512c74ae
--- /dev/null
+++ b/src/app/molecule-detail/molecule-detail.component.spec.ts
@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MoleculeDetailComponent } from './molecule-detail.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import * as colorWheelBlockSet from '../../assets/blocks/10x10x10palette/data.json';
+import { BlockSet, Coordinates, Molecule } from '../models';
+import {ChemicalPropertyPipe} from "../pipes/chemical-property.pipe";
+
+describe('MoleculeDetailComponent', () => {
+ let component: MoleculeDetailComponent;
+ let fixture: ComponentFixture
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/molecule-summary/molecule-summary.component.scss b/src/app/molecule-summary/molecule-summary.component.scss
new file mode 100644
index 00000000..65411012
--- /dev/null
+++ b/src/app/molecule-summary/molecule-summary.component.scss
@@ -0,0 +1,224 @@
+/**************** panel css ******************/
+
+@import "../styles/core";
+
+//**************** css ******************
+
+.icon_inline {
+ display: inline-block;
+
+ position: relative;
+ top: 2px;
+
+ width: 12px;
+ height: 12px;
+
+ margin: {
+ left: $padding * 0.2;
+ }
+
+ text: {
+ decoration: none;
+ }
+}
+
+.molecule {
+ padding: $padding * 0.5;
+
+ border: 1px solid color_variable("interface_border");
+
+ @include border-radius($interface_radius * 0.5);
+
+ & + .molecule {
+ margin: {
+ top: $padding * 0.5;
+ }
+ }
+}
+
+.molecule_content {
+ display: flex;
+ // flex-wrap: wrap;
+ align-items: stretch;
+ gap: $padding;
+
+ &.vertical {
+ flex-direction: column;
+ }
+
+ margin: {
+ top: $padding * 0.25;
+ }
+
+ .preview,
+ .info {
+ flex-shrink: 1;
+ flex-grow: 1;
+ flex-basis: 50%;
+ }
+
+ .button {
+ padding: ($padding * 0.5);
+
+ font: {
+ size: 0.75rem;
+ }
+ }
+}
+
+.preview {
+ position: relative;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ min: {
+ height: 5rem;
+ }
+
+ margin: {
+ // right: -($padding * .75);
+ // left: -($padding * .75);
+ }
+
+ background: {
+ color: color_variable("panel_preview_background");
+ }
+
+ @include border-radius($interface_radius * 0.5);
+
+ .icon_3d {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ position: absolute;
+ right: $padding;
+ bottom: $padding;
+ z-index: 100;
+
+ width: 30px;
+ height: 30px;
+
+ background: {
+ color: color_variable("panel_preview_icon");
+ }
+
+ pointer-events: none;
+
+ @include border-radius(50%);
+
+ svg {
+ width: 50%;
+ height: 50%;
+ }
+ }
+}
+
+.label {
+ flex-grow: 1;
+
+ color: #31509E;
+
+ font: {
+ weight: bold;
+ }
+
+ .placeholder {
+ color: color_variable("panel_text_faded");
+ }
+}
+
+inplace {
+ margin: {
+ top: $padding * 0.25;
+ }
+ padding: $padding 0px;
+
+ .display_block {
+ @include border-radius($border_radius);
+ }
+
+
+ .icon_inline {
+ top: 0px;
+ }
+
+ ::ng-deep .content_block {
+ button {
+ height: 2rem;
+
+ background: {
+ color: color_variable("interface_faded");
+ }
+
+ @include border-left-radius(0px);
+ @include box-sizing(border-box);
+
+ &:hover {
+ color: color_variable("background");
+ background: {
+ color: color_variable("button_hover");
+ }
+ }
+ }
+ }
+
+ input {
+ width: 100%;
+ height: 2rem;
+
+ margin: 0px;
+ padding: ($padding * 0.25) ($padding * 0.5);
+
+ font: {
+ family: $font_family;
+ }
+
+ border: 1px solid color_variable("interface_border");
+
+ @include border-left-radius($border_radius);
+ @include box-sizing(border-box);
+ }
+}
+
+.info {
+ .label {
+ color: color_variable("text_faded");
+
+ font: {
+ size: 0.65rem;
+ }
+ }
+
+ .value {
+ font: {
+ weight: bold;
+ }
+ }
+}
+
+:host ::ng-deep .button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: $padding * 0.2;
+
+ background: none;
+
+ margin: {
+ top: $padding;
+ }
+ padding: ($padding * 0.75);
+
+ border: 0px;
+
+ text: {
+ align: initial;
+ }
+
+ @include box-sizing(border-box);
+ @include border-radius($interface_radius * 0.5);
+}
+
diff --git a/src/app/molecule-summary/molecule-summary.component.spec.ts b/src/app/molecule-summary/molecule-summary.component.spec.ts
new file mode 100644
index 00000000..a24b7258
--- /dev/null
+++ b/src/app/molecule-summary/molecule-summary.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MoleculeSummaryComponent } from './molecule-summary.component';
+import { Coordinates, Molecule } from '../models';
+
+describe('MoleculeSummaryComponent', () => {
+ let component: MoleculeSummaryComponent;
+ let fixture: ComponentFixture
+
+
+
+ {{ molecule.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ blockSet.labelProperty.label }}
+
+
+
+
+ {{ blockSet.primaryProperty.label }}
+
+ 
- 
- 
-