somu-odoo · vivp-odoo · Mar 14, 2023 · Mar 15, 2023
diff --git a/OWL/Activity3/app.js b/OWL/Activity3/app.js
@@ -0,0 +1,86 @@
+const{Component,mount,xml,useState,reactive,useEnv} = owl;
+
+
+
+const finalData = () =>{
+
+    const key = useEnv();
+    return useState(key.store);
+}
+
+class Counter {
+
+    count = 0;
+
+    updateCount(){
+        this.count++;
+    }
+
+    getCount (){
+
+        return this.count;
+    }
+}
+
+class Second extends Component{
+
+    static template = xml`
+    <b> Guess The Number </b> <br/>
+    <input type="number"/> <br/><br/>`;
+
+    setup()
+    {
+        this.sec = finalData(); 
+    }
+}
+
+class Root extends Component {
+
+    static template = xml `
+    <Second/>
+    <button t-on-click="clickMe"> Click </button>
+    <p></p>
+    <b id="cnt"></b>
+    `;
+
+     num = Math.floor((Math.random() * 10) + 1);
+
+
+    clickMe()
+    {   
+
+        this.rot.updateCount();
+        const userInput = document.querySelector("input").value;
+        const result = document.querySelector("p");
+        const cnt = document.getElementById("cnt");
+
+        if(userInput > this.num){
+        result.innerText = "Enter a lower number";
+        }
+        else if(userInput < this.num){
+            result.innerText = "Enter a Higher number";
+        }
+        else{
+            result.innerText = "Correct";
+            cnt.innerText = this.rot.getCount();
+        }
+
+    }
+
+    setup()
+    {
+        this.rot = finalData();
+    }
+
+    static components = {Second};
+}
+
+const createData = () =>{
+
+    return reactive(new Counter);
+}
+const env = {
+    store:createData()
+}
+
+mount(Root, document.body,{ dev:true, env });
diff --git a/OWL/Activity3/index.html b/OWL/Activity3/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>   
+    <title>Document</title>
+    <script src="../owl.js"></script>
+    <script src="app.js" defer></script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/OWL/RockPaperScissor/app.js b/OWL/RockPaperScissor/app.js
@@ -0,0 +1,184 @@
+const{Component,mount,xml,reactive,useState,useEnv} = owl;
+
+
+const finalData = () =>{
+
+    const data = useEnv();
+
+    return useState(data.store);
+}
+class WriteText{
+
+    computerGuess = 0;
+    userInput = "";
+    result = ""
+    userWon = 0;
+    computerWon = 0;
+    random = "";
+
+    guess()
+    {
+        this.computerGuess = Math.floor((Math.random()*3) + 1);
+    }
+
+    getGuess()
+    {
+        return this.computerGuess;
+    }
+
+   updateUser()
+   {
+    this.userWon++;
+   }
+
+   getUser()
+   {
+     return this.userWon;
+   }
+
+   updateComputer()
+   {
+    this.computerWon++;
+   }
+
+   getComputer()
+   {
+    return this.computerWon
+   }
+
+}
+
+class First extends Component{
+
+    static template = xml `
+    <div id="first">
+    <b> Select Your Choice </b> <br/><br/>
+    <div id="btn">
+    <button id ="in-btn" type="button" class="btn btn-dark" t-on-click = "clickRock">Rock</button>
+    <button id ="in-btn" type="button" class="btn btn-dark" t-on-click = "clickPaper" >Paper</button>
+    <button id ="in-btn" type="button" class="btn btn-dark" t-on-click = "clickScissor" >Scissor</button>
+    </div>
+    </div>
+    `;
+
+    clickRock()
+    {   
+        this.first.userInput = "Rock"
+
+        if(this.first.getGuess() == 1){
+            this.first.result = "You Won!!!"
+            this.first.updateUser();
+        }
+        else{
+            this.first.result = "You Lose!!!"
+            this.first.updateComputer();
+        }
+
+        this.first.guess();
+        console.log(this.first.computerGuess);
+    }
+
+    clickPaper()
+    {   
+        this.first.userInput = "Paper"
+
+        if(this.first.getGuess() == 2){
+            this.first.result = "You Won!!!"
+            this.first.updateUser();
+
+        }
+        else{
+            this.first.result = "You Lose!!!"
+            this.first.updateComputer();
+
+        }
+        this.first.guess();
+
+    }
+
+    clickScissor()
+    {   
+        this.first.userInput = "Scissor"
+
+        if(this.first.getGuess() == 3){
+            this.first.result = "You Won!!!"
+            this.first.updateUser();
+
+        }
+        else{
+            this.first.result = "You Lose!!!"
+            this.first.updateComputer();
+        }
+
+        this.first.guess();
+
+    }
+
+
+    setup(){
+
+        this.first = finalData();
+        this.first.guess();
+
+    }
+
+}
+
+class Second extends Component{
+
+    static template = xml `
+     <div id="second">
+        <b id="txt"><t t-esc = "this.second.userInput"/></b>
+        <b id="txt"><t t-esc = "this.second.result"/></b>
+     </div>
+    `;
+
+
+    setup(){
+
+        this.second = finalData();
+
+            if(this.second.computerGuess == 1)
+                this.random = "Rock";
+            else if(this.second.computerGuess == 2)
+                this.random = "Paper";
+            else
+                this.random = "Scissor";
+
+    }
+
+}
+
+class Root extends Component{
+    static template = xml `
+    <div id="container">
+    <b>Rock Paper Scissor</b> <br/><br/>
+    <First />
+    <Second />
+    <div>
+    <br/>
+        <b>score-card <t t-esc = "this.root.getUser()"/> <t t-esc = "this.root.getComputer()"/></b>
+    </div>
+    </div>
+    `;
+
+
+    setup(){
+
+        this.root = finalData();
+
+    }
+
+    static components = {First,Second};
+}
+
+
+const createData = () =>{
+
+    return reactive(new WriteText);
+}
+
+const env = {
+    store:createData()
+}
+mount(Root,document.body,{dev:true,env})
diff --git a/OWL/RockPaperScissor/index.html b/OWL/RockPaperScissor/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="eng">
+
+<head>
+        <title>Rock Paper Scissor </title>
+</head>
+<script src="../owl.js"></script>
+<script src="app.js" defer></script>
+<link rel="stylesheet" href="style.css"/>
+<body>
+
+</body>
+
+</html>
diff --git a/OWL/RockPaperScissor/style.css b/OWL/RockPaperScissor/style.css
@@ -0,0 +1,37 @@
+
+body{
+    background-color: #212222;
+}
+#container{
+
+    color: 	#f5f5f5;
+    text-align: center;
+    /* border: 2px solid green; */
+}
+
+#first{
+
+    text-align: center;
+    /* border: 2px solid red; */
+    width: 50%;
+    margin: auto;    
+}
+
+#btn{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+#in-btn{
+
+    margin: 1rem;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+#txt{
+
+    padding: 10px;
+    color: yellow;
+}
diff --git a/OWL/day2.html b/OWL/day2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Document</title>
+</head>
+<body>
+    <script src="owl.js"> </script>
+    <script src="day2.js"></script>
+
+</body>
+</html>