Update vanilla template

cmd/templates/vanilla/counter.go

@@ -0,0 +1,61 @@
+package main
+
+import (
+	"math/rand"
+
+	"github.com/wailsapp/wails"
+)
+
+// Counter is what we use for counting
+type Counter struct {
+	r     *wails.Runtime
+	store *wails.Store
+}
+
+// WailsInit is called when the component is being initialised
+func (c *Counter) WailsInit(runtime *wails.Runtime) error {
+	c.r = runtime
+	c.store = runtime.Store.New("Counter")
+	c.store.Set(0)
+	return nil
+}
+
+// RandomValue sets the counter to a random value
+func (c *Counter) RandomValue() {
+	c.store.Set(rand.Intn(1000))
+}
+
+func (c *Counter) getInt(data interface{}) int {
+
+	switch value := data.(type) {
+	case float64:
+		// All numbers sent by the frontend are float64
+		// so we need to convert it back to an int
+		return int(value)
+	default:
+		return value.(int)
+	}
+}
+
+// Increment will increment the counter
+func (c *Counter) Increment() {
+
+	increment := func(data interface{}) interface{} {
+		currentValue := c.getInt(data)
+		return currentValue + 1
+	}
+
+	// Update the store using the increment function
+	c.store.Update(increment)
+}
+
+// Decrement will decrement the counter
+func (c *Counter) Decrement() {
+
+	decrement := func(data interface{}) interface{} {
+		currentValue := c.getInt(data)
+		return currentValue - 1
+	}
+	// Update the store using the decrement function
+	c.store.Update(decrement)
+}

cmd/templates/vanilla/frontend/src/main.css

@@ -2,8 +2,9 @@
 html, 
 body {
   background-color: white;
-  width: 1024px;
-  height: 768px;
+  width: 100%;
+  height: 100%;
+  margin: 0;
 }
 
 .container {
@@ -18,6 +19,16 @@ button {
   font-size: 1rem;
 }
 
+#newCounter {
+  color: white;
+}
+
+.result {
+  margin-top: 3rem;
+  text-align: center;
+  font-size: 2rem;
+}
+
 .logo {
   display: block;
   margin-left: auto;

cmd/templates/vanilla/frontend/src/main.js

@@ -4,6 +4,8 @@ const runtime = require('@wailsapp/runtime');
 // Main entry point
 function start() {
 
+	var mystore = wails.Store.New('Counter');
+
 	// Ensure the default app div is 100% wide/high
 	var app = document.getElementById('app');
 	app.style.width = '100%';
@@ -13,17 +15,32 @@ function start() {
 	app.innerHTML = `
 	<div class='logo'></div>
 	<div class='container'>
-			<button id='button'>Click Me!</button>
-			<div id='result'/>
+	<button onClick='window.backend.Counter.Increment()'>
+		Increment Counter
+	</button>
+	<button onClick='window.backend.Counter.Decrement()'>
+		Decrement Counter
+		</button>
+	</div>
+	<div class='result'>Counter: <span id='counter'></span></div>
+	<div class='container'>
+		<input id='newCounter' type="number" value="0"/>
+		<button id='setvalue'>Set Counter Value</button>
+		<button onclick='window.backend.Counter.RandomValue()'>Set to Random Value</button>
 	</div>
 	`;
 
-	// Connect button to Go method
-	document.getElementById('button').onclick = function() {
-		window.backend.basic().then( function(result) {
-			document.getElementById('result').innerText = result;
-		});
+	// Connect counter value button to Go method
+	document.getElementById('setvalue').onclick = function() {
+		let newValue = parseInt(document.getElementById('newCounter').value,10);
+		mystore.set(newValue);
 	};
+
+	mystore.subscribe( (state) => {
+		document.getElementById('counter').innerText = state;
+	});
+	
+	mystore.set(0);
 };
 
 // We provide our entrypoint as a callback for runtime.Init

cmd/templates/vanilla/main.go.template

@@ -5,10 +5,6 @@ import (
   "github.com/wailsapp/wails"
 )
 
-func basic() string {
-  return "Hello World!"
-}
-
 func main() {
 
 	js := mewn.String("./frontend/build/main.js")
@@ -22,6 +18,6 @@ func main() {
     CSS:    css,
     Colour: "#131313",
   })
-  app.Bind(basic)
+  app.Bind(&Counter{})
   app.Run()
 }