From 3932d269423ea2393d90aabdd3eb9b18051880ef Mon Sep 17 00:00:00 2001
From: pvincent <pvincent@artcode.re>
Date: Wed, 27 Mar 2024 16:41:28 +0400
Subject: [PATCH] alpinejs

---
 index.html | 79 +++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 67 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index 5f25818..73f8a3e 100644
--- a/index.html
+++ b/index.html
@@ -7,35 +7,90 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="//unpkg.com/alpinejs" defer></script>
     <title>Calculator</title>
+    <script>
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('calculator', () => ({
+                result: 'Ready',
+                current: 0,
+                previous: 0,
+                operator: '=',
+                logAll(message = 'LOG') {
+                    console.log(`${message}: ${this.previous} ${this.operator} ${this.current} => ${this.result}`)
+                },
+                pressDigit(key) {
+                    this.current = this.current * 10 + key
+                    this.result = this.current
+                    if (this.operator == '=') { this.previous = 0 }
+                    this.logAll()
+                },
+                pressPlus() {
+                    this.operator = '+'
+                    this.compute()
+                    this.result = this.operator
+                    this.logAll()
+                },
+                pressMinus() {
+                    this.operator = '-'
+                    this.compute()
+                    this.result = this.operator
+                    this.logAll()
+                },
+                pressEqual() {
+                    this.compute()
+                    this.operator = '='
+                    this.result = `= ${this.previous}`
+                    this.previous = 0
+                    this.logAll()
+                },
+                compute() {
+                    this.logAll('BEFORE')
+                    switch (this.operator) {
+                        case '+':
+                            this.previous = this.previous + this.current
+                            break;
+                        case '-':
+                            this.previous = this.previous - this.current
+                            break;
+                        default:
+                            this.result = this.current
+                            this.previous = this.current
+                    }
+                    this.current = 0
+                }
+
+            }))
+            console.log('Ready!')
+        })
+    </script>
 </head>
 
-<body class="bg-zinc-400 flex h-screen justify-center items-start " x-data="{}" @keypress="console.log($event)">
+<body class="bg-zinc-400 flex h-screen justify-center items-start " x-data="calculator">
     <div id='calculator' class="bg-slate-800 w-screen grid grid-cols-[3fr,1fr] h-screen ">
-        <div id="screen"
+        <div id="screen" x-text="result"
             class="hover:ring-4 ring-blue-400 my-4 mx-2 p-8 text-right text-[8vh] text-white bg-black col-span-4 row-span-4 h-[20vh] rounded-xl border-double border-4 border-slate-800">
-            RESULT
         </div>
         <div class="grid grid-cols-3 gap-3 mb-4">
             <template x-for="x in 3">
                 <template x-for="y in 3">
-                    <button
+                    <button @click="pressDigit(x*3+y-3)"
                         class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-800 bg-slate-600 h-full"
-                        x-text="x*3+y-3"></button>
+                        x-text="x*3+y-3">
+                    </button>
                 </template>
             </template>
-            <button
+            <button @click="pressDigit(0)"
                 class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 col-span-2 bg-slate-600 border-double border-4 border-slate-800 h-full">0</button>
             <button
                 class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 bg-slate-600 border-double border-4 border-slate-800 h-full">.</button>
         </div>
 
         <div class="grid grid-rows-4 gap-3 mb-4">
-            <button
-                class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full">-</button>
-            <button
-                class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full">+</button>
-            <button
-                class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white row-span-2 h-full">=</button>
+            <!-- <button @click="pressMinus"
+                class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full">-</button> -->
+            <button @click="pressPlus"
+                class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full row-span-2 ">+</button>
+            <button @click="pressEqual"
+                class="text-[10vh] rounded-2xl mx-2 active:bg-blue-400 hover:ring-4 ring-blue-400 border-double border-4 border-slate-600 bg-slate-900 text-white h-full row-span-2 ">=</button>
         </div>
     </div>
 
