add example 'sokoban'

examples/sokoban/qml/ext/ArrowButton.qml

@@ -0,0 +1,15 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+Button {
+  width: main.small ? 37 : 50
+  height: width
+  flat: true
+  focusPolicy: Qt.NoFocus
+  font.family: fontAwesome.name
+  font.pixelSize: 1.2 * width
+  opacity: 0.2
+  scale: 1.2
+
+  onPressed: Lisp.call(this, "qsoko:button-pressed")
+}

examples/sokoban/qml/ext/Button.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+Button {
+  width: main.small ? 32 : 50
+  height: width
+  font.family: fontAwesome.name
+  font.pixelSize: width - 6
+  opacity: 0.8
+
+  onPressed: Lisp.call(this, "qsoko:button-pressed")
+}

examples/sokoban/qml/ext/Dynamic.qml

@@ -0,0 +1,21 @@
+import QtQuick 2.15
+
+Item {
+  objectName: "dynamic"
+
+  property Component box:    Qt.createComponent("dynamic/Box.qml")
+  property Component box2:   Qt.createComponent("dynamic/Box2.qml")
+  property Component player: Qt.createComponent("dynamic/Player.qml")
+  property Component fixed:  Qt.createComponent("dynamic/Fixed.qml")
+
+  function makeItem(name) {
+    switch (name) {
+      case "object":  return box.createObject()
+      case "object2": return box2.createObject()
+      case "player":
+      case "player2": return player.createObject()
+      case "wall":
+      case "goal":    return fixed.createObject()
+    }
+  }
+}

examples/sokoban/qml/ext/NumberAnimation.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.15
+
+NumberAnimation {
+  onRunningChanged: Lisp.call("qsoko:animation-change", running)
+}
+

examples/sokoban/qml/ext/RotationAnimation.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.15
+
+RotationAnimation {
+  onRunningChanged: Lisp.call("qsoko:animation-change", running)
+}
+

examples/sokoban/qml/ext/ScaleAnimator.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+ScaleAnimator {
+  onRunningChanged: Lisp.call("qsoko:animation-change", running)
+}

examples/sokoban/qml/ext/SequentialAnimation.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.15
+
+SequentialAnimation {
+  onRunningChanged: Lisp.call("qsoko:animation-change", running)
+}
+

examples/sokoban/qml/ext/dynamic/Box.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.15
+import "../" as Ext
+
+Image {
+  Behavior on x {
+    Ext.NumberAnimation {
+      duration: 150
+      easing.type: Easing.InQuart
+    }
+  }
+
+  Behavior on y {
+    Ext.NumberAnimation {
+      duration: 150
+      easing.type: Easing.InQuart
+    }
+  }
+}

examples/sokoban/qml/ext/dynamic/Box2.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.15
+import "../" as Ext
+
+Image {
+  id: box2
+
+  Behavior on x {
+    Ext.NumberAnimation {
+      duration: 150
+      easing.type: Easing.InQuart
+    }
+  }
+
+  Behavior on y {
+    Ext.NumberAnimation {
+      duration: 150
+      easing.type: Easing.InQuart
+    }
+  }
+
+  // final animation
+
+  Ext.SequentialAnimation {
+    objectName: "wiggle_box"
+    loops: 3
+
+    RotationAnimation {
+      target: box2
+      property: "rotation"
+      from: 0; to: 30
+      duration: 150
+    }
+
+    RotationAnimation {
+      target: box2
+      property: "rotation"
+      from: 30; to: -30
+      duration: 300
+    }
+
+    RotationAnimation {
+      target: box2
+      property: "rotation"
+      from: -30; to: 0
+      duration: 150
+    }
+  }
+}

examples/sokoban/qml/ext/dynamic/Fixed.qml

@@ -0,0 +1,4 @@
+import QtQuick 2.15
+
+Image {
+}

examples/sokoban/qml/ext/dynamic/Player.qml

@@ -0,0 +1,30 @@
+import QtQuick 2.15
+import "../" as Ext
+
+Image {
+  id: player
+
+  Behavior on x {
+    Ext.NumberAnimation {
+      duration: 120
+      easing.type: Easing.InOutSine
+    }
+  }
+
+  Behavior on y {
+    Ext.NumberAnimation {
+      duration: 120
+      easing.type: Easing.InOutSine
+    }
+  }
+
+  // final animation
+
+  Ext.RotationAnimation {
+    objectName: "rotate_player"
+    target: player
+    property: "rotation"
+    from: 0; to: 360
+    duration: 600
+  }
+}

examples/sokoban/qml/main.qml

@@ -0,0 +1,155 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import "ext/" as Ext
+
+Rectangle {
+  id: main
+  width: Screen.desktopAvailableWidth
+  height: Screen.desktopAvailableHeight
+
+  property bool small: (Math.max(width, height) < 1000)
+
+  function isLandscape() { return (Screen.primaryOrientation === Qt.LandscapeOrientation) }
+
+  Ext.Dynamic {}
+
+  Row {
+    anchors.centerIn: parent
+    // adapt 'level' and 'board' scale to screen size
+    scale: isLandscape()
+           ? ((Screen.desktopAvailableHeight - 10) / board.height)
+           : ((Screen.desktopAvailableWidth - 10) / (board.width + 2 * level.width))
+
+    Slider {
+      id: level
+      objectName: "level"
+      height: board.height
+      orientation: Qt.Vertical
+      stepSize: 1.0
+
+      onValueChanged: Lisp.call("qsoko:set-maze")
+    }
+
+    Rectangle {
+      id: board
+      objectName: "board"
+      width: 512; height: 512
+      color: "lightsteelblue"
+    }
+
+    // dummy to have it exactly centered
+    Item {
+      width: level.width
+      height: level.height
+    }
+  }
+
+  Row {
+    id: buttons1
+    objectName: "buttons1"
+    spacing: main.small ? 10 : 15
+    padding: 10
+    anchors.bottom: parent.bottom
+
+    Ext.Button {
+      objectName: "previous"
+      text: "\uf100"
+    }
+    Ext.Button {
+      objectName: "next"
+      text: "\uf101"
+    }
+  }
+
+  Row {
+    id: buttons2
+    objectName: "buttons2"
+    spacing: main.small ? 10 : 15
+    padding: 10
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+
+    Ext.Button {
+      objectName: "undo"
+      text: "\uf112"
+    }
+    Ext.Button {
+      objectName: "restart"
+      text: "\uf0e2"
+    }
+    Ext.Button {
+      objectName: "solve"
+      text: "\uf17b"
+    }
+  }
+
+  // container for arrow buttons
+  Item {
+    id: arrows
+    y: buttons1.y - height - (main.small ? 25 : 50)
+    width: up.width * 3
+    height: up.height * 3
+    anchors.margins: 10
+    anchors.horizontalCenter: buttons2.horizontalCenter
+
+    Ext.ArrowButton {
+      id: up
+      objectName: "up"
+      text: "\uf139"
+      anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    Ext.ArrowButton {
+      objectName: "left"
+      text: "\uf137"
+      anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Ext.ArrowButton {
+      objectName: "right"
+      text: "\uf138"
+      anchors.verticalCenter: parent.verticalCenter
+      anchors.right: parent.right
+    }
+
+    Ext.ArrowButton {
+      objectName: "down"
+      text: "\uf13a"
+      anchors.horizontalCenter: parent.horizontalCenter
+      anchors.bottom: parent.bottom
+    }
+  }
+
+  // level change animations
+
+  Ext.ScaleAnimator {
+    objectName: "zoom_board_out"
+    target: board
+    from: 1.0
+    to: 0.0
+    duration: 250
+  }
+
+  Ext.ScaleAnimator {
+	objectName: "zoom_board_in"
+    target: board
+    from: 0.0
+    to: 1.0
+    duration: 250
+  }
+
+  // etc
+
+  Keys.onPressed: {
+    if(event.key === Qt.Key_Back) {
+      event.accepted = true
+      Lisp.call("qml:qquit")
+    }
+  }
+
+  FontLoader {
+    id: fontAwesome
+    source: "fonts/fontawesome-webfont.ttf"
+  }
+}