[ADD] Chapter 1: Owl components - sawer

awesome_clicker/static/src/click_rewards.js

@@ -0,0 +1,54 @@
+export const rewards = [
+   {
+      description: "Get 1 click bot",
+      apply(clicker) {
+            clicker.bots["clickBots"].number += 1;
+      },
+      maxLevel: 2,
+   },
+   {
+      description: "Get 10 click bot",
+      apply(clicker) {
+            clicker.bots["clickBots"].number += 10;
+      },
+      minLevel: 1,
+      maxLevel: 3,
+   },
+   {
+      description: "Get 5 big bot",
+      apply(clicker) {
+            clicker.bots["bigBots"].number += 5;
+      },
+      minLevel: 2,
+      maxLevel: 4,
+   },
+   {
+      description: "Increase bot power!",
+      apply(clicker) {
+            clicker.power += 1;
+      },
+      minLevel: 3,
+   },
+   {
+      description: "Increase bot power by 100!",
+      apply(clicker) {
+            clicker.power += 100;
+      },
+      minLevel: 4,
+   },
+   {
+      description: "Get a Cherry Tree",
+      apply(clicker) {
+            clicker.trees["cherryTrees"].number += 1;
+      },
+      minLevel: 4,
+   },
+   {
+      description: "Get a Pear Tree",
+      apply(clicker) {
+            clicker.trees["pearTrees"].number += 1;
+      },
+      minLevel: 4,
+   },
+
+];

awesome_clicker/static/src/click_value/click_value.js

@@ -0,0 +1,15 @@
+import { Component } from "@odoo/owl";
+import { humanNumber } from "@web/core/utils/numbers";
+
+export class ClickValue extends Component {
+    static template = "awesome_clicker.ClickValue";
+
+    static props = {
+        value: Number
+    }
+
+    get display() {
+        return humanNumber(this.props.value, { decimals: 1, })
+    }
+
+}

awesome_clicker/static/src/click_value/click_value.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_clicker.ClickValue">
+
+        <span t-att-data-tooltip="this.props.value"><t t-esc="display"/></span>
+
+    </t>
+
+</templates>

awesome_clicker/static/src/clicker_hook.js

@@ -0,0 +1,6 @@
+import { useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks"; 
+
+export function useClicker() {
+    return useState(useService("awesome_clicker.clicker"));
+}

awesome_clicker/static/src/clicker_migration.js

@@ -0,0 +1,37 @@
+export const CURRENT_VERSION = 2.0;
+export const migrations = [
+    {
+        fromVersion: 1.0,
+        toVersion: 1.5,
+        apply: (state) => {
+            console.log("Nothing to do, you are uptodate dude!");
+        }
+    },
+    {
+        fromVersion: 1.5,
+        toVersion: 2.0,
+        apply: (state) => {
+            console.log("New tree available: peach tree!");
+            state.trees.peachTree = {
+                price: 1500000,
+                number: 0,
+                level: 4,
+                fruit: "peaches"
+            }
+            state.fruits.peaches = 0;
+        }
+    }
+];
+
+export function migrate(localState) {
+    if (localState?.version_number < CURRENT_VERSION) {
+        for (const migration of migrations) {
+            if (localState.version_number === migration.fromVersion) {
+                migration.apply(localState);
+                localState.version_number = migration.toVersion
+            }
+        }
+        localState.version_number = CURRENT_VERSION;
+    }
+    return localState;
+}

awesome_clicker/static/src/clicker_model.js

@@ -0,0 +1,142 @@
+
+import { Reactive } from "@web/core/utils/reactive";
+import { EventBus } from "@odoo/owl";
+import { rewards } from "./click_rewards";
+import { randomChoice } from "./utils";
+import { CURRENT_VERSION } from "./clicker_migration";
+
+export class ClickerModel extends Reactive {
+
+    constructor() {
+        super();
+        this.value = 0;
+        this.level = 0;
+        this.bus = new EventBus();
+        this.bots = {
+            clickBots : {
+                price: 1000,
+                number: 0,
+                level: 1,
+                clicks: 10
+            },
+            bigBots : {
+                price: 5000,
+                number: 0,
+                level: 2,
+                clicks: 100
+            }
+        }
+        this.power = 1;
+        this.fruits = {
+            cherries: 0,
+            pears: 0,
+            peaches: 0
+        };
+        this.trees = {
+            cherryTrees: {
+                price: 1000000,
+                number: 0,
+                level: 4,
+                fruit: "cherries"
+            },
+            pearTrees: {
+                price: 1000000,
+                number: 0,
+                level: 4,
+                fruit: "pears"
+            },
+            peachTree: {
+                price: 1500000,
+                level: 4,
+                produce: "peaches",
+                purchased: 0,
+            }
+        };
+        this.version_number = CURRENT_VERSION;
+    }
+
+    increment(inc) {
+        this.value += inc;
+        if (this.milestones[this.level] && this.value >= this.milestones[this.level].clicks) {
+            this.bus.trigger("MILESTONE", this.milestones[this.level]);
+            this.level++;
+        }
+    }
+
+    buyBot(botName) {
+        const bot = this.bots[botName];
+        const clickBotPrice = bot.price;
+        if (this.value < clickBotPrice) {
+            return false;
+        }
+        bot.number++;
+        this.value-=clickBotPrice;
+    };
+
+    clickBotsAction() {
+        for(const bot in this.bots) {
+            this.value += ( this.bots[bot].clicks * this.bots[bot].number ) * this.power;
+        }
+    };
+
+    buyPower() {
+        const powerPrice = 50000;
+        if (this.value < powerPrice) {
+            return false;
+        }
+        this.power++;
+        this.value-=powerPrice;
+    };
+
+    getReward() {
+        const availableReward = [];
+        for (const reward of rewards) {
+            if (reward.minLevel <= this.level || !reward.minLevel) {
+                if (reward.maxLevel >= this.level || !reward.maxLevel) {
+                    availableReward.push(reward);
+                }
+            }
+        }
+        const reward = randomChoice(availableReward);
+        this.bus.trigger("REWARD", reward);
+        return reward;
+    }
+
+    buyTree(treeName) {
+        const tree = this.trees[treeName];
+        const treePrice = tree.price;
+        if (this.value < treePrice) {
+            return false;
+        }
+        tree.number++;
+        this.value-=treePrice;
+    };
+
+    treesAction() {
+        for(const tree in this.trees) {
+            this.fruits[this.trees[tree].fruit] += this.trees[tree].number;
+        }
+    };
+
+    toJSON() {
+        const json = Object.assign({}, this);
+        delete json["bus"];
+        return json;
+    }
+
+    static fromJSON(json) {
+        const clicker = new ClickerModel();
+        const clickerInstance = Object.assign(clicker, json);
+        return clickerInstance;
+    }
+
+    get milestones() {
+        return [
+            { clicks: 1000, bot: "ClickBot" },
+            { clicks: 5000, bot: "BigBot" },
+            { clicks: 100000, bot: "Power" },
+            { clicks: 1000000, bot: "Trees and Fruits" }
+        ]
+    }
+
+}

awesome_clicker/static/src/clicker_providers.js

@@ -0,0 +1,27 @@
+import { registry } from "@web/core/registry";
+
+const commandProviderRegistry = registry.category("command_provider");
+
+commandProviderRegistry.add("clicker", {
+    provide: (env, options) => {
+        return [
+            {
+                name: "Open Clicker Game",
+                action() {
+                    env.services.action.doAction({
+                        type: "ir.actions.client",
+                        tag: "awesome_clicker.ClientAction",
+                        target: "new",
+                        name: "Clicker Game"
+                    });
+                }
+            },
+            {
+                name: "Buy 1 click bot",
+                action() {
+                    env.services["awesome_clicker.clicker"].buyBot("clickBots");
+                }
+            }
+        ]
+    }
+});

awesome_clicker/static/src/clicker_service.js

@@ -0,0 +1,57 @@
+import { registry } from "@web/core/registry";
+import { ClickerModel } from "./clicker_model";
+import { browser } from "@web/core/browser/browser";
+import { migrate } from "./clicker_migration";
+
+const clickerService = {
+    dependencies: ["action", "effect", "notification"],
+    start(env, services) {
+        const localState = migrate(JSON.parse(browser.localStorage.getItem("clickerState")));
+        const model = localState ? ClickerModel.fromJSON(localState): new ClickerModel();
+
+        document.addEventListener("click", () => model.increment(1), true);
+
+        setInterval(() => model.clickBotsAction(), 10000);
+        setInterval(() => model.treesAction(), 30000);
+        setInterval(() => {
+            browser.localStorage.setItem("clickerState", JSON.stringify(model))
+        }, 10000);
+
+        const bus = model.bus;
+        bus.addEventListener("MILESTONE", (ev) => {
+            services.effect.add({
+                message: `Milestone reached! You can now buy ${ev.detail.bot}`,
+                type: "rainbow_man",
+            });
+        });
+
+        bus.addEventListener("REWARD", (ev) => {
+            const closeNotification = services.notification.add(
+                `Congrats you won a reward: "${ev.detail.description}"`,
+                {
+                    type: "success",
+                    sticky: true,
+                    buttons: [
+                        {
+                            name: "Collect",
+                            onClick: () => {
+                                ev.detail.apply(model);
+                                closeNotification();
+                                services.action.doAction({
+                                    type: "ir.actions.client",
+                                    tag: "awesome_clicker.ClientAction",
+                                    target: "new",
+                                    name: "Clicker Game"
+                                });
+                            },
+                        },
+                    ],
+                }
+            );
+        });
+
+        return model
+    }
+}
+
+registry.category("services").add("awesome_clicker.clicker", clickerService);