add random selection

README.md

@@ -1,7 +1,9 @@
 Quick Versus Launcher for MUGEN
 ===============================
 
-![Screenshot 1](./docs/screenshot-1.png)
+Launch a MUGEN fight without without displaying the screenpack.
+
+[![Video](./docs/screenshot-1.png)](https://youtu.be/eT1mzleNcB4)
 
 Installation
 ------------
@@ -19,9 +21,7 @@ Create the file `quick-versus.json`:
       "image": "Street Fighter/image.png",
       "characters": [
         {
-          "definition": "Street Fighter/Ryu/Ryu.def",
-          "thumbnail": "Street Fighter/Ryu/thumbnail.png",
-          "portrait": "Street Fighter/Ryu/portrait.png"
+          "definition": "Street Fighter/Ryu/Ryu.def"
         }
       ]
     }
@@ -97,10 +97,7 @@ Create the file `quick-versus.json`:
 
 Characters are organized by category.
 Each category has an image (displayed on top of the screen).
-For each character, you need to provide:
-- the definition path
-- the thumbnail path
-- the portrait path
+For each character, you need to provide the definition path.
 
 Optional properties
 -------------------
@@ -110,6 +107,10 @@ Optional properties
 | `background` | Image path of the background |
 | `motif` | Motif name |
 | `characterColumns` | Number of columns to display character thumbnails |
+| `categories.*.random` | Indicates that the category is a random selection (default: `false`) |
+| `categories.*.characters.*.portrait` | Image path of the character portrait (default: `portrait.png`) |
+| `categories.*.characters.*.thumbnail` | Image path of the chracter thumbnail (default: `thumbnail.png`) |
+| `categories.*.characters.*.random` | Indicates that this character is random one within category (default: `false`) |
 
 State of the application
 ------------------------

dev-env/chars/Dragon Ball/Roshi/Roshi.def

@@ -0,0 +1,4 @@
+[Info]
+name = "Roshi"
+displayname = "Muten Roshi"
+

dev-env/chars/Dragon Ball/Ten Shin Han/Ten Shin Han.def

@@ -0,0 +1,3 @@
+[Info]
+name = "Ten Shin Han"
+

dev-env/chars/Nintendo/Mario/Mario.def

@@ -0,0 +1,3 @@
+[Info]
+name = "Mario"
+

dev-env/chars/Sega/Sonic/Sonic.def

@@ -0,0 +1,3 @@
+[Info]
+name = "Sonic"
+

dev-env/quick-versus.json

@@ -116,59 +116,37 @@
           "portrait": "Capcom/Felicia/portrait.png"
         },
         {
-          "definition": "Capcom/Ryu/Ryu.def",
-          "thumbnail": "Capcom/Ryu/thumbnail.png",
-          "portrait": "Capcom/Ryu/portrait.png"
+          "definition": "Capcom/Ryu/Ryu.def"
         },
         {
-          "definition": "Capcom/Chun-Li/Chun-Li.def",
-          "thumbnail": "Capcom/Chun-Li/thumbnail.png",
-          "portrait": "Capcom/Chun-Li/portrait.png"
+          "definition": "Capcom/Chun-Li/Chun-Li.def"
         },
         {
-          "definition": "Capcom/Yun/Yun.def",
-          "thumbnail": "Capcom/Yun/thumbnail.png",
-          "portrait": "Capcom/Yun/portrait.png"
+          "definition": "Capcom/Yun/Yun.def"
         },
         {
-          "definition": "Capcom/Dhalsim/Dhalsim.def",
-          "thumbnail": "Capcom/Dhalsim/thumbnail.png",
-          "portrait": "Capcom/Dhalsim/portrait.png"
+          "definition": "Capcom/Dhalsim/Dhalsim.def"
         },
         {
-          "definition": "Capcom/Sakura/Sakura.def",
-          "thumbnail": "Capcom/Sakura/thumbnail.png",
-          "portrait": "Capcom/Sakura/portrait.png"
+          "definition": "Capcom/Sakura/Sakura.def"
         },
         {
-          "definition": "Capcom/Ken/Ken.def",
-          "thumbnail": "Capcom/Ken/thumbnail.png",
-          "portrait": "Capcom/Ken/portrait.png"
+          "definition": "Capcom/Ken/Ken.def"
         },
         {
-          "definition": "Capcom/Ibuki/Ibuki.def",
-          "thumbnail": "Capcom/Ibuki/thumbnail.png",
-          "portrait": "Capcom/Ibuki/portrait.png"
+          "definition": "Capcom/Ibuki/Ibuki.def"
         },
         {
-          "definition": "Capcom/Juri/Juri.def",
-          "thumbnail": "Capcom/Juri/thumbnail.png",
-          "portrait": "Capcom/Juri/portrait.png"
+          "definition": "Capcom/Juri/Juri.def"
         },
         {
-          "definition": "Capcom/Megaman/Megaman.def",
-          "thumbnail": "Capcom/Megaman/thumbnail.png",
-          "portrait": "Capcom/Megaman/portrait.png"
+          "definition": "Capcom/Megaman/Megaman.def"
         },
         {
-          "definition": "Capcom/Morrigan/Morrigan.def",
-          "thumbnail": "Capcom/Morrigan/thumbnail.png",
-          "portrait": "Capcom/Morrigan/portrait.png"
+          "definition": "Capcom/Morrigan/Morrigan.def"
         },
         {
-          "definition": "Capcom/Felicia/Felicia.def",
-          "thumbnail": "Capcom/Felicia/thumbnail.png",
-          "portrait": "Capcom/Felicia/portrait.png"
+          "definition": "Capcom/Felicia/Felicia.def"
         }
       ]
     },
@@ -177,24 +155,28 @@
       "image": "SNK/image.png",
       "characters": [
         {
-          "definition": "SNK/Iori/Iori.def",
-          "thumbnail": "SNK/Iori/thumbnail.png",
-          "portrait": "SNK/Iori/portrait.png"
+          "definition": "SNK/Iori/Iori.def"
         },
         {
-          "definition": "SNK/Mai/Mai.def",
-          "thumbnail": "SNK/Mai/thumbnail.png",
-          "portrait": "SNK/Mai/portrait.png"
+          "definition": "SNK/Mai/Mai.def"
         },
         {
-          "definition": "SNK/Vice/Vice.def",
-          "thumbnail": "SNK/Vice/thumbnail.png",
-          "portrait": "SNK/Vice/portrait.png"
+          "definition": "SNK/Vice/Vice.def"
         },
         {
-          "definition": "SNK/Benimaru/Benimaru.def",
-          "thumbnail": "SNK/Benimaru/thumbnail.png",
-          "portrait": "SNK/Benimaru/portrait.png"
+          "definition": "SNK/Benimaru/Benimaru.def"
+        }
+      ]
+    },
+    {
+      "name": "Dragon Ball",
+      "image": "Dragon Ball/image.png",
+      "characters": [
+        {
+          "definition": "Dragon Ball/Roshi/Roshi.def"
+        },
+        {
+          "definition": "Dragon Ball/Ten Shin Han/Ten Shin Han.def"
         }
       ]
     },
@@ -215,6 +197,11 @@
           "definition": "Sega/Sonic/Sonic.def"
         }
       ]
+    },
+    {
+      "name": "Random",
+      "image": "random.png",
+      "random": true
     }
   ],
   "stages": [

docs/state-machine.graphml

@@ -254,25 +254,25 @@ AI LEVEL<y:LabelModel><y:SmartNodeLabelModel distance="4.0"/></y:LabelModel><y:M
     <edge id="e8" source="n6" target="n8">
       <data key="d10">
         <y:PolyLineEdge>
-          <y:Path sx="0.0" sy="0.0" tx="0.0" ty="-15.0">
-            <y:Point x="705.9358167403899" y="817.7318347404386"/>
+          <y:Path sx="25.0" sy="0.0" tx="0.0" ty="-15.0">
+            <y:Point x="730.9358167403899" y="817.7318347404386"/>
           </y:Path>
           <y:LineStyle color="#000000" type="line" width="1.0"/>
           <y:Arrows source="none" target="standard"/>
-          <y:EdgeLabel alignment="center" configuration="AutoFlippingLabel" distance="2.0" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasBackgroundColor="false" hasLineColor="false" height="18.1328125" horizontalTextPosition="center" iconTextGap="4" modelName="six_pos" modelPosition="stail" preferredPlacement="anywhere" ratio="0.5" textColor="#000000" verticalTextPosition="bottom" visible="true" width="107.107421875" x="2.000025724764896" xml:space="preserve" y="10.125005305474815">Select character 2<y:PreferredPlacementDescriptor angle="0.0" angleOffsetOnRightSide="0" angleReference="absolute" angleRotationOnRightSide="co" distance="-1.0" frozen="true" placement="anywhere" side="anywhere" sideReference="relative_to_edge_flow"/></y:EdgeLabel>
+          <y:EdgeLabel alignment="center" configuration="AutoFlippingLabel" distance="2.0" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasBackgroundColor="false" hasLineColor="false" height="18.1328125" horizontalTextPosition="center" iconTextGap="4" modelName="six_pos" modelPosition="stail" preferredPlacement="anywhere" ratio="0.5" textColor="#000000" verticalTextPosition="bottom" visible="true" width="107.107421875" x="2.000025724764896" xml:space="preserve" y="10.11325603789669">Select character 2<y:PreferredPlacementDescriptor angle="0.0" angleOffsetOnRightSide="0" angleReference="absolute" angleRotationOnRightSide="co" distance="-1.0" frozen="true" placement="anywhere" side="anywhere" sideReference="relative_to_edge_flow"/></y:EdgeLabel>
           <y:BendStyle smoothed="false"/>
         </y:PolyLineEdge>
       </data>
     </edge>
     <edge id="e9" source="n7" target="n8">
       <data key="d10">
         <y:PolyLineEdge>
-          <y:Path sx="0.0" sy="0.0" tx="0.0" ty="-15.0">
-            <y:Point x="1100.9386417899264" y="817.7318347404386"/>
+          <y:Path sx="-25.0" sy="0.0" tx="0.0" ty="-15.0">
+            <y:Point x="1075.9386417899264" y="817.7318347404386"/>
           </y:Path>
           <y:LineStyle color="#000000" type="line" width="1.0"/>
           <y:Arrows source="none" target="standard"/>
-          <y:EdgeLabel alignment="center" configuration="AutoFlippingLabel" distance="2.0" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasBackgroundColor="false" hasLineColor="false" height="18.1328125" horizontalTextPosition="center" iconTextGap="4" modelName="six_pos" modelPosition="shead" preferredPlacement="anywhere" ratio="0.5" textColor="#000000" verticalTextPosition="bottom" visible="true" width="107.107421875" x="-109.10737871788615" xml:space="preserve" y="10.125005305474815">Select character 1<y:PreferredPlacementDescriptor angle="0.0" angleOffsetOnRightSide="0" angleReference="absolute" angleRotationOnRightSide="co" distance="-1.0" frozen="true" placement="anywhere" side="anywhere" sideReference="relative_to_edge_flow"/></y:EdgeLabel>
+          <y:EdgeLabel alignment="center" configuration="AutoFlippingLabel" distance="2.0" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasBackgroundColor="false" hasLineColor="false" height="18.1328125" horizontalTextPosition="center" iconTextGap="4" modelName="six_pos" modelPosition="shead" preferredPlacement="anywhere" ratio="0.5" textColor="#000000" verticalTextPosition="bottom" visible="true" width="107.107421875" x="-109.10737871788615" xml:space="preserve" y="10.11325603789669">Select character 1<y:PreferredPlacementDescriptor angle="0.0" angleOffsetOnRightSide="0" angleReference="absolute" angleRotationOnRightSide="co" distance="-1.0" frozen="true" placement="anywhere" side="anywhere" sideReference="relative_to_edge_flow"/></y:EdgeLabel>
           <y:BendStyle smoothed="false"/>
         </y:PolyLineEdge>
       </data>
@@ -291,25 +291,25 @@ AI LEVEL<y:LabelModel><y:SmartNodeLabelModel distance="4.0"/></y:LabelModel><y:M
     <edge id="e11" source="n8" target="n6">
       <data key="d10">
         <y:PolyLineEdge>
-          <y:Path sx="0.0" sy="15.0" tx="-60.0" ty="26.631276332487914">
-            <y:Point x="645.9358167403899" y="847.7318347404386"/>
+          <y:Path sx="0.0" sy="15.0" tx="-25.0" ty="26.631276332487914">
+            <y:Point x="680.9358167403899" y="847.7318347404386"/>
           </y:Path>
           <y:LineStyle color="#000000" type="line" width="1.0"/>
           <y:Arrows source="none" target="standard"/>
-          <y:EdgeLabel alignment="center" configuration="AutoFlippingLabel" distance="2.0" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasBackgroundColor="false" hasLineColor="false" height="18.1328125" horizontalTextPosition="center" iconTextGap="4" modelName="six_pos" modelPosition="shead" preferredPlacement="anywhere" ratio="0.5" textColor="#000000" verticalTextPosition="bottom" visible="true" width="122.5234375" x="-132.618223247399" xml:space="preserve" y="-20.132789282998942">Unselect character 2<y:PreferredPlacementDescriptor angle="0.0" angleOffsetOnRightSide="0" angleReference="absolute" angleRotationOnRightSide="co" distance="-1.0" frozen="true" placement="anywhere" side="anywhere" sideReference="relative_to_edge_flow"/></y:EdgeLabel>
+          <y:EdgeLabel alignment="center" configuration="AutoFlippingLabel" distance="2.0" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasBackgroundColor="false" hasLineColor="false" height="18.1328125" horizontalTextPosition="center" iconTextGap="4" modelName="six_pos" modelPosition="shead" preferredPlacement="anywhere" ratio="0.5" textColor="#000000" verticalTextPosition="bottom" visible="true" width="122.5234375" x="-132.62963682161774" xml:space="preserve" y="-20.132789282998942">Unselect character 2<y:PreferredPlacementDescriptor angle="0.0" angleOffsetOnRightSide="0" angleReference="absolute" angleRotationOnRightSide="co" distance="-1.0" frozen="true" placement="anywhere" side="anywhere" sideReference="relative_to_edge_flow"/></y:EdgeLabel>
           <y:BendStyle smoothed="false"/>
         </y:PolyLineEdge>
       </data>
     </edge>
     <edge id="e12" source="n8" target="n7">
       <data key="d10">
         <y:PolyLineEdge>
-          <y:Path sx="0.0" sy="15.0" tx="60.0" ty="0.0">
-            <y:Point x="1160.9386417899264" y="847.7318347404386"/>
+          <y:Path sx="0.0" sy="15.0" tx="25.0" ty="0.0">
+            <y:Point x="1125.9386417899264" y="847.7318347404386"/>
           </y:Path>
           <y:LineStyle color="#000000" type="line" width="1.0"/>
           <y:Arrows source="none" target="standard"/>
-          <y:EdgeLabel alignment="center" configuration="AutoFlippingLabel" distance="2.0" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasBackgroundColor="false" hasLineColor="false" height="18.1328125" horizontalTextPosition="center" iconTextGap="4" modelName="six_pos" modelPosition="shead" preferredPlacement="anywhere" ratio="0.5" textColor="#000000" verticalTextPosition="bottom" visible="true" width="122.5234375" x="10.104433002601127" xml:space="preserve" y="-20.132789282998942">Unselect character 1<y:PreferredPlacementDescriptor angle="0.0" angleOffsetOnRightSide="0" angleReference="absolute" angleRotationOnRightSide="co" distance="-1.0" frozen="true" placement="anywhere" side="anywhere" sideReference="relative_to_edge_flow"/></y:EdgeLabel>
+          <y:EdgeLabel alignment="center" configuration="AutoFlippingLabel" distance="2.0" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasBackgroundColor="false" hasLineColor="false" height="18.1328125" horizontalTextPosition="center" iconTextGap="4" modelName="six_pos" modelPosition="shead" preferredPlacement="anywhere" ratio="0.5" textColor="#000000" verticalTextPosition="bottom" visible="true" width="122.5234375" x="10.117372455726127" xml:space="preserve" y="-20.132789282998942">Unselect character 1<y:PreferredPlacementDescriptor angle="0.0" angleOffsetOnRightSide="0" angleReference="absolute" angleRotationOnRightSide="co" distance="-1.0" frozen="true" placement="anywhere" side="anywhere" sideReference="relative_to_edge_flow"/></y:EdgeLabel>
           <y:BendStyle smoothed="false"/>
         </y:PolyLineEdge>
       </data>
@@ -341,7 +341,8 @@ AI LEVEL<y:LabelModel><y:SmartNodeLabelModel distance="4.0"/></y:LabelModel><y:M
         <y:PolyLineEdge>
           <y:Path sx="0.0" sy="0.0" tx="6.102659561336509" ty="-15.0">
             <y:Point x="903.4539813424448" y="1192.2507484944751"/>
-            <y:Point x="1368.8735316241386" y="1192.2507484944751"/>
+            <y:Point x="1383.678323752063" y="1192.2507484944751"/>
+            <y:Point x="1383.678323752063" y="68.18245426316997"/>
             <y:Point x="1368.8735316241386" y="63.999999999999986"/>
           </y:Path>
           <y:LineStyle color="#000000" type="line" width="1.0"/>
@@ -356,9 +357,8 @@ AI LEVEL<y:LabelModel><y:SmartNodeLabelModel distance="4.0"/></y:LabelModel><y:M
         <y:PolyLineEdge>
           <y:Path sx="0.0" sy="0.0" tx="47.66192072515173" ty="34.526005963499685">
             <y:Point x="1348.8735316241386" y="330.2439449134796"/>
-            <y:Point x="1348.8735316241386" y="183.44106382453458"/>
-            <y:Point x="610.5458119034683" y="183.44106382453458"/>
-            <y:Point x="610.5458119034683" y="113.52600596349967"/>
+            <y:Point x="1348.8735316241386" y="-8.809831193384326"/>
+            <y:Point x="356.31238789070125" y="-8.809831193384326"/>
           </y:Path>
           <y:LineStyle color="#000000" type="line" width="1.0"/>
           <y:Arrows source="none" target="standard"/>
@@ -431,10 +431,10 @@ AI LEVEL<y:LabelModel><y:SmartNodeLabelModel distance="4.0"/></y:LabelModel><y:M
     <edge id="e22" source="n10" target="n4">
       <data key="d10">
         <y:PolyLineEdge>
-          <y:Path sx="25.0" sy="0.0" tx="25.0" ty="0.0"/>
+          <y:Path sx="0.0" sy="0.0" tx="0.0" ty="0.0"/>
           <y:LineStyle color="#000000" type="line" width="1.0"/>
           <y:Arrows source="none" target="standard"/>
-          <y:EdgeLabel alignment="center" configuration="AutoFlippingLabel" distance="2.0" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasBackgroundColor="false" hasLineColor="false" height="18.1328125" horizontalTextPosition="center" iconTextGap="4" modelName="six_pos" modelPosition="stail" preferredPlacement="anywhere" ratio="0.5" textColor="#000000" verticalTextPosition="bottom" visible="true" width="83.787109375" x="2.0000082924159415" xml:space="preserve" y="10.131553978719921">Select AI level<y:PreferredPlacementDescriptor angle="0.0" angleOffsetOnRightSide="0" angleReference="absolute" angleRotationOnRightSide="co" distance="-1.0" frozen="true" placement="anywhere" side="anywhere" sideReference="relative_to_edge_flow"/></y:EdgeLabel>
+          <y:EdgeLabel alignment="center" configuration="AutoFlippingLabel" distance="2.0" fontFamily="Dialog" fontSize="12" fontStyle="plain" hasBackgroundColor="false" hasLineColor="false" height="18.1328125" horizontalTextPosition="center" iconTextGap="4" modelName="six_pos" modelPosition="stail" preferredPlacement="anywhere" ratio="0.5" textColor="#000000" verticalTextPosition="bottom" visible="true" width="83.787109375" x="2.0000082924159415" xml:space="preserve" y="10.125023217001171">Select AI level<y:PreferredPlacementDescriptor angle="0.0" angleOffsetOnRightSide="0" angleReference="absolute" angleRotationOnRightSide="co" distance="-1.0" frozen="true" placement="anywhere" side="anywhere" sideReference="relative_to_edge_flow"/></y:EdgeLabel>
           <y:BendStyle smoothed="false"/>
         </y:PolyLineEdge>
       </data>

package.json

@@ -2,7 +2,7 @@
   "name": "mugen-quick-versus-launcher",
   "author": "neolao",
   "license": "MIT",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Mugen launcher for Quick Versus",
   "keywords": [
     "mugen",

src/category/categorySelector.view.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { remote } from "electron";
 import categoryPlaceholder from "../assets/category-placeholder.png";
+import randomCategory from "../assets/random-category.png";
 import useEnvironment from "../configuration/useEnvironment.hook";
 const fs = remote.require("fs");
 const path = remote.require("path");
@@ -17,6 +18,9 @@ export default function CategorySelector({ category }) {
   const environment = useEnvironment();
 
   let imagePath = categoryPlaceholder;
+  if (category.random) {
+    imagePath = randomCategory;
+  }
   if (category && category.image) {
     const categoryImagePath = path.resolve(environment.currentDirectory, "chars", category.image);
     if (fs.existsSync(categoryImagePath)) {

src/character/ailevelSelector.view.jsx

@@ -14,7 +14,7 @@ const Choice = styled.p`
   font-size: 4vh;
   color: rgba(255, 255, 255, ${props => props.selected ? "1" : "0.5"});
   margin: 0;
-  text-shadow: 2px 2px 4px #000, 2px -2px 4px #000, -2px 2px 4px #000, -2px -2px 4px #000;
+  text-shadow: 0 0 4px #000;
 `;
 
 export default function AILevelSelector({ level }) {