diff --git a/Gauge/src/Consolas.ttf b/Gauge/src/assets/fonts/Consolas.ttf similarity index 100% rename from Gauge/src/Consolas.ttf rename to Gauge/src/assets/fonts/Consolas.ttf diff --git a/Gauge/src/assets/img/compass.png b/Gauge/src/assets/img/compass.png new file mode 100644 index 0000000..600e82a Binary files /dev/null and b/Gauge/src/assets/img/compass.png differ diff --git a/Gauge/src/assets/img/wrench.png b/Gauge/src/assets/img/wrench.png new file mode 100644 index 0000000..5784ffa Binary files /dev/null and b/Gauge/src/assets/img/wrench.png differ diff --git a/Gauge/src/components/controls/controls.scss b/Gauge/src/components/controls/controls.scss new file mode 100644 index 0000000..0c1134a --- /dev/null +++ b/Gauge/src/components/controls/controls.scss @@ -0,0 +1,30 @@ +#KH_CTRL { + height: 80px; + display: flex; + justify-content: space-around; + align-items: center; + + .button { + border-radius: 5px; + border: solid 1px #000; + padding-left: 7px; + padding-right: 7px; + + .icon { + width: 30px; + margin-top: 6px; + } + + &:hover:not([disabled]) { + background-color: var(--buttonHoverColor); + } + + &.d180 { + transform: rotate(180deg); + } + + &.d90 { + transform: rotate(90deg); + } + } +} diff --git a/Gauge/src/components/controls/controls.tsx b/Gauge/src/components/controls/controls.tsx index c38fa2f..ec8e381 100644 --- a/Gauge/src/components/controls/controls.tsx +++ b/Gauge/src/components/controls/controls.tsx @@ -8,6 +8,8 @@ import { VNode, } from '@microsoft/msfs-sdk'; +import './controls.scss'; + interface ControlsProps extends ComponentProps { containerRef: NodeReference; reload: () => void; @@ -16,14 +18,14 @@ interface ControlsProps extends ComponentProps { } export class Controls extends DisplayComponent { - private cycleRef = FSComponent.createRef(); - private toTopRef = FSComponent.createRef(); - private reloadRef = FSComponent.createRef(); - private switchPosRef = FSComponent.createRef(); + private cycleRef = FSComponent.createRef(); + private toTopRef = FSComponent.createRef(); + private reloadRef = FSComponent.createRef(); + private switchPosRef = FSComponent.createRef(); private buttonName = ComputedSubject.create(0, (val) => { - if (val === 1) return 'Move to INS'; - else if (val === 2) return 'Move to FE'; - return 'ERROR'; + if (val === 1) return '/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/assets/img/compass.png'; + else if (val === 2) return '/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/assets/img/wrench.png'; + return ''; }); constructor(props: ControlsProps) { @@ -50,11 +52,25 @@ export class Controls extends DisplayComponent { public render = (): VNode => (
- {this.props.page === 1 && } - - - - {this.props.page === 0 && } + {this.props.page === 1 && ( +
+ +
+ )} +
+ +
+
+ +
+
+ +
+ {this.props.page === 0 && ( +
+ +
+ )}
); diff --git a/Gauge/src/index.scss b/Gauge/src/index.scss index 6e56773..fbb3190 100644 --- a/Gauge/src/index.scss +++ b/Gauge/src/index.scss @@ -1,6 +1,6 @@ @font-face { font-family: 'Consolas'; - src: url('./Consolas.ttf') format('truetype'); + src: url('./assets/fonts/Consolas.ttf') format('truetype'); font-weight: 100; font-style: normal; } @@ -9,18 +9,15 @@ width: 10px; } -/* Track */ ::-webkit-scrollbar-track { background: lightgray; } -/* Handle */ ::-webkit-scrollbar-thumb { background: gray; height: 200px; } -/* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: darkgray; } @@ -37,13 +34,6 @@ font-size: 25px; padding: 3vw; - #KH_CTRL { - height: 80px; - background: red; - display: flex; - justify-content: space-around; - } - #KH_FE_FPLAN { height: calc(100vh - 6vw - 180px); width: 100%; diff --git a/Gauge/src/index.tsx b/Gauge/src/index.tsx index 96ff65b..79906ce 100644 --- a/Gauge/src/index.tsx +++ b/Gauge/src/index.tsx @@ -1,11 +1,12 @@ /// /// -import './index.scss'; import { EventBus, FSComponent, SimVarPublisher, SimVarValueType, Subject } from '@microsoft/msfs-sdk'; import { OFP } from './components/ofp/ofp'; import { TLR } from './components/tlr/tlr'; +import './index.scss'; + export interface NewDataEvents { newData: boolean; position: number; diff --git a/README.MD b/README.MD index 0a0c675..c372393 100644 --- a/README.MD +++ b/README.MD @@ -1,7 +1,3 @@ # How to export a package - Run `pnpm install` and `pnpm prod` to build gauge - Export from MSFS - -# TODO -For sure: -- Icons \ No newline at end of file diff --git a/rollup.config.js b/rollup.config.js index 4361ce9..71369e1 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -33,7 +33,11 @@ export default { typescript(), targetEnv === 'production' && terser(), copy({ - targets: [{ src: [`${inDirBase}/index.html`, `${inDirBase}/Consolas.ttf`], dest: outDirBase }], + targets: [ + { src: [`${inDirBase}/index.html`], dest: outDirBase }, + { src: [`${inDirBase}/assets/img/**`], dest: outDirBase + 'assets/img' }, + { src: [`${inDirBase}/assets/fonts/**`], dest: outDirBase + 'assets/fonts' }, + ], }), ], };