From e9cabed1aef97ae76934ee9718e21101e67ce039 Mon Sep 17 00:00:00 2001 From: Prozilla Date: Wed, 5 Jun 2024 07:28:54 +0200 Subject: [PATCH] Updated logic sim app with new color palette --- index.html | 6 ++-- public/favicon.ico | Bin 9662 -> 4286 bytes .../apps/logic-sim/CircuitView.module.css | 9 ++++-- src/components/apps/logic-sim/CircuitView.tsx | 4 ++- .../apps/logic-sim/LogicSim.module.css | 2 ++ src/config/apps/logicSim.config.ts | 26 +++++++++--------- src/features/apps/logic-sim/chip.ts | 4 +-- src/features/apps/logic-sim/wire.ts | 6 ++-- src/styles/global/variables.css | 6 ++++ 9 files changed, 39 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index bd2ee30..b988fde 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + @@ -26,7 +26,7 @@ - + @@ -34,7 +34,7 @@ - + diff --git a/public/favicon.ico b/public/favicon.ico index 342cf7c484b282a89581fad170b804265514bb59..bc7821d95489987b232dfcc7147c452e384e2e3e 100644 GIT binary patch literal 4286 zcmd5;YfMvj6u+H1_f4~8bDst%^MO!G;kE@S6exujmKaU;Ws5V$?3J0#B|4W(0pAk_ z@=_7n^6(W<`f#|38dRK$LlH%kmn}@)=5#RMuW@$HX-h;cD~ic(b9(RnKhEQK&iVbX zAV~1%?=R55uw%R+yeSC6R1_Q%G$=Iw5-thqdFp;2|*)osHhdXtyOUfnTp#kw6#?Jo z1y5RC5E40HyWfSmv;SRi{FBN;_MHRcu4kHalHj^-AV~$v2l_B(C>)9{Dvi;mfD(%c z1>3`6ZBZ!HoK&-ZvO#(~?irx%wjM6rGQjy;dT76EfUXBAaPeU(-#hS~#!1@l7@+fh z3h$%+XRhl$Li^MsUN4hP=_uMMLQYv2Y}y&YzSCZ^(Rx!4O@Hd3;j$Kv^(4UY9xa^w zJrU0KCd0YEllgw?D$ZX@#Ca{8xSR;h*OCBx1iBuQA1O{WJQl@kUzjZ_|H2&+7`qgX z|ElHKJJB}jKXFM5#_C9Tf6g?}C%wb>j7&Kk?u=(&$Yy4d2(xETfmySrzz4X_WQ{@} zb?AeEaqs~H3C5oH-R4k^{UZ8}xntX3r^`S(`E8b%sEMGE`SG(}7YMayVqtZDxO*-D zQd0v#bkEz4#=x1sk{AQjcNpWRI`DQ$7JL)y_1%a&#eNzwFWD72pu6J7NZ8X9 z167A+z?^y0c>K#HQm8qlhUM9EupFHM+Ydy-;tVOzWn{@YZ!L=+jny$@#vt-Y>|!MSQTEHSrQ8STVgr)ZFlro2MI9m2m6C^p^glI%0p4GU{Nry^W^EXg(2u`0<`ocgX57a{-chBWHda;{$`6P zGg=jn4VB?A*gnR8B@vdcb>)6prVRGAXrLZzj&LZiapi^bUHXHPZHuA)@W~fJj6?0& zSl&-Pfc4M#H}q(e9=C6_i*rqO1sH82_M8Y=CK>0@(|4z_hpLaLvEKYya?3>6Ssx8W zRZ7rlC$Y_C>ttZGy6n%IJsB!~Qu2G+Iys#BL&sb|{6YDzcf=_lw@*E1-mR=7?kUa8pzqIV2*E8~iS03(+>mmMj`Cwokqdq3iqnaQ& zeNBhFn2h)m-|CsCnvesDa|rjdy-7SyI8r~;Hv`5#BnMM&R%{5-W|zu12b44No$9yq zfq~C}_Pct%cicAs>85$|lb(t5DPHPb;x8Jb^9b?pM%_d5FV6Fow>2!6`oMN9dcX${ z78D2B@(8^TJ?E;shAUk6{}nsiFRm7ws18*MZD6vvMMnEq5ux3*zR340icFe1g~4IOs zAdGv2XOt7A5BvQwk>Ilg$0Y|*(%pjZyyhO>X&(tbk3;c8iA71f*CzqC(?1rVe;fdi I_@My&3zpXRng9R* literal 9662 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 o9*jxTJXy8`Q39; { circuit.addChip(ChipsManager.CHIPS.NOT); }}/> - +
+ +
; } \ No newline at end of file diff --git a/src/components/apps/logic-sim/LogicSim.module.css b/src/components/apps/logic-sim/LogicSim.module.css index 3b5120c..78096c5 100644 --- a/src/components/apps/logic-sim/LogicSim.module.css +++ b/src/components/apps/logic-sim/LogicSim.module.css @@ -1,4 +1,6 @@ .Container { + display: flex; + flex-direction: column; width: 100%; height: 100%; } \ No newline at end of file diff --git a/src/config/apps/logicSim.config.ts b/src/config/apps/logicSim.config.ts index 6507f14..1217de2 100644 --- a/src/config/apps/logicSim.config.ts +++ b/src/config/apps/logicSim.config.ts @@ -34,26 +34,26 @@ export const CHIP = { export const COLORS = { pin: { - fill: "dark-grey-b", - fillHover: "dark-grey-a" + fill: "black-4", + fillHover: "black-3" }, inputOutput: { - connector: "dark-grey-ca", - on: "red-b", - onHover: "red-a", - off: "dark-grey-d", - offHover: "dark-grey-ca", - stroke: "dark-grey-b" + stroke: "black-4", + connector: "black-3", + on: "red-0", + onHover: "red-0", + off: "red-2", + offHover: "red-1", }, background: { - outer: "dark-grey-e", - inner: "dark-grey-f", - border: "dark-grey-d", + border: "black-0", + inner: "black-1", + outer: "black-2", }, wire: { - placing: "dark-grey-ca", + placing: "black-1", }, chip: { - text: "dark-grey-f" + text: "black-4" } }; \ No newline at end of file diff --git a/src/features/apps/logic-sim/chip.ts b/src/features/apps/logic-sim/chip.ts index d4599b2..deb3b62 100644 --- a/src/features/apps/logic-sim/chip.ts +++ b/src/features/apps/logic-sim/chip.ts @@ -87,12 +87,12 @@ export class Chip { draw() { this.circuit.drawRect( - this.circuit.getColor(this.color + "-b"), + this.circuit.getColor(this.color + "-1"), this.position.x, this.position.y, this.size.x, this.size.y ); this.circuit.drawRect( - this.circuit.getColor(this.color + "-a"), + this.circuit.getColor(this.color + "-0"), this.position.x + CHIP.padding, this.position.y + CHIP.padding, this.size.x - CHIP.padding * 2, this.size.y - CHIP.padding * 2 ); diff --git a/src/features/apps/logic-sim/wire.ts b/src/features/apps/logic-sim/wire.ts index 4876205..fb0b4d0 100644 --- a/src/features/apps/logic-sim/wire.ts +++ b/src/features/apps/logic-sim/wire.ts @@ -42,11 +42,11 @@ export class Wire { let color: string; if (isPlacingWire) { - color = `${this.color}-b`; + color = `${this.color}-2`; } else if (this.state.value === 1) { - color = `${this.color}-a`; + color = `${this.color}-0`; } else { - color = `${this.color}-d`; + color = `${this.color}-2`; } this.circuit.drawLine(this.circuit.getColor(color), positions, WIRE.width); diff --git a/src/styles/global/variables.css b/src/styles/global/variables.css index 7f7f1f4..4c6851f 100644 --- a/src/styles/global/variables.css +++ b/src/styles/global/variables.css @@ -38,6 +38,8 @@ --white-0: #E5F2FF; --white-1: #A0A9B2; --white-2: #5C6166; + --white-3: #393C40; + --white-4: #222426; --black-0: #29343F; --black-1: #1E262E; @@ -84,3 +86,7 @@ --taskbar-button-hover-color: rgba(255, 255, 255, 5%); --taskbar-filter: blur(1rem); } + +@media screen and (max-width: 450px) { + /* Change --taskbar-height to 2.5rem using TS */ +} \ No newline at end of file