[Day18] POPCAT in WASM (Part 2)

好 那今天就会完成这个小专案
可能 CSS 的部份写的没有很好 ouo
读者可以自行修改

还是再放一次成品
回顾一下昨天做了什麽

• 基本架构
• 引入音乐

其实当成功引入音乐
这个东西就完成一半了
因为我当初卡在这边卡很久
废话不多说
直接看 code 吧
完成品
给我星星啦！！！

struct Model {
    link: ComponentLink<Self>,
    value: i64,
    sounds: web_sys::HtmlAudioElement,
    src: String,
}

可以看到跟昨天不一样的是多了一个 src
这个 src 是用来做什麽的呢
答案是：用来改变图片用的
因为在 View 那边是能够直接去控制 这个 html 元件的
好接下来

enum Msg {
    AddOne,
    Change,
    Back,
}

这边则增加了 Change 跟 Back 两个选项
而对应了 update 中的

Msg::Change => {
    console::log!("aaa");
    self.src = "./popcat2.png".to_string();
    console::log!("aaa");
    true
}
Msg::Back => {
    self.src = "./popcat1.png".to_string();
    true
}

上面的 console::log! 是拿来测试是否有使用到这个部份
以及是否成功更改路径
那因为我们有更改东西所以记得回传 true
那接下来就是最後了 owob

<div class="container">
    <h1>{ "POPCAT" }</h1>
    <p>{ "score:" }{ self.value }</p>
    <img src={ self.src.clone() }
    onmousedown=self.link.callback(|_| Msg::Change)
    onmouseup=self.link.callback(|_| Msg::Back)
    onclick=self.link.callback(|_| Msg::AddOne)
    height="600px"/>
</div>

上面引入 class 也就是他的 CSS
那接下来下面的部份我也查了蛮久 (我没有写网页的 JS 的经验
onmousedown
onmouseup
从这两个 Event 中可以发现
当按着的时候 Call function 放开再 Call 另一个 function
就能做到我们要的 按着更变路径 放开还原路径 的一个功能
那我在写这边的时候还遇到了一个问题
当初我是让他 Call 在 View 函数中的闭包的
然後他会显示说无法更动，所以撰写时要特别注意～
那麽最後 就会是我们要的 POPCAT 了
这只是个使用的例子
也可以自己找一个有兴趣的东西做做看喔

那其实在写这边的时候查了蛮多的 Github 查有关 HtmlAudioElement 的用法
可能读者在看时觉得好像很简单
但是事实上我研究了至少 3 个小时才找到我想要的东西
总之 各位晚安 希望这篇对你有帮助
明天会讲另一个 Example 之後带另一个专案
但是我不打算写 CSS 了 我 CSS 真的有够烂 QQ