|
7 | 7 | <link rel="icon" href="https://brand.publiccode.net/logo/mark-128w128h.png"> |
8 | 8 | <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script> |
9 | 9 | <script src="qrcode.min.js"></script> |
| 10 | + <script> |
| 11 | + const qrcodeDefaults = {dim: 100, pad: 1, pal: ['#000','#fff']} |
| 12 | + const getQrcodeLink = (url) => { |
| 13 | + const el = document.createElement('a'); |
| 14 | + el.href = url; |
| 15 | + el.target = "_new"; |
| 16 | + el.className = "qrcode"; |
| 17 | + // pass {msg: 'http://...'} and/or overrides for qrcodeDefaults |
| 18 | + const svg = QRCode( {...qrcodeDefaults, msg: url}) |
| 19 | + el.appendChild(svg); |
| 20 | + return el; |
| 21 | + } |
| 22 | + </script> |
| 23 | + <style> |
| 24 | + body { |
| 25 | + text-align: right; |
| 26 | + padding: 0; |
| 27 | + border: 0; |
| 28 | + margin: 0; |
| 29 | + width: 100vw; |
| 30 | + height: 100vh; |
| 31 | + overflow: hidden; |
| 32 | + } |
| 33 | + .qrcode { |
| 34 | + position: absolute; |
| 35 | + top: 0; |
| 36 | + left: 0; |
| 37 | + width: 100px; |
| 38 | + height: 100px; |
| 39 | + } |
| 40 | + </style> |
10 | 41 | </head> |
11 | | - <body style="text-align: center; padding: 0; border: 0; margin: 0; width: 100vw; height: 100vh; overflow: hidden;"> |
| 42 | + <body> |
12 | 43 | <script> |
13 | 44 | // Create a single supabase client for interacting with your database |
14 | 45 | const client = supabase.createClient('https://gwodhwyvuftyrvbymmvc.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imd3b2Rod3l2dWZ0eXJ2YnltbXZjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDIzNDkyMDMsImV4cCI6MjA1NzkyNTIwM30.APVpyOupY84gQ7c0vBZkY-GqoJRPhb4oD4Lcj9CEzlc') |
15 | 46 |
|
16 | 47 | const channel = client.channel("navigators") |
17 | 48 |
|
18 | 49 | let subscribed = false; |
19 | | - channel.subscribe((status) => { |
20 | | - console.log('subscribe', status) |
21 | | - if (status === 'SUBSCRIBED') { |
22 | | - subscribed = true; |
23 | | - } |
24 | | - }) |
25 | | - |
26 | 50 | function sendEvent(event, payload) { |
27 | 51 | if (! subscribed) return; |
28 | 52 | console.log('sendEvent', name, payload) |
|
33 | 57 | }) |
34 | 58 | } |
35 | 59 |
|
| 60 | + // handlers to send events into Unity |
36 | 61 | function handlePos(payload) { |
37 | 62 | console.log('handlePos', payload) |
38 | 63 | } |
|
43 | 68 |
|
44 | 69 | // Subscribe to the Channel |
45 | 70 | channel |
| 71 | + .subscribe((status) => { |
| 72 | + console.log('subscribe', status) |
| 73 | + if (status === 'SUBSCRIBED') { |
| 74 | + subscribed = true; |
| 75 | + } |
| 76 | + }) |
46 | 77 | .on( |
47 | 78 | 'broadcast', |
48 | 79 | { event: 'pos' }, |
|
55 | 86 | ) |
56 | 87 | </script> |
57 | 88 | <canvas id="unity-canvas" width=960 height=600 tabindex="-1" style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #1F1F20"></canvas> |
58 | | - <a href="navigator.html" target="_new" id="navqrcode" style="position: absolute; top:0; left:0; width:100px; height: 100px;"></a> |
59 | | - <script> |
60 | | - const qrcode = document.querySelector("#navqrcode"); |
61 | | - const msg = window.location + 'navigator.html' |
62 | | - qrcode.appendChild( QRCode( {msg, dim: 200} ) ) |
63 | | - </script> |
64 | 89 | <script src="Build/CraftSpace.loader.js"></script> |
65 | 90 | <script> |
66 | 91 | if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { |
|
91 | 116 | // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays. |
92 | 117 | }); |
93 | 118 | </script> |
| 119 | + <script> |
| 120 | + // add nagigator qr code |
| 121 | + document.body.appendChild( getQrcodeLink( window.location + 'navigator.html') ); |
| 122 | + </script> |
94 | 123 | </body> |
95 | 124 | </html> |
0 commit comments