Add demo logic

mvaneijgen · Jan 23, 2024 · 678815f · 678815f
1 parent 17fa3e8
commit 678815f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -35,6 +35,7 @@ const App = {
       loading: true,
       options: false,
       ignore: false,
+      demo: false,
     };
   },
   computed: {
@@ -243,6 +244,7 @@ const App = {
     this.url = `http://${host}/json`;
     if (host === 'mvaneijgen.nl') {
       this.ignoreNotice();
+      this.demo = true;
     }
     //--------------------------------//
     // 💾 Get everything from local storage

diff --git a/dist/drawsomething.html b/dist/drawsomething.html
@@ -653,7 +653,8 @@ <h3>Version {{version}}</h3>
             </div>
             <div class="alloy-input-group" v-if="options">
               <label for="url">API url</label>
-              <input type="text" id="url" v-model="url">
+              <p v-if="demo">You can't use the API on the demo page</p>
+              <input type="text" id="url" v-model="url" :disabled="demo ? '' : disabled">
             </div>
             <div class="alloy-input-flex" v-if="options">
               <div class="alloy-input-group">
@@ -737,7 +738,7 @@ <h3>We could not fetch your settings at <i>{{url}}</i></h3>
     return {
       // App info
       title: "Draw something",
-      version: "Beta 1.2",
+      version: "Alpha 1.2",
       // WLED JSON
       url: "",
       size: 10,
@@ -766,6 +767,7 @@ <h3>We could not fetch your settings at <i>{{url}}</i></h3>
       loading: true,
       options: false,
       ignore: false,
+      demo: false,
     };
   },
   computed: {
@@ -974,6 +976,7 @@ <h3>We could not fetch your settings at <i>{{url}}</i></h3>
     this.url = `http://${host}/json`;
     if (host === 'mvaneijgen.nl') {
       this.ignoreNotice();
+      this.demo = true;
     }
     //--------------------------------//
     // 💾 Get everything from local storage

diff --git a/index.html b/index.html
@@ -46,7 +46,8 @@ <h3>Version {{version}}</h3>
             </div>
             <div class="alloy-input-group" v-if="options">
               <label for="url">API url</label>
-              <input type="text" id="url" v-model="url">
+              <p v-if="demo">You can't use the API on the demo page</p>
+              <input type="text" id="url" v-model="url" :disabled="demo ? '' : disabled">
             </div>
             <div class="alloy-input-flex" v-if="options">
               <div class="alloy-input-group">