Add ability score fields

index.html

@@ -28,6 +28,10 @@ label {
     margin-bottom: 8px;
 }
 
+.ability-scores .field input {
+    width: 65px;
+}
+
 #character-class {
     width: 130px;
 }

src/ability_scores.rs

@@ -0,0 +1,139 @@
+use yew::services::console::ConsoleService;
+
+#[derive(Debug)]
+pub enum Message {
+    Strength(yew::ChangeData),
+    Dexterity(yew::ChangeData),
+    Constitution(yew::ChangeData),
+    Intelligence(yew::ChangeData),
+    Wisdom(yew::ChangeData),
+    Charisma(yew::ChangeData),
+}
+
+pub struct AbilityScores {
+    link: yew::ComponentLink<Self>,
+
+    strength: i32,
+    dexterity: i32,
+    constitution: i32,
+    intelligence: i32,
+    wisdom: i32,
+    charisma: i32,
+}
+
+impl yew::Component for AbilityScores {
+    type Message = Message;
+    type Properties = ();
+
+    fn create(_props: Self::Properties, link: yew::ComponentLink<Self>) -> Self {
+        Self {
+            link,
+            strength: 10,
+            dexterity: 10,
+            constitution: 10,
+            intelligence: 10,
+            wisdom: 10,
+            charisma: 10,
+        }
+    }
+
+    fn update(&mut self, message: Self::Message) -> yew::ShouldRender {
+        match message {
+            Message::Strength(yew::ChangeData::Value(strength)) => {
+                self.strength = strength.parse().unwrap_or(10);
+            }
+            Message::Dexterity(yew::ChangeData::Value(dexterity)) => {
+                self.dexterity = dexterity.parse().unwrap_or(10);
+            }
+            Message::Constitution(yew::ChangeData::Value(constitution)) => {
+                self.constitution = constitution.parse().unwrap_or(10);
+            }
+            Message::Intelligence(yew::ChangeData::Value(intelligence)) => {
+                self.intelligence = intelligence.parse().unwrap_or(10);
+            }
+            Message::Wisdom(yew::ChangeData::Value(wisdom)) => {
+                self.wisdom = wisdom.parse().unwrap_or(10);
+            }
+            Message::Charisma(yew::ChangeData::Value(charisma)) => {
+                self.charisma = charisma.parse().unwrap_or(10);
+            }
+            _ => {
+                ConsoleService::log(&format!("{:?}", message));
+                return false;
+            }
+        }
+
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> yew::ShouldRender {
+        false
+    }
+
+    fn view(&self) -> yew::Html {
+        yew::html! {
+            <div class="ability-scores">
+                <div class="field">
+                    <input
+                        type="number"
+                        id="ability-strength"
+                        value={self.strength.to_string()}
+                        onchange=self.link.callback(|e| Message::Strength(e))
+                    />
+                    {(self.strength - 10) / 2}
+                    <label for="ability-strength">{"Strength"}</label>
+                </div>
+                <div class="field">
+                    <input
+                        type="number"
+                        id="ability-dexterity"
+                        value={self.dexterity.to_string()}
+                        onchange=self.link.callback(|e| Message::Dexterity(e))
+                    />
+                    {(self.dexterity - 10) / 2}
+                    <label for="ability-dexterity">{"Dexterity"}</label>
+                </div>
+                <div class="field">
+                    <input
+                        type="number"
+                        id="ability-constitution"
+                        value={self.constitution.to_string()}
+                        onchange=self.link.callback(|e| Message::Constitution(e))
+                    />
+                    {(self.constitution - 10) / 2}
+                    <label for="ability-constitution">{"Constitution"}</label>
+                </div>
+                <div class="field">
+                    <input
+                        type="number"
+                        id="ability-intelligence"
+                        value={self.intelligence.to_string()}
+                        onchange=self.link.callback(|e| Message::Intelligence(e))
+                    />
+                    {(self.intelligence - 10) / 2}
+                    <label for="ability-intelligence">{"Intelligence"}</label>
+                </div>
+                <div class="field">
+                    <input
+                        type="number"
+                        id="ability-wisdom"
+                        value={self.wisdom.to_string()}
+                        onchange=self.link.callback(|e| Message::Wisdom(e))
+                    />
+                    {(self.wisdom - 10) / 2}
+                    <label for="ability-wisdom">{"Wisdom"}</label>
+                </div>
+                <div class="field">
+                    <input
+                        type="number"
+                        id="ability-charisma"
+                        value={self.charisma.to_string()}
+                        onchange=self.link.callback(|e| Message::Charisma(e))
+                    />
+                    {(self.charisma - 10) / 2}
+                    <label for="ability-charisma">{"Charisma"}</label>
+                </div>
+            </div>
+        }
+    }
+}

src/character_info.rs

@@ -0,0 +1,79 @@
+pub enum Message {}
+
+pub struct CharacterInfo {
+    _link: yew::ComponentLink<Self>,
+}
+
+impl yew::Component for CharacterInfo {
+    type Message = Message;
+    type Properties = ();
+
+    fn create(_props: Self::Properties, link: yew::ComponentLink<Self>) -> Self {
+        Self { _link: link }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> yew::ShouldRender {
+        false
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> yew::ShouldRender {
+        false
+    }
+
+    fn view(&self) -> yew::Html {
+        yew::html! {
+            <div class="columns">
+                <div class="field">
+                    <input id="character-name"/>
+                    <label for="character-name">{"Character name"}</label>
+                </div>
+                <div>
+                    <div class="columns">
+                        <div class="field">
+                            <input id="character-class"/>
+                            <label for="character-class">{"Class"}</label>
+                        </div>
+                        <div class="field">
+                            <input type="number" id="character-level"/>
+                            <label for="character-level">{"Level"}</label>
+                        </div>
+                    </div>
+                    <div class="field">
+                        <input id="character-race"/>
+                        <label for="character-race">{"Race"}</label>
+                    </div>
+                </div>
+                <div>
+                    <div class="field">
+                        <input id="character-background"/>
+                        <label for="character-background">{"Background"}</label>
+                    </div>
+                    <div class="field">
+                        <select id="character-alignment">
+                            <option value="lg">{"Lawful Good"}</option>
+                            <option value="ng">{"Neutral Good"}</option>
+                            <option value="cg">{"Chaotic Good"}</option>
+                            <option value="ln">{"Lawful Neutral"}</option>
+                            <option value="nn">{"True Neutral"}</option>
+                            <option value="cn">{"Chaotic Neutral"}</option>
+                            <option value="le">{"Lawful Evil"}</option>
+                            <option value="ne">{"True Evil"}</option>
+                            <option value="ce">{"Chaotic Evil"}</option>
+                        </select>
+                        <label for="character-alignment">{"Alignment"}</label>
+                    </div>
+                </div>
+                <div>
+                    <div class="field">
+                        <input id="player-name"/>
+                        <label for="player-name">{"Player Name"}</label>
+                    </div>
+                    <div class="field">
+                        <input id="experience-points"/>
+                        <label for="experience-points">{"Experience Points"}</label>
+                    </div>
+                </div>
+            </div>
+        }
+    }
+}

src/main.rs

@@ -1,27 +1,23 @@
-enum Msg {
+mod ability_scores;
-    AddOne,
+mod character_info;
+
+use ability_scores::AbilityScores;
+use character_info::CharacterInfo;
+
+struct Page {
+    _link: yew::ComponentLink<Self>,
 }
 
-struct Model {
+impl yew::Component for Page {
-    link: yew::ComponentLink<Self>,
+    type Message = ();
-    value: i64,
-}
-
-impl yew::Component for Model {
-    type Message = Msg;
     type Properties = ();
 
     fn create(_props: Self::Properties, link: yew::ComponentLink<Self>) -> Self {
-        Self { link, value: 0 }
+        Self { _link: link }
     }
 
-    fn update(&mut self, msg: Self::Message) -> yew::ShouldRender {
+    fn update(&mut self, _msg: Self::Message) -> yew::ShouldRender {
-        match msg {
+        false
-            Msg::AddOne => {
-                self.value += 1;
-                true
-            }
-        }
     }
 
     fn change(&mut self, _props: Self::Properties) -> yew::ShouldRender {
@@ -30,62 +26,14 @@ impl yew::Component for Model {
 
     fn view(&self) -> yew::Html {
         yew::html! {
-            <div class="columns">
-                <div class="field">
-                    <input id="character-name"/>
-                    <label for="character-name">{"Character name"}</label>
-                </div>
             <div>
-                    <div class="columns">
+                <CharacterInfo />
-                        <div class="field">
+                <AbilityScores />
-                            <input id="character-class"/>
-                            <label for="character-class">{"Class"}</label>
-                        </div>
-                        <div class="field">
-                            <input type="number" id="character-level"/>
-                            <label for="character-level">{"Level"}</label>
-                        </div>
-                    </div>
-                    <div class="field">
-                        <input id="character-race"/>
-                        <label for="character-race">{"Race"}</label>
-                    </div>
-                </div>
-                <div>
-                    <div class="field">
-                        <input id="character-background"/>
-                        <label for="character-background">{"Background"}</label>
-                    </div>
-                    <div class="field">
-                        <select id="character-alignment">
-                            <option value="lg">{"Lawful Good"}</option>
-                            <option value="ng">{"Neutral Good"}</option>
-                            <option value="cg">{"Chaotic Good"}</option>
-                            <option value="ln">{"Lawful Neutral"}</option>
-                            <option value="nn">{"True Neutral"}</option>
-                            <option value="cn">{"Chaotic Neutral"}</option>
-                            <option value="le">{"Lawful Evil"}</option>
-                            <option value="ne">{"True Evil"}</option>
-                            <option value="ce">{"Chaotic Evil"}</option>
-                        </select>
-                        <label for="character-alignment">{"Alignment"}</label>
-                    </div>
-                </div>
-                <div>
-                    <div class="field">
-                        <input id="player-name"/>
-                        <label for="player-name">{"Player Name"}</label>
-                    </div>
-                    <div class="field">
-                        <input id="experience-points"/>
-                        <label for="experience-points">{"Experience Points"}</label>
-                    </div>
-                </div>
             </div>
         }
     }
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<Page>();
 }