Technical onboarding - Discover the web framework - FLMAL

awesome_clicker/static/src/ClickValue.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 = {
+        clicks: Number
+    }
+
+    setup() {
+        this.humanize = (clicks) => {
+            return humanNumber(clicks, {decimals: clicks > 1000 ? 1 : 0});
+        }
+    }
+}

awesome_clicker/static/src/ClickValue.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<templates xml:space="preserve">
+
+    <t t-name="awesome_clicker.ClickValue">
+        <div class="d-flex flex-row align-items-center">
+            <span t-att-data-tooltip="props.clicks">
+                <t t-esc="humanize(props.clicks)"/>
+            </span>
+        </div>
+    </t>
+
+</templates>

awesome_clicker/static/src/click_rewards.js

@@ -0,0 +1,24 @@
+export const rewards = [
+    {
+        description: "Get 1 click bot",
+        apply(clicker) {
+            clicker.bots[0].amount += 1;
+        },
+        maxLevel: 3,
+    },
+    {
+        description: "Get 10 click bot",
+        apply(clicker) {
+            clicker.bots[0].amount += 10;
+        },
+        minLevel: 3,
+        maxLevel: 4,
+    },
+    {
+        description: "Increase bot power!",
+        apply(clicker) {
+            clicker.power += 1;
+        },
+        minLevel: 3,
+    },
+ ];

awesome_clicker/static/src/clicker_migration.js

@@ -0,0 +1,23 @@
+export const CURRENT_VERSION = 2.0;
+export const migrations = [
+    {
+        fromVersion: 1.0,
+        toVersion: 2.0,
+        apply: (state) => {
+            state.trees.push({fruit: "Peach", price: 1000000, amount: 0, fruit_number: 0 })
+        },
+    },
+];
+
+export function migrate(localState) {
+    if (localState?.version < CURRENT_VERSION) {
+        for (const migration of migrations) {
+            if (localState.version === migration.fromVersion) {
+                migration.apply(localState);
+                localState.version = migration.toVersion
+            }
+        }
+        localState.version = CURRENT_VERSION;
+    }
+    return localState;
+}

awesome_clicker/static/src/clicker_model.js

@@ -0,0 +1,94 @@
+import { Reactive } from "@web/core/utils/reactive";
+import { EventBus } from "@odoo/owl";
+import { rewards } from "./click_rewards";
+import { choose } from "./utils";
+import { CURRENT_VERSION } from "./clicker_migration";
+
+export class ClickerModel extends Reactive {
+    constructor() {
+        super();
+        this.version = CURRENT_VERSION;
+        this.clicks = 0;
+        this.level = 0;
+        this.power = 1;
+        this.bus = new EventBus();
+        this.milestones = [
+            { clicks: 1000, unlock: "ClickBots" },
+            { clicks: 5000, unlock: "BigBots"},
+            { clicks: 100000, unlock: "Power multipliers"},
+            { clicks: 1000000, unlock: "Trees" }
+        ]
+        this.bots = [
+            { name: "Click Bot", price: 1000, amount: 0, clicks: 10 },
+            { name: "Big Bot", price: 5000, amount: 0, clicks: 100 },
+        ]
+        this.trees = [
+            { fruit: "Pear", price: 1000000, amount: 0, fruit_number: 0 },
+            { fruit: "Cherry", price: 1000000, amount: 0, fruit_number: 0 },
+            { fruit: "Apple", price: 1000000, amount: 0, fruit_number: 0 },
+            { fruit: "Orange", price: 1000000, amount: 0, fruit_number: 0 },
+            { fruit: "Peach", price: 1000000, amount: 0, fruit_number: 0 },
+        ]
+    }
+
+    increment(inc) {
+        this.clicks += inc;
+        if (this.milestones[this.level] &&this.clicks >= this.milestones[this.level].clicks) {
+            this.bus.trigger("MILESTONE", this.milestones[this.level]);
+            this.level += 1;
+            this.getReward()
+        }
+    }
+
+    buyBot(bot) {
+        if (this.clicks >= bot.price) {
+            bot.amount++;
+            this.clicks -= bot.price;
+        }
+    }
+
+    buyClickBot() {
+        this.buyBot(this.bots[0]);
+    }
+
+    buyBigBot() {
+        this.buyBot(this.bots[1]);
+    }
+
+    buyPower() {
+        if (this.clicks >= 50000) {
+            this.power++;
+            this.clicks -= 50000;
+        }
+    }
+
+    buyTree(tree) {
+        if (this.clicks >= tree.price) {
+            tree.amount++;
+            this.clicks -= tree.price;
+        }
+    }
+
+    getReward() {
+        const reward = choose(this, rewards);
+        this.bus.trigger("REWARD", reward);
+    }
+
+    getTotalTrees() {
+        let total = 0;
+        this.trees.forEach((tree) => total += tree.amount)
+        return total;
+    }
+
+    getTotalFruits() {
+        let total = 0;
+        this.trees.forEach((tree) => total += tree.fruit_number)
+        return total;
+    }
+
+    toJSON() {
+        const json = Object.assign({}, this);
+        delete json["bus"];
+        return json;
+    }
+}

awesome_clicker/static/src/clicker_provider.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: "Buy 1 click bot",
+                action() {
+                    const clicker = env.services["awesome_clicker.clicker_service"].buyClickBot();
+                },
+            },
+            {
+                name: "Open Clicker Game",
+                action() {
+                    env.services.action.doAction({
+                        type: "ir.actions.client",
+                        tag: "awesome_clicker.client_action",
+                        target: "new",
+                        name: "Clicker Game",
+                    });
+                },
+            },
+        ];
+    },
+});

awesome_clicker/static/src/clicker_service.js

@@ -0,0 +1,53 @@
+import { registry } from "@web/core/registry";
+import { ClickerModel } from "./clicker_model";
+import { migrate } from "./clicker_migration";
+
+const clickerService = {
+    dependencies: ["effect", "notification"],
+    start(env, services) {
+        const localClicker = migrate(JSON.parse(localStorage.getItem("clicker")))
+        const clicker = localClicker ? Object.assign(new ClickerModel(), localClicker) : new ClickerModel()
+
+        setInterval(() => {
+            clicker.bots.forEach((bot) => clicker.increment(clicker.power * bot.amount * bot.clicks));
+        }, 10*1000);
+
+        setInterval(() => {
+            clicker.trees.forEach((tree) => tree.fruit_number += tree.amount)
+        }, 30*1000)
+
+        setInterval(() => {
+            localStorage.setItem("clicker", JSON.stringify(clicker));
+        }, 10*1000);
+
+        const bus = clicker.bus;
+        bus.addEventListener("MILESTONE", (ev) => {
+            services.effect.add({
+                type: "rainbow_man",
+                message: `Milestone reached! You can now buy ${ev.detail.unlock}`
+            });
+        });
+
+        bus.addEventListener("REWARD", (ev) => {
+            const reward = ev.detail;
+            const closeNotification = services.notification.add(`Congrats you won a reward: "${reward.description}"`,{
+                    type: "success",
+                    sticky: true,
+                    buttons: [
+                        {
+                            name: "Collect",
+                            onClick: () => {
+                                reward.apply(clicker);
+                                closeNotification();
+                            },
+                        },
+                    ],
+                }
+            );
+        })
+
+        return clicker
+    },
+};
+
+registry.category("services").add("awesome_clicker.clicker_service", clickerService);

awesome_clicker/static/src/clicker_systray_item.js

@@ -0,0 +1,33 @@
+import { Component, useExternalListener } from '@odoo/owl'
+import { useService } from "@web/core/utils/hooks";
+import { registry } from "@web/core/registry";
+import { useClicker } from "./hooks";
+import { ClickValue } from './ClickValue';
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+
+export class ClickerSystray extends Component {
+    static template = "awesome_clicker.ClickerSystray";
+    static components = { ClickValue, Dropdown, DropdownItem }
+
+    setup() {
+        this.clicker = useClicker();
+        this.action = useService("action");
+        useExternalListener(document.body, "click", () => this.clicker.increment(1), { capture: true });
+    }
+
+    openClicker = () => {
+        this.action.doAction({
+            type: "ir.actions.client",
+            tag: "awesome_clicker.client_action",
+            target: "new",
+            name: "Clicker Game",
+        });
+    }
+}
+
+export const systrayItem = {
+    Component: ClickerSystray,
+};
+
+registry.category("systray").add("awesome_clicker.ClickerSystray", systrayItem, { sequence: 10 });

awesome_clicker/static/src/clicker_systray_item.xml

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<templates xml:space="preserve">
+
+    <t t-name="awesome_clicker.ClickerSystray">
+        <Dropdown>
+            <button>
+                <ClickValue clicks="this.clicker.clicks"/> <i class="fa fa-mouse-pointer fa-fw"></i>,
+                <t t-esc="this.clicker.getTotalTrees()"/> <i class="fa fa-tree fa-fw"></i>,
+                <t t-esc="this.clicker.getTotalFruits()"/> <i class="fa fa-apple fa-fw"></i>
+            </button>
+
+            <t t-set-slot="content">
+                <DropdownItem>
+                    <button class="btn btn-secondary" t-on-click="openClicker">Open the clicker game</button>
+                </DropdownItem>
+                <DropdownItem>
+                    <button class="btn btn-secondary" t-on-click="this.clicker.buyClickBot">Buy a Click Bot</button>
+                </DropdownItem>
+                <t t-foreach="this.clicker.trees" t-as="tree" t-key="tree.fruit">
+                    <DropdownItem>
+                        <t t-esc="tree.amount + 'x ' + tree.fruit + ' Tree'"/>
+                    </DropdownItem>
+                </t>
+                <t t-foreach="this.clicker.trees" t-as="tree" t-key="tree.fruit">
+                    <DropdownItem>
+                        <t t-esc="tree.fruit_number + 'x ' + tree.fruit"/>
+                    </DropdownItem>
+                </t>
+            </t>
+        </Dropdown>
+    </t>
+
+</templates>

awesome_clicker/static/src/client_action.js

@@ -0,0 +1,16 @@
+import { Component } from "@odoo/owl"
+import { registry } from "@web/core/registry";
+import { useClicker } from "./hooks";
+import { ClickValue } from './ClickValue';
+import { Notebook } from "@web/core/notebook/notebook";
+
+export class ClientAction extends Component {
+    static template = "awesome_clicker.ClientAction";
+    static components = { ClickValue, Notebook }
+
+    setup() {
+        this.clicker = useClicker();
+    }
+}
+
+registry.category("actions").add("awesome_clicker.client_action", ClientAction);