From b3a4e8ca4f888c34fb651fca98bc12b00e5520a5 Mon Sep 17 00:00:00 2001 From: Is Isilon Date: Wed, 24 Feb 2016 10:45:27 +0800 Subject: [PATCH] Better observations table --- bootstrap-config.json | 429 ---------------------- bower.json | 49 +-- css/style.css | 20 +- css/ui-grid.css | 775 ++++++++++++++++++++++++++++++++++++++++ index.html | 41 +-- js/app.js | 24 +- js/detector/detector.js | 34 +- js/game.js | 4 +- js/gameobjects.js | 126 +++++-- 9 files changed, 961 insertions(+), 541 deletions(-) delete mode 100755 bootstrap-config.json create mode 100644 css/ui-grid.css diff --git a/bootstrap-config.json b/bootstrap-config.json deleted file mode 100755 index aa00bce..0000000 --- a/bootstrap-config.json +++ /dev/null @@ -1,429 +0,0 @@ -{ - "vars": { - "@gray-base": "#000", - "@gray-darker": "lighten(@gray-base, 13.5%)", - "@gray-dark": "lighten(@gray-base, 20%)", - "@gray": "lighten(@gray-base, 33.5%)", - "@gray-light": "lighten(@gray-base, 46.7%)", - "@gray-lighter": "lighten(@gray-base, 93.5%)", - "@brand-primary": "darken(#428bca, 6.5%)", - "@brand-success": "#5cb85c", - "@brand-info": "#5bc0de", - "@brand-warning": "#f0ad4e", - "@brand-danger": "#d9534f", - "@body-bg": "#fff", - "@text-color": "@gray-dark", - "@link-color": "@brand-primary", - "@link-hover-color": "darken(@link-color, 15%)", - "@link-hover-decoration": "underline", - "@font-family-sans-serif": "\"Helvetica Neue\", Helvetica, Arial, sans-serif", - "@font-family-serif": "Georgia, \"Times New Roman\", Times, serif", - "@font-family-monospace": "Menlo, Monaco, Consolas, \"Courier New\", monospace", - "@font-family-base": "@font-family-sans-serif", - "@font-size-base": "14px", - "@font-size-large": "ceil((@font-size-base * 1.25))", - "@font-size-small": "ceil((@font-size-base * 0.85))", - "@font-size-h1": "floor((@font-size-base * 2.6))", - "@font-size-h2": "floor((@font-size-base * 2.15))", - "@font-size-h3": "ceil((@font-size-base * 1.7))", - "@font-size-h4": "ceil((@font-size-base * 1.25))", - "@font-size-h5": "@font-size-base", - "@font-size-h6": "ceil((@font-size-base * 0.85))", - "@line-height-base": "1.428571429", - "@line-height-computed": "floor((@font-size-base * @line-height-base))", - "@headings-font-family": "inherit", - "@headings-font-weight": "500", - "@headings-line-height": "1.1", - "@headings-color": "inherit", - "@icon-font-path": "\"../fonts/\"", - "@icon-font-name": "\"glyphicons-halflings-regular\"", - "@icon-font-svg-id": "\"glyphicons_halflingsregular\"", - "@padding-base-vertical": "6px", - "@padding-base-horizontal": "12px", - "@padding-large-vertical": "10px", - "@padding-large-horizontal": "16px", - "@padding-small-vertical": "5px", - "@padding-small-horizontal": "10px", - "@padding-xs-vertical": "1px", - "@padding-xs-horizontal": "5px", - "@line-height-large": "1.33", - "@line-height-small": "1.5", - "@border-radius-base": "4px", - "@border-radius-large": "6px", - "@border-radius-small": "3px", - "@component-active-color": "#fff", - "@component-active-bg": "@brand-primary", - "@caret-width-base": "4px", - "@caret-width-large": "5px", - "@table-cell-padding": "8px", - "@table-condensed-cell-padding": "5px", - "@table-bg": "transparent", - "@table-bg-accent": "#f9f9f9", - "@table-bg-hover": "#f5f5f5", - "@table-bg-active": "@table-bg-hover", - "@table-border-color": "#ddd", - "@btn-font-weight": "normal", - "@btn-default-color": "#333", - "@btn-default-bg": "#fff", - "@btn-default-border": "#ccc", - "@btn-primary-color": "#fff", - "@btn-primary-bg": "@brand-primary", - "@btn-primary-border": "darken(@btn-primary-bg, 5%)", - "@btn-success-color": "#fff", - "@btn-success-bg": "@brand-success", - "@btn-success-border": "darken(@btn-success-bg, 5%)", - "@btn-info-color": "#fff", - "@btn-info-bg": "@brand-info", - "@btn-info-border": "darken(@btn-info-bg, 5%)", - "@btn-warning-color": "#fff", - "@btn-warning-bg": "@brand-warning", - "@btn-warning-border": "darken(@btn-warning-bg, 5%)", - "@btn-danger-color": "#fff", - "@btn-danger-bg": "@brand-danger", - "@btn-danger-border": "darken(@btn-danger-bg, 5%)", - "@btn-link-disabled-color": "@gray-light", - "@input-bg": "#fff", - "@input-bg-disabled": "@gray-lighter", - "@input-color": "@gray", - "@input-border": "#ccc", - "@input-border-radius": "@border-radius-base", - "@input-border-radius-large": "@border-radius-large", - "@input-border-radius-small": "@border-radius-small", - "@input-border-focus": "#66afe9", - "@input-color-placeholder": "#999", - "@input-height-base": "(@line-height-computed + (@padding-base-vertical * 2) + 2)", - "@input-height-large": "(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)", - "@input-height-small": "(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)", - "@legend-color": "@gray-dark", - "@legend-border-color": "#e5e5e5", - "@input-group-addon-bg": "@gray-lighter", - "@input-group-addon-border-color": "@input-border", - "@cursor-disabled": "not-allowed", - "@dropdown-bg": "#fff", - "@dropdown-border": "rgba(0,0,0,.15)", - "@dropdown-fallback-border": "#ccc", - "@dropdown-divider-bg": "#e5e5e5", - "@dropdown-link-color": "@gray-dark", - "@dropdown-link-hover-color": "darken(@gray-dark, 5%)", - "@dropdown-link-hover-bg": "#f5f5f5", - "@dropdown-link-active-color": "@component-active-color", - "@dropdown-link-active-bg": "@component-active-bg", - "@dropdown-link-disabled-color": "@gray-light", - "@dropdown-header-color": "@gray-light", - "@dropdown-caret-color": "#000", - "@screen-xs": "480px", - "@screen-xs-min": "@screen-xs", - "@screen-phone": "@screen-xs-min", - "@screen-sm": "768px", - "@screen-sm-min": "@screen-sm", - "@screen-tablet": "@screen-sm-min", - "@screen-md": "992px", - "@screen-md-min": "@screen-md", - "@screen-desktop": "@screen-md-min", - "@screen-lg": "1200px", - "@screen-lg-min": "@screen-lg", - "@screen-lg-desktop": "@screen-lg-min", - "@screen-xs-max": "(@screen-sm-min - 1)", - "@screen-sm-max": "(@screen-md-min - 1)", - "@screen-md-max": "(@screen-lg-min - 1)", - "@grid-columns": "12", - "@grid-gutter-width": "30px", - "@grid-float-breakpoint": "@screen-sm-min", - "@grid-float-breakpoint-max": "(@grid-float-breakpoint - 1)", - "@container-tablet": "(720px + @grid-gutter-width)", - "@container-sm": "@container-tablet", - "@container-desktop": "(940px + @grid-gutter-width)", - "@container-md": "@container-desktop", - "@container-large-desktop": "(1140px + @grid-gutter-width)", - "@container-lg": "@container-large-desktop", - "@navbar-height": "40px", - "@navbar-margin-bottom": "@line-height-computed", - "@navbar-border-radius": "@border-radius-base", - "@navbar-padding-horizontal": "floor((@grid-gutter-width / 2))", - "@navbar-padding-vertical": "((@navbar-height - @line-height-computed) / 2)", - "@navbar-collapse-max-height": "340px", - "@navbar-default-color": "#777", - "@navbar-default-bg": "#f8f8f8", - "@navbar-default-border": "darken(@navbar-default-bg, 6.5%)", - "@navbar-default-link-color": "#777", - "@navbar-default-link-hover-color": "#333", - "@navbar-default-link-hover-bg": "transparent", - "@navbar-default-link-active-color": "#555", - "@navbar-default-link-active-bg": "darken(@navbar-default-bg, 6.5%)", - "@navbar-default-link-disabled-color": "#ccc", - "@navbar-default-link-disabled-bg": "transparent", - "@navbar-default-brand-color": "@navbar-default-link-color", - "@navbar-default-brand-hover-color": "darken(@navbar-default-brand-color, 10%)", - "@navbar-default-brand-hover-bg": "transparent", - "@navbar-default-toggle-hover-bg": "#ddd", - "@navbar-default-toggle-icon-bar-bg": "#888", - "@navbar-default-toggle-border-color": "#ddd", - "@navbar-inverse-color": "lighten(@gray-light, 15%)", - "@navbar-inverse-bg": "#222", - "@navbar-inverse-border": "darken(@navbar-inverse-bg, 10%)", - "@navbar-inverse-link-color": "lighten(@gray-light, 15%)", - "@navbar-inverse-link-hover-color": "#fff", - "@navbar-inverse-link-hover-bg": "transparent", - "@navbar-inverse-link-active-color": "@navbar-inverse-link-hover-color", - "@navbar-inverse-link-active-bg": "darken(@navbar-inverse-bg, 10%)", - "@navbar-inverse-link-disabled-color": "#444", - "@navbar-inverse-link-disabled-bg": "transparent", - "@navbar-inverse-brand-color": "@navbar-inverse-link-color", - "@navbar-inverse-brand-hover-color": "#fff", - "@navbar-inverse-brand-hover-bg": "transparent", - "@navbar-inverse-toggle-hover-bg": "#333", - "@navbar-inverse-toggle-icon-bar-bg": "#fff", - "@navbar-inverse-toggle-border-color": "#333", - "@nav-link-padding": "10px 15px", - "@nav-link-hover-bg": "@gray-lighter", - "@nav-disabled-link-color": "@gray-light", - "@nav-disabled-link-hover-color": "@gray-light", - "@nav-tabs-border-color": "#ddd", - "@nav-tabs-link-hover-border-color": "@gray-lighter", - "@nav-tabs-active-link-hover-bg": "@body-bg", - "@nav-tabs-active-link-hover-color": "@gray", - "@nav-tabs-active-link-hover-border-color": "#ddd", - "@nav-tabs-justified-link-border-color": "#ddd", - "@nav-tabs-justified-active-link-border-color": "@body-bg", - "@nav-pills-border-radius": "@border-radius-base", - "@nav-pills-active-link-hover-bg": "@component-active-bg", - "@nav-pills-active-link-hover-color": "@component-active-color", - "@pagination-color": "@link-color", - "@pagination-bg": "#fff", - "@pagination-border": "#ddd", - "@pagination-hover-color": "@link-hover-color", - "@pagination-hover-bg": "@gray-lighter", - "@pagination-hover-border": "#ddd", - "@pagination-active-color": "#fff", - "@pagination-active-bg": "@brand-primary", - "@pagination-active-border": "@brand-primary", - "@pagination-disabled-color": "@gray-light", - "@pagination-disabled-bg": "#fff", - "@pagination-disabled-border": "#ddd", - "@pager-bg": "@pagination-bg", - "@pager-border": "@pagination-border", - "@pager-border-radius": "15px", - "@pager-hover-bg": "@pagination-hover-bg", - "@pager-active-bg": "@pagination-active-bg", - "@pager-active-color": "@pagination-active-color", - "@pager-disabled-color": "@pagination-disabled-color", - "@jumbotron-padding": "30px", - "@jumbotron-color": "inherit", - "@jumbotron-bg": "@gray-lighter", - "@jumbotron-heading-color": "inherit", - "@jumbotron-font-size": "ceil((@font-size-base * 1.5))", - "@state-success-text": "#3c763d", - "@state-success-bg": "#dff0d8", - "@state-success-border": "darken(spin(@state-success-bg, -10), 5%)", - "@state-info-text": "#31708f", - "@state-info-bg": "#d9edf7", - "@state-info-border": "darken(spin(@state-info-bg, -10), 7%)", - "@state-warning-text": "#8a6d3b", - "@state-warning-bg": "#fcf8e3", - "@state-warning-border": "darken(spin(@state-warning-bg, -10), 5%)", - "@state-danger-text": "#a94442", - "@state-danger-bg": "#f2dede", - "@state-danger-border": "darken(spin(@state-danger-bg, -10), 5%)", - "@tooltip-max-width": "200px", - "@tooltip-color": "#fff", - "@tooltip-bg": "#000", - "@tooltip-opacity": ".9", - "@tooltip-arrow-width": "5px", - "@tooltip-arrow-color": "@tooltip-bg", - "@popover-bg": "#fff", - "@popover-max-width": "276px", - "@popover-border-color": "rgba(0,0,0,.2)", - "@popover-fallback-border-color": "#ccc", - "@popover-title-bg": "darken(@popover-bg, 3%)", - "@popover-arrow-width": "10px", - "@popover-arrow-color": "@popover-bg", - "@popover-arrow-outer-width": "(@popover-arrow-width + 1)", - "@popover-arrow-outer-color": "fadein(@popover-border-color, 5%)", - "@popover-arrow-outer-fallback-color": "darken(@popover-fallback-border-color, 20%)", - "@label-default-bg": "@gray-light", - "@label-primary-bg": "@brand-primary", - "@label-success-bg": "@brand-success", - "@label-info-bg": "@brand-info", - "@label-warning-bg": "@brand-warning", - "@label-danger-bg": "@brand-danger", - "@label-color": "#fff", - "@label-link-hover-color": "#fff", - "@modal-inner-padding": "15px", - "@modal-title-padding": "15px", - "@modal-title-line-height": "@line-height-base", - "@modal-content-bg": "#fff", - "@modal-content-border-color": "rgba(0,0,0,.2)", - "@modal-content-fallback-border-color": "#999", - "@modal-backdrop-bg": "#000", - "@modal-backdrop-opacity": ".5", - "@modal-header-border-color": "#e5e5e5", - "@modal-footer-border-color": "@modal-header-border-color", - "@modal-lg": "900px", - "@modal-md": "600px", - "@modal-sm": "300px", - "@alert-padding": "15px", - "@alert-border-radius": "@border-radius-base", - "@alert-link-font-weight": "bold", - "@alert-success-bg": "@state-success-bg", - "@alert-success-text": "@state-success-text", - "@alert-success-border": "@state-success-border", - "@alert-info-bg": "@state-info-bg", - "@alert-info-text": "@state-info-text", - "@alert-info-border": "@state-info-border", - "@alert-warning-bg": "@state-warning-bg", - "@alert-warning-text": "@state-warning-text", - "@alert-warning-border": "@state-warning-border", - "@alert-danger-bg": "@state-danger-bg", - "@alert-danger-text": "@state-danger-text", - "@alert-danger-border": "@state-danger-border", - "@progress-bg": "#f5f5f5", - "@progress-bar-color": "#fff", - "@progress-border-radius": "@border-radius-base", - "@progress-bar-bg": "@brand-primary", - "@progress-bar-success-bg": "@brand-success", - "@progress-bar-warning-bg": "@brand-warning", - "@progress-bar-danger-bg": "@brand-danger", - "@progress-bar-info-bg": "@brand-info", - "@list-group-bg": "#fff", - "@list-group-border": "#ddd", - "@list-group-border-radius": "@border-radius-base", - "@list-group-hover-bg": "#f5f5f5", - "@list-group-active-color": "@component-active-color", - "@list-group-active-bg": "@component-active-bg", - "@list-group-active-border": "@list-group-active-bg", - "@list-group-active-text-color": "lighten(@list-group-active-bg, 40%)", - "@list-group-disabled-color": "@gray-light", - "@list-group-disabled-bg": "@gray-lighter", - "@list-group-disabled-text-color": "@list-group-disabled-color", - "@list-group-link-color": "#555", - "@list-group-link-hover-color": "@list-group-link-color", - "@list-group-link-heading-color": "#333", - "@panel-bg": "#fff", - "@panel-body-padding": "15px", - "@panel-heading-padding": "10px 15px", - "@panel-footer-padding": "@panel-heading-padding", - "@panel-border-radius": "@border-radius-base", - "@panel-inner-border": "#ddd", - "@panel-footer-bg": "#f5f5f5", - "@panel-default-text": "@gray-dark", - "@panel-default-border": "#ddd", - "@panel-default-heading-bg": "#f5f5f5", - "@panel-primary-text": "#fff", - "@panel-primary-border": "@brand-primary", - "@panel-primary-heading-bg": "@brand-primary", - "@panel-success-text": "@state-success-text", - "@panel-success-border": "@state-success-border", - "@panel-success-heading-bg": "@state-success-bg", - "@panel-info-text": "@state-info-text", - "@panel-info-border": "@state-info-border", - "@panel-info-heading-bg": "@state-info-bg", - "@panel-warning-text": "@state-warning-text", - "@panel-warning-border": "@state-warning-border", - "@panel-warning-heading-bg": "@state-warning-bg", - "@panel-danger-text": "@state-danger-text", - "@panel-danger-border": "@state-danger-border", - "@panel-danger-heading-bg": "@state-danger-bg", - "@thumbnail-padding": "4px", - "@thumbnail-bg": "@body-bg", - "@thumbnail-border": "#ddd", - "@thumbnail-border-radius": "@border-radius-base", - "@thumbnail-caption-color": "@text-color", - "@thumbnail-caption-padding": "9px", - "@well-bg": "#f5f5f5", - "@well-border": "darken(@well-bg, 7%)", - "@badge-color": "#fff", - "@badge-link-hover-color": "#fff", - "@badge-bg": "@gray-light", - "@badge-active-color": "@link-color", - "@badge-active-bg": "#fff", - "@badge-font-weight": "bold", - "@badge-line-height": "1", - "@badge-border-radius": "10px", - "@breadcrumb-padding-vertical": "8px", - "@breadcrumb-padding-horizontal": "15px", - "@breadcrumb-bg": "#f5f5f5", - "@breadcrumb-color": "#ccc", - "@breadcrumb-active-color": "@gray-light", - "@breadcrumb-separator": "\"/\"", - "@carousel-text-shadow": "0 1px 2px rgba(0,0,0,.6)", - "@carousel-control-color": "#fff", - "@carousel-control-width": "15%", - "@carousel-control-opacity": ".5", - "@carousel-control-font-size": "20px", - "@carousel-indicator-active-bg": "#fff", - "@carousel-indicator-border-color": "#fff", - "@carousel-caption-color": "#fff", - "@close-font-weight": "bold", - "@close-color": "#000", - "@close-text-shadow": "0 1px 0 #fff", - "@code-color": "#c7254e", - "@code-bg": "#f9f2f4", - "@kbd-color": "#fff", - "@kbd-bg": "#333", - "@pre-bg": "#f5f5f5", - "@pre-color": "@gray-dark", - "@pre-border-color": "#ccc", - "@pre-scrollable-max-height": "340px", - "@component-offset-horizontal": "180px", - "@text-muted": "@gray-light", - "@abbr-border-color": "@gray-light", - "@headings-small-color": "@gray-light", - "@blockquote-small-color": "@gray-light", - "@blockquote-font-size": "(@font-size-base * 1.25)", - "@blockquote-border-color": "@gray-lighter", - "@page-header-border-color": "@gray-lighter", - "@dl-horizontal-offset": "@component-offset-horizontal", - "@hr-border": "@gray-lighter" - }, - "css": [ - "print.less", - "type.less", - "code.less", - "grid.less", - "tables.less", - "forms.less", - "buttons.less", - "responsive-utilities.less", - "glyphicons.less", - "button-groups.less", - "input-groups.less", - "navs.less", - "navbar.less", - "breadcrumbs.less", - "pagination.less", - "pager.less", - "labels.less", - "badges.less", - "jumbotron.less", - "thumbnails.less", - "alerts.less", - "progress-bars.less", - "media.less", - "list-group.less", - "panels.less", - "responsive-embed.less", - "wells.less", - "close.less", - "component-animations.less", - "dropdowns.less", - "tooltip.less", - "popovers.less", - "modals.less", - "carousel.less" - ], - "js": [ - "alert.js", - "button.js", - "carousel.js", - "dropdown.js", - "modal.js", - "tooltip.js", - "popover.js", - "tab.js", - "affix.js", - "collapse.js", - "scrollspy.js", - "transition.js" - ], - "customizerUrl": "http://getbootstrap.com/customize/?id=2d6eb27d6ee57636c362" -} \ No newline at end of file diff --git a/bower.json b/bower.json index dc5258a..56518bc 100644 --- a/bower.json +++ b/bower.json @@ -1,26 +1,27 @@ { - "name": "sciencealchemy", - "description": "Science Alchemy", - "main": "js/app.js", - "moduleType": [], - "license": "MIT", - "homepage": "", - "private": true, - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ], - "dependencies": { - "angular": "1.4.x", - "angular-mocks": "1.4.x", - "jquery": "~2.1.1", - "bootstrap": "~3.1.1", - "angular-route": "1.4.x", - "angular-resource": "1.4.x", - "angular-animate": "1.4.x", - "angular-dragdrop": "~1.0.13" - } + "name": "sciencealchemy", + "description": "Science Alchemy", + "main": "js/app.js", + "moduleType": [], + "license": "MIT", + "homepage": "", + "private": true, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "angular": "1.4.x", + "angular-mocks": "1.4.x", + "jquery": "~2.1.1", + "bootstrap": "~3.1.1", + "angular-route": "1.4.x", + "angular-resource": "1.4.x", + "angular-animate": "1.4.x", + "angular-dragdrop": "~1.0.13", + "lodash": "~4.5.1" + } } diff --git a/css/style.css b/css/style.css index 662d5ea..798a6de 100644 --- a/css/style.css +++ b/css/style.css @@ -373,4 +373,22 @@ h1 br { .Paired .q11-12{color:rgb(177,89,40)} -/* data tables */ +/* ui grid */ +.observations-grid { + width:100%; + height:100%; + min-height: 500px; +} +.large.obervations-panel-body{ + padding:0px; +} +.ui-grid-cell-contents.ui-grid-header-cell-primary-focus { + padding-top: 2px; + padding-bottom: 2px; +} +.ui-grid-filter-container { + padding-top: 2px; + padding-bottom: 2px; + padding-left: 5px; + padding-right: 5px; +} diff --git a/css/ui-grid.css b/css/ui-grid.css new file mode 100644 index 0000000..7da12b1 --- /dev/null +++ b/css/ui-grid.css @@ -0,0 +1,775 @@ +/** http://plnkr.co/edit/DG6heCZxT9HCDVPGu2cx?p=preview **/ + +.grid { + width: 500px; + height: 250px; +} + +.ui-grid-cell-contents{ + display: flex; + align-items: center; + font-family: 'Roboto', sans-serif; + line-height: 1.5; + font-family: "Roboto", sans-serif; + color: rgba(0, 0, 0, 0.87); +} +.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell { + background-color: #f2f2f2 !important; +} +.ui-grid-viewport{ + overflow: auto!important; +} +.ui-grid-icon-angle-down{ + display:none; +} + + + +/*! + * ui-grid - v3.0.0-RC.18-4a647b7 - 2015-02-09 + * Copyright (c) 2015 ; License: MIT + */ +.ui-grid-animate-spin { + -moz-animation: ui-grid-spin 2s infinite linear; + -o-animation: ui-grid-spin 2s infinite linear; + -webkit-animation: ui-grid-spin 2s infinite linear; + animation: ui-grid-spin 2s infinite linear; + display: inline-block; +} +@-moz-keyframes ui-grid-spin { + 0% { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-webkit-keyframes ui-grid-spin { + 0% { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-o-keyframes ui-grid-spin { + 0% { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-ms-keyframes ui-grid-spin { + 0% { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes ui-grid-spin { + 0% { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +.ui-grid-render-container { + position: inherit; + -webkit-border-top-right-radius: 0; + -webkit-border-bottom-right-radius: 0px; + -webkit-border-bottom-left-radius: 0px; + -webkit-border-top-left-radius: 0; + -moz-border-radius-topright: 0; + -moz-border-radius-bottomright: 0px; + -moz-border-radius-bottomleft: 0px; + -moz-border-radius-topleft: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; + border-top-left-radius: 0; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +.ui-grid-render-container:focus { + outline: none; +} +.ui-grid-viewport { + min-height: 20px; + position: relative; +} +.ui-grid-viewport :focus { + outline: none; +} +.ui-grid-canvas { + position: relative; + padding-top: 1px; +} +.ui-grid-row:nth-child(odd) .ui-grid-cell { + background-color: #ffffff; +} +.ui-grid-row:nth-child(even) .ui-grid-cell { + background-color: #ffffff; +} +.ui-grid-row:last-child .ui-grid-cell { + border-bottom-color: #d0d0d0; + border-bottom-style: solid; +} +.ui-grid-no-row-overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: 10%; + background: #ffffff; + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #ffffff)); + background: -ms-linear-gradient(bottom, #ffffff, #ffffff); + background: -moz-linear-gradient(center bottom, #ffffff 0%, #ffffff 100%); + background: -o-linear-gradient(#ffffff, #ffffff); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); + -webkit-border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0; + -moz-border-radius-topright: 0px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0; + border-top-right-radius: 0px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 0px solid #d0d0d0; + font-size: 2em; + text-align: center; +} +.ui-grid-no-row-overlay > * { + position: absolute; + display: table; + margin: auto 0; + width: 100%; + top: 0; + bottom: 0; + left: 0; + right: 0; + opacity: 0.66; +} +.ui-grid-cell { + overflow: hidden; + float: left; + background-color: inherit; + border-right: 0px solid; + border-color: #d0d0d0; + box-sizing: border-box; +} +.ui-grid-cell-contents { + padding: 5px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; + height: 100%; +} +.ui-grid-cell-contents-hidden { + visibility: hidden; + width: 0; + height: 0; + display: none; +} +.ui-grid-row-header-cell { + background-color: #F0F0EE !important; + border-bottom: solid 0px #d0d0d0; +} +.ui-grid-footer-panel-background { + background: #ffffff; + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #ffffff)); + background: -ms-linear-gradient(bottom, #ffffff, #ffffff); + background: -moz-linear-gradient(center bottom, #ffffff 0%, #ffffff 100%); + background: -o-linear-gradient(#ffffff, #ffffff); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); +} +.ui-grid-footer-panel { + position: relative; + border-bottom: 1px solid #d0d0d0; + border-top: 1px solid #d0d0d0; + overflow: hidden; + font-weight: bold; + background: #ffffff; + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #ffffff)); + background: -ms-linear-gradient(bottom, #ffffff, #ffffff); + background: -moz-linear-gradient(center bottom, #ffffff 0%, #ffffff 100%); + background: -o-linear-gradient(#ffffff, #ffffff); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); + -webkit-border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0px; + -moz-border-radius-topright: 0px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0px; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +.ui-grid-grid-footer { + float: left; + width: 100%; +} +.ui-grid-footer-viewport { + overflow: hidden; +} +.ui-grid-footer-canvas { + position: relative; +} +.ui-grid-footer-canvas:before, +.ui-grid-footer-canvas:after { + content: ""; + display: table; + line-height: 0; +} +.ui-grid-footer-canvas:after { + clear: both; +} +.ui-grid-footer-cell { + overflow: hidden; + float: left; + background-color: inherit; + border-right: 0px solid; + border-color: #d0d0d0; + box-sizing: border-box; +} +.ui-grid-footer-cell:last-child { + border-right: 0; +} +input[type="text"].ui-grid-filter-input { + padding: 0; + margin: 0; + border: 0; + width: 100%; + border: 0px solid #d0d0d0; + -webkit-border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0; + -moz-border-radius-topright: 0px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0; + border-top-right-radius: 0px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +input[type="text"].ui-grid-filter-input:hover { + border: 0px solid #d0d0d0; +} +.ui-grid-group-panel { + background: #ffffff; + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #ffffff)); + background: -ms-linear-gradient(bottom, #ffffff, #ffffff); + background: -moz-linear-gradient(center bottom, #ffffff 0%, #ffffff 100%); + background: -o-linear-gradient(#ffffff, #ffffff); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); + border-bottom: 1px solid #d0d0d0; + -webkit-border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0px; + -moz-border-radius-topright: 0px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0px; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + min-height: 30px; +} +.ui-grid-group-panel .hidden { + display: none; +} +.ui-grid-group-panel .description { + margin-top: 5px; + margin-left: 5px; +} +.ui-grid-group-list { + list-style-type: none; + margin: 0; + padding: 0; +} +.ui-grid { + border: 0px solid #d0d0d0; + box-sizing: content-box; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -o-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} +.ui-grid-vertical-bar { + position: absolute; + right: 0; + width: 0; +} +.ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar, +.ui-grid-cell:not(:last-child) .ui-grid-vertical-bar { + width: 0px; +} +.ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar { + background-color: #d0d0d0; +} +.ui-grid-cell:not(:last-child) .ui-grid-vertical-bar { + background-color: #d0d0d0; +} +.ui-grid-header-cell:last-child .ui-grid-vertical-bar { + right: -1px; + width: 0px; + background-color: #d0d0d0; +} +.ui-grid-clearfix:before, +.ui-grid-clearfix:after { + content: ""; + display: table; +} +.ui-grid-clearfix:after { + clear: both; +} +.ui-grid-invisible { + visibility: hidden; +} +.ui-grid-top-panel-background { + background: #ffffff; + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #ffffff)); + background: -ms-linear-gradient(bottom, #ffffff, #ffffff); + background: -moz-linear-gradient(center bottom, #ffffff 0%, #ffffff 100%); + background: -o-linear-gradient(#ffffff, #ffffff); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); +} +.ui-grid-header { + border-bottom: 1px solid #d0d0d0; + box-sizing: content-box; +} +.ui-grid-top-panel { + position: relative; + overflow: hidden; + font-weight: bold; + background: #ffffff; + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #ffffff)); + background: -ms-linear-gradient(bottom, #ffffff, #ffffff); + background: -moz-linear-gradient(center bottom, #ffffff 0%, #ffffff 100%); + background: -o-linear-gradient(#ffffff, #ffffff); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); + -webkit-border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0px; + -moz-border-radius-topright: 0px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0px; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +.ui-grid-header-viewport { + overflow: hidden; +} +.ui-grid-header-canvas { + position: relative; +} +.ui-grid-header-canvas:before, +.ui-grid-header-canvas:after { + content: ""; + display: table; + line-height: 0; +} +.ui-grid-header-canvas:after { + clear: both; +} +.ui-grid-header-cell { + position: relative; + box-sizing: border-box; + float: left; + top: 0; + bottom: 0; + background-color: inherit; + border-right: 0px solid; + border-color: #d0d0d0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 0; +} +.ui-grid-header-cell .sortable { + cursor: pointer; +} +.ui-grid-header .ui-grid-vertical-bar { + top: 0; + bottom: 0; +} +.ui-grid-column-menu-button { + position: absolute; + right: 0px; + top: 0; +} +.ui-grid-column-menu-button .ui-grid-icon-angle-down { + vertical-align: sub; +} +.ui-grid-column-menu-button-last-col { + margin-right: 25px; +} +.ui-grid-column-menu { + position: absolute; +} +/* Slide up/down animations */ +.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-add, +.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove { + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + transition: all 0.05s linear; + display: block !important; +} +.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-add.ng-hide-add-active, +.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -o-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); +} +.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-add, +.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); +} +/* Slide up/down animations */ +.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-add, +.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove { + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + transition: all 0.05s linear; + display: block !important; +} +.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-add.ng-hide-add-active, +.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -o-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); +} +.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-add, +.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove.ng-hide-remove-active { + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); +} +.ui-grid-filter-container { + padding: 4px 10px; + position: relative; +} +.ui-grid-filter-container .ui-grid-filter-button { + position: absolute; + top: 0; + bottom: 0; + right: 0; +} +.ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"] { + position: absolute; + top: 50%; + line-height: 32px; + margin-top: -16px; + right: 10px; + opacity: 0.66; +} +.ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"]:hover { + opacity: 1; +} +input[type="text"].ui-grid-filter-input { + padding: 0; + margin: 0; + border: 0; + width: 100%; + border: 0px solid #d0d0d0; + -webkit-border-top-right-radius: 0px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 0; + -moz-border-radius-topright: 0px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 0; + border-top-right-radius: 0px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +input[type="text"].ui-grid-filter-input:hover { + border: 0px solid #d0d0d0; +} +@font-face { + font-family: 'ui-grid'; + src: url('ui-grid.eot'); + src: url('ui-grid.eot#iefix') format('embedded-opentype'), url('ui-grid.woff') format('woff'), url('ui-grid.ttf?') format('truetype'), url('ui-grid.svg?#ui-grid') format('svg'); + font-weight: normal; + font-style: normal; +} +/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ +/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ +/* +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: 'ui-grid'; + src: url('../font/ui-grid.svg?12312827#ui-grid') format('svg'); + } +} +*/ +[class^="ui-grid-icon"]:before, +[class*=" ui-grid-icon"]:before { + font-family: "ui-grid"; + font-style: normal; + font-weight: normal; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + /* opacity: .8; */ + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} +.ui-grid-icon-blank::before { + width: 1em; + content: ' '; +} +.ui-grid-menu-button { + z-index: 2; + position: absolute; + right: 0; + background: #ffffff; + border: 0px solid #d0d0d0; + cursor: pointer; + min-height: 27px; + font-weight: normal; +} +.ui-grid-menu-button .ui-grid-icon-container { + margin-top: 3px; +} +.ui-grid-menu-button .ui-grid-menu { + right: 0; +} +.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid { + overflow-y: scroll; + max-height: 300px; + border: 0px solid #d0d0d0; +} +.ui-grid-menu { + z-index: 2; + position: absolute; + overflow: hidden; + padding: 0 10px 20px 10px; + cursor: pointer; + box-sizing: content-box; +} +.ui-grid-menu .ui-grid-menu-inner { + background: #ffffff; + border: 0px solid #d0d0d0; + position: relative; + white-space: nowrap; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2); +} +.ui-grid-menu .ui-grid-menu-inner ul { + margin: 0; + padding: 0; + list-style-type: none; +} +.ui-grid-menu .ui-grid-menu-inner ul li { + padding: 8px; + cursor: pointer; +} +.ui-grid-menu .ui-grid-menu-inner ul li:hover { + -webkit-box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); +} +.ui-grid-menu .ui-grid-menu-inner ul li.ui-grid-menu-item-active { + -webkit-box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); + background-color: #cecece; +} +.ui-grid-menu .ui-grid-menu-inner ul li:not(:last-child) { + border-bottom: 0px solid #d0d0d0; +} +.ui-grid[dir=rtl] .ui-grid-header-cell, +.ui-grid[dir=rtl] .ui-grid-footer-cell, +.ui-grid[dir=rtl] .ui-grid-cell { + float: right !important; +} +.ui-grid[dir=rtl] .ui-grid-column-menu-button { + position: absolute; + left: 1px; + top: 0; + right: inherit; +} +.ui-grid[dir=rtl] .ui-grid-cell:first-child, +.ui-grid[dir=rtl] .ui-grid-header-cell:first-child, +.ui-grid[dir=rtl] .ui-grid-footer-cell:first-child { + border-right: 0; +} +.ui-grid[dir=rtl] .ui-grid-cell:last-child, +.ui-grid[dir=rtl] .ui-grid-header-cell:last-child { + border-left: 0px solid; + border-color: #d0d0d0; +} +.ui-grid[dir=rtl] .ui-grid-header-cell:first-child .ui-grid-vertical-bar, +.ui-grid[dir=rtl] .ui-grid-footer-cell:first-child .ui-grid-vertical-bar, +.ui-grid[dir=rtl] .ui-grid-cell:first-child .ui-grid-vertical-bar { + width: 0; +} +.ui-grid[dir=rtl] .ui-grid-menu-button { + z-index: 2; + position: absolute; + left: 0; + right: auto; + background: #ffffff; + border: 0px solid #d0d0d0; + cursor: pointer; + min-height: 27px; + font-weight: normal; +} +.ui-grid[dir=rtl] .ui-grid-menu-button .ui-grid-menu { + left: 0; + right: auto; +} +.ui-grid[dir=rtl] .ui-grid-filter-container .ui-grid-filter-button { + right: initial; + left: 0; +} +.ui-grid[dir=rtl] .ui-grid-filter-container .ui-grid-filter-button [class^="ui-grid-icon"] { + right: initial; + left: 10px; +} +.ui-grid-sortarrow { + right: 5px; + position: absolute; + width: 20px; + top: 0; + bottom: 0; + background-position: center; +} +.ui-grid-sortarrow.down { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +/*-- VARIABLES (DO NOT REMOVE THESE COMMENTS) --*/ +/** +* @section Grid styles +*/ +/** +* @section Header styles +*/ +/** @description Colors for header gradient */ +/** +* @section Grid body styles +*/ +/** @description Colors used for row alternation */ +/** +* @section Sort arrow colors +*/ +/** +* @section Scrollbar styles +*/ +/** +* @section font library path +*/ +/*-- END VARIABLES (DO NOT REMOVE THESE COMMENTS) --*/ diff --git a/index.html b/index.html index de5dc3e..ad45356 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,10 @@ - - - - + + + + @@ -94,7 +94,7 @@
Observations
-
+
- - - - - - - - - - - - - -
ReactantsResults
{{ o.inputs.join('') }}{{ o.results.join('') }}
+
@@ -352,21 +339,21 @@
- - + + - + - - + + - - + + diff --git a/js/app.js b/js/app.js index 33f76f0..7575cd4 100644 --- a/js/app.js +++ b/js/app.js @@ -17,7 +17,7 @@ var app = (function () { // var allObjects = game.allObjects; // var lastSaved; - var app = angular.module('scienceAlchemy', ['ngDragDrop', 'datatables']); + var app = angular.module('scienceAlchemy', ['ngDragDrop', 'ui.grid']); // directives @@ -28,10 +28,10 @@ var app = (function () { // var elements = Helpers.loadFile('json/elements.json'); // elements = elements.map( // function (r) { - // return new GameObjects.Element(r); + // return new GameObjects.ElementStore(r); // }); // // put in extended array with helper methods - // elementStore = new GameObjects.ElementStore(); + // elementStore = new GameObjects.ElementStores(); // elementStore.push.apply(elementStore,elements); // return elementStore; // }); @@ -93,7 +93,7 @@ var app = (function () { // store the dropped element var draggable = angular.element(ui.draggable); var key = draggable.data('element'); - if (!draggable.hasClass('element-icon')) { + if (!draggable.hasClass('element-store')) { var elementStore = vs.elements.get(key); var i = findIndexByHashKey(draggable.data('hashkey')); detector.elements.splice(i, 1); @@ -143,7 +143,7 @@ var app = (function () { game.lab.clickDetector(); detector.addEvent(); UI.showUpdateValue("#update-data", game.lab.state.detector); - game.elements.addToStore(); + game.elements.addKnownToStore(); return false; }; vm.toggleFlameFuel = function () { @@ -185,11 +185,17 @@ var app = (function () { app.controller('ObservationsController', ['$scope', 'game', function ($scope, game) { var vm = this; vm.observations = game.lab.state.observations; - vm.dtOptions = { - paginationType: 'full_numbers', - displayLength: 2 + vm.gridOptions = { + enableFiltering: true, + columnDefs: [ + { field: 'inputs', filter:{}, visible:true}, + { field: 'reactants', visible:false}, + { field: 'results', visible:true, sort: { direction: 'asc' }}, + { field: 'catalysts', visible:false}, + { field: 'conditions', visible:false}, + ], + data: vm.observations }; - }]); app.controller('UpgradesController', ['$scope', 'game', function ($scope, game) { diff --git a/js/detector/detector.js b/js/detector/detector.js index 10d9132..ca789db 100644 --- a/js/detector/detector.js +++ b/js/detector/detector.js @@ -23,7 +23,7 @@ var Detector = function(){ ctx: null }, - elements: new GameObjects.ElementStore(), + elements: new GameObjects.ElementStores(), visible: true, @@ -151,7 +151,7 @@ var Detector = function(){ // if the dragger came from the elements panels, clone it to here var newElement; - if ($draggable.hasClass('element-icon')){ + if ($draggable.hasClass('element-store')){ var elementStore = game.elements.filter(function(e){return e.key==$draggable.data('element');})[0]; elementStore.state.amount-=1; @@ -169,7 +169,7 @@ var Detector = function(){ var draggableLeft = $draggable.offset().left; var draggableWidth = $draggable.height(); var draggableRight = draggableLeft + draggableWidth; - var detectorDOMElems = angular.element('#detector').find('.element').not('.element-icon'); // replace with detector.elements + var detectorDOMElems = angular.element('#detector').find('.element').not('.element-store'); // replace with detector.elements var intersectingDOMElems = detectorDOMElems.filter( function() { var $elem = angular.element(this); var top = $elem.offset().top; @@ -197,7 +197,7 @@ var Detector = function(){ var observation = this.experiment({inputs:intersectingElements,location:$draggable.offset()},game); - console.log('droppables', intersectingElements.length, observation); + console.log('intersectingElements', intersectingElements.length, observation); return observation; @@ -211,7 +211,7 @@ var Detector = function(){ var result = game.rules[inputKeys]; if (result) { - this.reaction(result.reactants,result.results, game); + this.reaction(inputs,result.reactants,result.results, options.location, game); } else { result = { reactants: [], @@ -225,11 +225,13 @@ var Detector = function(){ }, /** Remove reactants and make results with animations **/ - reaction: function(reactants,results,game){ + reaction: function(inputs,reactants,results,location,game){ // remove reactants from detector for (var i = 0; i < reactants.length; i++) { - var ingredient = reactants[i]; + // get the uuid from inputs + var ingredient = inputs.filter(function(e){return e.key===reactants[i];})[0]; + this.elements.findIndexByHashKey(ingredient.uuid); } // TODO use angular effects to remove in puff of fade @@ -240,18 +242,24 @@ var Detector = function(){ // make sure it's discovered var elementStore = game.elements.get(resultKey); - elementStore.state.discovered=true; + if (!elementStore.state.discovered){ + // old discoveries are not interesting + game.elements.map(function(e){e.state.interesting=false;}); + // a new discovery is interesting + elementStore.state.interesting=true; + elementStore.state.discovered=true; + } // add new element to beaker - detector.elements.push(); - // var newElement = $('#elementContent').find('.'+resultKey).clone(); - // $('#detector').append(newElement); - newElement.offset($draggable.offset()); + var newElem = elementStore.spawn(); + newElem.state=location; + + this.elements.push(newElem); } // effects this.bubblr.bubble(); }, - } + }; }; diff --git a/js/game.js b/js/game.js index 07b53ac..979954e 100644 --- a/js/game.js +++ b/js/game.js @@ -43,7 +43,7 @@ var Game = (function (Helpers, GameObjects, ObjectStorage) { }; this.elements = this.elements.slice(0,20).map( function (r) { - return makeGameObject(GameObjects.Element, r); + return makeGameObject(GameObjects.ElementStore, r); }); this.workers = this.workers.map( function (w) { @@ -64,7 +64,7 @@ var Game = (function (Helpers, GameObjects, ObjectStorage) { } // put elements in extended array with utility methods - this.elementStore = new GameObjects.ElementStore(); + this.elementStore = new GameObjects.ElementStores(); this.elementStore.push.apply(this.elementStore, this.elements); this.elements = this.elementStore; diff --git a/js/gameobjects.js b/js/gameobjects.js index 647a651..1f7f04d 100644 --- a/js/gameobjects.js +++ b/js/gameobjects.js @@ -89,9 +89,16 @@ var GameObjects = (function () { /** * Takes in a rule/observation object and records observation in journal * with reactants, inputs, catalysts, conditions, results - ***/ + **/ Lab.prototype.observe = function (observation) { - this.state.observations.push(observation); + // join the arrays into strings for display + var obsText = {}; + for (var k in observation) { + if (observation.hasOwnProperty(k)) { + obsText[k] = observation[k].sort().join(''); + } + } + this.state.observations.push(obsText); }; @@ -104,35 +111,50 @@ var GameObjects = (function () { return false; }; - var ElementStore = function (obj) { - Array.apply(this, [obj]); + var ElementStores = function (obj) { + this.push.apply(this, obj); }; - ElementStore.prototype = Object.create(Array.prototype); + ElementStores.prototype = Object.create(Array.prototype); - ElementStore.prototype.constructor = ElementStore; + ElementStores.prototype.constructor = Array.constructor; + + ElementStores.prototype.pushAll = function (items) { + this.push.apply(this, items); + }; /** Add a random element or specify it's key **/ - ElementStore.prototype.addToStore = function (element) { - if (!element) this.get(element); + ElementStores.prototype.addToStore = function (element) { + if (element) this.get(element); if (!element) element = this.select(); return element.state.amount += 1; }; + /** Add a random discovered element or specify it's key **/ + ElementStores.prototype.addKnownToStore = function (element) { + var discovered = this.filter(function (e) { + return e.state.discovered; + }); + discovered = new GameObjects.ElementStores(discovered); + if (element) discovered.get(element); + if (!element) element = discovered.select(); + return element.state.amount += 1; + }; + /** Select random element from store **/ - ElementStore.prototype.select = function () { - var i = Math.floor((this.length - 1) * Math.random()); + ElementStores.prototype.select = function () { + var i = Math.round((this.length - 1) * Math.random()); return this[i]; }; - /** Get element by hashid **/ - ElementStore.prototype.get = function (key) { + /** Get element by key **/ + ElementStores.prototype.get = function (key) { return this.filter(function (e) { return e.key === key; })[0]; - } + }; /** Get element by hashid **/ - ElementStore.prototype.getByHashKey = function (hashKey) { + ElementStores.prototype.getByHashKey = function (hashKey) { if (hashKey === undefined) { console.warn('GetByHashKey given an undefined hashkey', hashKey) return; @@ -148,49 +170,68 @@ var GameObjects = (function () { console.warn('Got no results when filtering on hashKey', hashKey); return; } - } + }; - /** Get element by hashid **/ - ElementStore.prototype.findIndexByHashKey = function (hashKey) { - if (hashKey === undefined) { - console.warn('FindIndexByHashKey given an undefined hashkey', hashKey) - return; - } - return this.findIndex(function (e) { - return e.$$hashKey === hashKey; - })[0]; - } + /** filter by e.g. {uuid:'34hgyh454'} **/ + // ElementStores.prototype.filterBy = function (filter) { + // return this.filter(function (e) { + // var match = true; + // for (var k in filter) { + // if (filter.hasOwnProperty(k)) { + // match = match && (e[k] === filter[k]); + // }; + // } + // return match; + // }); + // }; + // + // /** Get indexes matching filter e.g. {uuid:'34hgyh454'} **/ + // ElementStores.prototype.findIndex = function (filter) { + // var self = this; + // return this.filterBy(function (e) { + // var match = true; + // for (var k in filter) { + // if (filter.hasOwnProperty(k)) { + // match = match && (e[k] === filter[k]); + // }; + // } + // return match; + // }) + // .map(function (e) { + // return self.indexOf(e); + // }); + // }; - /** @class Element + /** @class ElementStore */ - var Element = function (obj) { + var ElementStore = function (obj) { GameObject.apply(this, [obj]); this.state.amount = Math.round(Math.random() * 2); this.state.discovered = Math.random() < 0.1; this.state.interesting = Math.random() < 0.1; this.state.color = Math.round(Math.random() * 11); - this.uuid=this.guid(); + this.uuid = this.guid(); }; - Element.prototype = Object.create(GameObject.prototype); + ElementStore.prototype = Object.create(GameObject.prototype); - Element.prototype.constructor = Element; + ElementStore.prototype.constructor = ElementStore; - Element.prototype.isVisible = function (lab) { + ElementStore.prototype.isVisible = function (lab) { if (!lab) { return false; } return this.state.discovered; }; - Element.prototype.isAvailable = function (lab) { + ElementStore.prototype.isAvailable = function (lab) { if (!lab) { return false; } return this.state.amount > 0; }; - Element.prototype.research = function (lab) { + ElementStore.prototype.research = function (lab) { if (lab && lab.research(this.state.cost, this.state.reputation)) { this.state.level++; if (this.state.info_levels.length > 0 && @@ -205,7 +246,7 @@ var GameObjects = (function () { return -1; }; - Element.prototype.getInfo = function () { + ElementStore.prototype.getInfo = function () { if (!this._info) { this._info = Helpers.loadFile(this.info); } @@ -213,6 +254,19 @@ var GameObjects = (function () { return this._info; }; + /** Create a new element for the test tube from this ElementStore **/ + ElementStore.prototype.spawn = function () { + var element = angular.copy(this); + element.uuid = element.guid(); + element.state = undefined; + this.state.amount -= 1; + return element; + }; + + ElementStore.prototype.decreaseStore = function () { + return this.state.amount -= 1; + }; + /** @class Worker * Implement an auto-clicker in the game. */ @@ -352,10 +406,10 @@ var GameObjects = (function () { // Expose classes in module. return { Lab: Lab, - Element: Element, + ElementStore: ElementStore, Worker: Worker, Upgrade: Upgrade, Achievement: Achievement, - ElementStore: ElementStore + ElementStores: ElementStores }; }());