diff --git a/race/TemplateData/UnityProgress.js b/race/TemplateData/UnityProgress.js new file mode 100644 index 00000000..4f13ac13 --- /dev/null +++ b/race/TemplateData/UnityProgress.js @@ -0,0 +1,97 @@ +function UnityProgress (dom) { + this.progress = 0.0; + this.message = ""; + this.dom = dom; + + var parent = dom.parentNode; + + var background = document.createElement("div"); + background.style.background = "#4D4D4D"; + background.style.position = "absolute"; + parent.appendChild(background); + this.background = background; + + var logoImage = document.createElement("img"); + logoImage.src = "TemplateData/progresslogo.png"; + logoImage.style.position = "absolute"; + parent.appendChild(logoImage); + this.logoImage = logoImage; + + var progressFrame = document.createElement("img"); + progressFrame.src = "TemplateData/loadingbar.png"; + progressFrame.style.position = "absolute"; + parent.appendChild(progressFrame); + this.progressFrame = progressFrame; + + var progressBar = document.createElement("img"); + progressBar.src = "TemplateData/fullbar.png"; + progressBar.style.position = "absolute"; + parent.appendChild(progressBar); + this.progressBar = progressBar; + + var messageArea = document.createElement("p"); + messageArea.style.position = "absolute"; + parent.appendChild(messageArea); + this.messageArea = messageArea; + + + this.SetProgress = function (progress) { + if (this.progress < progress) + this.progress = progress; + this.messageArea.style.display = "none"; + this.progressFrame.style.display = "inline"; + this.progressBar.style.display = "inline"; + this.Update(); + } + + this.SetMessage = function (message) { + this.message = message; + this.background.style.display = "inline"; + this.logoImage.style.display = "inline"; + this.progressFrame.style.display = "none"; + this.progressBar.style.display = "none"; + this.Update(); + } + + this.Clear = function() { + this.background.style.display = "none"; + this.logoImage.style.display = "none"; + this.progressFrame.style.display = "none"; + this.progressBar.style.display = "none"; + } + + this.Update = function() { + this.background.style.top = this.dom.offsetTop + 'px'; + this.background.style.left = this.dom.offsetLeft + 'px'; + this.background.style.width = this.dom.offsetWidth + 'px'; + this.background.style.height = this.dom.offsetHeight + 'px'; + + var logoImg = new Image(); + logoImg.src = this.logoImage.src; + var progressFrameImg = new Image(); + progressFrameImg.src = this.progressFrame.src; + + this.logoImage.style.top = this.dom.offsetTop + (this.dom.offsetHeight * 0.5 - logoImg.height * 0.5) + 'px'; + this.logoImage.style.left = this.dom.offsetLeft + (this.dom.offsetWidth * 0.5 - logoImg.width * 0.5) + 'px'; + this.logoImage.style.width = logoImg.width+'px'; + this.logoImage.style.height = logoImg.height+'px'; + + this.progressFrame.style.top = this.dom.offsetTop + (this.dom.offsetHeight * 0.5 + logoImg.height * 0.5 + 10) + 'px'; + this.progressFrame.style.left = this.dom.offsetLeft + (this.dom.offsetWidth * 0.5 - progressFrameImg.width * 0.5) + 'px'; + this.progressFrame.width = progressFrameImg.width; + this.progressFrame.height = progressFrameImg.height; + + this.progressBar.style.top = this.progressFrame.style.top; + this.progressBar.style.left = this.progressFrame.style.left; + this.progressBar.width = progressFrameImg.width * Math.min(this.progress, 1); + this.progressBar.height = progressFrameImg.height; + + this.messageArea.style.top = this.progressFrame.style.top; + this.messageArea.style.left = 0; + this.messageArea.style.width = '100%'; + this.messageArea.style.textAlign = 'center'; + this.messageArea.innerHTML = this.message; + } + + this.Update (); +} \ No newline at end of file diff --git a/race/TemplateData/fullbar.png b/race/TemplateData/fullbar.png new file mode 100644 index 00000000..92c0f3d5 Binary files /dev/null and b/race/TemplateData/fullbar.png differ diff --git a/race/TemplateData/loadingbar.png b/race/TemplateData/loadingbar.png new file mode 100644 index 00000000..22aaba41 Binary files /dev/null and b/race/TemplateData/loadingbar.png differ diff --git a/race/TemplateData/progresslogo.png b/race/TemplateData/progresslogo.png new file mode 100644 index 00000000..c636bb61 Binary files /dev/null and b/race/TemplateData/progresslogo.png differ diff --git a/race/TemplateData/style.css b/race/TemplateData/style.css new file mode 100644 index 00000000..53c01a38 --- /dev/null +++ b/race/TemplateData/style.css @@ -0,0 +1,28 @@ + +/**************************************** + ==== RESETS +****************************************/ + +html,body,div,canvas { margin: 0; padding: 0; } +::-moz-selection { color: #333; text-shadow: none; } +::selection { color: #333; text-shadow: none; } +.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } +.clear { display: inline-table; clear: both; } +/* Hides from IE-mac \*/ * html .clear { height: 1%; } .clear { display: block; } /* End hide from IE-mac */ + +/**************************************** + ==== LAYOUT +****************************************/ + +html, body { width: 100%; height: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; } +body { } +p.header, p.footer { display: none; } +.template-wrap { margin: 1px 0 0px 0px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } +.template-wrap canvas { margin: 1px 0 0px 0px; position: relative; z-index: 9; box-shadow: 0 0px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0 0px 0px rgba(0,0,0,0.2); } +.fullscreen { float: right; position: relative; z-index: 10; } + +body.template { overflow: -moz-scrollbars-vertical; +overflow-x: hidden; +overflow-y: hidden;} +.template .template-wrap { } +.template .template-wrap canvas { } \ No newline at end of file