Oh,
Hi!
By: Abdallah Amr
Design: ReyDay
Overview:
Phenomenon Threat Scale (PTS for short) is a simple and elegant UI to show the general characteristics of a Phenomenon with large flexibility and customizability
How To Use:
[[include :backrooms-pantheon:component:pts
|number=ClassNumber
|class=ClassName
|aoe=AreaOfEffect
|frequency=Frequency
|duration=Duration
|intensity=Intensity
|dropdown=DropdownAnimation
|dropdownnum=DropdownNumber
|title-component=ComponentTitle
|title-class=ClassTitle
|title-sub=SubAttrubiteTitle
|title-one=1stDropdownTitle
|title-two=2ndDropdownTitle
|title-three=3rdDropdownTitle
|title-four=4thDropdownTitle
|value-four=4thDropdownValue
|theme-font=UseThemeFont
]]
| Name | Value | Optional | Description |
|---|---|---|---|
| ClassNumber | {$number} | The number or index of the class. Any 2 character combination should work sometimes even 3, as long as you don't use very wide characters. | |
| ClassName | {$class} | ✓* | The name of the class. If you have used a preset, filling this is will override the preset class name. *This is auto-filled and henceforth optional only if you use one of the presets mentioned below. |
| AreaOfEffect | {$aoe} | The type of object/entity/place this phenomenon affects. | |
| Frequency | {$frequency} | How frequent the phenomenon is. | |
| Duration | {$duration} | How long the phenomenon is. | |
| Intensity | {$intensity} | How intense/dangerous/hazardous the phenomenon is regarding a human or the entity it affects. | |
| DropdownAnimation | {$dropdown} | ✓ | Make this value "false" to disable the dropdowns completely. Overrides --pts-dropdown-hide-distance CSS property. |
| DropdownNumber | {$dropdownnum} | ✓ | Ranges between 0 and 4, represents the number of sub-attributes (dropdowns), value is (3) by default. |
| CompnoentTitle | {$title-component} | ✓ | Represents the title of the component in the diamond, (PTS:) by default. |
| ClassTitle | {$title-class} | ✓ | Represents the title before the class name, (Class:) by default. |
| SubAttributeTitle | {$title-sub} | ✓ | Represents the sub attribute under the class, (Area of Effect:) by default. |
| 1stDropdownTitle | {$title-one} | ✓ | Represents the title of the 1st dropdown from the left, (Frequency) by default. |
| 2ndDropdownTitle | {$title-two} | ✓ | Represents the title of the 2nd dropdown from the left, (Duration) by default. |
| 3rdDropdownTitle | {$title-three} | ✓ | Represents the title of the 3rd dropdown from the left, (Intensity) by default. |
| 4thDropdownTitle | {$title-four} | ✓* | Represents the title of the 4th dropdown from the left. *Only required and visible of you set {$dropdownnum} to 4. |
| 4thDropdownValue | {$value-four} | ✓* | Represents the value of the 4th dropdown from the left. *Only required and visible of you set {$dropdownnum} to 4. |
| UseThemeFont | {$theme-font} | ✓ | Make this value "a" to make the component use the current theme's font instead of Poppins. Overrides --pts-title-font and --pts-body-font CSS properties. |
Builtin Class Numbers:
Using these in {$number} will auto-fill the {$class} value for you. Also this is case sensitive.| V | E | M | P | ||
|---|---|---|---|---|---|
| 0 | 0 | 0 Variable | 0 Environmental | 0 Mental | 0 Physical |
| 1 | 1 | 1 Variable | 1 Environmental | 1 Mental | 1 Physical |
| 2 | 2 | 2 Variable | 2 Environmental | 2 Mental | 2 Physical |
| 3 | 3 | 3 Variable | 3 Environmental | 3 Mental | 3 Physical |
| 4 | 4 | 4 Variable | 4 Environmental | 4 Mental | 4 Physical |
| 5 | 5 | 5 Variable | 5 Environmental | 5 Mental | 5 Physical |
| UD | Undetermined | ||||
| PD | Pending | ||||
| NA | Not Applicable |
Syntax: Row index followed by vertical modifier; so 3E results in Class 3 Environmental, but E3 is unsupported by default
Examples:
Preset Class:
Custom Classes:
Use of Optional properties:
Theme Compatibility:
This component sources its color palette from the theme it is in, so it adapts based on the theme of the page with minimal css modifications (sometimes it doesn't need any at all!); here are some examples (using the Preset Class Example code):
Customization with CSS:
These are extra pieces of customization you can do with CSS, either by adding the code into a [[module css]] or by adding the code into the page's theme. Keep the [[module css]] outside of the [[include]] for this component, put it beneath it or at the top or bottom of the page.
Add this to your page/theme to edit all the colors:
[[module css]] .pts-container { /* font */ --pts-font: Poppins; /* the font of the component's text generally */ --pts-title-font: var(--pts-font); /* the font of the component's title texts (diamond, class name and dropdowns' titles) */ --pts-title-weight: 700; /* the font weight of the component's title texts (diamond, class name and dropdowns' titles) */ --pts-body-font: var(--pts-font); /* the font of the component's content texts (sub class and drpodwons' values) */ --pts-body-weight: 500; /* the font weight of the component's content texts (sub class and drpodwons' values) */ /* borders' color */ --pts-border: var(--gray-monochrome); /* the color of the component's borders */ /* text color */ --pts-text: var(--swatch-text-general); /* the color of the component's text generally; by default only applies to --pts-class-text and --pts-dropdown-text */ --pts-diamond-text: var(--swatch-text-secondary-color); /* the color of the component's diamond text */ --pts-class-text: var(--swatch-text-general); /* the color of the component's class text */ --pts-subtitle-text: var(-swatch-text-secondary-color); /* the color of the component's class sub-title text */ --pts-dropdown-text: var(--swatch-text-general); /* the color of the component dropdowns' text */ /* background colors */ --pts-background: var(--swatch-secondary-color); /* the color of the component's background generally; by default only applies to --pts-class-background and --pts-dropdown-background */ --pts-diamond-background: var(--swatch-primary-darker); /* the color of the component's diamond background */ --pts-class-background: var(--swatch-secondary-color); /* the color of the component's class background */ --pts-subtitle-background: var(--gray-monochrome); /* the color of the component's class sub-title background */ --pts-dropdown-background: var(--swatch-secondary-color); /* the color of the component dropdowns' background */ /* animations */ --pts-animation-speed: 2000ms; /* speed of the startup animation */ --pts-animation-easing: cubic-bezier(1,0,0,1); /* easing of the startup animation */ --pts-animation-delay: 0s; /* delay of the startup animation */ --pts-dropdown-speed: 300ms; /* speed of the dropdowns' animation */ --pts-dropdown-easing: ease-out; /* easing of the dropdowns' animation */ --pts-dropdown-hide-distance: -65%; /* distance of hidden dropdowns' height. Make this -2px to disable dropdowns. Setting the {$dropdown} value to false will override this varaible */ } [[/module]]