18.0 js onboarding frbin

awesome_clicker/static/src/click_rewards.js

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

awesome_clicker/static/src/click_value/ClickValue.js

@@ -0,0 +1,14 @@
+import {Component} from "@odoo/owl";
+import { humanNumber } from "@web/core/utils/numbers";
+
+export class ClickValue extends Component {
+    static template = 'awesome_clicker.click_value'
+    static props = { value: Number }
+    static components = {}
+
+    setup() {}
+
+    humanizedValue() {
+        return humanNumber(this.props.value, { minDigits: 2 });
+    }
+}

awesome_clicker/static/src/click_value/ClickValue.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_clicker.click_value">
+        <span t-att-data-tooltip="props.value">Clicks: <t t-esc="humanizedValue()"/></span>
+    </t>
+</templates>

awesome_clicker/static/src/clicker_command_provider.js

@@ -0,0 +1,26 @@
+import { registry } from "@web/core/registry";
+
+registry.category('command_provider').add("clicker", {
+    provide: (env, options) => {
+        return [{
+                action() {
+                    env.services.action.doAction({
+                        type: "ir.actions.client",
+                        tag: "awesome_clicker.client_action",
+                        target: "new",
+                        name: "Clicker Game"
+                    })
+                },
+                category: "debug",
+                name: "Open clicker game",
+            },
+            {
+                action() {
+                    env.services["clicker"].buyClickBot()
+                },
+                category: "debug",
+                name: "Buy one click bot",
+            }
+        ]
+    }
+})

awesome_clicker/static/src/clicker_model.js

@@ -0,0 +1,71 @@
+import { Reactive } from "@web/core/utils/reactive";
+import { EventBus } from "@odoo/owl";
+import {rewards} from "./click_rewards";
+
+export class ClickerModel extends Reactive {
+
+    constructor() {
+        super()
+        this.clicks = 850
+        this.level = 0
+        this.clickBots = 0
+        this.bigBots = 0
+        this.power = 1
+        this.bus = new EventBus();
+    }
+
+    increment(inc) {
+        this.clicks += inc;
+        if (this.level < 1 && this.clicks >= 1000) {
+            this.level++;
+            this.bus.trigger("Level1");
+        }
+        if (this.level === 1 && this.clicks >= 5000) {
+            this.level++;
+            this.bus.trigger("Level2")
+        }
+        if (this.level === 2 && this.clicks >= 100000) {
+            this.level++;
+            this.bus.trigger("Level3")
+        }
+    }
+
+    tick() {
+        this.increment((this.clickBots * 10 + this.bigBots * 100) * this.power);
+    }
+
+    buyClickBot() {
+        const clickBotPrice = 1000;
+        if (this.clicks < clickBotPrice) {
+            return false;
+        }
+        this.clicks -= clickBotPrice;
+        this.clickBots++;
+    }
+
+    buyBigBot() {
+        const bigBotPrice = 5000;
+        if (this.clicks < bigBotPrice) {
+            return false;
+        }
+        this.clicks -= bigBotPrice;
+        this.bigBots++;
+    }
+
+    buyPower() {
+        const powerPrice = 100000;
+        if (this.clicks < powerPrice) {
+            return false
+        }
+        this.clicks -= powerPrice;
+        this.power++;
+    }
+
+    giveReward() {
+        const validRewards = rewards.filter((r) => r.maxLevel >= this.level && r.minLevel <= this.level);
+        console.log(validRewards);
+        const reward = validRewards[Math.floor(Math.random() * validRewards.length)];
+        console.log(reward)
+        this.bus.trigger("Reward", reward)
+    }
+}

awesome_clicker/static/src/clicker_service.js

@@ -0,0 +1,42 @@
+import { registry } from "@web/core/registry";
+import { ClickerModel } from "./clicker_model";
+
+const ClickerService = {
+    dependencies: ["effect", "action", "notification"],
+    start(env, services) {
+        const clicker = new ClickerModel()
+
+        document.addEventListener("click", () => clicker.increment(1), true);
+        clicker.bus.addEventListener("Level1", () => services.effect.add({ message: "Level up! You can now buy click bots!"}))
+        clicker.bus.addEventListener("Level2", () => services.effect.add({ message: "Level up! You can now buy big bots!"}))
+        clicker.bus.addEventListener("Level3", () => services.effect.add({ message: "Level up! You can now buy powers!"}))
+        clicker.bus.addEventListener("Reward", (e) => {
+            const reward = e.detail;
+            const closeNotification = services.notification.add(`You won a reward!: "${reward.description}"`,
+                {
+                    type: "success",
+                    sticky: true,
+                    buttons: [
+                        {
+                            name: "Collect",
+                            onClick: () => {
+                                reward.apply(clicker);
+                                closeNotification();
+                                services.action.doAction({
+                                    type: "ir.actions.client",
+                                    tag: "awesome_clicker.client_action",
+                                    target: "new",
+                                    name: "Clicker Game"
+                                })
+                            }
+                        }
+                    ]
+                })
+        })
+
+        setInterval(() => clicker.tick(), 10 * 1000)
+        return clicker;
+    },
+};
+
+registry.category("services").add("clicker", ClickerService);

awesome_clicker/static/src/clicker_systray_item/clicker_systray_item.js

@@ -0,0 +1,29 @@
+import { Component, useState, useExternalListener } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { useClicker } from "../useClicker";
+import { ClickValue } from "../click_value/ClickValue";
+
+export class ClickerSystrayItem extends Component {
+    static template = 'awesome_clicker.systray_item'
+    static props = {}
+    static components = {ClickValue}
+
+    setup() {
+        this.actionService = useService('action')
+        this.clicker = useClicker()
+    }
+
+    openDialog() {
+        this.actionService.doAction({
+           type: "ir.actions.client",
+           tag: "awesome_clicker.client_action",
+           target: "new",
+           name: "Clicker"
+        })
+    }
+}
+
+registry.category("systray").add("awesome_clicker.clicker", {
+    Component: ClickerSystrayItem,
+}, { sequence: 100 });

awesome_clicker/static/src/clicker_systray_item/clicker_systray_item.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_clicker.systray_item">
+        <div class="o_nav_entry gap-1">
+            <ClickValue value="clicker.clicks"/>
+            <button class="btn btn-secondary" t-on-click="openDialog">
+                Open
+            </button>
+        </div>
+    </t>
+</templates>

awesome_clicker/static/src/client_action/client_action.js

@@ -0,0 +1,28 @@
+import {Component} from "@odoo/owl";
+import {registry} from "@web/core/registry";
+import {useClicker} from "../useClicker";
+import {ClickValue} from "../click_value/ClickValue";
+
+export class ClientAction extends Component {
+    static template = 'awesome_clicker.action'
+    static props = {}
+    static components = {ClickValue}
+
+    setup() {
+        this.clicker = useClicker();
+    }
+
+    canBuyClickBot() {
+        return this.clicker.level > 0 && this.clicker.clicks >= 1000
+    }
+
+    canBuyBigBot() {
+        return this.clicker.level > 1 && this.clicker.clicks >= 5000
+    }
+
+    canBuyPower() {
+        return this.clicker.level > 2 && this.clicker.clicks >= 100000
+    }
+}
+
+registry.category("actions").add("awesome_clicker.client_action", ClientAction);

awesome_clicker/static/src/client_action/client_action.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_clicker.action">
+        <div class="m-1 p-2">
+            <div class="d-flex align-items-center gap-2">
+                <ClickValue value="clicker.clicks"/>
+                <button class="btn btn-secondary" t-on-click="() => clicker.increment(300)">
+                    CLICK!
+                </button>
+            </div>
+            <h2 class="mt-2">Bots</h2>
+            <div class="d-flex gap-2">
+                <div>
+                    <div class="d-flex border bg-light mt-1 ms-1 p-3 align-items-center">
+                        <span><t t-esc="clicker.clickBots"/>x ClickBots (10 clicks/10seconds)</span>
+                    </div>
+                    <div class="d-flex border ms-1 p-3">
+                        <button class="btn btn-primary" t-on-click="() => clicker.buyClickBot()" t-att-disabled="!canBuyClickBot()">Buy ClickBot (1000) clicks</button>
+                    </div>
+                </div>
+                <div> <!--refactor into separate BuyClickBot component later-->
+                    <div class="d-flex border bg-light mt-1 ms-1 p-3 align-items-center">
+                        <span><t t-esc="clicker.bigBots"/>x BigBots (100 clicks/10seconds)</span>
+                    </div>
+                    <div class="d-flex border ms-1 p-3">
+                        <button class="btn btn-primary" t-on-click="() => clicker.buyBigBot()" t-att-disabled="!canBuyBigBot()">Buy BigBot (5000) clicks</button>
+                    </div>
+                </div>
+            </div>
+            <h2 class="mt-2">Power multiplier</h2>
+            <div class="d-flex gap-2">
+                <div>
+                    <div class="d-flex border bg-light mt-1 ms-1 p-3 align-items-center">
+                        <span><t t-esc="clicker.power"/>x POWER!!!!</span>
+                    </div>
+                    <div class="d-flex border ms-1 p-3">
+                        <button class="btn btn-primary" t-on-click="() => clicker.buyPower()" t-att-disabled="!canBuyPower()">Buy Power (100k) clicks</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_clicker/static/src/form_controller/form_controller_patch.js

@@ -0,0 +1,13 @@
+import { FormController } from "@web/views/form/form_controller";
+import { patch } from "@web/core/utils/patch";
+import { useClicker } from "../useClicker";
+
+patch(FormController.prototype, {
+    setup() {
+        super.setup(...arguments)
+        if (Math.random() < 0.6) {
+            const clicker = useClicker();
+            clicker.giveReward()
+        }
+    }
+})

awesome_clicker/static/src/useClicker.js

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

awesome_clicker/static/views/views.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+<data>
+    <record model="ir.actions.client" id="my_client_action">
+        <field name="name">Clicker Action</field>
+        <field name="tag">awesome_clicker.client_action</field>
+    </record>
+</data>
+</odoo>