From 7ae1ee205e990eaea3e17f99f8cc8d20d5831728 Mon Sep 17 00:00:00 2001 From: ohadrau Date: Tue, 1 Jan 2019 14:34:22 -0500 Subject: [PATCH 01/16] Add proof of concept calculator demo --- examples/Calculator.re | 218 +++++++++++++++++++++++++++++++++++++++++ examples/dune | 4 +- 2 files changed, 220 insertions(+), 2 deletions(-) create mode 100644 examples/Calculator.re diff --git a/examples/Calculator.re b/examples/Calculator.re new file mode 100644 index 000000000..0946631b7 --- /dev/null +++ b/examples/Calculator.re @@ -0,0 +1,218 @@ +open Revery; +open Revery.Core; +open Revery.UI; +open Revery.UI.Components; + +module Row = ( + val component((render, ~children, ()) => + render(() => { + let style = Style.make( + ~alignItems=LayoutTypes.AlignStretch, + ~flexDirection=LayoutTypes.Row, + ~justifyContent=LayoutTypes.JustifyCenter, + () + ); + + ...children + ; + }, ~children) + ) +); + +module Column = ( + val component((render, ~children, ()) => + render(() => { + let style = Style.make( + ~alignItems=LayoutTypes.AlignStretch, + ~flexDirection=LayoutTypes.Column, + ~justifyContent=LayoutTypes.JustifyCenter, + ~backgroundColor=Colors.darkGrey, + () + ); + + ...children + ; + }, ~children) + ) +); + +module Button = ( + val component((render, ~contents: string, ~onClick, ~children, ()) => + render(() => { + let viewStyle = Style.make( + ~backgroundColor=Colors.lightGrey, + ~position=LayoutTypes.Relative, + ~justifyContent=LayoutTypes.JustifyCenter, + ~alignItems=LayoutTypes.AlignCenter, + ~width=150, + ~height=120, + ~margin=10, + (), + ); + let textStyle = Style.make( + ~color=Colors.black, + ~fontFamily="Roboto-Regular.ttf", + ~fontSize=32, + () + ); + + + + contents + + ; + }, ~children) + ) +); + +module Display = ( + val component((render, ~display: string, ~curNum: string, ~children, ()) => + render(() => { + let viewStyle = Style.make( + ~backgroundColor=Colors.white, + ~height=80, + ~alignItems=LayoutTypes.AlignStretch, + ~flexDirection=LayoutTypes.Column, + ~justifyContent=LayoutTypes.JustifyFlexEnd, + () + ); + let displayStyle = Style.make( + ~color=Colors.black, + ~fontFamily="Roboto-Regular.ttf", + ~fontSize=20, + ~margin=10, + () + ); + let numStyle = Style.make( + ~color=Colors.black, + ~fontFamily="Roboto-Regular.ttf", + ~fontSize=32, + ~margin=10, + () + ); + + + display + curNum + ; + }, ~children) + ) +); + +type operator = + [ `Nop | `Add | `Sub | `Mul | `Div ]; + +let showFloat(float) { + let string = string_of_float(float); + if (String.length(string) > 1 + && string.[String.length(string) - 1] == '.') { + String.sub(string, 0, String.length(string) - 1); + } else { + string; + }; +} + +module Calculator = ( + val component((render, ~children, ()) => + render(() => { + /* The equation displayed */ + let (display, setDisplay) = useState(""); + /* The actual numerical result */ + let (result, setResult) = useState(0.); + /* Operator */ + let (op, setOp) = useState(`Nop); + /* Current number being typed */ + let (curNum, setCurNum) = useState(""); + + let eval() { + /* TODO: Check that there's already some input set */ + let (newDisplay, newResult) = switch (op) { + | `Nop => (curNum, float_of_string(curNum)) + | `Add => (display ++ " + " ++ curNum, result +. float_of_string(curNum)) + | `Sub => (display ++ " - " ++ curNum, result -. float_of_string(curNum)) + | `Mul => (display ++ " × " ++ curNum, result *. float_of_string(curNum)) + | `Div => + if (float_of_string(curNum) != 0.) { + (display ++ " ÷ " ++ curNum, result /. float_of_string(curNum)); + } else { + /* TODO: Errors + clear button */ + ("Error: Divide by zero!", 0.); + } + }; + setResult(newResult); + setDisplay(newDisplay); + newResult; + }; + + let perform(newOp) { + let _newResult = eval(); + setOp(newOp); + setCurNum(""); + }; + + let calculate() { + let newResult = eval(); + setOp(`Nop); + setCurNum(showFloat(newResult)); + }; + + let clear() { + setOp(`Nop); + setCurNum(""); + setResult(0.); + setDisplay(""); + }; + + let backspace() { + setCurNum(String.sub(curNum, 0, String.length(curNum) - 1)); + }; + + + + +