Updated dice armor

_content/dicearmor/dice-asset1.md

@@ -1,5 +1,111 @@
 ---
 layout: default
-title: Dice Armor Mobile Screenshot
+title: Dice Armor Screenshots
+nocard: true
 ---
-![](/assets/dicearmor-assets/mobile.png)
+<div id="carousel" class="carousel card">
+    <div class="slides">
+        <div class="slide active-slide">
+            <img src="/assets/dicearmor-assets/da2.png">
+            <div class="slide-desc">
+                Dice Armor is a dice dueling game. Players can use abilities, flip dice, and attack each other to win in a dice game that puts chance into the hands of the players. This is what the dueling scene looks like, with a tutorial cutscene happening on top to guide the player through the basics.
+                Also, all the dice are constructed dynamically, using quaternion math to figure out the placement of each component relative to the face its going on. The die in the middle has one of the player and opponents' portraits on each of its sides. 
+            </div>
+        </div>
+        <div class="slide">
+            <img src="/assets/dicearmor-assets/editors.png">
+            <div class="slide-desc">
+                Many of the objects I've created, I've made scriptable objects so that game designers can add and modify them easily. Additionally I would create custom inspectors for the objects to help make them as easy to understand and edit as possible. The opponents' artifical intelligence is made up of many strategies, in a prioritized list. When its the opponents' turn they go through each strategy and check if they can be run, and if so then the opponent performs the strategy then starts back over at the top of the list of strategies. The + sign under the list of strategies opens an organized dropdown of all the various strategies. 
+            </div>
+        </div>
+        <div class="slide">
+            <img src="/assets/dicearmor-assets/simulator.JPG" class="vertical">
+            <div class="slide-desc">
+                In addition to custom inspector code, I've created new tools for the editor for our game designers to use. This is a duel simulator that will take two opponents and simulate an arbitrary number of duels between them, and output the results and summarize them for you, much much quicker than manually going through the duels, even with an absurdly high timeScale. This will become incredibly useful in making balance changes and testing new dice against existing sets. This is a screenshot of it in edit mode, but in play mode it removes the "Dueling Managers" field and will use whatever the current duel balance settings are, allowing for the GDs to test freely in play mode without worrying about undoing all their changes afterwards. 
+            </div>
+        </div>
+        <div class="slide">
+            <img src="/assets/dicearmor-assets/da1.png">
+            <div class="slide-desc">
+                I created the Babble Buds puppet editor and ported the rendering library I wrote for it to C# so it could be used in Unity. Dice Armor has a full campaign using cutscenes made using the Babble Buds cutscene editor, taking advantage of its support for custom commands and fields to control things like talking, giving the player dice and money, starting duels, and controlling player progression through the story. 
+            </div>
+        </div>
+        <div class="slide">
+            <img src="/assets/dicearmor-assets/da6.png">
+            <div class="slide-desc">
+                When a cutscene ends, its final command is to either start a duel or set the next cutscene in the story. In the latter case there is an additional field for what to call the next cutscene, and what location it takes place at. The cutscene is then added to the player's save file, and when they visit the city locations are greyed out until they have at least one action to do there. Each location has a dynamically populated action wheel with custom range of acceptable angles. 
+            </div>
+        </div>
+        <div class="slide">
+            <img src="/assets/dicearmor-assets/da7.png">
+            <div class="slide-desc">
+                The dice shop is dynamically populated by a list of dice available to the player, which can be changed during cutscenes, and is checked against the dice owned by the player to generate sold out indicators. On the left the player can choose to filter the options down to a single dice effect, which also updates the "Buy All" button to buy only all the dice in the current filter. 
+            </div>
+        </div>
+        <div class="slide">
+            <img src="/assets/dicearmor-assets/da8.png">
+            <div class="slide-desc">
+                The inventory works most the same as the shop, but for equipping dice. It also allows you to drag individual dice or entire sets to the equipped dice glyph. While dragging it will highlight all the slots the new dice will be equipped into. 
+            </div>
+        </div>
+        <div class="slide">
+            <img src="/assets/dicearmor-assets/da3.png">
+            <div class="slide-desc">
+                The dice rolling uses the physics engine and detects once the dice have stopped moving, then determines which side is face up based on which of the normals is closest to straight up. It flags the die as cocked if that smallest angle is above a threshold. The dice sink into the table when not rolling so as to not interfere with any dice that are rolling.
+            </div>
+        </div>
+        <div class="slide">
+            <img src="/assets/dicearmor-assets/da4.png">
+            <div class="slide-desc">
+                There is a generic object dragging manager using delegates to check for valid things to drag, valid things to be dragged to (based on whats being dragged), getting a list of transforms to add the target indicator to, and what to do when the drag ends, on both a valid and invalid target. In this case its being used to drag a die to another die, telling the game to attack with the die. 
+            </div>
+        </div>
+        <div class="slide">
+            <img src="/assets/dicearmor-assets/da5.png">
+            <div class="slide-desc">
+                In addition to attacking and flipping dice, the player can use abilities that appear on some of the faces of most of the dice. I made an interface for abilities that supports targeted, non-targeted, instant, and lingering effects. Lingering effects can affect any value on the die, and can stack with other lingering effects. 
+            </div>
+        </div>
+        <div class="slide">
+            <img src="/assets/dicearmor-assets/da9.png">
+            <div class="slide-desc">
+                During certain events like winning the game or having the face of a die broken, the players' portraits will flash an emotion for a second. After winning, a random living die from the winning player is chosen to play their "finisher move", a flashy and dramatic effect to end the game. Shown is the arcane mechana's finisher, "Missile Storm". 
+            </div>
+        </div>
+    </div>
+    <div class="indicators">
+        <input class="indicator" name="indicator" checked type="radio" />
+        <input class="indicator" name="indicator" type="radio" />
+        <input class="indicator" name="indicator" type="radio" />
+        <input class="indicator" name="indicator" type="radio" />
+        <input class="indicator" name="indicator" type="radio" />
+        <input class="indicator" name="indicator" type="radio" />
+        <input class="indicator" name="indicator" type="radio" />
+        <input class="indicator" name="indicator" type="radio" />
+        <input class="indicator" name="indicator" type="radio" />
+        <input class="indicator" name="indicator" type="radio" />
+        <input class="indicator" name="indicator" type="radio" />
+    </div>
+</div>
+
+<script type="text/javascript">
+    var carousel = document.getElementById('carousel');
+    let slides = carousel.querySelectorAll('.slide');
+    let indicators = carousel.querySelectorAll('.indicator');
+
+    function setSlide(slide) {
+        return function() {
+            // Reset all slides
+            for (let i = 0; i < indicators.length; i++) {
+                slides[i].classList.remove("active-slide");
+            }
+
+            // Set defined slide as active
+            slides[slide].classList.add("active-slide");
+        };
+    }
+
+    for (let i = 0; i < indicators.length; i++) {
+        indicators[i].addEventListener("click", setSlide(i));
+    }
+</script>

_content/dicearmor/dice-asset2.md

@@ -1,5 +0,0 @@
----
-layout: default
-title: Dice Armor Cutscene Screenshot
----
-![](/assets/dicearmor-assets/cutscene.png)

_content/dicearmor/disclaimer.md

@@ -1,5 +0,0 @@
----
-layout: default
-title: Dice Armor Web Disclaimer
----
-Note: This web demo will run slower than the downloaded versions, and will have some graphical glitches not present in the downloaded versions. It is recommended only as a preview of the game, and is intended for you to download the game to play it in full. 

_content/dicearmor/embed.md

@@ -1,5 +0,0 @@
----
-layout: default
-title: Dice Armor Embed
-embed: /assets/dicearmor-assets/index.html
----

_content/dicearmor/publishing.md

@@ -1,5 +0,0 @@
----
-layout: default
-title: Dice Armor Publishing
----
-After the end of the semester, Dice Armor will be published for windows, mac, and linux app on itch.io as well as a mobile app on the Google Play store and iOS app store. The game has been developed with flexible resolutions and aspect ratios in mind. Monetization strategies and whether or not to make the code open source is not yet determined. 

_content/dicearmor/summary.md

@@ -2,8 +2,6 @@
 layout: default
 title: Dice Armor Summary
 ---
-Dice Armor is a game being developed by a team of nine including a producer, a creative director, a narrative writer, an artist, two programmers, and 3 game designers. The information here is about our most recent build, created after eleven weeks of development of 15. My role is the lead programmer, doing everything from interface coding, editor scripts, integrating Babble Buds, and of course everything related to the gameplay itself. 
+Dice Armor is a game that started development as a semester long project by a team of nine: a producer, a creative director, a narrative writer, an artist, two programmers, and 3 game designers. The information here is about my contributions as one the lead programmer over the course of the semester, because I can show off stuff like the editor scripts I wrote. I was doing everything from interface coding, editor scripts, integrating Babble Buds, and of course everything related to the gameplay itself. To date I'm still the lead programmer for the game; for more up to date information on the current state of the game please visit the official site. 
 
-Dice Armor is a dice dueling game. Players can use abilities, flip dice, and attack each other to win in a dice game that puts chance into the hands of the players. The game comes with a full campaign, using my own Babble Buds engine for the cutscenes. It is also the first project to use Babble Movie Maker to create those cutscenes. 
-
-Because this game is still in development, there are some buttons present to make the game easier to test that won't be in the final build: You start with all the dice in the game already in the shop, there's a button to give yourself free money to buy these dice with, and in the duel there are buttons to force a win or a loss, which can be used to skip the tutorial (not recommended for first time players). 
+The build available here was created for showing off at the end of the semester, and as such has some buttons present to make the game easier to skip parts of the game in order to see all the contect: You start with all the dice in the game already in the shop, there's a button to give yourself free money to buy these dice with, and in the duel there are buttons to force a win or a loss, which can be used to skip the tutorial (not recommended for first time players). 

_posts/2017-12-27-dicearmor.md

@@ -3,8 +3,8 @@ layout: default
 title: Dice Armor
 category: Game
 banner: dice
-cards: [Dice Armor Summary, Dice Armor Cutscene Screenshot, Dice Armor Publishing, Dice Armor Mobile Screenshot]
+cards: [Dice Armor Summary, Dice Armor Screenshots]
 links: ["Windows Download|https://drive.google.com/file/d/13cZHgnAE3repjo2c4fvWEwx_tjuhPKUG/view?usp=sharing", "Android Download|https://drive.google.com/file/d/1gYum6VsBcLgbE9hAub8gzoobLSiVIayx/view?usp=sharing"]
 tags: [c#, unity]
 ---
-Roll your armor, attack your opponent, and seize victory in this dice dueling game. Collect dice with varying abilities, elements, and stats as you play through an action-packed adventure! I am the lead programmer on a team of nine creating this game in a semester long college course. 
+Roll your armor, attack your opponent, and seize victory in this dice dueling game. Collect dice with varying abilities, elements, and stats as you play through an action-packed adventure! I was the lead programmer on a team of nine creating this game in a semester long college course. 

assets/dicearmor-assets/Build/webgl.json

@@ -1,13 +0,0 @@
-{
-"companyName": "DiceTry",
-"productName": "Dice Armor",
-"dataUrl": "webgl.data.unityweb",
-"asmCodeUrl": "webgl.asm.code.unityweb",
-"asmMemoryUrl": "webgl.asm.memory.unityweb",
-"asmFrameworkUrl": "webgl.asm.framework.unityweb",
-"TOTAL_MEMORY": 268435456,
-"graphicsAPI": ["WebGL 2.0", "WebGL 1.0"],
-"webglContextAttributes": {"preserveDrawingBuffer": false},
-"splashScreenStyle": "Dark",
-"backgroundColor": "#000000"
-}

assets/dicearmor-assets/index.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>Unity WebGL Player | Dice Armor</title>
-    <script src="Build/UnityLoader.js"></script>
-    <script>
-      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/webgl.json");
-    </script>
-  </head>
-  <body style="margin: 0;">
-    <div id="gameContainer" style="width: 100%; height: 100%;"></div>
-    <script type="text/javascript">
-      let resize = ()=>{
-            var ctx = document.getElementById('#canvas').getContext('webgl2');
-            ctx.canvas.width = window.innerWidth;
-            ctx.canvas.height = window.innerHeight;
-        }
-        window.onresize=resize
-        requestAnimationFrame(resize)
-    </script>
-  </body>
-</html>

css/main.css

@@ -295,7 +295,7 @@ a.btn, a.btn-flat, input.btn, input.btn-flat {
     height: 100% !important;
 }
 
-body > .collapsible, body > .collection, body > .card, body > .carousel, body .slider, body > .container {
+body > .collapsible, body > .collection, body > .card, body .slider, body > .container {
     width: 90% !important;
     max-width:940px !important;
     margin:auto !important;
@@ -455,23 +455,10 @@ footer ul li {
     background-color: rgba(156, 165, 180, 1) !important;
 }
 
-.carousel .indicators .indicator-item {
-    margin: 16px 4px;
-}
-
-.carousel.carousel-slider {
-    min-height: 400px !important;
-}
-
 h1 {
     margin: 1.2rem;
 }
 
-.carousel .indicators {
-    left: 120px;
-    right: 120px;
-}
-
 .collapsible-body p {
     padding: unset;
 }
@@ -510,3 +497,62 @@ h1 {
     margin: 4px;
     padding: 6px 12px;
 }
+
+.carousel {
+    position: relative;
+    height: 815px;
+}
+
+.slides {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
+}
+
+.slide img:not(.vertical) {
+    width: 100%;
+}
+
+.slide img.vertical {
+    float: left;
+    height: calc(100% - 40px);
+}
+
+.slide img.vertical ~ .slide-desc {
+    height: calc(100% - 50px);
+    width: calc(100% - 440px);
+    float: right;
+}
+
+.slide-desc {
+    margin: 15px;
+    overflow-y: auto;
+    height: 9em;
+}
+
+.indicators {
+    position: absolute;
+    bottom: 5px;
+    right: 50%;
+    transform: translate(50%);
+}
+
+.indicator {
+    cursor: pointer;
+}
+
+.slide.active-slide {
+    opacity: 1;
+    pointer-events: initial;
+}