42 | ({pillType.text}
43 | ×{unit})
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/ModalAmount.jsx:
--------------------------------------------------------------------------------
1 | export default function ModalAmount({ close, submit }) {
2 | const preSubmit = (e) => {
3 | e.preventDefault();
4 | let n = Number(e.target.amount.value);
5 | if (isNaN(n)) return;
6 | if (n > 10000) {
7 | alert(
8 | "Kami belum boleh kendali amaun yang besar. Nanti crash. Harap maaf"
9 | );
10 | return;
11 | }
12 | submit(n);
13 | };
14 |
15 | return (
16 |
20 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Duit Malaysia
2 |
3 | **Duit Malaysia** adalah satu tool interaktif untuk menggambarkan nilai wang dalam bentuk visual, seperti wang kertas yang disusun atas meja. Projek ini bertujuan untuk membantu pengguna memahami dan memvisualkan nilai wang dengan mudah dan menyeronokkan.
4 |
5 | (Thanks, GPT 😘)
6 |
7 | ## Ciri-ciri
8 |
9 | 1. **Visualisasi Wang**
10 |
11 | - Memaparkan nilai wang dalam bentuk visual (wang kertas Malaysia).
12 |
13 | 1. **Fungsi Shuffle**
14 |
15 | - Nilai wang yang sama tetapi dengan denominasi yang berbeza.
16 |
17 | 1. **Masukkan Amount**
18 |
19 | - Pengguna boleh masukkan jumlah wang dan ia akan dipaparkan secara visual.
20 |
21 | 1. **Butang Individu untuk Wang**
22 |
23 | - Butang untuk menambah wang kertas tertentu secara manual.
24 |
25 | 1. **Fungsi Clear**
26 |
27 | - Untuk mengosongkan visual wang.
28 |
29 | 1. **PWA**
30 |
31 | - Boleh install terus jadi app dalam phone.
32 |
33 | ## Akses
34 |
35 | Boleh guna terus melalui [https://wang.mansarip.org](https://wang.mansarip.org)
36 |
37 | ## Development
38 |
39 | Dibuat guna React + Vite, with Bun
40 |
41 | **Clone**
42 | ```
43 | git@github.com:mansarip/wang-malaysia.git
44 | ```
45 |
46 | **Start dev**
47 | ```
48 | cd wang-malaysia
49 | bun i
50 | bun run dev
51 | ```
52 |
53 | Jika ada apa-apa penambahan, boleh submit PR, terima kasih!
54 |
55 | # Todo
56 |
57 | - ~~Tambah duit syiling atas meja~~
58 | - ~~Handle duit yang banyak (berjuta) - sebab dia crash bila banyak sangat component rendered~~
59 | - Handle long press
60 | - Paparan amaun atas duit
61 | - Modal ringkasan
62 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Delius+Unicase:wght@700&display=swap");
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | * {
8 | user-select: none;
9 | }
10 |
11 | .delius-unicase-bold {
12 | font-family: "Delius Unicase", cursive;
13 | font-weight: 700;
14 | font-style: normal;
15 | }
16 |
17 | img {
18 | -webkit-touch-callout: none; /* Halang menu konteks pada iOS */
19 | -webkit-user-select: none; /* Halang teks dipilih pada iOS */
20 | -webkit-tap-highlight-color: transparent; /* Hilangkan highlight */
21 | user-select: none; /* Halang teks dipilih */
22 | pointer-events: none; /* Halang interaksi dengan imej */
23 | }
24 |
25 | input::-webkit-outer-spin-button,
26 | input::-webkit-inner-spin-button {
27 | -webkit-appearance: none;
28 | margin: 0;
29 | }
30 | input[type="number"] {
31 | -moz-appearance: textfield;
32 | }
33 |
34 | @keyframes paperDrop {
35 | 0% {
36 | transform: translateY(-100px) rotate(-15deg);
37 | opacity: 0;
38 | }
39 | 50% {
40 | transform: translateY(10px) rotate(5deg);
41 | opacity: 0.7;
42 | }
43 | 100% {
44 | transform: translateY(0) rotate(0deg);
45 | opacity: 1;
46 | }
47 | }
48 |
49 | .paper-drop {
50 | animation: paperDrop 0.2s ease-out forwards;
51 | }
52 |
53 | @keyframes coinDrop {
54 | 0% {
55 | transform: perspective(500px) translateZ(-100px) rotateX(-15deg);
56 | opacity: 0;
57 | }
58 | 50% {
59 | transform: perspective(500px) translateZ(10px) rotateX(5deg);
60 | opacity: 0.7;
61 | }
62 | 100% {
63 | transform: perspective(500px) translateZ(0) rotateX(0deg);
64 | opacity: 1;
65 | }
66 | }
67 |
68 | .coin-drop {
69 | animation: coinDrop 0.2s ease-out forwards;
70 | }
71 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
15 |
16 |
17 |
18 |
22 |
26 |
30 |
31 |
32 |
33 |
37 |
41 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | {
23 | e.stopPropagation();
24 | }}
25 | >
26 |
45 | MASUKKAN AMAUN (RM)
27 | Enter amount
28 |
44 |
89 | {buttonType.isSyiling ? (
90 | <>
91 | 
95 |
107 |
115 | );
116 | }
117 |
--------------------------------------------------------------------------------
/src/ModalSummary.jsx:
--------------------------------------------------------------------------------
1 | import { Fragment } from "react";
2 | import myr1 from "./assets/myr1_small.png";
3 | import myr5 from "./assets/myr5_small.png";
4 | import myr10 from "./assets/myr10_small.png";
5 | import myr20 from "./assets/myr20_small.png";
6 | import myr50 from "./assets/myr50_small.png";
7 | import myr100 from "./assets/myr100_small.png";
8 | import sen50 from "./assets/50sen.png";
9 | import sen20 from "./assets/20sen.png";
10 | import sen10 from "./assets/10sen.png";
11 | import sen5 from "./assets/5sen.png";
12 | import { formatCurrency } from "./utils";
13 |
14 | const types = {
15 | 0.05: {
16 | text: "5 Sen",
17 | color: "text-slate-800",
18 | subColor: "text-slate-700",
19 | image: sen5,
20 | },
21 | 0.1: {
22 | text: "10 Sen",
23 | color: "text-slate-800",
24 | subColor: "text-slate-700",
25 | image: sen10,
26 | },
27 | 0.2: {
28 | text: "20 Sen",
29 | color: "text-yellow-800",
30 | subColor: "text-yellow-700",
31 | image: sen20,
32 | },
33 | 0.5: {
34 | text: "50 Sen",
35 | color: "text-yellow-800",
36 | subColor: "text-yellow-700",
37 | image: sen50,
38 | },
39 | 1: {
40 | text: "RM 1",
41 | color: "text-sky-800",
42 | subColor: "text-sky-700",
43 | image: myr1,
44 | },
45 | 5: {
46 | text: "RM 5",
47 | color: "text-green-800",
48 | subColor: "text-green-700",
49 | image: myr5,
50 | },
51 | 10: {
52 | text: "RM 10",
53 | color: "text-red-800",
54 | subColor: "text-red-700",
55 | image: myr10,
56 | },
57 | 20: {
58 | text: "RM 20",
59 | color: "text-yellow-800",
60 | subColor: "text-yellow-700",
61 | image: myr20,
62 | },
63 | 50: {
64 | text: "RM 50",
65 | color: "text-teal-800",
66 | subColor: "text-teal-700",
67 | image: myr50,
68 | },
69 | 100: {
70 | text: "RM 100",
71 | color: "text-purple-800",
72 | subColor: "text-purple-700",
73 | image: myr100,
74 | },
75 | };
76 |
77 | export default function ModalSummary({
78 | close,
79 | stack = {},
80 | denominations = [],
81 | total = 0,
82 | }) {
83 | return (
84 |
98 | {buttonType.text}
99 |
100 |
101 | ) : (
102 | <>
103 |
110 | {buttonType.text}
111 |
112 |
113 | )}
114 |
88 |
147 | );
148 | }
149 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 | import ButtonAdd from "./ButtoAdd";
3 | import {
4 | calculate,
5 | denominations,
6 | formatCurrency,
7 | randomizeBreakdown,
8 | } from "./utils";
9 | import ModalAmount from "./ModalAmount";
10 | import ModalAbout from "./ModalAbout";
11 | import ModalSummary from "./ModalSummary";
12 | import MoneyStack from "./MoneyStack";
13 |
14 | import undoSound from "./assets/undo.mp3";
15 | import keypressSound from "./assets/keypress.mp3";
16 | import swishSound from "./assets/swish.mp3";
17 | import shuffleSound from "./assets/shuffle.mp3";
18 | import coinSound from "./assets/coin.mp3";
19 | import iconWriting from "./assets/writing.png";
20 | import mejaImage from "./assets/meja.png";
21 | import myr1 from "./assets/myr1_small.png";
22 | import myr5 from "./assets/myr5_small.png";
23 | import myr10 from "./assets/myr10_small.png";
24 | import myr20 from "./assets/myr20_small.png";
25 | import myr50 from "./assets/myr50_small.png";
26 | import myr100 from "./assets/myr100_small.png";
27 | import sen50 from "./assets/50sen.png";
28 | import sen20 from "./assets/20sen.png";
29 | import sen10 from "./assets/10sen.png";
30 | import sen5 from "./assets/5sen.png";
31 | import iconShuffle from "./assets/dice.png";
32 | import jahitPattern from "./assets/jahit.png";
33 | import iconClear from "./assets/clean.png";
34 |
35 | const LS_KEY_STORE = "stack";
36 |
37 | function defaultStack() {
38 | return {
39 | myr1: 0,
40 | myr5: 0,
41 | myr10: 0,
42 | myr20: 0,
43 | myr50: 0,
44 | myr100: 0,
45 | sen50: 0,
46 | sen20: 0,
47 | sen10: 0,
48 | sen5: 0,
49 | };
50 | }
51 |
52 | function loadStack() {
53 | const saved = localStorage.getItem(LS_KEY_STORE);
54 | try {
55 | if (!saved) {
56 | return defaultStack();
57 | }
58 |
59 | return JSON.parse(saved);
60 | } catch (err) {
61 | console.error(err?.message);
62 | return defaultStack();
63 | }
64 | }
65 |
66 | export default function App() {
67 | const undoSoundRef = useRef(null);
68 | const pressSoundRef = useRef(null);
69 | const swishSoundRef = useRef(null);
70 | const shuffleSoundRef = useRef(null);
71 | const coinSoundRef = useRef(null);
72 |
73 | const [showModalAmount, setShowModalAmount] = useState(false);
74 | const [showModalAbout, setShowModalAbout] = useState(false);
75 | const [showModalSummary, setShowModalSummary] = useState(false);
76 | const [total, setTotal] = useState(0);
77 | const [stack, setStack] = useState(loadStack());
78 |
79 | const playSwishSound = () => {
80 | if (swishSoundRef.current) {
81 | swishSoundRef.current.currentTime = 0;
82 | swishSoundRef.current.play();
83 | }
84 | };
85 |
86 | const playButtonSound = () => {
87 | if (pressSoundRef.current) {
88 | pressSoundRef.current.currentTime = 0;
89 | pressSoundRef.current.play();
90 | }
91 | };
92 |
93 | const playShuffleSound = () => {
94 | if (shuffleSoundRef.current) {
95 | shuffleSoundRef.current.currentTime = 0;
96 | shuffleSoundRef.current.play();
97 | }
98 | };
99 |
100 | const playCoinSound = () => {
101 | if (coinSoundRef.current) {
102 | coinSoundRef.current.currentTime = 0;
103 | coinSoundRef.current.play();
104 | }
105 | };
106 |
107 | const clearDesk = () => {
108 | playSwishSound();
109 | setStack(defaultStack());
110 | };
111 |
112 | const tambah = (key, isCoin = false) => {
113 | if (isCoin) {
114 | playCoinSound();
115 | } else {
116 | playButtonSound();
117 | }
118 |
119 | setStack({
120 | ...stack,
121 | [key]: stack[key] + 1,
122 | });
123 | };
124 |
125 | const tolak = (key) => {
126 | playSwishSound();
127 | setStack({
128 | ...stack,
129 | [key]: stack[key] - 1,
130 | });
131 | };
132 |
133 | const shuffle = () => {
134 | if (total <= 0) return;
135 |
136 | playShuffleSound();
137 | let newStack = randomizeBreakdown(total);
138 |
139 | // prevent infinite loop (kalau lebih rm5 baru cek) <-- benda ni kita remove bila implement duit syiling
140 | if (total >= 5) {
141 | let str1 = JSON.stringify(newStack);
142 | let str2 = JSON.stringify(stack);
143 |
144 | // jaminan supaya hasil shuffle tak sama dengan yang sebelumnya
145 | while (str1 === str2) {
146 | newStack = randomizeBreakdown(total);
147 | str1 = JSON.stringify(newStack);
148 | }
149 | }
150 |
151 | setStack(newStack);
152 | };
153 |
154 | const paparAmaun = (value) => {
155 | let stack = randomizeBreakdown(value);
156 | setStack(stack);
157 | playButtonSound();
158 | setShowModalAmount(false);
159 | };
160 |
161 | const openModalSummary = () => {
162 | setShowModalSummary(true);
163 | playShuffleSound();
164 | };
165 |
166 | const closeModalSummary = () => {
167 | setShowModalSummary(false);
168 | playSwishSound();
169 | };
170 |
171 | useEffect(() => {
172 | setTotal(calculate(stack));
173 | localStorage.setItem(LS_KEY_STORE, JSON.stringify(stack));
174 | }, [stack]);
175 |
176 | return (
177 | {
91 | e.stopPropagation();
92 | }}
93 | >
94 |
146 |
95 | RINGKASAN
96 |
102 |
103 |
104 |
141 |
105 | {denominations.map((d) => {
106 | let qty = stack[d.id] || 0;
107 | if (!qty) {
108 | return;
109 | }
110 |
111 | let row = types[d.n];
112 | if (!row) return;
113 |
114 | row.value = d.n;
115 | row.id = d.id;
116 | row.quantity = qty;
117 | row.isCoin = d.isCoin || false;
118 |
119 | let total = row.value * row.quantity;
120 |
121 | return (
122 |
123 |
137 | );
138 | })}
139 |
140 |
124 | {row.isCoin ? (
125 | 
126 | ) : (
127 |
128 | )}
129 |
130 | {row.text}
131 | × {row.quantity}
132 | =
133 |
134 | {formatCurrency(total, row.isCoin)}
135 |
136 |
142 | Jumlah:{" "}
143 | RM {formatCurrency(total, true)}
144 |
145 |
178 |
436 | );
437 | }
438 |
--------------------------------------------------------------------------------
182 | {showModalAmount && (
183 | setShowModalAmount(false)}
185 | submit={paparAmaun}
186 | />
187 | )}
188 |
189 | {showModalAbout && (
190 | setShowModalAbout(false)} />
191 | )}
192 |
193 | {showModalSummary && (
194 |
398 |
399 |
203 |
209 |
210 |
216 |
217 |
391 |
392 |
393 |
394 |
395 |
396 |
397 |
218 |
219 | RM {formatCurrency(total, true)}
220 |
221 | {total > 0 && (
222 |
228 | )}
229 |
230 |
231 | 
357 |
358 |
362 |
363 | {total > 0 && (
364 | <>
365 |
371 |
372 | )}
373 |
374 |
380 |
381 |
232 |
351 |
352 |
382 | {denominations.map((item) => (
383 | tambah(item.id, item.isCoin)}
387 | />
388 | ))}
389 |
390 |
400 |
435 |
401 |
416 |
402 | 
403 | Rombak visual
404 |
405 |
406 |
407 | 
408 | Padam semula
409 |
410 |
411 |
412 | 
413 | Amaun sendiri
414 |
415 |
417 | Oleh Man Sarip - Telegram:
418 |
423 | @mansarip
424 | {" "}
425 | -{" "}
426 |
431 | Github
432 |
433 |
434 |