integrate Battleship - not working fully (not showing old games when …

…restarting); integrate Connect4 - working quite well

android/tinySSB/app/build.gradle

@@ -12,7 +12,7 @@ android {
 
     defaultConfig {
         applicationId "nz.scuttlebutt.tremolavossbol"
-        minSdk 23
+        minSdk 24
         targetSdkVersion 30
         versionCode 1
         versionName "0.1"

android/tinySSB/app/src/main/assets/web/games/dpi24-06-battleship/duel.css

@@ -0,0 +1,341 @@
+/*
+    games/dpi24-06-battleship/duel.css
+*/
+
+/* -------------DUEL-------------------*/
+#duelInviteContainer {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #ffffff;
+    padding: 20px;
+    border: 2px solid #000000;
+    z-index: 1000;
+    }
+
+/*
+.scroll-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow-y: auto;
+  max-height: 350px;
+}
+*/
+
+.square {
+  width: 150px;
+  height: 150px;
+  margin: 10px 0;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.square img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+button.square:focus {
+  outline: none; /* removes focus */
+}
+
+button.square:active {
+  transform: scale(0.95); /* makes button smaller when clicked */
+}
+
+.duel-button-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.duel-button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  max-width: 550px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #f9f9f9;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.no-duel-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 600px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #f9f9f9;
+  text-align: center;
+  cursor: default; /* cursor set to inactive */
+}
+
+.duel-button-invited {
+    background-color: #d1ecf1; /* light blue */
+}
+
+.duel-button-running {
+    background-color: #fff3cd; /* light green */
+}
+
+.duel-button-waiting {
+    background-color: #fff3cd; /* light yellow */
+}
+
+.duel-button-won {
+    background-color: #c3e6cb; /* green */
+}
+
+.duel-button-lost {
+    background-color: #f8d7da; /* light red */
+}
+
+.duel-button-stopped {
+    background-color: #e2e3e5; /* light grey */
+}
+
+.duel-button:hover {
+  background-color: #e0e0e0;
+}
+
+.duel-image {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+}
+
+.duel-text {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.board {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.battleshipsTopRow {
+    background: #50A4D3;
+    color: white;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.battleshipsLeftRow {
+    background: #50A4D3;
+    color: white;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.displays {
+    width: 40vh;
+}
+
+.grid {
+    aspect-ratio: 1 / 1;
+    display: grid;
+    grid-template-columns: repeat(11, 1fr);
+    grid-template-rows: repeat(11, 1fr);
+
+}
+
+.field {
+    background: #ACCADF;
+    border-right: 1px solid Blue;
+    border-top: 1px solid Blue;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.hole {
+    width: 30%;
+    height: 30%;
+    border: 1px solid Blue;
+    border-radius: 50%;
+}
+
+.ship {
+    background: Black;
+    border-right: 1px solid Blue;
+    border-top: 1px solid Blue;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.miss {
+    background: Blue;
+    border-right: 1px solid Blue;
+    border-top: 1px solid Blue;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.hit {
+    background: Orange;
+    border-right: 1px solid Blue;
+    border-top: 1px solid Blue;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sunken {
+    background: Red;
+    border-right: 1px solid Blue;
+    border-top: 1px solid Blue;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.field_clicked {
+    -webkit-animation: grow 0.5s;
+}
+
+@-webkit-keyframes grow {
+    from {
+        width: 0%;
+        height: 0%;
+    }
+    to {
+        width: 30%;
+        height: 30%;
+    }
+}
+
+.battleships_control {
+    display: flex;
+    justify-content: center;
+}
+
+.battleships_info {
+    margin-top: 10px;
+    width: 70%;
+    padding: 15px 25px;
+    font-size: 1.5em;
+    text-align: center;
+    outline: none;
+    color: #fff;
+    background-color: #4CAF50;
+    border: none;
+    border-radius: 15px;
+}
+
+.battleships_placer {
+    display: flex;
+    justify-content: center;
+}
+
+.battleships_length {
+    width: 35vw;
+    text-align: center;
+    font-size: 1.3em;
+    padding: 15px;
+    margin-top: 10px;
+    background-color: #00c9ff;
+    border: none;
+    border-radius: 15px;
+    color: #fff;
+}
+
+.battleships_turn {
+    width: 70vw;
+    text-align: center;
+    font-size: 1.3em;
+    padding: 15px;
+    margin-top: 10px;
+    border: 1px solid #000;
+    border-radius: 15px;
+    color: #fff;
+}
+
+.turn-won {
+    background-color: green;
+    color: white;
+}
+
+.turn-lost {
+    background-color: red;
+    color: white;
+}
+
+.turn-your {
+    background-color: d4edda;
+    color: white;
+}
+
+.turn-enemy {
+    background-color: f8d7da;
+    color: white;
+}
+
+.turn-default {
+    background-color: #50A4D3;
+    color: #fff;
+}
+
+.battleships_orientation_button {
+    margin-top: 10px;
+    width: 35vw;
+    padding: 15px;
+    font-size: 1.3em;
+    text-align: center;
+    outline: none;
+    color: #fff;
+    background-color: #4CAF50;
+    border: none;
+    border-radius: 15px;
+    box-shadow: 0 9px #999;
+}
+
+.battleships_orientation_button:active {
+    background-color: #3e8e41;
+    box-shadow: 0 5px #666;
+    transform: translateY(4px);
+}
+
+.battleships_big_button {
+    margin-top: 10px;
+    width: 70%;
+    padding: 15px 25px;
+    font-size: 1.5em;
+    text-align: center;
+    outline: none;
+    color: #fff;
+    background-color: #4CAF50;
+    border: none;
+    border-radius: 15px;
+    box-shadow: 0 9px #999;
+}
+
+.battleships_big_button:active {
+  background-color: #3e8e41;
+  box-shadow: 0 5px #666;
+  transform: translateY(4px);
+}
+
+/* eof */