clock-app/demo.html at main · kcknox/clock-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analog Clock Web Component Demo</title>
    <style>
        body {
            font-family: 'Inter', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .demo-container {
            max-width: 1200px;
            margin: 0 auto;
            color: white;
        }

        h1 {
            text-align: center;
            margin-bottom: 40px;
            font-weight: 300;
            font-size: 3rem;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .examples {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }

        .example {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 40px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
            min-height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .example h3 {
            margin-top: 0;
            margin-bottom: 30px;
            font-weight: 400;
            font-size: 1.5rem;
        }

        .clock-container {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
        }

        .code-block {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            text-align: left;
            overflow-x: auto;
            word-break: break-all;
            line-height: 1.4;
        }

        analog-clock {
            display: block;
        }

        .small-clock {
            width: 200px;
            height: 200px;
        }

        .medium-clock {
            width: 300px;
            height: 300px;
        }

        .large-clock {
            width: 400px;
            height: 400px;
        }

        .integration-example {
            grid-column: 1 / -1;
            min-height: auto;
        }

        .integration-example .code-block {
            font-size: 14px;
            word-break: normal;
        }

        .client-interaction-example {
            grid-column: 1 / -1; /* Span full width */
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <h1>🕐 Analog Clock Web Component</h1>

        <div class="example">
            <h3>Default Size</h3>
            <div class="clock-container">
                <analog-clock></analog-clock>
            </div>
            <div class="code-block">
&lt;analog-clock&gt;&lt;/analog-clock&gt;
            </div>
        </div>

        <div class="examples">
            <div class="example">
                <h3>Small Clock</h3>
                <div class="clock-container">
                    <analog-clock id="small-clock-with-client" class="small-clock" width="200px" height="200px"></analog-clock>
                </div>
                <div class="code-block">
&lt;analog-clock id="small-clock-with-client" width="200px" height="200px"&gt;&lt;/analog-clock&gt;
                </div>
            </div>

            <div class="example">
                <h3>Large Clock</h3>
                <div class="clock-container">
                    <analog-clock class="large-clock" width="400px" height="400px"></analog-clock>
                </div>
                <div class="code-block">
&lt;analog-clock width="400px" height="400px"&gt;&lt;/analog-clock&gt;
                </div>
            </div>
        </div>

        <div class="example client-interaction-example">
            <h3>Client Interaction Example</h3>
            <p>This example demonstrates setting a mock <code>LithiumClient</code> instance on the clock component. Check the browser console for logs from the component.</p>
            <div class="clock-container">
                <analog-clock id="clock-with-client"></analog-clock>
            </div>
            <div class="code-block">
// JavaScript to set the client
const clockElement = document.getElementById('clock-with-client');

// Mock LithiumClient that mimics the actual LithiumClient structure
const mockLithiumClient = {
  clientId: 'mock-client-123',
  isReady: true, // Assuming client is ready when passed
  registeredCallbacks: new Map(), // To store method and its callbacks

  registerCallback: function(method, callback) {
    console.log(`MockLithiumClient: Registering callback for method '${method}'`);
    if (!this.registeredCallbacks.has(method)) {
      this.registeredCallbacks.set(method, []);
    }
    this.registeredCallbacks.get(method).push(callback);

    // Simulate an event for 'customClockEvent' after a delay
    if (method === 'customClockEvent') {
      setTimeout(() => {
        console.log('MockLithiumClient: Emitting customClockEvent');
        // Call all registered callbacks for this method
        const callbacks = this.registeredCallbacks.get(method) || [];
        callbacks.forEach(cb => cb({ message: 'Hello from MockLithiumClient!', timestamp: new Date(), method: method }));
      }, 3000);
    }
  },

  unregisterCallback: function(method, callback) {
    console.log(`MockLithiumClient: Unregistering callback for method '${method}'`);
    if (this.registeredCallbacks.has(method)) {
      const callbacks = this.registeredCallbacks.get(method);
      const index = callbacks.indexOf(callback);
      if (index > -1) {
        callbacks.splice(index, 1);
      }
      if (callbacks.length === 0) {
        this.registeredCallbacks.delete(method);
      }
    }
  },

  sendCommand: function(command) {
    console.log('MockLithiumClient: Sent command:', command);
  },

  // Simulate receiving a message from the server and invoking callbacks
  _simulateIncomingMessage: function(message) {
    console.log(`MockLithiumClient: Simulating incoming message for method '${message.method}'`, message);
    const callbacks = this.registeredCallbacks.get(message.method) || [];
    callbacks.forEach(cb => cb(message));

    // Also call wildcard callbacks if any
    const wildcardCallbacks = this.registeredCallbacks.get('*') || [];
    wildcardCallbacks.forEach(cb => cb(message));
  },

  getRegisteredMethods: function() {
    return Array.from(this.registeredCallbacks.keys());
  }
};

// Set the client instance on the web component property
clockElement.lc = mockLithiumClient;
            </div>
            <button onclick="triggerClientEvent()">Simulate Event to Small Clock</button>
            <button onclick="triggerColorChange()">Change Header Color (Main Clock)</button>
        </div>

        <div class="example integration-example">
            <h3>Integration Instructions</h3>
            <div class="code-block">
&lt;!-- Include the web component script --&gt;
&lt;script src="./dist/analog-clock-component.js"&gt;&lt;/script&gt;

&lt;!-- Use anywhere in your HTML --&gt;
&lt;analog-clock&gt;&lt;/analog-clock&gt;

&lt;!-- With custom sizing --&gt;
&lt;analog-clock width="300px" height="300px"&gt;&lt;/analog-clock&gt;
            </div>
        </div>
    </div>

    <!-- Load the web component -->
    <script src="./dist/analog-clock-component.js"></script>
    <script>
        // Mock LithiumClient setup for the main client interaction example
        const clockWithClient = document.getElementById('clock-with-client');
        const mockMainClient = {
            clientId: 'mock-main-client-789',
            isReady: true,
            registeredCallbacks: new Map(),
            registerCallback: function(method, callback) {
                console.log(`MainMockClient: Registering callback for '${method}'`);
                if (!this.registeredCallbacks.has(method)) { this.registeredCallbacks.set(method, []); }
                this.registeredCallbacks.get(method).push(callback);
                if (method === 'customClockEvent') {
                    setTimeout(() => {
                        console.log('MainMockClient: Emitting customClockEvent for main clock');
                        this._simulateIncomingMessage({
                            timestamp: Date.now(),
                            source: 'demo',
                            method: 'customClockEvent',
                            data: { message: 'Hello from MainMockClient for the main clock!' }
                        });
                    }, 2000);
                }
            },
            unregisterCallback: function(method, callback) {
                console.log(`MainMockClient: Unregistering callback for '${method}'`);
                // Simplified unregister for demo
            },
            sendCommand: function(command) { console.log('MainMockClient: Sent command:', command); },
            // Simulate receiving a message
            _simulateIncomingMessage: function(message) {
                console.log(`MainMockClient: Simulating incoming message for method '${message.method}'`, message);
                const callbacks = this.registeredCallbacks.get(message.method) || [];
                callbacks.forEach(cb => cb(message));
                const wildcardCallbacks = this.registeredCallbacks.get('*') || [];
                wildcardCallbacks.forEach(cb => cb(message));
            }
        };
        if (clockWithClient) {
            clockWithClient.lc = mockMainClient;
        }

        // Mock client for the small clock
        let smallClockEventTargetCallback = null;
        const smallClockClient = {
            clientId: 'mock-small-clock-client-000',
            isReady: true,
            registeredCallbacks: new Map(),
            registerCallback: function(method, callback) {
                console.log(`SmallClockMockClient: Registering callback for '${method}'`);
                if (!this.registeredCallbacks.has(method)) { this.registeredCallbacks.set(method, []); }
                this.registeredCallbacks.get(method).push(callback);
                if (method === 'customClockEvent') {
                    smallClockEventTargetCallback = callback;
                }
            },
            unregisterCallback: function(method, callback) {
                console.log(`SmallClockMockClient: Unregistering callback for '${method}'`);
                if (method === 'customClockEvent' && smallClockEventTargetCallback === callback) {
                    smallClockEventTargetCallback = null;
                }
            },
            sendCommand: function(command) { console.log('SmallClockMockClient: Sent command:', command); },
            _simulateIncomingMessage: function(message) {
                console.log(`SmallClockMockClient: Simulating incoming message for method '${message.method}'`, message);
                const callbacks = this.registeredCallbacks.get(message.method) || [];
                callbacks.forEach(cb => cb(message));
                const wildcardCallbacks = this.registeredCallbacks.get('*') || [];
                wildcardCallbacks.forEach(cb => cb(message));
            }
        };

        const smallClockElement = document.getElementById('small-clock-with-client');
        if (smallClockElement) {
            smallClockElement.lc = smallClockClient;
        }

        function triggerClientEvent() {
            if (smallClockElement && smallClockElement.lc && smallClockEventTargetCallback) {
                console.log('DemoPage: Manually triggering customClockEvent for small clock');
                // Instead of calling callback directly, simulate the client receiving a message
                smallClockElement.lc._simulateIncomingMessage({
                    timestamp: Date.now(),
                    source: 'demo-button',
                    method: 'customClockEvent',
                    data: { message: 'Manually triggered event for small clock!'}
                });
            } else {
                console.log('DemoPage: No callback or client found for small clock to trigger event.');
            }
        }

        function triggerColorChange() {
            if (clockWithClient && clockWithClient.lc) {
                const randomColor = {
                    r: Math.floor(Math.random() * 256),
                    g: Math.floor(Math.random() * 256),
                    b: Math.floor(Math.random() * 256)
                };
                const message = {
                    timestamp: Date.now(),
                    source: "demo-button",
                    agent: " hidrógeno ", // example from user
                    method: "/clock/change_color",
                    type: "request", // example from user
                    id: 'demo-uuid-' + Math.random().toString(36).substring(7), // example from user
                    data: {
                        color: randomColor
                    }
                };
                console.log('DemoPage: Triggering /clock/change_color with:', message);
                clockWithClient.lc._simulateIncomingMessage(message);
            } else {
                console.log('DemoPage: Main clock client not found to trigger color change.');
            }
        }
    </script>
</body>
</html>