diff --git a/bocciofila/bgdottedeven.png b/bocciofila/bgdottedeven.png
new file mode 100644
index 0000000..8db2b94
Binary files /dev/null and b/bocciofila/bgdottedeven.png differ
diff --git a/bocciofila/clippy.js b/bocciofila/clippy.js
new file mode 100644
index 0000000..df5d504
--- /dev/null
+++ b/bocciofila/clippy.js
@@ -0,0 +1,65 @@
+import clippy from '../clippy/dist/index.js'
+
+const ClippyDemo = (function() {
+ const availableAgents = ['Bonzi', 'Clippy', 'F1', 'Genie', 'Genius', 'Links', 'Merlin', 'Peedy', 'Rocky', 'Rover']
+ const talks = [
+ 'How can i help you?',
+ 'Nice day!',
+ 'Glad to meet you.',
+ 'At your service',
+ 'Helloo'
+ ]
+
+ function init() {
+ this.$el = document.querySelector('.my-clippy')
+ }
+
+ function nextAgent() {
+ // let agentName = availableAgents[Math.floor(Math.random() * (availableAgents.length))]
+ let agentName = 'Clippy';
+ if (!agentName) return;
+
+ clippy.load({
+ name: agentName,
+ selector: "my-clippy",
+ successCb: agent => {
+ window[agentName] = agent
+ agent.show();
+
+ // Speak on click and start
+ const speak = () => {
+ agent.speak('I am ' + agentName + ', ' + talks[~~(Math.random() * talks.length)])
+ agent.animate()
+ }
+ agent._el.addEventListener('click', () =>{
+ document.getElementById("legend-modal").style.display = "block";
+ return;
+ });
+ speak()
+
+ // Animate randomly
+ setInterval(() => {
+ agent.animate()
+ }, 3000 + (Math.random() * 4000))
+ setInterval(() => speak(), 15000 + (Math.random() * 4000));
+ speak()
+ }
+ });
+ }
+ function destroy() {
+ this.$el.innerHTML = ''
+ }
+
+ return {
+ init,
+ nextAgent,
+ destroy,
+
+ }
+})();
+
+
+window.onload = () => {
+ ClippyDemo.init();
+ ClippyDemo.nextAgent();
+}
diff --git a/bocciofila/perv.gif b/bocciofila/perv.gif
new file mode 100644
index 0000000..8efb5b2
Binary files /dev/null and b/bocciofila/perv.gif differ
diff --git a/bocciofila/pincursorsh.png b/bocciofila/pincursorsh.png
new file mode 100644
index 0000000..2b8346f
Binary files /dev/null and b/bocciofila/pincursorsh.png differ
diff --git a/clippy/demo/demo.js b/clippy/demo/demo.js
new file mode 100755
index 0000000..7e74fb8
--- /dev/null
+++ b/clippy/demo/demo.js
@@ -0,0 +1,64 @@
+
+import clippy from '../dist/index.js'
+
+const ClippyDemo = (function() {
+ const availableAgents = ['Bonzi', 'Clippy', 'F1', 'Genie', 'Genius', 'Links', 'Merlin', 'Peedy', 'Rocky', 'Rover']
+ const talks = [
+ 'How can i help you?',
+ 'Nice day!',
+ 'Glad to meet you.',
+ 'At your service',
+ 'Helloo'
+ ]
+
+ function init() {
+ this.$el = document.querySelector('.my-clippy')
+ }
+
+ function nextAgent() {
+ let agentName = availableAgents[Math.floor(Math.random() * (availableAgents.length))]
+ if (!agentName) return;
+
+ clippy.load({
+ name: agentName,
+ selector: "my-clippy",
+ successCb: agent => {
+ window[agentName] = agent
+ agent.show();
+
+ // Speak on click and start
+ const speak = () => {
+ agent.speak('I am ' + agentName + ', ' + talks[~~(Math.random() * talks.length)])
+ agent.animate()
+ }
+ agent._el.addEventListener('click', () => speak());
+ speak()
+
+ // Animate randomly
+ setInterval(() => {
+ agent.animate()
+ }, 3000 + (Math.random() * 4000))
+ }
+ });
+ }
+ function destroy() {
+ this.$el.innerHTML = ''
+ }
+
+ return {
+ init,
+ nextAgent,
+ destroy,
+
+ }
+})();
+
+
+window.onload = () => {
+ ClippyDemo.init();
+ ClippyDemo.nextAgent();
+ document.getElementById('next-agent').addEventListener('click', () => {
+ ClippyDemo.destroy();
+ ClippyDemo.nextAgent();
+ });
+}
\ No newline at end of file
diff --git a/clippy/demo/index.html b/clippy/demo/index.html
new file mode 100755
index 0000000..1ba275c
--- /dev/null
+++ b/clippy/demo/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/clippy/dist/agent.d.ts b/clippy/dist/agent.d.ts
new file mode 100644
index 0000000..5ae5e4b
--- /dev/null
+++ b/clippy/dist/agent.d.ts
@@ -0,0 +1,117 @@
+import { AgentWrapper } from './types';
+export interface AgentOptions {
+ agent: AgentWrapper;
+ selector?: string;
+}
+export default class Agent {
+ private _queue;
+ private _el;
+ private _animator;
+ private _balloon;
+ private _hidden;
+ private _idleDfd?;
+ private _offset;
+ private _dragUpdateLoop?;
+ private _targetX?;
+ private _targetY?;
+ private _moveHandle?;
+ private _upHandle?;
+ constructor(options: AgentOptions);
+ /***
+ *
+ * @param {Number} x
+ * @param {Number} y
+ */
+ gestureAt(x: number, y: number): boolean;
+ /***
+ *
+ * @param {Boolean=} fast
+ *
+ */
+ hide(fast: boolean, callback: () => void): void;
+ moveTo(x: number, y: number, duration: number): void;
+ private _playInternal;
+ play(animation: any, timeout?: number, cb?: Function): boolean;
+ /***
+ *
+ * @param {Boolean=} fast
+ */
+ show(fast?: boolean): boolean | undefined;
+ /***
+ *
+ * @param {String} text
+ */
+ speak(text: string, hold?: boolean): void;
+ /***
+ * Close the current balloon
+ */
+ closeBalloon(): void;
+ delay(time: number): void;
+ /***
+ * Skips the current animation
+ */
+ stopCurrent(): void;
+ stop(): void;
+ /***
+ *
+ * @param {String} name
+ * @returns {Boolean}
+ */
+ hasAnimation(name: string): boolean;
+ /***
+ * Gets a list of animation names
+ *
+ * @return {Array.