play functionality for every versions

http/views/play/play.html

@@ -1,17 +1,32 @@
 {{define "content"}}
 <h1 class="my-4">Play {{.Software.Title}}</h1>
 
-<div class="ratio ratio-4x3" style="max-width: 640px; margin: 0 auto;">
-    <iframe id="gameFrame" src="/play/{{.Software.Name}}/content/index.html" frameborder="0" allowfullscreen></iframe>
+<div class="ratio ratio-4x3" style="max-width: 960px; margin: 0 auto;">
+    <iframe id="gameFrame" src="/play/{{.Software.Name}}/{{.WebPlayableRelease.Version}}/content/index.html" frameborder="0" allowfullscreen></iframe>
 </div>
 
-<div style="max-width: 640px; margin: 10px auto; text-align: center;">
+<div style="max-width: 960px; margin: 10px auto; text-align: center;">
     <div class="btn-group" role="group" aria-label="Game controls">
-        <a href="/" class="btn btn-primary">Back to Softwares</a>
+        <a href="/releases/{{.Software.Name}}" class="btn btn-primary">Back to Releases</a>
         <button id="fullscreenButton" class="btn btn-secondary">Fullscreen</button>
     </div>
 </div>
 
+<div style="max-width: 960px; margin: 10px auto; text-align: start;">
+    <h2 class="my-4">Version</h2>
+    <p>{{.WebPlayableRelease.Version}}</p>
+    <h2 class="my-4">Other Versions</h2>
+    <div class="list-group">
+        {{range .Software.Releases}}
+            {{if and .WebPlayable (ne .Version $.WebPlayableRelease.Version)}}
+                <a href="/play/{{$.Software.Name}}/{{.Version}}" class="list-group-item list-group-item-action">
+                    {{.Version}}
+                </a>
+            {{end}}
+        {{end}}
+    </div>
+</div>
+
 <script>
     document.getElementById('fullscreenButton').addEventListener('click', function() {
         var iframe = document.getElementById('gameFrame');

http/views/software/releases.html

@@ -10,7 +10,10 @@
                 <h6 class="card-subtitle mb-2 text-muted">Released At: {{.CreatedAt.Format "2006-01-02 15:04:05"}}</h6>
             </div>
             <div class="card-footer">
-                <div class="btn-group d-flex justify-content-end" role="group" aria-label="Operations">
+                <div class="btn-group d-flex justify-content-center" role="group" aria-label="Operations">
+                    {{if .WebPlayable}}
+                        <a href="/play/{{$.Software.Name}}/{{.Version}}" class="btn btn-success btn-sm">Play</a>
+                    {{end}}
                     <a href="/download/{{$.Software.Name}}/{{.Version}}/source" class="btn btn-primary btn-sm">Source</a>
                     <a href="/download/{{$.Software.Name}}/{{.Version}}/cartridge" class="btn btn-primary btn-sm">Cartridge</a>
                 </div>