[IMP] tutorials: first commit

awesome_clicker/static/src/click_reward.js

@@ -0,0 +1,34 @@
+import { choose } from "./utils";
+
+
+const rewards = [
+    {
+        description: "Get 1 click bot",
+        apply(clicker) {
+            clicker.increment(1);
+        },
+        maxLevel: 3,
+    },
+    {
+        description: "Get 10 click bots",
+        apply(clicker) {
+            clicker.increment(10);
+        },
+        minLevel: 3,
+        maxLevel: 4,
+    },
+    {
+        description: "Increase bot power",
+        apply(clicker) {
+            clicker.power += 1;
+        },
+        minLevel: 3,
+    },
+];
+
+export function getReward(level){
+    const availableRewards = rewards.filter((reward) => {
+        return (level >= (reward?.minLevel || level)) && (level <= (reward?.maxLevel || level));
+    });
+    return choose(availableRewards);
+}

awesome_clicker/static/src/click_value/click_value.js

@@ -0,0 +1,16 @@
+import { Component } from "@odoo/owl";
+import { humanNumber } from "@web/core/utils/numbers";
+import { useClicker } from "../clicker_hook";
+
+
+export class ClickValue extends Component {
+    static template = "awesome_clicker.click_value";
+
+    setup() {
+        this.clicker = useClicker();
+    }
+
+    get clicks(){
+        return humanNumber(this.clicker.clicks, { 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.click_value">
+        <span t-att-data-tooltip="clicker.clicks">
+            <t t-esc="clicks"/>
+        </span>
+    </t>
+
+</templates>

awesome_clicker/static/src/clicker_hook.js

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

awesome_clicker/static/src/clicker_model.js

@@ -0,0 +1,128 @@
+/* @odoo-module */
+import { Reactive } from "@web/core/utils/reactive";
+import { EventBus } from "@odoo/owl";
+import { getReward } from "./click_reward";
+
+
+export class ClickerModel extends Reactive {
+    constructor(state){
+        super();
+        this._clicks = state?._clicks || 0;
+        this._level = state?._level || 0;
+        this._power = state?._power || 1;
+        this._bots = {
+            clickBot: {
+                price: 1000,
+                level: 1,
+                increment: 10,
+                purchased: state?._bots?.clickBot?.purchased || 0,
+            },
+            bigBot: {
+                price: 5000,
+                level: 2,
+                increment: 100,
+                purchased: state?._bots?.bigBot?.purchased || 0,
+            },
+        };
+        this.trees = {
+            pearTree: {
+                price: 1000000,
+                level: 4,
+                produce: "pear",
+                purchased: state?.trees?.pearTree?.purchased || 0
+            },
+            cherryTree: {
+                price: 1000000,
+                level: 4,
+                produce: "cherry",
+                purchased: state?.trees?.cherryTree?.purchased || 0
+            },
+        };
+        this.fruits = {
+            pear: state?.fruits?.pear || 0,
+            cherry: state?.fruits?.cherry || 0,
+        };
+        this._milestones = [
+            { clicks: 1000, unlock: "clickBot" },
+            { clicks: 5000, unlock: "bigBot" },
+            { clicks: 100000, unlock: "power multiplier" },
+            { clicks: 1000000, unlock: "trees" },
+        ];
+        this._bus = new EventBus();
+        this._tick = state?._tick || 0;
+    }
+
+    setup(){}
+
+    get clicks(){ return this._clicks; }
+
+    get level(){ return this._level; }
+
+    get power() { return this._power; }
+    set power(pwr){ this._power = pwr; }
+
+    get bots() { return this._bots; }
+
+    get firePower(){
+        let sum = 0;
+        for(const bot in this._bots){
+            sum += this._bots[bot].purchased * this._bots[bot].increment * this._power;
+        }
+        return sum;
+    }
+
+    get bus(){ return this._bus; }
+
+    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++;
+        }
+    }
+
+    tick(){
+        this._tick++;
+        for(const bot in this._bots){
+            this.increment(this._bots[bot].increment * this._power * this._bots[bot].purchased);
+        }
+        if(this._tick === 3){
+            for(const tree in this.trees){
+                this.fruits[this.trees[tree].produce] += this.trees[tree].purchased;
+            }
+            this._tick = 0;
+        }
+    }
+
+    buyBot(name){
+        if(!Object.keys(this._bots).includes(name)){
+            throw new Error(`Invalid bot name ${name}`);
+        }
+        if(this._clicks < this._bots[name].price){
+            return false;
+        }
+        this.increment(-this._bots[name].price);
+        this._bots[name].purchased++;
+    }
+
+    buyPower(nb){
+        if(this._clicks >= 50000 && this._level >= 3){
+            this._power += nb;
+            this.increment(-50000*nb);
+        }
+    }
+
+    buyTree(name){
+        if(this._clicks >= this.trees[name].price){
+            this.trees[name].purchased++;
+            this.increment(-this.trees[name].price);
+        }
+    }
+
+    getReward(){
+        const reward = getReward(this._level);
+        this._bus.trigger("REWARD", reward);
+    }
+
+}

awesome_clicker/static/src/clicker_provider.js

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

awesome_clicker/static/src/clicker_service.js

@@ -0,0 +1,63 @@
+import { registry } from "@web/core/registry";
+import { ClickerModel } from "./clicker_model";
+import { EventBus } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+import { browser } from "@web/core/browser/browser";
+
+
+const clickerService = {
+    dependencies: ["action", "effect", "notification"],
+    start(env, services){
+        const clicker_state_storage = browser.localStorage.getItem("clicker_state");
+        let state = undefined;
+        if(clicker_state_storage){
+            state = JSON.parse(clicker_state_storage);
+        }
+        const clicker_model = new ClickerModel(state);
+
+        const bus = clicker_model.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_model);
+                                closeNotification();
+                                services.action.doAction({
+                                    type: "ir.actions.client",
+                                    tag: "awesome_clicker.client_action",
+                                    target: "new",
+                                    name: "Clicker Game"
+                                });
+                            }
+                        }
+                    ]
+                }
+            );
+        });
+
+        document.addEventListener("click", () => clicker_model.increment(1), true);
+        setInterval(() => {
+            clicker_model.tick();
+            browser.localStorage.setItem("clicker_state", JSON.stringify(clicker_model));
+        }, 10000);
+
+
+        return clicker_model;
+    }
+};
+
+registry.category("services").add("clickerService", clickerService);

awesome_clicker/static/src/clicker_systray_item.js

@@ -0,0 +1,58 @@
+import { registry } from "@web/core/registry";
+import { Component, useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+import { useClicker } from "./clicker_hook";
+import { ClickValue } from "./click_value/click_value";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+
+
+class Clicker extends Component {
+    static template = "awesome_clicker.clicker_systray_item";
+    static components = { ClickValue, Dropdown, DropdownItem };
+
+    setup(){
+        this.clicker = useClicker();
+        this.action = useService("action");
+    }
+
+    increment(){
+        this.clicker.increment(9);
+    }
+
+    openClientAction(){
+        this.action.doAction({
+            type: "ir.actions.client",
+            tag: "awesome_clicker.client_action",
+            target: "new",
+            name: "Clicker Game"
+        });
+    }
+
+    get numberTrees() {
+        let sum = 0;
+        for(const tree in this.clicker.trees){
+            sum += this.clicker.trees[tree].purchased;
+        }
+        return sum;
+    }
+
+    get numberFruits() {
+        let sum = 0;
+        for(const fruit in this.clicker.fruits){
+            sum += this.clicker.fruits[fruit];
+        }
+        return sum;
+    }
+
+    get numberBots(){
+        let sum = 0;
+        for(const bot in this.clicker.bots){
+            sum += this.clicker.bots[bot].purchased;
+        }
+        return sum;
+    }
+
+}
+
+registry.category("systray").add("awesome_clicker.Clicker", { Component: Clicker });

awesome_clicker/static/src/clicker_systray_item.xml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_clicker.clicker_systray_item">
+        <div class="o_nav_entry">
+            <Dropdown>
+                <button>
+                    <ClickValue/> <i class="fa fa-mouse-pointer fa-fw"/>
+                    <t t-esc="this.numberBots"/> <i class="fa fa-android fa-fw"/>
+                    <t t-esc="this.numberTrees"/> <i class="fa fa-tree fa-fw"/>
+                    <t t-esc="this.numberFruits"/> <i class="fa fa-apple fa-fw"/>
+                </button>
+                <t t-set-slot="content">
+                    <DropdownItem>
+                        <button class="btn btn-secondary" t-on-click="this.openClientAction">
+                            Open the clicker game
+                        </button>
+                    </DropdownItem>
+                    <DropdownItem>
+                        <button class="btn btn-secondary" t-on-click="() => this.clicker.buyBot('clickBot')">
+                            Buy a ClickBot
+                        </button>
+                    </DropdownItem>
+                    <DropdownItem t-foreach="this.clicker.bots" t-as="bot" t-key="bot">
+                        <t t-esc="bot_value.purchased"/>x
+                        <t t-esc="bot"/>
+                    </DropdownItem>
+                    <DropdownItem t-foreach="this.clicker.trees" t-as="tree" t-key="tree">
+                        <t t-esc="tree_value.purchased"/>x
+                        <t t-esc="tree"/>
+                    </DropdownItem>
+                    <DropdownItem t-foreach="this.clicker.fruits" t-as="fruit" t-key="fruit">
+                        <t t-esc="fruit_value"/>x
+                        <t t-esc="fruit"/>
+                    </DropdownItem>
+                </t>
+
+            </Dropdown>
+        </div>
+    </t>
+</templates>