From 0f042d89eb8986971feb95683d499afe897e6980 Mon Sep 17 00:00:00 2001 From: Nicky Case Date: Tue, 12 Feb 2019 14:59:45 -0500 Subject: [PATCH] pretty dialogue ui --- game.css | 119 ++++++++++++++++++++++++++++--- game.js | 177 ++++++++++++++++++++++++++++++++++++++-------- index.html | 8 ++- pinkyswear.min.js | 2 + woods.md | 15 ++-- 5 files changed, 272 insertions(+), 49 deletions(-) create mode 100644 pinkyswear.min.js diff --git a/game.css b/game.css index 4cca0dc..7b7cac2 100644 --- a/game.css +++ b/game.css @@ -15,33 +15,130 @@ body{ width: 360px; height: 600px; - background: #fff; + background: #ccc; font-size: 20px; font-family: Helvetica, Arial, sans-serif; font-weight: 100; line-height: 1.3em; -} -#game_text{ + overflow: hidden; +} +#game_words{ width: auto; - height: 450px; - - overflow: scroll; - + position: relative; + top: 80px; } -#game_text > div{ - margin: 30px; + +.human-bubble { + position: relative; + background: #ffffff; + color: #000000; + border-radius: .4em; + padding: 15px; + margin: 10px 30px; + + opacity: 0; + left: -15px; + transition: all 0.3s ease-in-out; } +.human-bubble:after { + content: ''; + position: absolute; + left: 0; + top: 50%; + width: 0; + height: 0; + border: 15px solid transparent; + border-right-color: #ffffff; + border-left: 0; + margin-top: -15px; + margin-left: -15px; +} + +.wolf-bubble { + position: relative; + background: #000000; + color: #ffffff; + border-radius: .4em; + padding: 15px; + margin: 10px 30px; + + opacity: 0; + left: 15px; + transition: all 0.3s ease-in-out; +} +.wolf-bubble:after { + content: ''; + position: absolute; + right: 0; + top: 50%; + width: 0; + height: 0; + border: 15px solid transparent; + border-left-color: #000000; + border-right: 0; + margin-top: -15px; + margin-right: -15px; +} + #game_choices{ width: 100%; - height: 150px; + height: 110px; + padding: 20px 0; position: absolute; bottom:0; background: #666; + text-align: center; + color: #fff; + font-weight: normal; -} \ No newline at end of file +} +#game_choices > div{ + margin-bottom:0.5em; + cursor: pointer; +} + +/***********************************/ +/***********************************/ +/***********************************/ + +#game_hp{ + position: absolute; + width: 360px; + height: 80px; + top: 0px; + left: 0px; + + background: rgb(204,204,204); + background: linear-gradient(180deg, rgba(204,204,204,1) 80%, rgba(204,204,204,0) 100%); +} +#game_hp > div{ + position: absolute; + top:25px; + width: 150px; + height: 20px; + background: #ff4040; +} +#game_hp > #hp_human{ + left: 20px; + transform: skew(15deg); +} +#game_hp > #hp_wolf{ + right: 20px; + transform: skew(-15deg); +} + +/***********************************/ +/***********************************/ +/***********************************/ + +#game_canvas{ + position: absolute; + top:0; left:0; + border: none; +} diff --git a/game.js b/game.js index 2b12351..0a5a909 100644 --- a/game.js +++ b/game.js @@ -18,9 +18,11 @@ Game.sections = {}; Game.startSectionID = null; Game.dom = document.querySelector("#game_container"); -Game.textDOM = document.querySelector("#game_text"); +Game.wordsDOM = document.querySelector("#game_words"); Game.choicesDOM = document.querySelector("#game_choices"); +Game.queue = []; + // Parse data! Game.onload = function(data){ @@ -54,6 +56,14 @@ Game.onload = function(data){ }); + // Animation! + Game.wordsDOM.style.top = "80px"; + var animloop = function(){ + Game.update(); + requestAnimationFrame(animloop); + }; + requestAnimationFrame(animloop); + // Let's go! Game.start(); @@ -64,6 +74,18 @@ Game.start = function(){ Game.goto(Game.startSectionID); }; +Game.update = function(){ + + var wordsHeight = 80 + Game.wordsDOM.getBoundingClientRect().height; + var currentY = parseFloat(Game.wordsDOM.style.top) || 80; + var gotoY = (wordsHeight<260) ? 0 : wordsHeight-260; + gotoY = 80 - gotoY; + + var nextY = currentY*0.9 + gotoY*0.1; + Game.wordsDOM.style.top = nextY+"px"; + +}; + Game.goto = function(sectionID){ // Clear choices @@ -71,47 +93,122 @@ Game.goto = function(sectionID){ // Show each line... var section = Game.sections[sectionID]; + if(!section){ + throw "NO SECTION NAMED "+sectionID; + } var lines = section.lines; - for(var i=0; i0){ + promiseNext.then(function(){ + Game.executeNextLine(); + }); + } + }; +Game.clearQueue = function(){ + Game.queue = []; +}; +Game.addToQueue = function(line){ + Game.queue.push(line); +} // Execute text! Just add it to text DOM. Game.executeText = function(line){ + var div = document.createElement("div"); - div.innerHTML = line; - Game.textDOM.appendChild(div); + var promiseDone = pinkySwear(); + + // Is it human or wolf? + var dialogue; + var isWolf = /^\>(.*)/.test(line); + if(isWolf){ + div.className = "wolf-bubble"; + dialogue = line.match(/^\>(.*)/)[1].trim(); + }else{ + div.className = "human-bubble"; + dialogue = line; + } + + // Add the bubble, with animation + Game.wordsDOM.appendChild(div); + requestAnimationFrame(function(){ + requestAnimationFrame(function(){ + div.style.opacity = 1; + div.style.left = 0; + }); + }); + + // Add the text, letter by letter! + var interval = 0; + var SPEED = 40; + for(var i=0; i "+choiceText); + Game.addToQueue("> "+choiceText); Game.goto(choiceID); }; Game.choicesDOM.appendChild(div); + // Return promise + var promiseImmediate = new pinkySwear(); + promiseImmediate(true, []); + return promiseImmediate; + } // Execute code! Game.executeCode = function(line){ + var code = line.match(/\`+([^\`]*)\`+/)[1].trim(); try{ eval(code); }catch(e){ console.log(e); } + + // Return promise + var promiseImmediate = new pinkySwear(); + promiseImmediate(true, []); + return promiseImmediate; + } // Execute goto! Just goto. @@ -216,3 +325,15 @@ Game.parseLine = function(line){ }; + +/*****************************/ +/*****************************/ +/*****************************/ + +Game.canvas = document.querySelector("#game_canvas"); +Game.canvas.width = 360 * 2; +Game.canvas.height = 450 * 2; +Game.canvas.style.width = Game.canvas.width/2 + "px"; +Game.canvas.style.height = Game.canvas.height/2 + "px"; + + diff --git a/index.html b/index.html index 10f10b9..e5ee51e 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,12 @@
-
+ +
+
+
+
+
@@ -17,4 +22,5 @@ + \ No newline at end of file diff --git a/pinkyswear.min.js b/pinkyswear.min.js new file mode 100644 index 0000000..b132ee9 --- /dev/null +++ b/pinkyswear.min.js @@ -0,0 +1,2 @@ +(function(e){function g(h){return"function"==typeof h}function k(h){"undefined"!=typeof setImmediate?setImmediate(h):"undefined"!=typeof process&&process.nextTick?process.nextTick(h):setTimeout(h,0)}e[0][e[1]]=function n(f){function a(a,g){null==b&&null!=a&&(b=a,l=g,c.length&&k(function(){for(var a=0;a